顶点与片元着色器编译失败问题排查求助

问题背景 #

使用React Three Fiber(R3F)开发程序化云效果，参考Codrops开源仓库，经过数小时排查仍未解决编译报错问题，相关代码及错误信息如下：

顶点着色器代码 #

uniform float rotation;
uniform vec2 center;
#include <common>
#include <uv_pars_vertex>
#include <fog_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>

varying vec2 vUv;

void main() {
    // #include <uv_vertex>
  vUv = uv;

    vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
    vec2 scale;
    scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );
    scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );

    vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale;
    vec2 rotatedPosition;
    rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;
    rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;
    mvPosition.xy += rotatedPosition;
    gl_Position = projectionMatrix * mvPosition;
    #include <logdepthbuf_vertex>
    #include <clipping_planes_vertex>
    #include <fog_vertex>
}

片元着色器代码 #

#pragma glslify: fbm3d = require('glsl-fractal-brownian-noise/3d')
#pragma glslify: snoise3 = require('glsl-noise/simplex/3d')
#pragma glslify: levels = require('./levels.glsl')

uniform sampler2D uTxtShape;
uniform sampler2D uTxtCloudNoise;
uniform float uTime;

uniform float uFac1;
uniform float uFac2;
uniform float uTimeFactor1;
uniform float uTimeFactor2;
uniform float uDisplStrenght1;
uniform float uDisplStrenght2;

varying vec2 vUv;

void main() {
    vec2 newUv = vUv;

    vec4 txtNoise1 = texture2D(uTxtCloudNoise, vec2(vUv.x + uTime * 0.0001, vUv.y - uTime * 0.00014)); // noise txt
    vec4 txtNoise2 = texture2D(uTxtCloudNoise, vec2(vUv.x - uTime * 0.00002, vUv.y + uTime * 0.000017 + 0.2)); // noise txt

    float noiseBig = fbm3d(vec3(vUv * uFac1, uTime * uTimeFactor1), 4)+ 1.0 * 0.5;
    newUv += noiseBig * uDisplStrenght1;

    float noiseSmall = snoise3(vec3(newUv * uFac2, uTime * uTimeFactor2));

    newUv += noiseSmall * uDisplStrenght2;

    vec4 txtShape = texture2D(uTxtShape, newUv);

    float alpha = levels((txtNoise1 + txtNoise2) * 0.6, 0.2, 0.4, 0.7).r;
    alpha *= txtShape.r;

    gl_FragColor = vec4(vec3(0.95,0.95,0.95), alpha);
}

控制台错误信息 #

react_devtools_backend.js:4026 THREE.WebGLProgram: Shader Error 1282 - VALIDATE_STATUS false

Program Info Log: Vertex shader is not compiled.

VERTEX

ERROR: 0:57: '/' : syntax error


  52: #ifdef USE_SKINNING
  53:   attribute vec4 skinIndex;
  54:   attribute vec4 skinWeight;
  55: #endif
  56: 
> 57: /static/media/cloudVert.41ee4f902e06f79518ac.glsl
FRAGMENT

ERROR: 0:69: '/' : syntax error


  64: vec4 LinearTosRGB( in vec4 value ) {
  65:   return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a );
  66: }
  67: vec4 linearToOutputTexel( vec4 value ) { return LinearTosRGB( value ); }
  68: 
> 69: /static/media/cloudFrag.6e430067cf79fd904c61.glsl

问题分析与解决方案 #

问题根源 #

错误信息显示，编译时把着色器文件的资源路径（如/static/media/cloudVert...glsl）当成了代码的一部分插入到了编译后的着色器中，导致出现/语法错误。这是因为构建工具没有正确处理GLSL文件的导入，没有将文件内容注入到着色器代码，而是输出了文件路径。

解决步骤 #

1. 配置构建工具处理GLSL文件
   • 若使用Vite：安装vite-plugin-glsl插件，在vite.config.js中配置插件，确保GLSL文件被加载为文本内容而非资源路径。
   • 若使用Webpack：使用raw-loader或glsl-loader处理.glsl文件，在webpack.config.js中添加规则，将GLSL文件解析为字符串。
2. 验证glslify指令处理
   确保构建工具能正确解析#pragma glslify指令，将依赖的模块（如glsl-fractal-brownian-noise）内容嵌入到着色器代码中，而非保留原指令或错误插入路径。
3. 检查编译后的着色器代码
   在浏览器开发者工具的WebGL inspector中查看生成的完整着色器代码，确认是否存在多余的文件路径字符串，这是直接导致语法错误的原因。

内容的提问来源于stack exchange，提问作者oooogz