• Advertisement
Sign in to follow this  

Fragments view space from depth in WebGL

This topic is 1667 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi there,


I'm currently trying to implement a SSAO in WebGL. My inspiration is this site: Tutorial


But my current problem is to reconstruct the fragments view space position from depth.

If I understood the viewray right it is a vector from the camera to a point on the far plane. I read through all of MJP s articles, but they confused me somehow.

I render a fullscreen quad, so i get the TexCoords and the positions of x and y of the vertex. So my thought was, that only z is needed which I filled with the linearized depth value at the position of the TexCoord.



For visualisation I switched the coordinates from -1,+1 to 0,1; But even with that info I don't really know what the outcome should look like.

vec3 viewRay = vec3(vViewRay.xy * 0.5 + 0.5 , linearDepth);

Here is a fiddle of my 2 shaders I use.




Thanks for your ideas


Share this post

Link to post
Share on other sites

I continued my research and found out that I need to project my vertices of the quad to the corners of the farplane by multiplying

 it with the inverse of my perspective matrix in the vertex shader.

So far so good.

vViewRay = vec3(vec4(VertexPosition, 1.0) * invPerspectiveMatrix).xyz;

Displaying viewray in the fragment shader looks like this:




I think it looks just fine with exception of the missing blue values. This could possible be the result of the z-value of my quad all being 1.0 before the inverseprojection.

So it is gone after that. Putting z of the far clipping plane (z=1000); in, didn't change anything.


Any suggestions?

Edited by Pris0n

Share this post

Link to post
Share on other sites

Normals will also look like that if you pass them out through the color output. 


Try using the following formula to retool all the 3D vectors into the "color quadrant"??? I think I just made that name up???... or color space if you prefer.  Anyways, by this I mean: all positive numbers, between 0.0 and 1.0. as vectors they are -1.0 to 1.0.  Colors with negative numbers in them have peculiarities that are not entirely intuitive.  For example, what you are seeing there.


When a 3D modeling program range compresses normals from 3D space to a color texture it uses this formula ->  


(normal+ 1.0) * 0.5;  


For you it would be:


 (vViewRay + 1.0) * 0.5;  


It squishes all three vectors to half their sizes then pushes everything towards the positive... well... color quadrant.


Your vector should now look like a world space normal map now I'm thinking...

Share this post

Link to post
Share on other sites

Ah ok, maybe I confuse you :)


I want to reconstruct my VertexPosition in view space from depth. So far I read through tons of artictles but wasn't able to get thinks working.


vec3 origin = should be my final VertexPosition in view space


Currently I'll do this, taken from http://mynameismjp.wordpress.com/2010/09/05/position-from-depth-3/

vec3 origin = vec3(screenPos.xy, 1.0) * linearDepth;

screenPos are the ndc of the screen:

vec2 screenPos = vec2(gl_FragCoord.x / 512, gl_FragCoord.y / 512.0);

But I dunno what origin should look like so i can validate the that it worked.

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement