ThreeJS离屏渲染介绍和运用

一.定义

帧缓冲区对象 可以用来代替颜色缓冲区或深度缓冲区。绘制在帧缓冲区的对象并不会直接显示在canvas上，你可以先对帧缓冲区的内容进行一些处理再显示，或者直接用其中的内容作为纹理图像。在帧缓冲区中进行绘制的过程又称为离屏绘制 。
(以上摘自<<WebGL编程指南>>)
而ThreeJS中的WebGLRenderTarget就是对这个自定义帧缓冲区的封装，这一技术的经典应用就是我们常听到的"屏幕后处理"

二.封装和简单用法

来看一下WebGLRenderTarget的封装

function WebGLRenderTarget( width, height, options ) {

	this.width = width;
	this.height = height;

	// 模板测试
	this.scissor = new Vector4( 0, 0, width, height );
	this.scissorTest = false;

	// 设置视口
	this.viewport = new Vector4( 0, 0, width, height );

	options = options || {};

	// 创建纹理
	this.texture = new Texture( undefined, undefined, options.wrapS, options.wrapT, options.magFilter, options.minFilter, options.format, options.type, options.anisotropy, options.encoding );

	// 设置纹理属性
	this.texture.image = {};
	this.texture.image.width = width;
	this.texture.image.height = height;

	// 渐变纹理属性
	this.texture.generateMipmaps = options.generateMipmaps !== undefined ? options.generateMipmaps : false;
	this.texture.minFilter = options.minFilter !== undefined ? options.minFilter : LinearFilter;

	// 是否启用 深度 模板 纹理 附件
	this.depthBuffer = options.depthBuffer !== undefined ? options.depthBuffer : true;
	this.stencilBuffer = options.stencilBuffer !== undefined ? options.stencilBuffer : true;
	this.depthTexture = options.depthTexture !== undefined ? options.depthTexture : null;
}

来看一下用法：

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

通过WebGL渲染目标WebGLRenderTarget的纹理属性.texture可以获得WebGL渲染器的渲染结果，该属性返回的结果是一个纹理对象THREE.Texture.
即我们可以用target.texture作为材质的map属性，也可以把其当作常规texture任意使用

三.实际运用

通过了解以上的定义和封装，我们可以联想到利用WebGLRenderTarget可以分别保存多个临时效果，然后用这里临时效果可以组装成不一样的叠加效果,例如：

接下来我们将来解析一下这个效果是如何实现的，仔细观察此粒子中主要包含两个效果：
1.曲线变换效果 2.鼠标移动时产生的水波纹效果

此例中有三处用到了离屏渲染，即使用了WebGLRenderTarget三次，我们来分别把其渲染在屏幕上，就能发现其中的秘密。

鼠标效果:

可以看到使用了一张纹理图，随着鼠标一直生成且有放大扩散的带有透明度的白圈效果。

噪声效果：

这里就是常规的噪声效果，随机性高，偏于做连续性的随机。

intro图纹理效果：

这里就很巧妙的用了不同的intro图在旋转，可以看到有很多种颜色不一的intro图。结合动画思考一下，如果我们一直在同一个点取色，那么颜色是不是就可以出现随机性的变换呢，而且因为图片本身存在颜色的连续性，所以可以做成一种颜色过渡变化的效果。

拿到这三个离屏渲染的结果后，我们可以把它理解成有三个一直变化的texture,作为已知输入变量，然后我们可以在自定义shader中，对这些纹理做一些随机叠加处理，得到看似不可思议的效果。

主Shader定义：

this._shader = {
    vertexShader: _glMain._parts.getShader("shader/display_vtx.js"),
    fragmentShader: _glMain._parts.getShader("shader/display_frg.js"),
    uniforms: {
        texture: {
            value: _glMain._world._dummy._render.texture       //intro图
        },
        noise: {
            value: _glMain._world._noise._render.texture       //噪声纹理
        },
        mouseEffect: {
            value: _glMain._world._mouseEffect._render.texture  //鼠标效果纹理
        },
        meEase: {
            value: this._meEase                                 //该值的大小直接影响鼠标效果的偏移强度
        },
        time: {
            value: this._time                                   //帧变化参数
        },
        ease: {
            value: this._ease                                   //影响速度
        },
        alpha: {
            value: this._alpha                                  //控制透明值                                            
        },
        distA: {                                                //距离A 叠加参数   影响运动振幅
            value: .64
        },
        distB: {                                                //距离B 叠加参数   影响周期
            value: 2.5
        },
        mfBlack: {                                              //影响鼠标效果透明值 值越大，越透明
            value: .3
        }
    },
    transparent: !0,
    side: THREE.DoubleSide
}

