2011年11月2日水曜日

レンダリング結果をテクスチャに使う

昨日の続きです。
Learning WebGLのLesson16をみたいな感じに、レンダリング結果をテクスチャに貼り付けてみました。
こんなかんじになります。
レンダリングターゲットはそのままテクスチャとして利用できるようです、楽チン。

  animate = function() {
    requestAnimationFrame(animate);
    renderer.setClearColor(new THREE.Color(0xffffff), 1.0);
    renderer.render(subScene, subCamera, renderTarget);
    renderer.setClearColor(new THREE.Color(0x000000), 1.0);
    renderer.render(scene, camera);
  };

  start = function() {
    renderer = new THREE.WebGLRenderer({
      clearColor: 0x000000,
      clearAlpha: 1,
      antialias: false
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderTarget = new THREE.WebGLRenderTarget(256, 256, {
      magFilter: THREE.NearestFilter,
      minFilter: THREE.NearestFilter,
      wrapS: THREE.ClampToEdgeWrapping,
      wrapT: THREE.ClampToEdgeWrapping
    });

    scene = new THREE.Scene;
    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 5000);
    camera.position.z = 20;
    light = new THREE.DirectionalLight(0xffffff);
    light.position = new THREE.Vector3(0.0, 0.0, 1.0);
    scene.add(light);
    mesh = new THREE.Mesh(new THREE.CubeGeometry(10, 10, 10), new THREE.MeshLambertMaterial({
      color: 0xffffff,
      map: renderTarget
    }));
    scene.add(mesh);

    subScene = new THREE.Scene;
    subCamera = new THREE.PerspectiveCamera(60, renderTarget.width / renderTarget.height, 0.1, 5000);
    subCamera.position.z = 20;
    subLight = new THREE.DirectionalLight(0xffffff);
    subLight.position = new THREE.Vector3(0.0, 0.0, 1.0);
    subScene.add(subLight);
    subMesh = new THREE.Mesh(new THREE.CubeGeometry(10, 10, 10), new THREE.MeshLambertMaterial({
      color: 0xff0000
    }));
    subScene.add(subMesh);

    document.body.appendChild(renderer.domElement);
    animate();
  };

0 件のコメント:

コメントを投稿