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

Issue implementing GLSL shaders in Three.js

本文关键字：问题 GLSL Three js 实现      更新时间：2023-09-26

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

我收到的信息是:

3。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，你可以简单地从顶点着色器中删除它
  • 你需要vNormal在片段着色器，只需添加一个varying vec3 vNormal在你的片段着色器，然后使用vNormal在计算
相关文章：