Three.js WebGLRenderTarget 对象

Question

WebGL 渲染目标对象 WebGLRenderTarget 实现了 WebGL 的离屏渲染功能，如果你有一定的 WebGL 或 OpenGL 基础，对帧缓冲区、离线渲染、后处理等概念应该是不陌生的。

.render() 方法

WebGL 渲染器 WebGLRenderer 渲染方法 .render() 的参数 ( Scene, Camera, WebGLRenderTarget, forceClear )。

• Scene：要渲染的场景对象
• Camera：场景对象对应的相机对象
• WebGLRenderTarget：如果参数指定了 WebGL 渲染目标 WebGLRenderTarget，渲染的图像结果保存到该对象，或者说保存到 GPU 自定义帧缓冲区中，不会显示到 Canvas 画布上； 如果没有指定渲染目标，也就是没有该参数，渲染结果会直接显示到 Canvas 画布上，或者说渲染结果保存到 Canvas 画布对应的默认帧缓冲区中.

无渲染目标 Canvas 显示

执行下面代码会把场景 Scene 的渲染结果保存到 Canvas 画布对应的默认帧缓冲区中，形象点说就是可以直接显示到 Cnavas 画布上，显示器会自动读取 CPU 默认帧缓冲区上面的图像数据显示。

  renderer.render(scene, camera);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
// 渲染结果canvas元素插入到body元素中
document.body.appendChild(renderer.domElement);
// .domElement属性返回的一个canvas画布对象，保存了render方法的渲染结果
console.log(renderer.domElement);

有渲染目标 Canvas不显示

执行下面代码 WebGL 渲染器的渲染结果，也就是一张图像，不会直接显示在 Canvas 画布上，从 Three.js 的角度阐述，渲染结果的 RGBA 像素数据存储到了WebGL渲染目标对象WebGLRenderTarget中，通过目标对象的纹理属性 .texture 可以获得渲染结果的 RGBA 像素数据，也就是一个 Three.js 的纹理对象 THREE.Texture，可以作为材质对象颜色贴图属性map的属性值；从原生 WebGL 的角度阐述，就是渲染结果的 RGBA 像素值存储到了 GPU 一个自定义的帧缓冲区中，屏幕默认不会直接读取该缓冲区中的像素数据，通过WebGL的特定API可以获取，更多的信息可以百度 WebGL 或 OpenGL 离屏渲染。

// 创建一个WebGL渲染目标对象WebGLRenderTarget
// 设置渲染结果(一帧图像)的像素为500x500
var target = new THREE.WebGLRenderTarget(500, 500);
// 设置特定target的时候，render渲染结果不会显示在canvas画布上
renderer.render(scene, camera,target); //执行渲染操作

.texture

通过 WebGL 渲染目标 WebGLRenderTarget 的纹理属性 .texture 可以获得 WebGL 渲染器的渲染结果，该属性返回的结果是一个纹理对象 THREE.Texture，可以作为材质Material对象颜色贴图属性 map 的属性。

var material = new THREE.MeshLambertMaterial({
  // WebGL渲染目标对象属性.texture返回一张纹理贴图，也就是scene在camera下的渲染结果
  map: target.texture,
});