javascript - 在 Three.js 中实现 GLSL 着色器时出现问题

Question

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

我收到的消息是:

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

};

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

Answer 1

这里的消息非常清楚，您在顶点着色器中声明一个变化并影响它的值，但不要在片段着色器中使用它。有两种可能的修复方法:

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