webgl 为什么在着色器中使用版本 300 时出现错误

Question

我正在制作 webgl 应用程序。我想在我的着色器中使用版本 300 es，我确定浏览器支持这个版本，但是我尝试使用时遇到了一些错误。

这是我的代码。

var VertexShaderCode = `
    #version 300 es
    precision mediump float;
    in vec3 vertexPos;
    uniform vec2 orthoValues;
    in vec2 offset;
    mat4 curProjMat=mat4(vec4(0.0),vec4(0.0),0.0,0.0,-0.05,0.0,-1.0,1.0,0.0,1.0);

    void main(void) {
      curProjMat[0][0] = 2.0  /  orthoValues.x;
      curProjMat[1][1] = -2.0  / orthoValues.y;
      gl_Position= curProjMat*vec4(vertexPos.x+offset.x, vertexPos.y+offset.y, 1.0, 1.0);
    }`
    var vertexShader = gl.createShader(gl.VERTEX_SHADER)
    gl.shaderSource(vertexShader, VertexShaderCode)
    gl.compileShader(vertexShader)

    var FragmentShaderCode = 
     `#version 300 es
      precision lowp float;
      out vec4 outColor;

      void main() {
        outColor = vec4(1.0,1.0,1.0,1.0);
      }
     `


    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
    gl.shaderSource(fragmentShader, FragmentShaderCode)
    gl.compileShader(fragmentShader)
    var shaderProgram = gl.createProgram()
    gl.attachShader(shaderProgram, vertexShader)
    gl.attachShader(shaderProgram, fragmentShader)
    gl.linkProgram(shaderProgram)
    return shaderProgram

然后我在构造函数中分配这个着色器。

  gl.useProgram(this.Program2D)
  this.P2DvertexPos = gl.getAttribLocation(this.Program2D, 'vertexPos')
  this.P2DoffsetLoc=gl.getAttribLocation(this.Program2D, 'offset')
  this.P2DOrtoValues = gl.getUniformLocation(this.Program2D, 'orthoValues')

我一分配这个，就会收到这些错误。

INVALID_OPERATION: useProgram: program not valid
`INVALID_OPERATION: getAttribLocation: program not linked`
INVALID_OPERATION: getUniformLocation: program not linked

Answer 1

在编译着色器和链接程序时，您应该检查是否成功，如果不成功，则打印错误。

编译着色器后调用的着色器

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  // there was an error
  console.error(gl.getShaderInfoLog(shader));
 ...

链接您调用的程序后的程序

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  // there was an error
  console.error(gl.getProgramInfoLog(program));
 ...

加上你开始被告知问题是什么

const gl = document.createElement('canvas').getContext('webgl2');
if (!gl) alert('need webgl2');

var VertexShaderCode = `
    #version 300 es
    precision mediump float;
    in vec3 vertexPos;
    uniform vec2 orthoValues;
    in vec2 offset;
    mat4 curProjMat=mat4(vec4(0.0),vec4(0.0),0.0,0.0,-0.05,0.0,-1.0,1.0,0.0,1.0);

    void main(void) {
      curProjMat[0][0] = 2.0  /  orthoValues.x;
      curProjMat[1][1] = -2.0  / orthoValues.y;
      gl_Position= curProjMat*vec4(vertexPos.x+offset.x, vertexPos.y+offset.y, 1.0, 1.0);
    }`
    var vertexShader = gl.createShader(gl.VERTEX_SHADER)
    gl.shaderSource(vertexShader, VertexShaderCode)
    gl.compileShader(vertexShader)
    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
      // there was an error
      console.error(gl.getShaderInfoLog(vertexShader));
    }

    var FragmentShaderCode = 
     `#version 300 es
      precision lowp float;
      out vec4 outColor;

      void main() {
        outColor = vec4(1.0,1.0,1.0,1.0);
      }
     `


    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
    gl.shaderSource(fragmentShader, FragmentShaderCode)
    gl.compileShader(fragmentShader)
    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
      // there was an error
      console.error(gl.getShaderInfoLog(fragmentShader));
    }
    
    
    var shaderProgram = gl.createProgram()
    gl.attachShader(shaderProgram, vertexShader)
    gl.attachShader(shaderProgram, fragmentShader)
    gl.linkProgram(shaderProgram)
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
      // there was an error
      console.error(gl.getProgramInfoLog(shaderProgram));
    }
    
//    return shaderProgram

一旦你这样做，它会告诉你#version 300 es 必须是第一行，但对于你的顶点着色器，它不是第一行，它之前有一个空行。

const gl = document.createElement('canvas').getContext('webgl2');
if (!gl) alert('need webgl2');

var VertexShaderCode = `#version 300 es
    precision mediump float;
    in vec3 vertexPos;
    uniform vec2 orthoValues;
    in vec2 offset;
    mat4 curProjMat=mat4(vec4(0.0),vec4(0.0),0.0,0.0,-0.05,0.0,-1.0,1.0,0.0,1.0);

    void main(void) {
      curProjMat[0][0] = 2.0  /  orthoValues.x;
      curProjMat[1][1] = -2.0  / orthoValues.y;
      gl_Position= curProjMat*vec4(vertexPos.x+offset.x, vertexPos.y+offset.y, 1.0, 1.0);
    }`
    var vertexShader = gl.createShader(gl.VERTEX_SHADER)
    gl.shaderSource(vertexShader, VertexShaderCode)
    gl.compileShader(vertexShader)
    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
      // there was an error
      console.error(gl.getShaderInfoLog(vertexShader));
    }

    var FragmentShaderCode = 
     `#version 300 es
      precision lowp float;
      out vec4 outColor;

      void main() {
        outColor = vec4(1.0,1.0,1.0,1.0);
      }
     `


    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
    gl.shaderSource(fragmentShader, FragmentShaderCode)
    gl.compileShader(fragmentShader)
    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
      // there was an error
      console.error(gl.getShaderInfoLog(fragmentShader));
    }
    
    
    var shaderProgram = gl.createProgram()
    gl.attachShader(shaderProgram, vertexShader)
    gl.attachShader(shaderProgram, fragmentShader)
    gl.linkProgram(shaderProgram)
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
      // there was an error
      console.error(gl.getProgramInfoLog(shaderProgram));
    }
    
//    return shaderProgram

您可能会发现these articles 很有用。它们涵盖了第一篇文章中的错误检查。令人惊讶的是，无论您在哪里了解到这不是首先涵盖的内容之一。