three.js WebGLRenderTarget

今天郭先生说一说WebGLRenderTarget，它是一个缓冲，就是在这个缓冲中，视频卡为正在后台渲染的场景绘制像素。它用于不同的效果，例如把它做为贴图使用或者图像后期处理。线案例请点击博客原文。

话不多说，下来看看他的属性了方法。

1. WebGLRenderTarget的属性和方法

WebGLRenderTarget的构造器有三个参数，分别是width，height和options。宽高就是RenderTarget的高，设置的同时也会把它们赋值给texture.image的width和height属性。options包含以下属性

属性	默认值	描述
wrapS	ClampToEdgeWrapping	包裹模式--使用RepeatWrapping，纹理将简单地重复到无穷大。使用ClampToEdgeWrapping纹理中的最后一个像素将延伸到网格的边缘。使用MirroredRepeatWrapping，纹理将重复到无穷大，在每次重复时将进行镜像。
wrapT	ClampToEdgeWrapping	同上
magFilter	LinearFilter	放大滤镜--NearestFilter返回与指定纹理坐标（在曼哈顿距离之内）最接近的纹理元素的值。LinearFilter是默认值，返回距离指定的纹理坐标最近的四个纹理元素的加权平均值
minFilter	LinearFilter	缩小滤镜--NearestFilter返回与指定纹理坐标（在曼哈顿距离之内）最接近的纹理元素的值。NearestMipmapNearestFilter选择与被纹理化像素的尺寸最匹配的mipmap，并以NearestFilter（最靠近像素中心的纹理元素）为标准来生成纹理值。NearestMipmapLinearFilter选择与被纹理化像素的尺寸最接近的两个mipmap，并以NearestFilter为标准来从每个mipmap中生成纹理值。最终的纹理值是这两个值的加权平均值。LinearFilter是默认值，返回距离指定的纹理坐标最近的四个纹理元素的加权平均值。LinearMipmapNearestFilter选择与被纹理化像素的尺寸最匹配的mipmap，并以LinearFilter（最靠近像素中心的四个纹理元素的加权平均值）为标准来生成纹理值。LinearMipmapLinearFilter选择与被纹理化像素的尺寸最接近的两个mipmap，并以LinearFilter为标准来从每个mipmap中生成纹理值。最终的纹理值是这两个值的加权平均值。
format	RGBAFormat	AlphaFormat 丢弃红、绿、蓝分量，仅读取Alpha分量。RedFormat丢弃绿色和蓝色分量，只读取红色分量RedIntegerFormat丢弃绿色和蓝色分量，只读取红色分量。texel被读取为整数而不是浮点。（只能与WebGL 2呈现上下文一起使用）。RGFormat丢弃alpha和blue组件并读取红色和绿色组件。（只能与WebGL 2呈现上下文一起使用）。RGIntegerFormat丢弃alpha和blue组件并读取红色和绿色组件。texel被读取为整数而不是浮点。（只能与WebGL 2呈现上下文一起使用）。RGBFormat 丢弃Alpha分量，仅读取红、绿、蓝分量。RGBIntegerFormat丢弃alpha组件并读取红色、绿色和蓝色组件。（只能与WebGL 2呈现上下文一起使用）。RGBAFormat将读取红、绿、蓝和Alpha分量。RGBAIntegerFormat读取红色、绿色、蓝色和alpha分量。texel被读取为整数而不是浮点。（只能与WebGL 2呈现上下文一起使用）。LuminanceFormat 将每个元素作为单独的亮度分量来读取。将其转换为范围限制在[0,1]区间的浮点数，然后通过将亮度值放入红、绿、蓝通道，并将1.0赋给Alpha通道，来组装成一个RGBA元素。LuminanceAlphaFormat 将每个元素同时作为亮度分量和Alpha分量来读取。和上面LuminanceFormat的处理过程是一致的，除了Alpha分量具有除了1.0以外的值。RGBEFormat 与 RGBAFormat 是相同的。DepthFormat将每个元素作为单独的深度值来读取，将其转换为范围限制在[0,1]区间的浮点数。它是DepthTexture的默认值。DepthStencilFormat将每个元素同时作为一对深度值和模板值来读取。其中的深度分量解释为DepthFormat。模板分量基于深度+模板的内部格式来进行解释。
type	UnsignedByteType	THREE.UnsignedByteType，THREE.ByteType，THREE.ShortType，THREE.UnsignedShortType，THREE.IntType，THREE.UnsignedIntType，THREE.FloatType，THREE.HalfFloatType，THREE.UnsignedShort4444Type，THREE.UnsignedShort5551Type，THREE.UnsignedShort565Type，THREE.UnsignedInt248Type。这些常量用于纹理的type属性，这些属性必须与正确的格式相对应。详情请查看下方。
anisotropy	Texture.anisotropy	沿着轴，通过具有最高纹素密度的像素的样本数。默认情况下，这个值为1。设置一个较高的值将会产生比基本的mipmap更清晰的效果，代价是需要使用更多纹理样本。使用renderer.getMaxAnisotropy() 来查询GPU中各向异性的最大有效值；这个值通常是2的幂。
encoding	LinearEncoding	THREE.LinearEncoding,THREE.sRGBEncoding,THREE.GammaEncoding,THREE.RGBEEncoding,THREE.LogLuvEncoding,THREE.RGBM7Encoding,THREE.RGBM16Encoding,THREE.RGBDEncoding,THREE.BasicDepthPacking,THREE.RGBADepthPacking。如果编码类型在纹理已被一个材质使用之后发生了改变，你需要来设置Material.needsUpdate为true来使得材质重新编译。
depthBuffer	true	深度缓冲器
stencilBuffer	false	模具缓冲区

