Question

我试图根据迭代Cantor＆amp ;; WebGL初学者的指导来绘制一个简单的正方形。布兰登琼斯，但在第二课中陷入困境。

我试图画一个正方形，但我的控制台显示错误信息如下：

WebGL: INVALID_OPERATION: drawArrays: attribs not setup correctly

我尝试的内容如下：

我的代码示例

<html>
<head>
<title>WebGL-Lesson One</title>
<style type="text/css">
canvas {
    border: 2px dotted black;
}
</style>
<script id="code-js" type="text/javascript">
    var gl = null;

    function getGlContext() {
        var my_canvas = document.getElementById("my_canvas");
        var names = [ "webgl", "experimental-webgl", "webkit-3d", "moz-webgl" ];
        for ( var i = 0; i < names.length; ++i) {
            try {
                gl = my_canvas.getContext(names[i]);
            } catch (e) {
            }
            if (gl)
                break;
        }
        if (gl == null) {
            alert("empty canvas")
        } else {
            drawing();
        }
    }

    function drawing() {
        var vertices = [ -50.0, 50.0, 0.0, -50.0, -50.0, 0.0, 50.0, -50.0, 0.0,
                50.0, 50.0, 0.0 ];
        var indices = [ 3, 2, 1, 3, 1, 0 ]

        var myVBOBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, myVBOBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices),
                gl.STATIC_DRAW);

        var aVertexPosition = (0,0,0);

        gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);

        gl.enableVertexAttribArray(aVertexPosition);

        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    //  gl.bindBuffer(gl.ARRAY_BUFFER, null);

        var myIBOBuffer = gl.createBuffer();

        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, myIBOBuffer);

        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices),gl.STATIC_DRAW);

    //  gl.bindBuffer(gl.ARRAY_BUFFER, null);


    }
</script>
<script id="shader-fs" type="x-shader/xfragment"></script>
<script id="shader-vs" type="x-shader/x-vertex"></script>
</head>
<body onload="getGlContext()">

    <canvas id="my_canvas" width="700" height="500"></canvas>

</body>
</html>

Answer 1

您的着色器脚本似乎为空。您至少需要一个基本的顶点和片段着色器。您还需要加载，编译它们并创建着色器程序，然后您需要调用gl.useProgram来设置您的attribs，获得统一的位置，并设置统一的值。我建议尝试these lessons，他们为我工作。

如何使用WebGL绘制正方形

1 个答案: