Logo by wmauzey - Contribute your own Logo!

END OF AN ERA, FRACTALFORUMS.COM IS CONTINUED ON FRACTALFORUMS.ORG

it was a great time but no longer maintainable by c.Kleinhuis contact him for any data retrieval,
thanks and see you perhaps in 10 years again

this forum will stay online for reference
News: Support us via Flattr FLATTR Link
 
*
Welcome, Guest. Please login or register. March 28, 2024, 01:39:02 PM


Login with username, password and session length


The All New FractalForums is now in Public Beta Testing! Visit FractalForums.org and check it out!


Pages: [1] 2   Go Down
  Print  
Share this topic on DiggShare this topic on FacebookShare this topic on GoogleShare this topic on RedditShare this topic on StumbleUponShare this topic on Twitter
Author Topic: WebGL Mandelbulb with THREE.js flythrough controls (optimizations wanted)  (Read 22457 times)
0 Members and 2 Guests are viewing this topic.
itistoday
Forums Freshman
**
Posts: 15


« on: August 07, 2013, 04:21:48 PM »

I just joined these forums, and haven't yet had the time to apply any of the techniques to make things faster that are mentioned here.

The fragment shader is here: http://www.kinostudios.com/includes/shaders/bulb1/bulb.frag

Any GLSL optimizations wanted! I just ported the code from the webgl-mandelbulb repo.

Try it out here!

Here's a screenshot:



Try it out here!
« Last Edit: August 07, 2013, 04:28:35 PM by itistoday » Logged
eiffie
Guest
« Reply #1 on: August 07, 2013, 06:02:24 PM »

I doubt this code produces the exact bulb as yours and I don't know how much faster it is but it is certainly fewer instructions.
Code:
float DE(vec3 z0){//MandelBulb by twinbee (sine version)
vec4 c = vec4(z0,1.0),z = c;
float r = length(z),zr,zo,zi,p=8.0;//p is the power
for (int n = 0; n < 7 && r<2.0; n++) {
zo = asin(z.z / r) * p;//add phase shifts here
zi = atan(z.y, z.x) * p;//...and here
zr = pow(r, p-1.0);
z=zr*vec4(r*vec3(cos(zo)*vec2(cos(zi),sin(zi)),sin(zo)),z.w*p)+c;
r = length(z.xyz);
}
return 0.5 * log(r) * r / z.w;
}
(modified to remove the error in the radius calc - thank you Knighty)
« Last Edit: August 10, 2013, 03:49:52 PM by eiffie » Logged
itistoday
Forums Freshman
**
Posts: 15


« Reply #2 on: August 10, 2013, 04:05:46 AM »

eiffie,

I doubt this code produces the exact bulb as yours and I don't know how much faster it is but it is certainly fewer instructions.

In honor of you, and as a personal project, I've updated the link with a full-blown editor that lets you live-update the shader:



I tried for a while to get the code you sent to work, but couldn't. Something is different between the type of ray it expects.

Your function is defined as DE_forum. There's also DE_blog and DE (which is what is being used by default). The pixels immediately surrounding the bulb provide some debug output:

Code:
           // some debugging to show the difference
            vec3 ray2 = eye + tmin * ray_direction;
            pixel_color.r = DE_blog (ray2, tmin) / bailout;
            pixel_color.g = DE_forum(ray2, tmin) / bailout;
            pixel_color.b = DE      (ray2, tmin) / bailout;

That gives you an idea of the difference between the values the three DE's are giving.

I also tried a very similar DE function from this blog post. The two are almost identical, except the cosine and sine functions are somewhat interchanged. Otherwise they are identical.

Results:

- Your function produces no mandelbulb.
- The blog post's function produces a very dark and weird looking mandelbulb.
- Attempting to rotate around the mandelbulb (by using a combination of the D and Right-Arrow keys) results in extremely weird stuff. It shouldn't happen, whatever it's doing.

So, any help, from you or anyone else, in getting this thing to function better would be greatly appreciated! ^_^

Launch it here: http://www.kinostudios.com/mandelbulb.html
« Last Edit: August 10, 2013, 04:10:08 AM by itistoday » Logged
Syntopia
Fractal Molossus
**
Posts: 681



syntopiadk
WWW
« Reply #3 on: August 10, 2013, 01:31:52 PM »


I also tried a very similar DE function from this blog post. The two are almost identical, except the cosine and sine functions are somewhat interchanged. Otherwise they are identical.

- The blog post's function produces a very dark and weird looking mandelbulb.

In 'DE_blog' you start out by setting 'min_dist' to zero, which probably causes some wrong ambient occlusion. Notice, that as I mention in my blog post, there are (at least) two different versions around of the Mandelbulb.

I couldn't update the code, got this error:

