WebGL 通过索引绘制答案

【问题标题】：WebGL draw through indicesWebGL 通过索引绘制
【发布时间】：2015-07-04 08:48:52
【问题描述】：

我是 WebGL 的新手，我正在尝试使用两个三角形和索引绘制一个正方形。但是我没有做对。我一直在查看代码和示例，但缺少一些东西。我试图让事情变得非常简单。

<html>
<head>        
    <meta charset="utf-8"/>   
        <script id="vertex" type="x-shader">
            attribute vec2 aVertexPosition;
            void main() {
                    gl_Position = vec4(aVertexPosition, 0.0, 1.0);
            }
    </script>  
    <script id="fragment" type="x-shader">
             #ifdef GL_ES
                 precision highp float;
             #endif

             uniform vec4 uColor;

             void main() {
                gl_FragColor = uColor;
             }
    </script>        
    <script type="text/javascript">
            function init(){
                var canvas = document.getElementById("mycanvas");
                var gl = canvas.getContext("experimental-webgl");   
                gl.viewport(0, 0, canvas.width, canvas.height);
                gl.clearColor(0.5, 0.0, 0.2, 1);
                gl.clear(gl.COLOR_BUFFER_BIT);

                var v = document.getElementById("vertex").firstChild.nodeValue;
                var f = document.getElementById("fragment").firstChild.nodeValue;

                var vs = gl.createShader(gl.VERTEX_SHADER);
                gl.shaderSource(vs, v);
                gl.compileShader(vs);

                var fs = gl.createShader(gl.FRAGMENT_SHADER);
                gl.shaderSource(fs, f);
                gl.compileShader(fs);

                var program = gl.createProgram();
                gl.attachShader(program, vs);
                gl.attachShader(program, fs);
                gl.linkProgram(program);

                var vertices = [ -0.5, -0.5, -0.5, 0.5,  0.5, 0.5, 0.5, -0.5];
                var indices = [ 3, 2, 1, 3, 1, 0 ]

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

                var ebuffer = gl.createBuffer();
                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ebuffer);                                       
                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);



                var itemSize = 2;
                var numItems = vertices.length / itemSize;


                gl.useProgram(program);

                program.uColor = gl.getUniformLocation(program, "uColor");
                gl.uniform4fv(program.uColor, [0.0, 0.3, 0.0, 1.0]);

                program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
                gl.enableVertexAttribArray(program.aVertexPosition);
                gl.vertexAttribPointer(program.aVertexPosition, itemsize, gl.UNSIGNED_SHORT, false, 0, 0);

                gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
        }



</script>

</head>
<body onload="init()">
        <canvas id="mycanvas" width="800" height="500"></canvas>
</body>

背景出现，但正方形不出现。

下载的代码运行，所以我知道错误仅在我的代码中。

【问题讨论】：

标签： javascript webgl

【解决方案1】：

您的 gl.vertexAttribPointer 不正确。您创建了一个 Float32Array，但您告诉 webGL 使用无符号短裤并且您拼错了 itemSize。

更改为gl.vertexAttribPointer(program.aVertexPosition, itemSize, gl.FLOAT, false, 0, 0);，它对我有用。

【讨论】：

【解决方案2】：

您的顶点数组缺少最后一个元素的坐标。始终，顶点数组应该有每个顶点的 3 个坐标并且是 3 的倍数。

您的索引数组，应将哪些顶点连接为三角形以使您显示几何图形。试试这个。这应该有效。

function init(){
                var canvas = document.getElementById("mycanvas");
                var gl = canvas.getContext("experimental-webgl");   
                gl.viewport(0, 0, canvas.width, canvas.height);
                gl.clearColor(0.5, 0.0, 0.2, 1);
                gl.clear(gl.COLOR_BUFFER_BIT);

                var v = document.getElementById("vertex").firstChild.nodeValue;
                var f = document.getElementById("fragment").firstChild.nodeValue;

                var vs = gl.createShader(gl.VERTEX_SHADER);
                gl.shaderSource(vs, v);
                gl.compileShader(vs);

                var fs = gl.createShader(gl.FRAGMENT_SHADER);
                gl.shaderSource(fs, f);
                gl.compileShader(fs);

                var program = gl.createProgram();
                gl.attachShader(program, vs);
                gl.attachShader(program, fs);
                gl.linkProgram(program);

                var vertices = [ -0.5, 0, 0, 0,  0.5, 0, 0.5, 0, 0];
                var indices = [ 0, 1, 2 ]

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

                var ebuffer = gl.createBuffer();
                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ebuffer);                                       
                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);



                var itemSize = 2;
                var numItems = vertices.length / itemSize;


                gl.useProgram(program);

                program.uColor = gl.getUniformLocation(program, "uColor");
                gl.uniform4fv(program.uColor, [0.0, 0.3, 0.0, 1.0]);

                program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
                gl.enableVertexAttribArray(program.aVertexPosition);
                gl.vertexAttribPointer(program.aVertexPosition, itemsize, gl.UNSIGNED_SHORT, false, 0, 0);

                gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0);
        }

【讨论】：

这段代码也只显示背景，就像我的代码一样，而不是正方形。我的顶点着色器也有“属性vec2 aVertexPosition；”我也在用二维绘图。因为我是初学者，所以我没有深入的知识，但据我所知，如果我在 2D 中绘图，我不需要第三个坐标。如果我错了，请纠正我。
请帮忙。我被卡住了。