Render to Texture with Three.js

5,282 views

Published on

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,282
On SlideShare
0
From Embeds
0
Number of Embeds
112
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Render to Texture with Three.js

  1. 1. Render to Texture with Three.js Prabindh Sundareson
  2. 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. 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. 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. 5. Three.js Example • http://github.com/prabindh/three.js/ • Modified rendertotarget example to emphasize different views of same texture
  6. 6. Three.js RenderTarget Object • WebGLRenderTarget • Usage sample: – rtTexture = new THREE.WebGLRenderTarget( width, height, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );

×