webgl着色器代码只能通过script标签引入吗?

Question

webgl着色器代码只能通过script标签引入吗?

我希望能将着色器代码通过字符串或者单文件的形式引入, 但是不成功.只有通过script标签引入时程序才能正常运行

<script type="shader-source" id="vertex-shader">
  void main(){
     //声明顶点位置
     gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
     //声明要绘制的点的大小。
     gl_PointSize = 10.0;
   }
</script>

 <!-- 片元着色器源码 -->
    <script type="shader-source" id="fragment-shader">
       void main(){
         //设置像素颜色为红色
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    </script>

const vertexShaderSource = document.getElementById("vertex-shader")!.innerHTML;
//const vertexShaderSource = `
//   void main(){
//     //声明顶点位置
//     gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
//     //声明要绘制的点的大小。
//     gl_PointSize = 10.0;
//   }
// `

  const fragmentShaderSource = document.getElementById("fragment-shader")!.innerHTML;
// const fragmentShaderSource = `
//   void main(){
//     //设置像素颜色为红色
//     gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
//   }
// `

  const gl: WebGLRenderingContext = canvas.getContext("webgl")!;

  // 创建顶点着色器对象
  const vertexShader = gl.createShader(gl.VERTEX_SHADER)!;
  // 将着色器源码分配给顶点着色器
  gl.shaderSource(vertexShader, vertexShaderSource)!;
  // 编译顶点着色器程序
  gl.compileShader(vertexShader)!;

  // 创建片元着色器对象
  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)!;
  // 将着色器源码分配给片元着色器
  gl.shaderSource(fragmentShader, fragmentShaderSource);
  gl.compileShader(fragmentShader);

  // 创建着色器程序
  const program = gl.createProgram()!;
  // 将顶点着色器挂在着色器程序上
  gl.attachShader(program, vertexShader);
  // 将片元着色器挂在着色器程序上
  gl.attachShader(program, fragmentShader);
  // 链接着色器程序
  gl.linkProgram(program);

  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    const info = gl.getProgramInfoLog(program);
    throw new Error(info!);
  }

  // 启用着色器程序
  gl.useProgram(program);

如上代码可以正常运行, 但是如果使用字符串保存, 如

 const fragmentShaderSource = `
   void main(){
     //设置像素颜色为红色
     gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
   }

就会报错

Uncaught (in promise) Error: Fragment shader is not compiled. 

Answer 1

报错内容是说你的片元着色器没有经过编译，这很可能是编译出错导致的。
编译出错在浏览器控制台中通常以黄色文字显示，或者你也可以使用 webGL 的相关接口获取编译错误的信息（忘了是啥接口了😥，getXxxParameter啥的）。
或者你可以把着色器代码片段中的注释内容去掉或改成块注释，再运行。