WebGL for hosting GLSL

[willvarfar]

Here's a little skeleton file for anyone who finds it useful: https://gist.github.com/3139606

To run it, just right-click save-as the "raw" link and then view the file locally.

Or put it on a web server!

Feel free to use, abuse, extend, fix, share!

Put your own fractals in there, make it navigable etc.  The mandelbulb is just coloured by ray-marching steps which is hardly pretty, sorry.

As the heavy lifting of ray marching etc can be done in the GLSL shaders, we only need the tiniest of shims to host it in the browser.

Think how much space fractalforums would save if all the shared images were actually computed when displayed?

[cKleinhuis]

that would be indeed a nice feature, to not render em on the host, than on the client, but consider it is a fairly new technique that is hardly to be assumed to be able to be rendered by anyone, and additionally i personally would love to render mandelbulb3d params directly in the browser ( with the possibility to modify params right from the point ) but this seems to be a real hard task, but would offer real fast pacing modification of existing params, but as well suitable for stealing colors/views/params ( although if public they are public ) hardest thing would be to match the formulas with current versions of the programs...

[Syntopia]

I also have a simple 2D Mandelbrot / Julia viewer here, which all are welcome to change into other - perhaps more interesting - systems:
http://hvidtfeldts.net/WebGL/webgl.html

Not overly complicated, but it does take care of anti-alias and camera/key navigation, and shows how to create some sliders.

I've also created a WebGL version with emulated double precision, but it needs some quite specific hardware (no ANGLE, no Nvidia), more info here:
http://blog.hvidtfeldts.net/index.php/2012/07/double-precision-in-opengl-and-webgl/

[LhoghoNurbs]

Oh, I get "WebGL not supported by your browser" ... in Opera, Firefox, IE, and Chrome. So this looks like an issue with the GPU and the graphic card being unable to support any shading (old integrated Intel graphics card in my case, nothing fancy down there in it, I admit).

[this is a placeholder of a sad fractal emoticon]

But I like the idea! It is somehow relevant to some conceptual design work I did an year before joining the FractalForums... I need to dig in my archive to get that work and post it here.

[willvarfar]

Syntopia, that is a beautiful little 2D fractal page; I hadn't seen that before.  Will you be moving Fragmentarium to webGL any time soon? (  )

Regards Intel GPUs:

Yeah I know Chrome refuses to support webGL on Intel cards and that FF can be dicey.

I have a laptop with integrated Intel graphics too, and its a sad story.  I can run this kind of stuff from the native apps but distributing them is a pain.  Chrome Native Client, likewise the browser in general, doesn't work.

Other:

I've hosted the code on github so those with supported browsers and GPUs can just go to http://williame.github.com/Mandel_1/

What's a good way to compute a proper proportional epsilon?

[marius]

What's a good way to compute a proper proportional epsilon?

epsilon being MinimumDistance? Think of it as of on-screen projected pixel error, so proportion along distance.

Code:

if (distance < MinimumDistance * totalDistance) break;

[willvarfar]