Code:
Error: Globals.shaders[file.substr(...)] is undefined DisplaySource@http://www.kinostudios.com/mandelbulb.html:97 updateMenu@http://www.kinostudios.com/mandelbulb.html:119 @http://www.kinostudios.com/mandelbulb.html:129 Scope.prototype.$eval@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:8926 Scope.prototype.$apply@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:9006 @http://www.kinostudios.com/mandelbulb.html:128 x.event.dispatch@http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js:5 x.event.add/y.handle@http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js:5


Logged
knighty
Fractal Iambus
***
Posts: 819


« Reply #4 on: August 10, 2013, 01:53:25 PM »

hi,
in the code posted by eiffie, IIRC we should have:
   r=length(z.xyz);
instead of:
   r=length(z);
 
Logged
itistoday
Forums Freshman
**
Posts: 15


« Reply #5 on: August 10, 2013, 02:54:22 PM »

In 'DE_blog' you start out by setting 'min_dist' to zero, which probably causes some wrong ambient occlusion. Notice, that as I mention in my blog post, there are (at least) two different versions around of the Mandelbulb.

Good catch! That fixed the lighting.

Quote
I couldn't update the code, got this error:

Code:
Error: Globals.shaders[file.substr(...)] is undefined DisplaySource@http://www.kinostudios.com/mandelbulb.html:97 updateMenu@http://www.kinostudios.com/mandelbulb.html:119 @http://www.kinostudios.com/mandelbulb.html:129 Scope.prototype.$eval@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:8926 Scope.prototype.$apply@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:9006 @http://www.kinostudios.com/mandelbulb.html:128 x.event.dispatch@http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js:5 x.event.add/y.handle@http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js:5

I've updated the page with some debug output to the console.

Go ahead and do Command+Shift+R (on a Mac), or Ctrl+Shift+R on Windows/Linux to get the latest version of the fragment shader. When you click "Update Shaders", copy/paste the output from the console, I'm looking for a line that says something like: "displaying file: bulb.frag ext: frag"

Also, what browsers did you try?

hi,
in the code posted by eiffie, IIRC we should have:
   r=length(z.xyz);
instead of:
   r=length(z);

Thanks knighty! I think given enough time I could've even figured that out myself! :-D

It runs fine now, there are just three problems left:

  • The phase doesn't look the same as it does on the original shader (it looks uglier)
  • You can't get too close to it or it will flip out and fly away
  • When you fly around to the side of the mandelbulb, the view is horrendous as you can see in the picture here:



I'm guessing some multiplication via the eye/ray and the modelViewMatrix isn't correct...
« Last Edit: August 10, 2013, 03:30:03 PM by itistoday » Logged
knighty
Fractal Iambus
***
Posts: 819


« Reply #6 on: August 10, 2013, 03:40:37 PM »

It looks more like the FOV is too wide.
Try higher bailout (say 100) values for better distance estimate -> better results.
The code provided by eiffie uses "scalar derivative" which is less accurate.
Logged
itistoday
Forums Freshman
**
Posts: 15


« Reply #7 on: August 10, 2013, 03:46:21 PM »

It looks more like the FOV is too wide.
Try higher bailout (say 100) values for better distance estimate -> better results.
The code provided by eiffie uses "scalar derivative" which is less accurate.

I don't see what FOV has to do with this. If it was a FOV problem, wouldn't that affect it similarly when you're looking at it straight on too?

100 for the bailout...? I don't see how putting such a high bailout is going to fix that problem either.
Logged
cKleinhuis
Administrator
Fractal Senior
*******
Posts: 7044


formerly known as 'Trifox'


WWW
« Reply #8 on: August 10, 2013, 03:50:33 PM »

bailout influences the noise, fov influences the stretch
Logged

---

divide and conquer - iterate and rule - chaos is No random!
itistoday
Forums Freshman
**
Posts: 15


« Reply #9 on: August 10, 2013, 04:09:15 PM »

bailout influences the noise, fov influences the stretch

What should the FOV be? It's 45 right now.

Why would the stretch get worse and worse the more you turn it? I've never seen FOV do that. You're of course welcome to edit the source, although the FOV is modified in the html file (you might be able to do it with Firebug for example).
Logged
eiffie
Guest
« Reply #10 on: August 10, 2013, 04:24:34 PM »

Thanks for creating the editor! And thanks knighty for correcting the code. I believe I have yet to post working code on this site. Just keeping you all on your toes.
Logged
itistoday
Forums Freshman
**
Posts: 15


« Reply #11 on: August 10, 2013, 04:28:54 PM »

Np eiffie! :-)

BTW, as suspected, bailout has nothing to do with it. Here I've set it to 100:



Of course, the reason I made this editor is so that anyone can edit the source themselves to try to improve it... Just replace DE with DE_forum, and DE_forum with DE to use the forum version.
Logged
knighty
Fractal Iambus
***
Posts: 819


« Reply #12 on: August 10, 2013, 05:29:33 PM »

Sorry, I was not clear enought. Of course, bailout have nothing to do with the "effect" you are having.
Logged
knighty
Fractal Iambus
***
Posts: 819


