Как добавить несколько шейдеров вершин в ShaderMaterial?

Question

При создании ShaderMaterial в THREEJS, вы передаете фрагмент и вершинные шейдеры:

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 rendertargets, которые затем объединяются в один кадр. Пример: http://threejs.org/examples/#webgl_rtt.