Wednesday, April 11, 2012

[VolumetricLighting] render into texture

Since our occlusion pre-pass method requires multiple passes before the final composition, we need to render each pass into a texture such that we can feed it into the next pixel shader program.
Thanks to this wonderful tutorial, I figured out how to render a 3D scene into a texture.
To render into a texture instead of the default view, we first need to create a new framebuffer object:
1:  var blackFramebuffer = gl.createFramebuffer();  
2:  gl.bindFramebuffer(gl.FRAMEBUFFER, blackFramebuffer);  
3:  blackFramebuffer.width = 512;  
4:  blackFramebuffer.height = 512;  
5:  blackTexture = gl.createTexture();  
6:  gl.bindTexture(gl.TEXTURE_2D, blackTexture);  
7:  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);  
8:  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);  
9:  gl.generateMipmap(gl.TEXTURE_2D);  
10:  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, blackFramebuffer.width, blackFramebuffer.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);  
11:  var renderbuffer0 = gl.createRenderbuffer();  
12:  gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer0);  
13:  gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, blackFramebuffer.width, blackFramebuffer.height);  
14:  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, blackTexture, 0);  
15:  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuffer0);  
16:  gl.bindTexture(gl.TEXTURE_2D, null);  
17:  gl.bindRenderbuffer(gl.RENDERBUFFER, null);  
18:  gl.bindFramebuffer(gl.FRAMEBUFFER, null);  
Then in the beginning of my draw() function, we add the following:
 gl.bindFramebuffer(gl.FRAMEBUFFER, blackFramebuffer);  
And after calling gl.drawElements() in my draw() function, we add the following:
 gl.bindTexture(gl.TEXTURE_2D, blackTexture);  
 gl.generateMipmap(gl.TEXTURE_2D);  
 gl.bindTexture(gl.TEXTURE_2D, null);  

No comments: