我不是很擅长着色器。我需要雾在水中反射。我使用Three.js sky_sun_shader。我在片段着色器中添加了以下内容:
THREE.ShaderChunk [“ fog_pars_fragment”],
THREE.ShaderChunk [“ fog_fragment”],
在r71中,这很好。在r101中,当我使用块时,出现错误:
THREE.WebGLProgram:着色器错误:0 35715 false gl.getProgramInfoLog在顶点着色器中未声明名称相同但类型不同的变化,或在片段着色器中静态使用的变化:fogDepth] >>
我该如何解决?
着色器的代码:
THREE.ShaderLib['water'] = { uniforms: THREE.UniformsUtils.merge( [ THREE.UniformsLib[ "fog" ], { "normalSampler": { type: "t", value: null }, "mirrorSampler": { type: "t", value: null }, "alpha": { type: "f", value: 1.0 }, "time": { type: "f", value: 0.0 }, "size": { type: "f", value: 1.0 }, "kalbedo": { type: "f", value: 1.0 }, "distortionScale": { type: "f", value: 20.0 }, "textureMatrix" : { type: "m4", value: new THREE.Matrix4() }, "sunColor": { type: "c", value: new THREE.Color( 0x7F7F7F ) }, "sunDirection": { type: "v3", value: new THREE.Vector3( 0.70707, 0.70707, 0 ) }, "eye": { type: "v3", value: new THREE.Vector3( 0, 0, 0 ) }, "waterColor": { type: "c", value: new THREE.Color( 0x555555 ) } } ] ), vertexShader: [ 'uniform mat4 textureMatrix;', 'uniform float time;', 'varying vec4 mirrorCoord;', 'varying vec3 worldPosition;', 'void main()', '{', ' mirrorCoord = modelMatrix * vec4( position, 1.0 );', ' worldPosition = mirrorCoord.xyz;', ' mirrorCoord = textureMatrix * mirrorCoord;', ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join('\n'), fragmentShader: [ 'precision highp float;', 'uniform sampler2D mirrorSampler;', 'uniform float alpha;', 'uniform float time;', 'uniform float size;', 'uniform float kalbedo;', 'uniform float distortionScale;', 'uniform sampler2D normalSampler;', 'uniform vec3 sunColor;', 'uniform vec3 sunDirection;', 'uniform vec3 eye;', 'uniform vec3 waterColor;', 'varying vec4 mirrorCoord;', 'varying vec3 worldPosition;', 'vec4 getNoise( vec2 uv )', '{', ' vec2 uv0 = ( uv / 103.0 ) + vec2(time / 17.0, time / 29.0);', ' vec2 uv1 = uv / 107.0-vec2( time / -19.0, time / 31.0 );', ' vec2 uv2 = uv / vec2( 8907.0, 9803.0 ) + vec2( time / 101.0, time / 97.0 );', ' vec2 uv3 = uv / vec2( 1091.0, 1027.0 ) - vec2( time / 109.0, time / -113.0 );', ' vec4 noise = ( texture2D( normalSampler, uv0 ) ) +', ' ( texture2D( normalSampler, uv1 ) ) +', ' ( texture2D( normalSampler, uv2 ) ) +', ' ( texture2D( normalSampler, uv3 ) );', ' return noise * 0.5 - 1.0;', '}', 'void sunLight( const vec3 surfaceNormal, const vec3 eyeDirection, float shiny, float spec, float diffuse, inout vec3 diffuseColor, inout vec3 specularColor )', '{', ' vec3 reflection = normalize( reflect( -sunDirection, surfaceNormal ) );', ' float direction = max( 0.0, dot( eyeDirection, reflection ) );', ' specularColor += pow( direction, shiny ) * sunColor * spec;', ' diffuseColor += max( dot( sunDirection, surfaceNormal ), 0.0 ) * sunColor * diffuse;', '}', THREE.ShaderChunk[ "common" ], THREE.ShaderChunk[ "fog_pars_fragment" ], 'void main()', '{', ' vec4 noise = getNoise( worldPosition.xz * size );', ' vec3 surfaceNormal = normalize( noise.xzy * vec3( 1.5, 1.0, 1.5 ) );', ' vec3 diffuseLight = vec3(0.0);', ' vec3 specularLight = vec3(0.0);', ' vec3 worldToEye = eye-worldPosition;', ' vec3 eyeDirection = normalize( worldToEye );', ' sunLight( surfaceNormal, eyeDirection, 100.0, 2.0, 0.5, diffuseLight, specularLight );', ' float distance = length(worldToEye);', ' vec2 distortion = surfaceNormal.xz * ( 0.001 + 1.0 / distance ) * distortionScale;', ' vec3 reflectionSample = vec3( texture2D( mirrorSampler, mirrorCoord.xy / mirrorCoord.z + distortion ) );', ' float theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );', ' float rf0 = 0.3;', ' float reflectance = rf0 + ( 1.0 - rf0 ) * pow( ( 1.0 - theta ), 5.0 );', ' vec3 scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ) * waterColor;', ' vec3 albedo = mix( sunColor * diffuseLight * 0.3 + scatter, ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance ) ;', ' vec3 outgoingLight = albedo *kalbedo;', THREE.ShaderChunk[ "fog_fragment" ], ' gl_FragColor = vec4( outgoingLight, alpha );', '}' ].join('\n')
};
我不是很擅长着色器。我需要雾在水中反射。我使用Three.js sky_sun_shader。我将以下内容添加到片段Shader中:THREE.ShaderChunk [“ fog_pars_fragment”],...
当从ShaderChunks嵌入代码时,您需要注意变化的声明,这些声明在顶点和片段着色器之间应保持一致。