在 Three.js 中实现 GLSL 着色器的问题答案

【问题标题】：Issue implementing GLSL shaders in Three.js在 Three.js 中实现 GLSL 着色器的问题
【发布时间】：2017-02-04 05:42:33
【问题描述】：

我在这里重新创建了代码：http://inear.se/tornado/ 使用他们正在使用的 Three 版本； r50。但我想把这项技术带入新的 Three.js 的世界。我的问题是关于着色器的。

我收到的信息是：

THREE.WebGLProgram: gl.getProgramInfoLog() 警告：片段着色器未读取顶点着色器“vNormal”的输出

这是我的代码 - 请帮忙？我也重组了他加载着色器的方式（警告消息在此更改之前）。我试图模仿我见过的其他模式：这是我重写的：

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" )

};

这是一个非常小众的问题，但我能得到的任何帮助都会很棒。我开始将变量类型归零，也许我没有以预期的方式持久化它。

【问题讨论】：

您创建了一个可变变量 (vNormal)，它应该在顶点着色器和片段着色器之间共享。您从未在片段着色器中声明或使用它。
OOOHH;我知道了。那么'uniform vec3 vNormal'是正确的声明吗？好吧，它需要修改，所以我猜uniform不是正确的声明，因为它给了我： THREE.WebGLShader: gl.getShaderInfoLog() vertex ERROR: 0:68: 'assign' : l-value required "vNormal" (不能修改制服）
不，和顶点着色器一样。 varying vec3 vNormal;。查看this question 了解有关不同变量类型的更多信息。

标签： javascript opengl-es three.js glsl webgl

【解决方案1】：

这里的信息很清楚，您在顶点着色器中声明了一个 variing 并影响它一个值，但不要在片段着色器中使用它。有两种可能的修复方法：

片段着色器中不需要vNormal，只需将其从顶点着色器中移除即可
您需要片段着色器中的vNormal，只需在片段着色器中添加varying vec3 vNormal，然后在计算中使用vNormal

【讨论】：