|
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. 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: // 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
|
|
« 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: 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. I couldn't update the code, got this error: 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
|
|
« 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: 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: 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: 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): 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 ]; :Vertex shader: 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: 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: 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: // #define USE_KNIGHTY http://www.kinostudios.com/mandelbulb.html
|
|
« Last Edit: August 10, 2013, 10:41:14 PM by itistoday »
|
Logged
|
|
|
|
|