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有用。他们在第一篇文章中介绍了检查错误。无论您在何处发现这都不是最初介绍的内容之一，这都是令人惊讶的。