如何使用 WebGL 绘制正方形答案

【问题标题】：How to draw a square using WebGL如何使用 WebGL 绘制正方形
【发布时间】：2013-11-26 22:46:25
【问题描述】：

我试图根据 Diego Cantor 和 Brandon Jones 的书 WebGL Beginner's guid 绘制一个简单的正方形，但在第二课中卡住了。

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

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>

【问题讨论】：

您是否考虑过使用中间件库？我喜欢玩 pixi.js，它是一个带有画布后备的 webGL 渲染库。如果你的目标是构建一个游戏引擎，这可能是值得考虑的事情，它可以处理所有样板工作。因此，让它工作的时间更少，而实际工作的时间更多。
+1 @tsturzl 我刚开始学习这个东西..，不太了解 *.js 框架。但是，正如您所说，意图是创建一些好的网络应用程序（游戏本身:) :D）。无论如何，谢谢。
我推荐these lessons。它们从比其他课程更基础的水平开始，将帮助您真正了解正在发生的事情。
@gman ：当我按照您提供的本课进行尝试时，得到 ERROR : Uncaught ReferenceError: createShaderFromScriptElement is not defined
你是说this page 给你一个错误？或者您是说您下载了该页面并尝试在本地运行它并给您一个错误？您需要在本地复制 this script 才能在本地运行它。 This article explains that script

标签： javascript html opengl-es webgl

【解决方案1】：

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

【讨论】：