javascript - 错误 WebGL useProgram: 程序无效

问题描述

我有这个 webgl 的代码，我正在尝试编译和使用这个程序，但是当我制作 gl.useProgram(); 我收到此错误：WebGL：INVALID_OPERATION：useProgram：程序无效。

我不知道如何解决这个问题，或者我在 vertexshader 或 fragmentshader 中是否有任何错误。

    const canvas = document.querySelector("#glCanvas");
    // Initialize the GL context
    const gl = canvas.getContext("webgl");

    // If we don't have a GL context, give up now

    if (!gl) {
        alert('Unable to initialize WebGL. Your browser or machine may not support it.');
        return;
    }
    
  
  // Vertex shader program
    const vsSource = `
    layout (location = 0) in vec4 VertexPosition;
    layout (location = 1) in vec3 VertexNormal;
    layout (location = 2) in vec2 TextureCoord;

    out vec3 Position;
    out vec3 Normal;
    out vec2 TexCoords;

    uniform mat4 uModelViewMatrix;
    uniform mat4 uNormalMatrix;
    uniform mat4 uMVP;

    void main()
    {

        Position = vec3 (uModelViewMatrix * VertexPosition);
        Normal = normalize(uNormalMatrix * VertexNormal);

        TexCoords = TextureCoord;

        gl_Position = uMVP * VertexPosition;
    
    }
  `;


    const fsSource = `
    in vec3 Position;
    in vec3 Normal;
    in vec2 TexCoords;

    layout (location = 0) out vec4 FragColor;

    struct TMaterial {
        sampler2D Diffuse;
        sampler2D Specular;
        float Shininess;
    };
    struct TLight {
        vec3 Position;

        vec3 Ambient;
        vec3 Diffuse;
        vec3 Specular;
    };

    uniform TMaterial Material;
    uniform TLight Light;

    vec3 Phong(){
        vec3 n = normalize(Normal);
        vec3 s = normalize(Light.Position - Position);
        vec3 v = normalize(-Position);
        vec3 r = reflect(-s, n);

        vec3 Ambient = Light.Ambient * vec3(texture(Material.Diffuse, TexCoords));
        vec3 Diffuse = Light.Diffuse * max(dot(s, n), 0.0) * vec(texture(Material.Diffuse, TexCoords));

        vec3 Specular = Light.Specular * pow(max(dot(r, v), 0.0), Material.Shininess) * vec3(texture(Material.Specular, TexCoords));

        return Ambient + Diffuse + Specular;
    }

    void main()
    {
      FragColor = vec3 (Phong(), 0.0);
    }
  `;


    //Crear el programa y linkarlo a los shaders que acabamos de crear
    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

    gl.shaderSource(vertexShader, vsSource);
    gl.shaderSource(fragmentShader, fsSource);

    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);


    const programLightingMap = gl.createProgram();
    gl.attachShader(programLightingMap, vertexShader);
    gl.attachShader(programLightingMap, fragmentShader);
    gl.linkProgram(programLightingMap);


    gl.useProgram(programLightingMap);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL</title>
    <script src="https://cdn.jsdelivr.net/npm/gl-matrix@3.2.1/gl-matrix-min.js"></script>

    <script src="Shader.js"></script>

</head>

<body>
    <h1>WebGL!!</h1>
    <canvas id="glCanvas" width="640" height="480"></canvas>
    <hr>
    <p id="diplayData"></p>
</body>

</html>

编辑：我得到了着色器的这个错误：

ERROR: 0:2: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:3: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:4: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:6: 'out' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:7: 'out' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:8: 'out' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:18: '*' : wrong operand types - no operation '*' exists that takes a left-hand operand of type 'uniform highp 4X4 matrix of float' and a right operand of type 'in highp 3-component vector of float' (or there is no acceptable conversion)
ERROR: 0:18: 'normalize' : no matching overloaded function found
ERROR: 0:18: '=' : dimension mismatch
ERROR: 0:18: 'assign' : cannot convert from 'const mediump float' to 'out highp 3-component vector of float'

标签： javascriptopengl-eswebgl

解决方案

您的错误意味着您正在尝试在 WebGL1 中使用 WebGL2 着色器

'in' ：仅在 GLSL ES 3.00 及更高版本中支持的存储限定符

意味着你使用in了

in vec4 position;`

就像它说的那样，这仅在 GLSL ES 3.00 及更高版本中有效

要制作 shaer GLSL ES 3.00，第一行必须是

#version 300 es

但是如果这样做你会得到一个#version 300 es在 WebGL1 中无效的新错误

你有2个选择

切换到 WebGL2。

getContext将调用更改为使用webgl2，webgl然后添加#version 300 es为着色器的第一行
重写着色器以使用 GLSL 1.0

在这种情况下，请使用 WebGL1。

您的第 18 行也需要类似于

    Normal = normalize(mat3(uNormalMatrix) * VertexNormal);

或者

    Normal = normalize((uNormalMatrix * vec4(VertexNormal, 0)).xyz);

javascript - 错误 WebGL useProgram: 程序无效

问题描述

解决方案

推荐阅读