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:
Post a Comment