[WebGL] Render Texture

이번 예제는 Render Texture에 대한 것입니다. Render Texture란 가상 카메라를 통해 렌더링 된 이미지를 오브젝트의 texture로 맵핑하는 기법을 의미합니다.

Download Project

05-03-render-texture.zip

 

Click here to view with full screen mode

Operations

W: Move forward

S: Move backward

Q: Move to the left

E: Move to the right

A: Rotate to the left

D: Rotate to the right

main.js

// MAIN
 
// standard global variables
var container, scene, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
 
// custom global variables
var player = new THREE.Object3D();
var textureCamera, mainCamera;
 
// intermediate scene for reflecting the reflection
var screenScene, screenCamera, firstRenderTarget, finalRenderTarget;
 
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( 'models/CamCoder.dae', function ( collada ) {
  dae = collada.scene;
  skin = collada.skins[ 0 ];
 
  dae.position.set( 0, 50, 120 );
  dae.scale.x = dae.scale.y = dae.scale.z = 8;
  dae.updateMatrix();
 
  init();
  animate();
} );
 
// FUNCTIONS
function init()
{
    // SCENE
    scene = new THREE.Scene();
 
    // CAMERAS
    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
    // camera 1
    mainCamera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
    scene.add(mainCamera);
    mainCamera.position.set(0,200,500);
    mainCamera.lookAt(scene.position);
    // camera 2
    textureCamera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
 
    // RENDERER
    if ( Detector.webgl )
        renderer = new THREE.WebGLRenderer( {antialias:true} );
    else
        renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    container = document.getElementById( 'ThreeJS' );
    container.appendChild( renderer.domElement );
 
    // EVENTS
    THREEx.WindowResize(renderer, mainCamera);
    THREEx.FullScreen.bindKey({ charCode : 'f'.charCodeAt(0) });
 
    // STATS
    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.bottom = '0px';
    stats.domElement.style.zIndex = 100;
    container.appendChild( stats.domElement );
 
    // LIGHT
    var dirLight = new THREE.DirectionalLight(0xffffff);
    dirLight.position.set(100,250,0);
    dirLight.intensity = 2;
    var lightTarget = new THREE.Object3D();
    var targetPosition = new Array();
    targetPosition[0] = -100;
    targetPosition[1] = -10;
    targetPosition[2] = 200;
    lightTarget.position.set(targetPosition[0], targetPosition[1], targetPosition[2]);
    scene.add(lightTarget);
    dirLight.target = lightTarget;
    scene.add(dirLight);
 
    // SKYBOX/FOG
    var materialArray = [];
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/px.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/nx.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/py.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/ny.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/pz.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/nz.jpg' ) }));
    for (var i = 0; i < 6; i++)
       materialArray[i].side = THREE.BackSide;
    var skyboxMaterial = new THREE.MeshFaceMaterial( materialArray );
    
    var skyboxGeom = new THREE.CubeGeometry( 5000, 5000, 5000, 1, 1, 1 );
    
    var skybox = new THREE.Mesh( skyboxGeom, skyboxMaterial );
    scene.add( skybox );
    
    ////////////
    // CUSTOM //
    ////////////
    // put the collada camera model into "player" and then
    // put "player" into the scene
    player.position.set(0, 25.1, 0);
    player.add( dae );
    scene.add( player );
    
    // Intermediate scene.
    // : this solves the problem of the mirrored texture by mirroring it again.
    // : consists of a camera looking at a plane with the mirrored texture on it. 
    screenScene = new THREE.Scene();
    
    screenCamera = new THREE.OrthographicCamera( 
        window.innerWidth  / -2, window.innerWidth  /  2, 
        window.innerHeight /  2, window.innerHeight / -2, 
        -10000, 10000 );
                
    var screenGeometry = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight );
    
    firstRenderTarget = new THREE.WebGLRenderTarget( 1024, 1024, { format: THREE.RGBFormat } );    
    var screenMaterial = new THREE.MeshBasicMaterial( { map: firstRenderTarget } );
    
    var quad = new THREE.Mesh( screenGeometry, screenMaterial );
    screenScene.add( quad );
 
    // Final version of camera texture, used in the scene.
    var planeGeometry = new THREE.CubeGeometry( 400, 200, 1, 1 );
    finalRenderTarget = new THREE.WebGLRenderTarget( 1024, 1024, { format: THREE.RGBFormat } );
    var planeMaterial = new THREE.MeshBasicMaterial( { map: finalRenderTarget } );
    var plane = new THREE.Mesh( planeGeometry, planeMaterial );
    plane.position.set(0,100,-500);
    scene.add(plane);
 
    // Pseudo-border(Frame) for plane, to make it easier to see
    var planeGeometry = new THREE.CubeGeometry( 420, 220, 1, 1 );
    var planeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000 } );
    var plane = new THREE.Mesh( planeGeometry, planeMaterial );
    plane.position.set(0,100,-502);
    scene.add(plane);
}
 
function animate() 
{
    requestAnimationFrame( animate );
    render();        
    update();
}
 
function update()
{
    var delta = clock.getDelta(); // seconds.
    var moveDistance = 200 * delta; // 200 pixels per second
    var rotateAngle = Math.PI / 2 * delta;   // PI/2 radians (90 degrees) per second
    
    // local transformations
 
    // move forwards/backwards/left/right
    if ( keyboard.pressed("W") )
        player.translateZ( -moveDistance );
    if ( keyboard.pressed("S") )
        player.translateZ(  moveDistance );
    if ( keyboard.pressed("Q") )
        player.translateX( -moveDistance );
    if ( keyboard.pressed("E") )
        player.translateX(  moveDistance );    
 
    // rotate left/right/up/down
    var rotation_matrix = new THREE.Matrix4().identity();
    if ( keyboard.pressed("A") )
        player.rotateOnAxis( new THREE.Vector3(0,1,0), rotateAngle);
    if ( keyboard.pressed("D") )
        player.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle);
    if ( keyboard.pressed("R") )
        player.rotateOnAxis( new THREE.Vector3(1,0,0), rotateAngle);
    if ( keyboard.pressed("F") )
        player.rotateOnAxis( new THREE.Vector3(1,0,0), -rotateAngle);
    
    if ( keyboard.pressed("Z") )
    {
        player.position.set(0,25.1,0);
        player.rotation.set(0,0,0);
    }
    
    // Update the texture camera's position and look direction
    var relativeCameraOffset = new THREE.Vector3(0,0,1);
    var cameraOffset = player.matrixWorld.multiplyVector3( relativeCameraOffset );
    textureCamera.position.x = cameraOffset.x;
    textureCamera.position.y = cameraOffset.y;
    textureCamera.position.z = cameraOffset.z;
    var relativeCameraLookOffset = new THREE.Vector3(0,0,-1);
    var cameraLookOffset = relativeCameraLookOffset.applyMatrix4( player.matrixWorld );
    textureCamera.lookAt( cameraLookOffset );
                
    stats.update();
}
 
function render() 
{
    // textureCamera is located at the position of player
    //   (and therefore is contained within it)
    // put the result of textureCamera into the first texture.
    renderer.render( scene, textureCamera, firstRenderTarget, true );
 
    // slight problem: texture is mirrored.
    //    solve problem by rendering (and hence mirroring) the texture again
    
    // render another scene containing just a quad with the texture
    //    and put the result into the final texture
    renderer.render( screenScene, screenCamera, finalRenderTarget, true );
    
    // render the main scene
    renderer.render( scene, mainCamera );
}