Render to Texture with Three.js
Upcoming SlideShare
Loading in...5
×
 

Render to Texture with Three.js

on

  • 1,129 views

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

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

Statistics

Views

Total Views
1,129
Views on SlideShare
1,066
Embed Views
63

Actions

Likes
0
Downloads
3
Comments
0

1 Embed 63

http://www.slideee.com 63

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Render to Texture with Three.js Render to Texture with Three.js Presentation Transcript

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