Yes, but I was wondering about how to calculate it?  I can imagine unprojecting the points 0,0,-1 an 1/w,1/h,-1 and then taking half the distance between them and multiply sqrt(0.5).  But is it quite ok to (wrongly) assume all rays equally long (so we compute it in vertex shader?

Maybe theres just a simple shortcut?

[marius]

Yes, but I was wondering about how to calculate it?  I can imagine unprojecting the points 0,0,-1 an 1/w,1/h,-1 and then taking half the distance between them and multiply sqrt(0.5).  But is it quite ok to (wrongly) assume all rays equally long (so we compute it in vertex shader?

Maybe theres just a simple shortcut?

Note it is fixed for a given field-of-view and screen resolution, so it is barely relevant how hard / expensive it is to compute?
Lots of programs keep it as user-definable parameter ('detail'); for boxplorer2 I compute it, based on field-of-view and resolution.

[Syntopia]

Syntopia, that is a beautiful little 2D fractal page; I hadn't seen that before.  Will you be moving Fragmentarium to webGL any time soon? (  )

Thanks.

I actually want to write a WebGL exporter for Fragmentarium, but my initial experiments were somewhat discouraging - the subtle differences between GLSL ES and Desktop GLSL makes it very tricky to automatically reuse code - especially loops are more restricted in WebGL. I also encountered a couple of errors in the ANGLE layer, that converts GLSL to HLSL on Windows (it should be said, that Google was quite quick to fix the one I reported).

But I think I'll do an exporter anyway, even though it probably will require manual post-editing to work.

[cKleinhuis]

it would be great to have kalis "swimming fish" included in a webpage ... lol, perhaps i would even make some kind of fishing game out of it then
totally crazy moving things over your screen, and you have to shoot them, and they surely vary params

[willvarfar]

A few friends have said nothing shows for them; webGL is still early days but, within a half-year I think, will be widely supported and the most viable distribution platform for graphics software.

Yeah I struggle to use OpenGLES - complained before - but it seems you can do pretty much everything equiv, if you push past over bumps.

I have ideas for cone-marching on the GPU; will have to see how it helps or hinders performance...

Conventional wisdom from you experienced artisted wanted: What are the fastest types of 3D fractal to render and what are the fastest reasonable ways to colour and light them?

[subblue]

Willvarfar, I'm working on quite an in depth WebGL 3D fractal explorer 'Fractal Lab'.
I showed an alpha version at a conference talk I did a couple of months ago and
someone filmed a few minutes when I was demoing it:

<a href="http://www.youtube.com/v/xVnk_UV8hII&rel=1&fs=1&hd=1" target="_blank">http://www.youtube.com/v/xVnk_UV8hII&rel=1&fs=1&hd=1</a>

WebGL adds a whole layer of complications and restrictions, which is quite a headache with such a new implementation - especially when the GLSL shaders are pushing the limits of what most average graphics cards are capable of.
However, I have been getting some reasonable results directly in the browser, some of which you can see here: http://www.flickr.com/photos/subblue/

It's still a side project at the moment as I finish up another massive project, but I have big ambitions for it and am hoping to have a beta version ready reasonably soon.... 

[A Noniem]

I did a little paper on WebGL once which was quite fun. I'm not really familiar with regular OpenGL, but I am with OpenCL and HLSL and compared to those OpenGL ES which WebGL uses it is much more restrictive. I ran into the same problems as Syntopia reported. Loops are more restrictive and ANGLE not being completely compatible with OpenGL ES. I tested my mandelbrot demo in Chrome and when I ran it with Opera Beta which uses an OpenGL backend I got errors about the loop which worked fine with Chrome (which uses ANGLE). It was very cool to see the same mandelbrot demo running on Firefox/Chrome/Opera on Windows, Firefox on Linux and it even worked on Android (with firefox)

Despite being a fan of WebGL I won't recommend it to create 3d fractals (even though subblue's demo looks pretty cool), it's just a bit too restrictive and especially when the shaders get more complex you have to test and debug them with different browsers, mainly because of the ANGLE vs OpenGL (vs OpenGL ES if you want it on mobile devices as well) backend thing.

This is the link to the demo and you can find the paper there as well
http://www.students.science.uu.nl/~3685632/example.html

[cKleinhuis]

@subblue WHEN WILL IT BE FINISHED AND RELEASED ??!?! WILL IT BE FREE ?!?!?

[subblue]

Despite being a fan of WebGL I won't recommend it to create 3d fractals (even though subblue's demo looks pretty cool), it's just a bit too restrictive and especially when the shaders get more complex you have to test and debug them with different browsers, mainly because of the ANGLE vs OpenGL (vs OpenGL ES if you want it on mobile devices as well) backend thing.

The OpenGL emulation via ANGLE is a big issue at the moment with fractal shaders. The only real option for Windows users is to run Firefox with the native OpenGL config option set. But with native OpenGL support (default on OSX, I've not tested on Linux yet..) it is very usable and I've been getting some very compelling results.

Browser technology is advancing faster than ever. This is an interesting post from last year about the limitations of WebGL: http://codeflow.org/entries/2011/sep/11/webgl-and-html5-challenges-for-the-future/
One of the points, floating-point texture support, is already implemented now in Firefox and Chrome, something I heavily rely upon. Now if we could only have multiple render targets...

@cKleinhuis: It'll be ready when it's ready... I'm putting a lot of effort into the user interface and interactivity aspects (often getting between 30-60fps interactive speeds on my 2009 iMac). It's also aimed as a creative tool for users with no programming or mathematical background (so won't have the open-ended flexibility of an app like Fragmentarium) but is more something you explore visually.

At the moment the plan is for it to be free to try out (so you check that your system/browser is capable of running it), and then there will be a paid account version (at a very affordable app-style price) where you can save/share presets and render high-res images... but all that could well change