« Reply #13 on: August 10, 2013, 06:47:22 PM »

How do you set up view position and direction?
Assuming you set up the camera in the host program:
When rendering a mesh, you construct the modelViewProjection matrix (and usually the modelView matrix) then in the (basic) vertex shader is:
Code:
void main()
{
   gl_Position = ftransform();//same as:  gl_Position = gl_ModelViewProjectionMatrix * gl_vertex;
}
We have transformed the vertex from the "world space" to the "view space" (I don't remember how it is actually called).
For raytracing one have to reverse the process because the vertices of the quad that is drawn are in the view space and we need to compute the rays directions in the "world space". here is roughly how I do (BTW I'm not up to date with OpenGL):
Vertex shader:
Code:
varying vec3 rayDir;

void main( void )
{
   gl_Position = gl_Vertex;//shouldn't be transformed
   
   vec4 WPpos = gl_ModelViewProjectionMatrixInverse*gl_Vertex;//
   WPpos /= WPpos.w;
   rayDir=WPpos.xyz-gl_ModelViewMatrixInverse[3].xyz;
}
in the fragment shader:
Code:
varying vec3 rayDir;
vec3 eyePos=gl_ModelViewMatrixInverse[3].xyz;//or just send it as uniform
...
...
void main()
{
   vec3 rayDir = normalize(rayDir);
   gl_FragColor=rayTrace(eyePos, rayDir);
}
Logged
itistoday
Forums Freshman
**
Posts: 15


« Reply #14 on: August 10, 2013, 10:39:33 PM »

How do you set up view position and direction?

three.js does much of the work, but the part that's on me you can find by viewing the page source. The only geometry/vertices that are sent are 4 vertices representing a square. I believe they should be the same as these (found from another source, and checked via the implementation of THREE.PlaneGeometry):

Code:
var vertexPositions = [
  1.0, 1.0, 0.0,
  -1.0, 1.0, 0.0,
  1.0, -1.0, 0.0,
  -1.0, -1.0, 0.0
];


Quote
:Vertex shader:
Code:
varying vec3 rayDir;

void main( void )
{
   gl_Position = gl_Vertex;//shouldn't be transformed
  
   vec4 WPpos = gl_ModelViewProjectionMatrixInverse*gl_Vertex;//
   WPpos /= WPpos.w;
   rayDir=WPpos.xyz-gl_ModelViewMatrixInverse[3].xyz;
}
in the fragment shader:
Code:
varying vec3 rayDir;
vec3 eyePos=gl_ModelViewMatrixInverse[3].xyz;//or just send it as uniform
...
...
void main()
{
   vec3 rayDir = normalize(rayDir);
   gl_FragColor=rayTrace(eyePos, rayDir);
}

I had to create modelViewMatrixInverse on my own, but it's there now as a uniform. This is how it's created:

Code:
       var modelViewProjectMatrixInverse = new THREE.Matrix4();

        function render() {
            uniforms.time.value += 0.05;
            controls.update( clock.getDelta() );

            modelViewProjectMatrixInverse.multiplyMatrices(camera.matrixWorldInverse, mesh.matrixWorld).multiply(camera.projectionMatrix)
            modelViewProjectMatrixInverse.getInverse(modelViewProjectMatrixInverse);
            uniforms.modelViewProjectMatrixInverse.value = modelViewProjectMatrixInverse;
            
            renderer.render( scene, camera );
        }

Just look at the source of the page to get an idea of what's going on.

However, now I'm getting even worse results:



You can try it out yourself now (make sure to do a Command/Ctrl+Shift+R refresh). Just uncomment this line near the top of bulb.frag:

Code:
// #define USE_KNIGHTY

http://www.kinostudios.com/mandelbulb.html
« Last Edit: August 10, 2013, 10:41:14 PM by itistoday » Logged
Pages: [1] 2   Go Down
  Print  
 
Jump to:  

Related Topics
Subject Started by Replies Views Last post
DOF controls Mandelbulb 3d Madman 4 2412 Last post November 29, 2010, 07:48:29 PM
by Madman
Firestorm Flythrough Movies Showcase (Rate My Movie) kon16ov 2 1258 Last post February 04, 2011, 10:28:52 PM
by kon16ov
webgl mandelbulb Let's collaborate on something! MrMike 2 2599 Last post December 14, 2011, 08:37:17 PM
by marius
Mandelbulb in WebGl Gestaltlupe Gallery trafassel 0 1338 Last post January 17, 2016, 01:15:26 PM
by trafassel
Mandelbulb in WebGl Gestaltlupe Gallery trafassel 0 1383 Last post January 17, 2016, 01:18:54 PM
by trafassel

Powered by MySQL Powered by PHP Powered by SMF 1.1.21 | SMF © 2015, Simple Machines

Valid XHTML 1.0! Valid CSS! Dilber MC Theme by HarzeM
Page created in 0.256 seconds with 29 queries. (Pretty URLs adds 0.01s, 2q)