Welcome to Fractal Forums

Me and two friends developed this WebGL application to explore raymarched 3D fractals in your browser over the last couple of months.

You can try it for yourself here: http://projekte.sinnpirat.de/fraktal/

It's running almost entirely on the GPU in GLSL, which means that we are limited by 16bit float precision.
At the moment we only fully support Google Chrome in Windows and we recommend a GTX 460 or better, the Intel HD3000 is probably the minimum requirement.

EDIT: The Windows version of Firefox currently crashes when ANGLE is enabled (ANGLE is a graphics layer that maps WebGL to DirectX on Windows machines)
We are still trying to figure out why that happens, and why our sliders do not show up in Firefox under Windows.

To disable ANGLE, type "about:config" (without the quotes) into your adress bar and set "webgl.prefer-native-gl" to true.



If the framerate gets too low, you can choose a higher "undersampling" value and/or disable shadows.

Undersampling means that we distribute the workload of a single frame over multiple frames to reduce inputlag.
This results in a lower resolution while moving the camera, which gets gradually higher over time.
After a full frame has been rendered we start taking more samples (up to 16) per pixel to reduce aliasing artifacts.

The depth of field, distance fog and exposure settings can be changed without rerendering the image since they are postprocessing features.
Click on the "Help" button to view the controls.

Let me know if you experience any issues or have ideas for improvement :)

Here are some images for those that are unable to run it themselves:

