我试图根据 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>
最佳答案
您的着色器脚本似乎是空的。您至少需要一个基本的顶点和片段着色器。您还需要加载、编译它们并创建着色器程序，然后需要调用 gl.useProgram 来设置属性、获取统一位置并设置统一值。我建议尝试 these lessons ，他们为我工作。
关于javascript - 如何使用 WebGL 绘制正方形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20208692/