可以看到定义中的texture,noise,mouseEffect就是上面提到的三个WebGLRenderTarget。

在下面shader中，我们把其当作参数参与了不同的计算：

void main()
{
	vec3 noiseC = texture2D( noise, vec2(vUv.x * 0.3, vUv.y * 0.3) ).rgb;	//取noise中某个点的像素的颜色

	vec2 ppp = -1.0 + 2.0 * vUv;// * 0.9;// * 0.85;   (0,1) => (-1,1)

	float wscale = 1.6;//waveStrength;//1.58;//2.3;

	ppp += 0.1 * cos( ( 1.5 * wscale ) * ppp.yx + 1.1 * time + vec2(0.1,1.1) );
	ppp += 0.1 * cos( ( 2.3 * wscale ) * ppp.yx + 1.3 * time + vec2(3.2,3.4) );
	ppp += 0.1 * cos( ( 2.2 * wscale ) * ppp.yx + 1.7 * time + vec2(1.8,5.2) );

	//叠加四次 distA进场从1.5 => 0.6 distB进场从1.5=>2.5 即进场时振幅减小 周期变小
	ppp += distA * cos( ( distB * wscale ) * ppp.yx + 1.4 * time + vec2(6.3,3.9) );

	float r = length( ppp );// * 1.0;//* strength;		//返回向量ppp的长度

															//当ease=1.0 则vx=vUv.x vy=vUv.y
	float vx = (vUv.x * ease) + (r * (1.0 - ease));			//ease作为因子 影响速度vx 常规ease=0.06   0.06x + 0.94r
	float vy = (vUv.y * ease) + (0.0 * (1.0 - ease));		//ease作为因子 影响速度vy 0.06y

	//TEST
	vec4 mfColor = texture2D( mouseEffect, vUv );			//取鼠标效果纹理的 某个像素值

	float strength = meEase;								//强度 0.075

	float mfSin = sin(mfColor.r);									//mfSin 取鼠标效果红色分量做sin, (0,sin(1)) => (0.0.84)
	vec2 effectUv = vec2(vx, vy) + strength * vec2(mfSin, mfSin);	//效果以红色分量为数值 叠加一个变化，且速度在叠加 得到uv值 （实际是鼠标影响偏移值）(0,0.063)

	vec4 col1 = texture2D( texture, effectUv );						//texture 取的是scene上渲染的texture(实际取得是靠游戏的像素值)

	float aa = col1.a * alpha - ( noiseC.r * 0.6 * ( 1.0 - ease ) );	//减去noise中的红色分量*系数 得到透明度系数
	vec3 mixCol = col1.rgb;

	gl_FragColor = vec4( mixCol, aa * ( 1.0 - mfColor.r * mfBlack ) );	//得到旧scene上 某个位置的像素，透明度也有一定的变化 即看起来是在移动一样 静止时值=0.3
																		//静止时中间mfColor.r = 1  即中间透明 周围有一定透明度
}

四.小结

1.离屏渲染适用于需要运用多个复合效果，或者对某效果渲染之后再处理的需求

2.离屏渲染的管理方案

//添加target渲染方法到列表
addEnterFrame(target, func) {
    let e = {
        _target: target,
        _function: func
    };
    this._enterFrameList.push(e)
}

//从渲染列表中移除
removeEnterFrame(target) {
    this.isFrameLock = !0;
    let index = -1;
    let length = this._enterFrameList.length;
    for (var s = 0; s < length; s++)
        if (this._enterFrameList[s]._target === target) {
            index = s;
            break
        }
    if(index != -1){
        this._enterFrameList.splice(index, 1)       //删除
    }  
    this.isFrameLock = false;
}

即可以将所有的离屏渲染对象的方法，用数组管理起来。需要用到时添加都列表，不用时移除，或者还可以修改循环渲染的方法。例如上面例子中，鼠标上滑和下滑是不一样的效果就是通过该管理方法实现。