为什么这个 WebGL 着色器类型无效？

Question

免责声明：我今天才开始使用 WebGL。

我正在尝试使用 WebGL 上下文代替 "standard" 2d 上下文在 HTML5 canvas 上绘制一些基本内容。

我正在使用 developer.Mozilla.org WebGL 文档作为参考，并开始编写一些代码。

我发现渲染"clipspace"坐标需要顶点着色器，需要片段着色器用于渲染正在渲染的像素的颜色。根据 WebGL 维基百科页面，着色器似乎直接用 GLSL 编码，它是 C 的高级方言。在 Mozilla 文档中，这些代码在 JavaScript 中被字符串化，但有很多方法可以做到这一点。 ..

这是我目前的代码，但我运行遇到的错误与无法识别 canvas' WebGL 上下文的 VERTEX_SHADER 枚举有关，看到上下文的文档和原型有这样一个枚举，我想知道是什么导致了这个错误或者为什么我会看到这个错误。

代码如下，感谢大家的帮助。

<html>
<head>
    <title>webgl try</title>
</head>
<body>
<canvas width="600" height="400" id="canvas" style="border: 1px dotted;"> </canvas>

<script>
    var canvas = document.getElementById("canvas");
    var gl = canvas.getContext("webgl");

    function createShader (gl, sourceCode, type) {
      var shader = gl.createShader(type);
      gl.shaderSource(shader, sourceCode);
      gl.compileShader(shader);

      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        var info = gl.getShaderInfoLog(shader);
        throw "could not compile web gl shader. \n\n" + info;
      }
    }

    var vertexShaderSource =
      "attribute vec4 position;\n"
      "void main() {\n"+
      "  gl_Position = position;\n"+
      "}\n";

    var fragmentShaderSource =
      "void main() {\n"+
      "  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n"+
      "}\n";

    /*
     * create program
     */

    var program = gl.createProgram();

    // ERROR COMES ON THIS LINE WHEN ATTEMPTING TO ACCESS THE VERTEX_SHADER ENUM: WebGL: 
    // **INVALID_ENUM: createShader: invalid shader type**
    var vertexShader = gl.createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
    var fragmentShader = gl.createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);

    // Attach pre-existing shaders
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);

    if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
       var info = gl.getProgramInfoLog(program);
       throw "Could not compile WebGL program. \n\n" + info;
    }
</script>
</body>
</html>

Answer 1

您的代码包含语义错误。

应该是

var vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
var fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);

因为你调用的是上面的 createShader 函数，而不是 webgl-context 的方法。

您的 createShader 应该 return 它创建的着色器：

function createShader (gl, sourceCode, type) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, sourceCode);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        var info = gl.getShaderInfoLog(shader);
        throw "could not compile web gl shader. \n\n" + info;
    }

    return shader;
}

您还错过了 vertexShaderSrc 中的 +。

为什么这个 WebGL 着色器类型无效？

Why is this WebGL shader type invalid?

html

javascript

canvas

opengl-es

webgl