WebGLRenderTarget的属性

属性	描述
width	渲染目标宽度
height	渲染目标高度
scissor	渲染目标视口内的一个矩形区域，区域之外的片元将会被丢弃
scissorTest	表明是否激活了剪裁测试
viewport	渲染目标的视口
texture	纹理实例保存这渲染的像素，用作进一步处理的输入值
depthBuffer	渲染到深度缓冲区。默认true
stencilBuffer	渲染到模具缓冲区。默认false
depthTexture	如果设置，那么场景的深度将会被渲染到慈纹理上。默认是null

WebGLRenderTarget的方法

方法	描述
setSize	设置渲染目标的大小
clone	创建一个渲染目标副本
copy	采用传入的渲染目标的设置
dispose	发出一个处理事件

2 使用WebGLRenderTarget作为贴图案例

1 做一个网格

首先做一个几何体，这里我们以THREE.Line为例

let pointArr = [];

let colorArr = [];

const points = GeometryUtils.hilbert2D(new THREE.Vector3( 0, 0, 0 ), 10, 3);

for(let i=0; i<points.length; i++) {

    pointArr.push(points[i].x, points[i].y, points[i].z);

    colorArr.push(Math.random(), Math.random(), Math.random());

}

const geometry = new THREE.BufferGeometry();

const positionAttribute = new THREE.Float32BufferAttribute( pointArr, 3 );

geometry.setAttribute( 'position', positionAttribute );

geometry.center();

const colorAttribute = new THREE.BufferAttribute( new Float32Array( colorArr ), 3 );

colorAttribute.setUsage( THREE.DynamicDrawUsage );

geometry.setAttribute( 'color', colorAttribute );                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

const material = new THREE.LineBasicMaterial( { vertexColors: true } );

line = new THREE.Line( geometry, material );

sceneRTT.add( line );

这就做好了一个line，这里说一下scene是我们的主场景，camera是拍摄主场景的相机，sceneRTT是renderTarget的场景，cameraRTT是rennderTarget的相机。GeometryUtils.hilbert2D是生成希尔伯特曲线的方法。

2. 创建render target

我们创建一个render target，里面的参数不清楚的可以多次尝试一下

target = new THREE.WebGLRenderTarget(200, 200, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat });

target.viewport = new THREE.Vector4(10,10,180,180);

这里我们设置视口起点从(10, 10)开始，宽高分别为180的矩形。

3. 创建渲染器和要贴图的Mesh

接下来我们创建渲染器和要贴图的Mesh

renderer = new THREE.WebGLRenderer({antialias: true});

renderer.setSize(window.innerWidth, window.innerHeight);

this.$refs.box.appendChild(renderer.domElement);

let boxGeom = new THREE.BoxBufferGeometry(100, 100, 100);

let boxMate = new THREE.MeshBasicMaterial({map: target.texture});

let boxMesh = new THREE.Mesh(boxGeom, boxMate);

scene.add(boxMesh)

直接调用target的Texture属性来做材质的贴图

4. 渲染

这里要渲染render target的场景，这样调用target.texture才能返回一个正经的贴图，同时我们让这个贴图随时间变换，最后渲染主场景，代码如下。

onst colorAttribute = line.geometry.getAttribute( 'color' );

const l = colorAttribute.count;

for(let i=0; i<l; i++) {

    const h = ( ( offset + i ) % l ) / l * 20;

    color.setHSL(h, 0.8, 0.5);

    colorAttribute.setX( i, color.r );

    colorAttribute.setY( i, color.g );

    colorAttribute.setZ( i, color.b );

}

colorAttribute.needsUpdate = true;

offset -= 0.2;

renderer.setRenderTarget( target );

renderer.setClearColor(0xffddff);

renderer.clear();

renderer.render( sceneTT, cameraTT );

renderer.setRenderTarget( null );

renderer.setClearColor(0x000000);

renderer.render( scene, camera );

this.globalID = requestAnimationFrame(this.render);

这样就可以把render target作为贴图使用了。

转载请注明地址：郭先生的博客