Shows how to perform Render to Texture with Three.js, and compares against OpenGLES2 method of doing the same

1. Render to Texture with Three.js
Prabindh Sundareson

2. What is Render to Texture ?
• Classical display path
– WebGL Content  GPU  On-Screen pixels
– <div><canvas></div>
• Rendering to Texture
– WebGL Content  GPU  Buffer in GPU memory

3. Doing it with GLES2 (Caveman style)
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
//Bind offscreen texture
GL_CHECK(glBindTexture(GL_TEXTURE_2D, 0));
GL_CHECK(glBindTexture(GL_TEXTURE_2D, fboTextureId[i]));
GL_CHECK(glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, inTextureWidth, inTextureHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL));
GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR));
GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR));
GL_CHECK(glBindFramebuffer(GL_FRAMEBUFFER, fboId[i]));
GL_CHECK(glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, fboTextureId[i], 0));
if(glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)
{
printf("FB is not complete for rendering offscreenn");
goto err;
}
//Bind regular texture
GL_CHECK(glBindTexture(GL_TEXTURE_2D, 0));
GL_CHECK(glBindTexture(GL_TEXTURE_2D, regularTextureId));
add_texture(inTextureWidth, inTextureHeight, textureData, inPixelFormat);
GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR));
GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR));
//Draw with regular draw calls to FBO
GL_CHECK(_test17(1));
//Now get back display framebuffer and unbind the FBO
GL_CHECK(glBindFramebuffer(GL_FRAMEBUFFER, 0));
GL_CHECK(glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, 0, 0));
if(glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)
{
printf("FB is not complete for rendering to displayn");
goto err;
}
//bind to texture
GL_CHECK(glBindTexture(GL_TEXTURE_2D, 0));
GL_CHECK(glBindTexture(GL_TEXTURE_2D, fboTextureId[i]));
GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR));
GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR));
//draw to display buffer
_test17(0);
Captain Caveman © Hanna-Barbera
Taken from
https://gist.github.com/prabindh/8173489

4. With Three.js (non Cave-man style)
• Create
– rtTexture = new THREE.WebGLRenderTarget(
window.innerWidth, window.innerHeight, ..);
• Create screen, material, and mesh
– mtlScreen = new THREE.ShaderMaterial( {
uniforms: { tDiffuse: { type: "t", value: rtTexture } },
– mtl = new THREE.MeshBasicMaterial( { map: rtTexture } );
– mesh = new THREE.Mesh( plane, function(rtTexture) );
– scene.add( mesh );
• Use
To offscreen
– renderer.render( sceneRTT, cameraRTT, rtTexture, ..);
– renderer.render( scene, camera );
To display screen

5. Three.js Example
• http://github.com/prabindh/three.js/
• Modified rendertotarget example to
emphasize different views of same texture

6. Three.js RenderTarget Object
• WebGLRenderTarget
• Usage sample:
– rtTexture = new THREE.WebGLRenderTarget(
width, height, { minFilter: THREE.LinearFilter,
magFilter: THREE.NearestFilter, format:
THREE.RGBFormat } );