Question

我有这个非常简单（但很大）的代码无效。三角形没有显示。它只传递3个顶点已乘以正交矩阵。在顶点着色器中不执行任何操作，并在片段着色器中绘制白色。

<head>
    <script type="text/javascript">
        var gl;
        _main_web = function() {
            gl = document.getElementById("canvas").getContext("experimental-webgl");
            gl.clearColor(1,0,0,1);
            gl.enable(gl.DEPTH_TEST);
            gl.viewport(0, 0, 640, 480);
            gl.clearDepth(1);

            buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
            gl.bufferData(gl.ARRAY_BUFFER,
new Float32Array([[-1, -1, -0.12000000476837158, 1, 
0, 1, -0.12000000476837158, 1, 
1, -1, -0.12000000476837158, 1]]),
            gl.STATIC_DRAW);

            vert_shader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vert_shader,"attribute vec4 vertex;void main(void) {gl_Position = vertex;}\n");
            gl.compileShader(vert_shader);
            if( !gl.getShaderParameter(vert_shader,gl.COMPILE_STATUS ) ) {
                throw 0;
            }

            frag_shader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(frag_shader,"void main(void) { gl_FragColor = vec4(1.0,1.0,1.0,1.0); } \n");
            gl.compileShader(frag_shader);
            if( !gl.getShaderParameter(frag_shader,gl.COMPILE_STATUS) ) {
                throw 1;
            }

            program = gl.createProgram();
            gl.attachShader(program,vert_shader);
            gl.attachShader(program,frag_shader);
            gl.linkProgram(program);
            if( !gl.getProgramParameter(program,gl.LINK_STATUS) ) {
                throw 2;
            }

            vertexLocation = gl.getAttribLocation(program,"vertex");

            gl.deleteShader(frag_shader);
            gl.deleteShader(vert_shader);
            gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );

            gl.useProgram(program);
            gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
            gl.enableVertexAttribArray(vertexLocation);
            gl.vertexAttribPointer(vertexLocation,4,gl.FLOAT,false,0,0);

            gl.drawArrays(gl.TRIANGLES,0,3);
        }
    </script>
    <style>
        body {
            margin:0px;
        }
    </style>
</head>
<body onload="_main_web()">
    <canvas id="canvas" width=640 height=480>

    </canvas>
</body>

我整个下午都在调试，但找不到错误。 getError总是返回0.我有什么遗漏吗？

Answer 1

gl.drawArrays(4,3,0);

这看起来很奇怪。应该是这样的：

gl.drawArrays(
    /* mode */ gl.TRIANGLES,
    /* first vertex */ 0,
    /* num vertices */ 3
);

另外（不重要）：

gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);

此时的最后bindBuffer并不重要。使用gl.vertexAttribPointer设置属性位置时需要它，但一旦设置，您可以将ARRAY_BUFFER绑定更改为任何内容。

如果多个属性位于不同的VBO中，则需要执行此操作。

（注意：ELEMENT_ARRAY_BUFFER绑定不是这种情况，如果你drawElements或其他什么，必须设置。）

Answer 2

使用修改后的代码，我可以通过删除Float32Array构造函数调用周围的额外[]来渲染白色三角形。所以从这里开始：

new Float32Array([[-1, -1, -0.12000000476837158, 1, 
0, 1, -0.12000000476837158, 1, 
1, -1, -0.12000000476837158, 1]]),

到这个

new Float32Array([-1, -1, -0.12000000476837158, 1, 
0, 1, -0.12000000476837158, 1, 
1, -1, -0.12000000476837158, 1]),

我认为这是一个简单的拼写错误，但为了清楚起见：new Float32Array()期望得到一个数字数组，然后它将“转换”为32位浮点值。您传递的是一个包含单个项目的数组，该数组也是一个数组。它不知道如何处理，因此转换失败，因此您返回一个包含1个值的Float32Array：NaN。

为什么不是WebGL绘图？

2 个答案: