WebGL Framebuffer is Blank

Question

I've created a framebuffer in WebGL using the code:

this.buffer = ctx.createFramebuffer();
ctx.bindFramebuffer(ctx.FRAMEBUFFER, this.buffer);

this.depthTexture = this.createTexture(ctx, ctx.DEPTH_COMPONENT, 
    ctx.DEPTH_COMPONENT, ctx.UNSIGNED_SHORT);       
ctx.framebufferTexture2D(ctx.FRAMEBUFFER, ctx.DEPTH_ATTACHMENT, 
    ctx.TEXTURE_2D, this.depthTexture, 0);


this.colourTexture = this.createTexture(ctx, ctx.RGBA, ctx.RGBA, ctx.FLOAT);        
ctx.framebufferTexture2D(ctx.FRAMEBUFFER, ctx.COLOR_ATTACHMENT0, 
    ctx.TEXTURE_2D, this.colourTexture, 0);

draw to it using

this.ctx.useProgram(this.forwardShader.program);
this.ctx.bindFramebuffer(this.ctx.FRAMEBUFFER, this.framebuffer.buffer);
this.ctx.viewport(0, 0, this.framebuffer.size, this.framebuffer.size);
this.ctx.clear(this.ctx.COLOR_BUFFER_BIT | this.ctx.DEPTH_BUFFER_BIT);

mat4.identity(this.viewMatrix);
mat4.identity(this.modelMatrix);

this.camera.transform(this.viewMatrix);

mat4.translate(this.modelMatrix, this.modelMatrix, [0, 0, -2]);

this.mStack.pushMatrix(this.modelMatrix);

mat4.translate(this.modelMatrix, this.modelMatrix, [0, -1, 0]);
mat4.rotateX(this.modelMatrix, this.modelMatrix, -Math.PI / 2.0);

this.setShaderUniforms();
this.plane.draw(this.forwardShader);

this.mStack.popMatrix(this.modelMatrix);

this.setShaderUniforms();
this.cube.draw(this.forwardShader);

this.ctx.bindFramebuffer(this.ctx.FRAMEBUFFER, null);

and then render the result using

this.ctx.useProgram(this.renderTextureShader.program);
this.ctx.viewport(0, 0, this.viewportWidth, this.viewportHeight);    
this.ctx.clear(this.ctx.COLOR_BUFFER_BIT | this.ctx.DEPTH_BUFFER_BIT);

this.renderTexture.draw(this.framebuffer.colourTexture, this.renderTextureShader);

which works perfectly, however when I change it to render the depth texture I get a white screen. I've checked that the relevant extensions are enabled and stored them in an array (apparently if they get gc'ed it can cause bugs. Any feedback on what im doing wrong would be great

Full code can be found on my bitbucket

Depth linearizing could help https://stackoverflow.com/a/44357374/3012928 — Ice-Blaze, Jun 04 '17 at 18:31

score 2 · Answer 1 · answered Apr 13 '13 at 19:37

2

It may be a problem with the range of your depth data, try:

this.depthTexture = this.createTexture(ctx, ctx.DEPTH_COMPONENT, ctx.DEPTH_COMPONENT, ctx.FLOAT);

answered Apr 13 '13 at 19:37

StuGrey

1,479
9
20

Doing so causes the error "INVALID_OPERATION: texImage2D: invalid type for DEPTH_COMPONENT format". I suspect that whilst the extensions for depth textures & floating point textures are enabled, the two cant be combined as of yet – Tim Mutton Apr 13 '13 at 23:12

WebGL Framebuffer is Blank

1 Answers1