Welcome to Fractal Forums

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? ;)

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

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/

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.

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? (  :angel1: )

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/ (http://williame.github.com/Mandel_1/)

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.

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.

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.

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

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 (http://williamedwardscoder.tumblr.com/post/25564136097/if-you-defend-those-involved-in-the-opengl-es) - 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?

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:

http://www.youtube.com/watch?v=xVnk_UV8hII

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....  :dink:

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

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

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

what ??? so long ? :D
the rendering quality is outstanding, you have a decent quality in your productions, and i mean not only the rendering output, the interface style is very nice, too bad you took your previous version offline :( good work!

Subblue, what a beautiful demo video!  Do share more info! :)

Yes I'm having reports of black screens from people with my simple mandelbulb link; but I am hoping that webGL will settle down much quicker than I can set up a windows and mac and every other environment so I can compile native code to run on them all!

I have played around and added some 'features'.

It can draw a low-res distance map to a texture and then run again using this as input.

The display is colour coded by this info; the white pixels were discarded in an early pass, and red in were in the previous pass but not this pass.

I do the early passes with very few iterations, and crank the iterations up for the final pass.  In principle, as passes accumulate, you might get away with fewer on the final pass?

I have not found any significant speedup (nor slow-down) on my wimpy ATI mobile card, sadly.  If you save and open the file locally, you can edit it and change the parameters; easily add or change the distance map steps.

It now displays a useful frame-rate graph on the bottom of the window.  I find this more informative than a simple average number, but chrome can show a really useful FPS counter (enabled in about://flags)

I'd be most curious to know what kind of FPS this runs on your computer, what your computer spec is, and if changing the intermediate distance map texture parameters helps?

You know how it is ... I awoke this morning remembering I hadn't changed one very simple thing!

I've just fixed the epsilon on http://williame.github.com/Mandel_1 (http://williame.github.com/Mandel_1) (to the near value; it could become coarser as you march, leading to better speed-ups.  (And if it grew faster than real pixels, it'd speed up more and lead to some poor-man's fuzzy depth-of-field blurring effect too.)

So now I can confirm on my rubbish mobile ATI chipset, this multi-step distance texture dramatically improves frame-rate!

Save the code https://raw.github.com/williame/Mandel_1/ed617f99df3e58c3c1ba970850e326815be336d6/index.html (https://raw.github.com/williame/Mandel_1/ed617f99df3e58c3c1ba970850e326815be336d6/index.html) locally, then edit line 151 (https://github.com/williame/Mandel_1/blob/ed617f99df3e58c3c1ba970850e326815be336d6/index.html#L151) to change the number of steps and the size of the intermediate textures used.

Please report how this GPU-side "rod marching" (a.k.a. "cone marching") helps on your machine and what your spec is!

Terribly exciting :)

Is it possible to get the shader out so it's an external file or not as a string so it an be easily edited?