(http://i.imgur.com/izEq9.png)
(http://i.imgur.com/gNmiM.jpg)
(http://i.imgur.com/fUb6o.jpg)
(http://i.imgur.com/FvqI6.jpg)
(http://i.imgur.com/avgsL.jpg)
(http://i.imgur.com/Q87fL.png)
(http://i.imgur.com/pLRX6.png)
(http://i.imgur.com/iBiIs.png)
(http://i.imgur.com/jfYOi.png)
(http://i.imgur.com/SxTZ3.jpg)
(http://i.imgur.com/gLdxf.png)
(http://i.imgur.com/RWFy9.png)
(http://i.imgur.com/CtcGZ.png)

nice, need to try it out at home, my computer at work doesnt suport glsl :(

Wow, thanks for sharing this.

Christian

Nice images - and good to see more people in the GLSL camp!

It works in Chrome with my Geforce 310M (laptop), but the undersampling does not converge properly - the samples seems to be wrongly offset.

On Firefox, I get no image when undersampling is enabled, and the Mandelbulb doesn't work, but the Quaternion Julia, and the Mandelbox works. I have to turn the ANGLE webgl layer off, though, otherwise Firefox just crashes.

Thanks, none of us had wrote a shader or a single line of Javascript before we started this project and we had quite some issues with different browsers and versions.

Do the undersampling issues happen with the latest version of Chrome under Windows on your 310M?

It seems that the texture sampling coordinates vary quite a bit from system to system, for example the Y-dimension when sampling from a texture had to be reversed under OSX when we tested it.
When we do our undersampling, we actually render lowres images (that are used to construct a fullres image later on) into a fullres texture.

(http://i.imgur.com/hj4P0.png)

When using 4x undersampling, only every fourth ray is rendered into a small image.
The distortion then happens when we rearrange the pixels to display the final picture since we need to sample them from the above image.

I'm not sure if we're able to fix this in the coming few weeks since exams are coming up and the current WebGL implementation in different browsers is far from final :/

it crash my firefox, and here is what i see in chrome, windows 7, GTX 470 :

(http://fractals.s3.amazonaws.com/vrac/bug-chrome.jpg)

PS : it works with undersamping to OFF  ;D

Doesn't work in WebKit for OSX at all, works in Firefox for OSX at around 14-16fps when moving around provided that undersampling is disabled.
Card here is an ATI Radeon HD 5870 and it's a dual 6-core MacPro.
Can't see any way to change the FoV ?

Very nice. I like the DOF feature. Under-sampling doesn't work here either.

Just tried on a GTX570 in another machine and I get the same results as before.
My results are very different from ker2x's, though.

Strange, am I the only one that sees it perfectly working? :dink:

Just tested in chrome on my linux ubuntu 10.04LTS, with a GTX 460M, i see the blueish background but no fractal :(
I'm learning GLGL and WebGL, so i'll take a look at the source code and see if i can find any bug (unlikely, but i have to try).

I just added a FOV slider on my machine, it'll be on the server in a couple of hours.


It is really weird that there are issues with nvidia cards, i'm using a GTX580 (290.53 drivers, Chrome 16.0.912.75m) myself and can't seem to reproduce those artifacts, please try it again using the latest graphics card drivers and Chrome version so i can make sure it's not a driver/browser issue.

For those experiencing distortion when undersampling: Please try this version and see if it improves anything http://dl.dropbox.com/u/6556492/Raymarching/index.html

I'd really like to get rid of those errors and appreciate any help!

It works great in my Chrome (Win7)

I wish to see it in real 3D with left and right eye images.

That fixes the undersampling on my machine (OSX, ATI 4850) :)

The latest stable version of Chrome for OSX has a bug in the cos function (!!) - I reported it last September... I'm using this for compatibility in my shaders:

Tried the dropbox version, and it still fails (both Firefox (without ANGLE)  and Chrome) - but looks different now.

chrome://version/ = 16.0.912.75 (Official Build 116452) m (Vista, 32bit)

GTX570 drivers are version: 285.62 (Oct 2011) - these are the latest official ones - yours must be beta drivers, right?

Fixes it on Firefox for my 5870 too - still no joy via Safari WebKit though.

We just updated it on the server:

http://projekte.sinnpirat.de/fraktal/

It looks like there is a bug in ANGLE that we worked around which broke it for a lot of configurations.
gl_FragCoord.y apparently returns way too large values on some machines, and we're using a negative offset to compensate for that.
There is branching in place now that should detect a users config and set the negative offset value accordingly, but you can still override it with a toggle button on the bottom to the left.
When disabling ANGLE in Firefox on windows undersampling should work now, well, sort of, the image was black for us when moving the camera haha

We also implemented a variable field of view and the ability to cut the fractal along the x-/y-/z-axis:

(http://i.imgur.com/jaU7M.png)
(http://i.imgur.com/25Yr7.jpg)


Thanks for the tip, we added your code :)
What was the bug?



Yep, i'm using beta drivers. The artifacts you're seeing are weird and i wasn't able to reproduce them :/
Maybe our newer version fixes that?


Please bare with us, since we are just three students ;)
And WebGL gives us a lot of headaches, especially ANGLE which we even didn't know existed up until today.

The bug incorrectly reports itself as "ERROR: 0:5: 'webgl_emu_precision' : syntax error syntax error", but is triggered when you try and use the cos function. It's still occurring in the postProcess.fs so you should add it there too :)

Oh wow, thank you very much!
We just added it to the postprocessing as well.

Oh, and your blog was actually a big help to us in developing this app :)



Hmm, i just tried it on my macbook using Safari 5.1.1 and got a black screen, i had to enable webgl in safaris debug menu.
To enable the debug menu, type this into the OSX terminal:


It's still not perfect though, the fractal appears black for me when i move the camera o_O


edit:
We just made some more small improvements in our shadow rendering, those dark rings on flat surfaces should be gone now.

I tried again on my 310M, and it is still the same - the undersampling is slightly offset, on both Firefox (without Angle) and Chrome.

Does this version look any better?  http://dl.dropbox.com/u/6556492/Raymarching/index.html

If it doesn't, then i have absolutely no idea what could be causing that offset :/

my browser ff9.01 crashes instantly, graphics card is amd radeon 6800....
the browser just freezes, with a black screen and the gui ....


what about sliders in the gui ?! i love turning sliders when gpu is used!

Firefox provides quite some issues for us, you have to disable ANGLE for it to work (type "about:config" into your adress bar and set "webgl.prefer-native-gl" to true).
We're also still trying to figure out why the sliders don't work in the Windows version of Firefox (they show up fine in OSX or other browsers).

If it still fails with ANGLE disabled, please consider trying Google Chrome for this application.

I'll edit the first post regarding the Firefox crashes.