Three.js使用PlaneBufferGeometry实现指针时着色器编译失败求助

以下是导致着色器编译失败的三处问题及对应修复方法：

• ShaderMaterial着色器参数赋值错误
  你在main.js中初始化ShaderMaterial时，误将fragmentShader参数赋值为顶点着色器内容：

  const material = new THREE.ShaderMaterial({
      vertexShader: vertexShader,
      fragmentShader: vertexShader, // 此处为错误赋值
      uniforms:{
          progress: {type: "f", value:0}
      },
      side:THREE.DoubleSide
  })
  

  修复为正确的片元着色器变量即可：

  fragmentShader: fragmentShader
  

• 顶点着色器使用未声明的变量
  vertex.glsl中直接使用了size变量，但你既没有在着色器中声明该变量的类型，也没有在Geometry或Uniforms中定义对应值，导致编译报错。
  可选修复方案二选一：
  1. 直接写死点大小：将gl_PointSize = size*10;修改为gl_PointSize = 10.0;
  2. 动态配置点大小：在vertex.glsl顶部添加变量声明uniform float size;，同时在ShaderMaterial的uniforms中添加对应配置：

  uniforms:{
      progress: {type: "f", value:0},
      size: {type: "f", value: 1.0}
  }
  

• 片元着色器函数声明不符合GLSL规范
  GLSL要求main函数必须明确指定返回值类型为void，你提供的fragment.glsl中缺少该声明：

  main() { // 缺少返回值类型声明
      gl_FragColor = vec4(1,0,0,1);
  }
  

  修复为规范声明即可：

  void main() {
      gl_FragColor = vec4(1,0,0,1);
  }
  

完成以上三处修改后，着色器即可正常编译运行。

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