Home / Javascript / WebGL – Depth texture

WebGL – Depth texture

It took me a while but I finally get the depth texture working. Basically I just follow the instruction from this article and it worked. However I encounter some problems when trying to make this work :

After trying the technique in the article I mentioned, the first result I get is a total white screen, I thought I made an error so nothing got rendered on the screen but after a further research I found somebody said that he had the same situation but it turns out actually the depth texture is working, it’s just the value he got is very close to the max value therefore it looks all white. So i make a simple test to change the actual white (1.0, 1.0, 1.0 in shader) to red and this is the result i got (on the left is the all white screen, on the right is that i dye the actual white to red, you can see the shape of the mountains) : So it turns out the code is actually working, I just need to find a way to display it correctly. So I went back to do more search and i find this way to show the depth texture :


void main(void) {
	float n = 1.0;
	float f = 2000.0;
	float z = texture2D(uSampler0, vTextureCoord.st).x;
	float grey = (2.0 * n) / (f + n - z*(f-n));
	vec4 color = vec4(grey, grey, grey, 1.0);
	gl_FragColor = color;

n is the nearest depth and   is farthest depth, after applying this method the depth texture seems much more normal :


But when I switch back to my render there is something wrong :
You can see the depth is rendered weirdly, looks more like layers, and another thing I discovered is that the depth texture value i got is extremely close to 1 ( > .995). And the depth texture i get looks like layer too, but not like the depth texture inside the article that smooth. Therefor I have to go back to search again then I found out somebody says it’s because I didn’t have the right setup for the zNear and zFar. A too little zNear or a too big zFar will result a very wide range of depth results,and this will limit the precision of depth buffer. By this time the zNear and zFar I was using is .1/10000. So I scale everything down and also bring closer the camera so it looks the same in size, but the zNear and zFar become 1/2000. And this time everything works, the depth texture looks perfect, and the layer effect above is gone as well.


So finally I got it working, I put up a little depth of field effect using the depth texture here, there is a checkbox for you to see how the depth texture looks like. It’s really a long way for me to finally get it. The main reason is there is not too much resource on this topic, however you will find more articles if you search for opengl depth texture instead of webgl texture. Here is a very good link tell you about the things you want to know about the depth texture. Again, all the code you need is in this article, enjoy the depth texture and now you can create some more advanced effects.

Leave a Reply

Your email address will not be published. Required fields are marked *