如何将多个顶点着色器添加到ShaderMaterial？

Question

当创建在THREEJS一个ShaderMaterial，你通过片段和顶点着色器：

new THREE.ShaderMaterial({ 
    uniforms: { 
     time: { value: 1.0 }, 
     resolution: { value: new THREE.Vector2() } 
    }, 
    attributes: { 
     vertexOpacity: { value: [] } 
    }, 
    vertexShader: document.getElementById('v-shader').textContent, 
    fragmentShader: document.getElementById('f-shader').textContent 
}); 

但我下面所使用双通道的顶点着色器教程：

//Horizontal 
attribute vec4 a_position; 
attribute vec2 a_texCoord; 

varying vec2 v_texCoord; 
varying vec2 v_blurTexCoords[14]; 

void main() 
{ 
    gl_Position = a_position; 
    v_texCoord = a_texCoord; 
    v_blurTexCoords[ 0] = v_texCoord + vec2(-0.028, 0.0); 
    v_blurTexCoords[ 1] = v_texCoord + vec2(-0.024, 0.0); 
    v_blurTexCoords[ 2] = v_texCoord + vec2(-0.020, 0.0); 
    v_blurTexCoords[ 3] = v_texCoord + vec2(-0.016, 0.0); 
    v_blurTexCoords[ 4] = v_texCoord + vec2(-0.012, 0.0); 
    v_blurTexCoords[ 5] = v_texCoord + vec2(-0.008, 0.0); 
    v_blurTexCoords[ 6] = v_texCoord + vec2(-0.004, 0.0); 
    v_blurTexCoords[ 7] = v_texCoord + vec2(0.004, 0.0); 
    v_blurTexCoords[ 8] = v_texCoord + vec2(0.008, 0.0); 
    v_blurTexCoords[ 9] = v_texCoord + vec2(0.012, 0.0); 
    v_blurTexCoords[10] = v_texCoord + vec2(0.016, 0.0); 
    v_blurTexCoords[11] = v_texCoord + vec2(0.020, 0.0); 
    v_blurTexCoords[12] = v_texCoord + vec2(0.024, 0.0); 
    v_blurTexCoords[13] = v_texCoord + vec2(0.028, 0.0); 
} 

和

//Vertical 
attribute vec4 a_position; 
attribute vec2 a_texCoord; 

varying vec2 v_texCoord; 
varying vec2 v_blurTexCoords[14]; 

void main() 
{ 
    gl_Position = a_position; 
    v_texCoord = a_texCoord; 
    v_blurTexCoords[ 0] = v_texCoord + vec2(0.0, -0.028); 
    v_blurTexCoords[ 1] = v_texCoord + vec2(0.0, -0.024); 
    v_blurTexCoords[ 2] = v_texCoord + vec2(0.0, -0.020); 
    v_blurTexCoords[ 3] = v_texCoord + vec2(0.0, -0.016); 
    v_blurTexCoords[ 4] = v_texCoord + vec2(0.0, -0.012); 
    v_blurTexCoords[ 5] = v_texCoord + vec2(0.0, -0.008); 
    v_blurTexCoords[ 6] = v_texCoord + vec2(0.0, -0.004); 
    v_blurTexCoords[ 7] = v_texCoord + vec2(0.0, 0.004); 
    v_blurTexCoords[ 8] = v_texCoord + vec2(0.0, 0.008); 
    v_blurTexCoords[ 9] = v_texCoord + vec2(0.0, 0.012); 
    v_blurTexCoords[10] = v_texCoord + vec2(0.0, 0.016); 
    v_blurTexCoords[11] = v_texCoord + vec2(0.0, 0.020); 
    v_blurTexCoords[12] = v_texCoord + vec2(0.0, 0.024); 
    v_blurTexCoords[13] = v_texCoord + vec2(0.0, 0.028); 
} 

但是，如何添加双向顶点着色器到Threejs材质？

我还在努力学习如何使用着色器工作，所以请告诉我，如果我在错误的方向我要去......

Answer 1

着色器程序始终只有1个vertexshader和1个fragmentshader在WebGL的。当2遍渲染是必需的时候，那么有2个程序在场景中的相同数据集上执行。

最有可能在你的2遍渲染中，你会得到2个渲染到2个rendertarget的程序，然后在一个帧中进行合并。 一个例子是http://threejs.org/examples/#webgl_rtt。