From what I can tell, depth based shadows aren’t supported yet (at least not on Firefox). Generating the texture for the FB throws an internal format error using gl.DEPTH_COMPONENT.

Can anyone confirm? Can anyone provide information on downloading the webgl source for firefox? I’ve run in circles trying to make sense of mozilla’s system.


There was a bug with FBOs on Firefox in the past. This was fixed some time ago. You should update to the latest nightly.

I was able to render successfully into the following FBO. However, I didn’t try to read the depth-texture again, because I just needed the colorbuffer.

fbo = gl.createFramebuffer();
depth = gl.createRenderbuffer();
tex0 = gl.createTexture();
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
gl.bindRenderbuffer(gl.RENDERBUFFER, depth);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT, size.x, size.y);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depth); 
gl.bindTexture(gl.TEXTURE_2D, tex0);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,  size.x, size.y, 0, gl.RGBA, gl.UNSIGNED_BYTE, 
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex0, 0);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

I’ve had the same problem It doesn’t seem to be working in any browser and at least in firefox it looks like there is no depth_component pixel format supported. I ended up converting the depth value to RGB values then converting it back the other side, costly but it works.