在Three.js中實現GLSL着色器的問題

我在這裏重新創建代碼：http://inear.se/tornado/使用他們正在使用的三個版本; R50。但我想將這種技術帶入新的Three.js世界。我的問題是關於着色器。在Three.js中實現GLSL着色器的問題

我收到的消息是：

THREE.WebGLProgram: gl.getProgramInfoLog() WARNING: Output of vertex shader 'vNormal' not read by fragment shader

這裏是我的代碼 - 請幫助？我重新調整了加載着色器的方式（警告消息先於此更改）。我試圖模仿我見過的其他模式：這是我改寫的：

THREE.DisplacementShader = { 

vertexShader: [ 
    'uniform float time;', 
    'uniform vec2 scale;', 
    'uniform float uTwist;', 
    'varying vec2 vUv;', 
    'varying vec3 vNormal;', 
    'uniform vec2 uShapeBias;', 
    'uniform float uTurbulence;', 

    '#ifdef VERTEX_TEXTURES', 
     'uniform sampler2D tHeightMap;', 
     'uniform float uDisplacementScale;', 
     'uniform float uDisplacementBias;', 
    '#endif', 

    'vec4 DoTwist(vec4 pos, float t)', 
    '{', 
     'float st = sin(t);', 
     'float ct = cos(t);', 
     'vec4 new_pos;', 

     'new_pos.x = pos.x*ct - pos.z*st;', 
     'new_pos.z = pos.x*st + pos.z*ct;', 

     'new_pos.y = pos.y;', 
     'new_pos.w = pos.w;', 

     'return(new_pos);', 
    '}', 

    'void main(void) {', 

     'vUv = uv;', 
     'vNormal = normalize(normalMatrix * normal);', 

     //change matrix 
     'vec4 mPosition = modelMatrix * vec4(position, 1.0);', 

     'mPosition.x *= 1.0 - uShapeBias.x*(vUv.y);', 
     'mPosition.y *= 10.0;', 
     'mPosition.z *= 1.0 - uShapeBias.y*(vUv.y);', 

     'float height = -500.0;', 

     //twist 
     'float angle_rad = uTwist * 3.14159/180.0;', 

     'float ang = (position.y-height*1.0)/height * angle_rad;', 

     'vec4 twistedPosition = DoTwist(mPosition, ang);', 
     'vec4 twistedNormal = DoTwist(vec4(vNormal,1.0), ang);', 

     //change matrix 
     'vec4 mvPosition = viewMatrix * twistedPosition;', 

     '#ifdef VERTEX_TEXTURES', 
      'vec3 dv = texture2D(tHeightMap, vUv).xyz;', 
      'float df = uDisplacementScale * dv.x + uDisplacementBias;', 
      'vec4 displacedPosition = vec4(twistedNormal.xyz * df, 0.0) + mvPosition;', 
      'gl_Position = projectionMatrix * displacedPosition;', 
     '#else', 
      'gl_Position = projectionMatrix * mvPosition;', 
     '#endif', 

    '}', 
].join("\n"), 

fragmentShader: [ 
    'varying vec2 vUv;', 

    'uniform sampler2D tHeightMap;', 
    'uniform float uSmoke;', 
    'uniform float uOpacity;', 
    'uniform vec3 uColor1;', 
    'uniform vec3 uColor2;', 
    'uniform float uScreenHeight;', 


    'void main(void) {', 

     'vec4 heightColor = texture2D(tHeightMap, vUv);', 

     'vec3 gradient1 = uColor1;', 
     'vec3 gradient2 = uColor2;', 
     'vec3 fireSumColor = (gradient1+gradient2)*heightColor.r;', 

     //smoke 
     'gl_FragColor = vec4(mix(fireSumColor, vec3(0.0), uSmoke),1.0);', 

     'float depth = (gl_FragCoord.z/gl_FragCoord.w);', 
     'float fogFactor = smoothstep(1000.0, 6000.0, depth);', 

     'gl_FragColor = mix(gl_FragColor, vec4(vec3(1.0), gl_FragColor.w), fogFactor) * uOpacity;', 

    '}' 
].join("\n")

};

這是一個很好的問題，但我可以得到的任何幫助都很棒。我開始關注不同的變量類型，也許我不會以預期的方式堅持它。

來源

2016-09-26 Steven Dana

您創建了應該在頂點着色器和片段着色器之間共享的變量變量（'vNormal'）。你從未聲明它或在片段着色器中使用它。 –

OOOHH;我懂了。是正確的聲明，然後'統一vec3 vNormal'？嗯，它需要修改，所以我猜統一是不正確的聲明，因爲它給我：THREE.WebGLShader：gl.getShaderInfoLog（）頂點錯誤：0:68：'分配'：需要l值「vNormal 「（不能修改制服） –

不可以，就像頂點着色器一樣。 '變化vec3 vNormal;'。看看[這個問題]（http://stackoverflow.com/questions/17537879/in-webgl-what-are-the-differences-between-an-attribute-a-uniform-and-a-varying）瞭解更多信息在不同的變量類型上。 –

那麼這裏的信息很清楚，你聲明變化在你的頂點着色器，並影響它的值，但不要在片段着色器中使用它。有兩種可能的解決方法：

你不需要在片段着色器的vNormal，你可以簡單地從頂點着色器中取出
您需要在片段着色器的vNormal，只是增加一個varying vec3 vNormal您的片段着色器，然後在計算中使用vNormal

來源

2016-09-27 08:28:46 Zouch

在Three.js中實現GLSL着色器的問題

回答

相關問題