new WebGL application to explore 3D fractals

[DrColossus]

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:

[cKleinhuis]

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

[cbuchner1]

Wow, thanks for sharing this.

Christian

[Syntopia]

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.

[DrColossus]

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.



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

[ker2x]

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



PS : it works with undersamping to OFF 

[David Makin]

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 ?

[subblue]

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

[Syntopia]

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.

[DarkBeam]

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

[ker2x]

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).

[DrColossus]

Can't see any way to change the FoV ?

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!

[Rathinagiri]

It works great in my Chrome (Win7)

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

[subblue]

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

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:

Code:

#define HALFPI 1.570796
#define cos(a) sin(a + HALFPI)

[Syntopia]

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!

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?