如何使用WebGL繪制正方形

Question

我試圖根據迭戈·坎托爾和布蘭登·瓊斯寫的《 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來設置屬性，獲取統一的位置並設置統一的值。 我建議嘗試這些課程，它們對我有用。

如何使用WebGL繪制正方形

問題描述

1 個解決方案

解決方案1
3 已采納 2013-11-26 04:53:15

如何使用WebGL繪制正方形

問題描述

1 個解決方案

解決方案1 3 已采納 2013-11-26 04:53:15

解決方案1
3 已采納 2013-11-26 04:53:15