Wie kann ich einem ShaderMaterial mehrere Vertex-Shader hinzufügen?

Question

Wenn ein ShaderMaterial in THREEJS erstellen, übergeben Sie das Fragment und Vertex-Shadern:

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 
}); 

Aber ich war nach einem Tutorial, das einen zweiPass Vertex-Shader verwendet:

//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); 
} 

und

//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); 
} 

Aber wie kann ich einen Two-Pass-Vertex-Shader zu einem Threejs-Material hinzufügen?

Ich bin immer noch versuchen zu lernen, wie man mit Shadern arbeiten, bitte mir so sagen, wenn ich in der falschen Richtung gehe ...

Answer 1

Ein Shader-Programm immer nur 1 Vertexshader und 1 fragmentshader hat in webgl. Wenn 2 Durchlauf-Renderings erforderlich sind, dann gibt es 2 Programme, die beide über denselben Datensatz von der Szene ausgeführt werden.

Am wahrscheinlichsten in Ihrem 2-Pass-Rendering erhalten Sie 2 Programme, die auf 2 Rendertargets rendern, die dann in einem einzelnen Frame kombiniert werden. Ein Beispiel dafür ist http://threejs.org/examples/#webgl_rtt.