webgl, почему я получаю ошибки при использовании версии 300 в шейдерах

Question

Я делаю приложение webgl. Я хочу использовать версию 300 в своем шейдере, я уверен, что браузер поддерживает эту версию, но я получаю некоторые ошибки при попытке использовать.

Это мой код.

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

Вы можете найти эти статьи полезными. Они охватывают проверку на ошибки в самой первой статье. Удивительно, где бы вы ни узнали, это не было одной из первых вещей, о которых рассказывалось.