Issue implementing GLSL shaders in Three.js

Question

I've recreated code here: http://inear.se/tornado/ using the version of Three they're using; r50. But I'm wanting to bring this technique into the world of new Three.js. My question is regarding the shaders.

The message I receive is:

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

Here's my code – please help? I've restructured the way he loads his shaders as well (the warning message preceeded this change). I tried to mimic other patterns I have seen: Here's what I've rewritten:

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

};

This is a pretty niche question but any help I could get would be wonderful. I'm starting to zero in on the varying variable type and maybe I'm not persisting it in the expected way.

You created a varying variable (`vNormal`) which should be shared between the vertex and fragment shaders. You never declared it or used it in the fragment shader. — Mike Cluck, Sep 26 '16 at 18:56
OOOHH; I see. is the correct declaration then 'uniform vec3 vNormal'? Well, it needs be modified, so I guess uniform isn't the correct declaration since its gives me: THREE.WebGLShader: gl.getShaderInfoLog() vertex ERROR: 0:68: 'assign' : l-value required "vNormal" (can't modify a uniform) — Steven Dana, Sep 26 '16 at 19:05
Nope, just the same as the vertex shader. `varying vec3 vNormal;`. Check out [this question](http://stackoverflow.com/questions/17537879/in-webgl-what-are-the-differences-between-an-attribute-a-uniform-and-a-varying) for more information on the different variable types. — Mike Cluck, Sep 26 '16 at 19:07

score 2 · Answer 1 · answered Sep 27 '16 at 08:28

Well the message is pretty clear here, you declare a varying in your vertex shader and affect it a value but don't use it in the fragment shader. There are two possible fixes :

You don't need the vNormal in the fragment shader, you can simply remove it from the vertex shader
You need the vNormal in the fragment shader, just add a varying vec3 vNormal in your fragment shader and then use vNormal in the computations

Issue implementing GLSL shaders in Three.js

1 Answers1