ThreeJS renderTarget FBO

juejin.cn/post/697611…

• Three WebGLRenderTarget

this.renderTarget = new THREE.WebGLRenderTarget(512, 512, {
        encoding: this.renderer.outputEncoding
});
//切换renderTarget并render 这个时候就生成贴图了
this.renderer.setRenderTarget(this.renderTarget); 
this.renderer.render(this.scene, this.shadowCamera);
this.renderer.setRenderTarget(null);

//WebGLRenderTarget
this.renderTarget = new THREE.WebGLRenderTarget(512, 512, {
        encoding: this.renderer.outputEncoding
});
this.renderer.setRenderTarget(this.renderTarget); 
this.renderer.render(this.scene, this.shadowCamera);
//camera
this.shadowCamera = new THREE.OrthographicCamera(
        -this.PLANE_WIDTH / 2,
        this.PLANE_WIDTH / 2,
        this.PLANE_HEIGHT / 2,
        -this.PLANE_HEIGHT / 2,
        0,
        this.CAMERA_HEIGHT
);

this.renderer.setRenderTarget(null);

//储存数据 隐藏没用的东西 初始化
this.oldClearColor.copy(this.renderer.getClearColor());
this.oldClearAlpha = this.renderer.getClearAlpha();
XXX.visible = false;
this.renderer.setClearColor(0xffffff, 0); //透明度

//切换材质
this.scene.overrideMaterial = this.depthMaterial; //深度材质

//切换renderTarget并render 这个时候就生成贴图了
this.renderer.setRenderTarget(this.renderTarget); 
this.renderer.render(this.scene, this.shadowCamera);

//还原材质
this.scene.overrideMaterial = null;

//复原
this.renderer.setClearColor(this.oldClearColor, this.oldClearAlpha); 
this.renderer.setRenderTarget(null);
XXX.visible = true;

//使用
var material = new THREE.MeshBasicMaterial({
    map: this.renderTarget.texture,
    opacity: this.shadowState.opacity,
    transparent: true,
    depthWrite: false
});

• Three WebGLCubeRenderTarget

// Create cube render target
//128是像素大小
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );

// Create cube camera
const cubeCamera = new THREE.CubeCamera( 1, 100000, cubeRenderTarget );
scene.add( cubeCamera );

// Create car
const chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeRenderTarget.texture } );
const car = new Mesh( carGeometry, chromeMaterial );
scene.add( car );

// Update the render target cube
car.visible = false;
cubeCamera.position.copy( car.position );
cubeCamera.update( renderer, scene );

// Render the scene
car.visible = true;
renderer.render( scene, camera );

• 不同的RenderTarget可以设置不同的setClearColor

renderer.setRenderTarget();
renderer.setClearColor(0x888888, 1);
renderer.clear();

renderer.setRenderTarget(targets[2]);
renderer.setClearColor(0, 0);
renderer.clear();

renderer.setRenderTarget(targets[1]);
renderer.setClearColor(0xffffff, 1);
renderer.clear();

renderer.setRenderTarget(targets[0]);
renderer.setClearColor(0, 0);
renderer.clear();

• 不同的RenderTarget可以设置不同的clear
• 当然也可以不设置clear 然后进行叠加

for (let i = 0; i < options.layers; i++) {
  // flip 和flop就是0/1
  const flip = i % 2;
  const flop = (i + 1) % 2;

  globalPeelUniforms.uPrevDepthTexture.value = targets[flop]; //进行了深度剥离

  renderer.setRenderTarget(targets[flip]);
  renderer.setClearColor(0, 0);
  renderer.clear(true, true, false);
  renderer.render(scene, camera, targets[flip], false);

  compositeMaterial.uniforms.uTextureA.value = targets[flip];
  renderer.render(compositeScene, camera, targets[2]);

  renderer.setRenderTarget(targets[flip]);
  renderer.setClearColor(0xffffff, 1); //不写这个 会让场景变亮一些
  renderer.clear(true, true, false);

  scene.overrideMaterial = depthMaterial;
  renderer.render(scene, camera, targets[flip], false);
  scene.overrideMaterial = null;
}