CODEWITHSUNDEEP
javascriptwebgltypescript
Tim Mutton
Tim Mutton

Reputation: 766

WebGL Framebuffer is Blank

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

Upvotes: 1

Views: 807

Answers (1)

StuGrey
StuGrey

Reputation: 1477

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);

Upvotes: 2

Related Questions