I have reproduced the code here at using Three.js version r50. However, I am looking to adapt this technique for the latest version of Three.js. My specific question pertains to the shaders.
The error message that I am encountering reads as follows:
THREE.WebGLProgram: gl.getProgramInfoLog() WARNING: Output of vertex shader 'vNormal' not read by fragment shader
Below is my revised code - could you please assist me? I have also made changes to the way in which shaders are loaded (the warning message appeared before this modification). I attempted to follow similar patterns found in other examples. Here is my updated code:
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 may be a specialized inquiry, but any guidance would be greatly appreciated. I suspect the issue lies with the varying variable type and potentially how it is being handled.