在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着色器的问题

回答

相关问题