javascript - 顶点着色器中未声明具有相同名称但类型不同的变量,或片段着色器中静态使用的变量:fogDepth
问题描述
我不太擅长着色器。我需要雾在水中反射。我使用 Three.js sky_sun_shader。我在片段着色器中添加了以下内容:
三.ShaderChunk[“fog_pars_fragment”],
三.ShaderChunk [“fog_fragment”],
在 r71 中,这可以正常工作。在 r101 中,当我使用块时出现错误:
THREE.WebGLProgram: shader error: 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')
};
解决方案
当从 ShaderChunks 嵌入代码时,您需要注意在顶点和片段着色器中应保持一致的不同声明。
在您的情况下,您使用了 2 个片段着色器fog_pars_fragment 和fog_fragment 的代码
因此,您还需要添加匹配的顶点着色器fog_pars_vertex 和fog_vertex 的块(到您的顶点着色器中)。fog_pars_vertex 声明缺失的变量
// fog_pars_vertex.glsl
#ifdef USE_FOG
varying float fogDepth;
#endif
// fog_vertex.glsl
#ifdef USE_FOG
fogDepth = -mvPosition.z;
#endif
推荐阅读
- kubernetes - 在 kubectl 编辑后,旧的 ReplicaSet 不会被新的 ReplicaSet 替换
- javascript - 自动完成仅保存来自第一个 AJAX 表单提交的数据
- c++ - 在 C++ 中为指向指针的指针构建一个包装类
- android - 在android中,点击mime type nfc标签时启动了空活动,然后从服务器获取数据?
- sql-server - SQL - 删除重复项
- node.js - 在 node.js 中创建 Firebase 存储访问令牌
- assembly - 32 位编译器程序集 nasm 中两个 64 位定点数的乘法
- excel - 在活动的 Excel 文档中使用 VBA 从 powershell 连接到 Excel
- sql - 如何根据分组的 A 列获取 B 列的值
- firebase - Firebase Cloud Function 只能由另一个函数触发