我正在尝试学习如何使用Webgl，并且已经学会了如何绘制三角形，正方形和线条。我在webgl中创建我的圈子时遇到问题。
var InitDemo = function(){
var canvas = document.getElementById('circle-surface');
var gl = canvas.getContext('webgl');
//define geomtry
var vertices = [];
var origin = [0,0];
vertices.push(origin);
for(var i = 0; i <= 360; i+=1){
var j = i*Math.PI/180;
var vert = [Math.sin(j),Math.cos(j)];
vertices.push(vert);
}
console.log('the vertices are: '+vertices);
var vertBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
//shaders
var vertSrc = 'attribute vec2 coordinates;'+
'void main(){' +
' gl_Position = vec4(coordinates,0.0,1.0);'+
'}';
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertSrc);
gl.compileShader(vertShader);
if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) {
console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertShader));
return;
}
var fragSrc = 'void main(){'+
' gl_FragColor = vec4(1.0,0.0,1.0,1.0);'+
'}';
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragSrc);
gl.compileShader(fragShader);
if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) {
console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragShader));
return;
}
var shaderProg = gl.createProgram();
gl.attachShader(shaderProg, vertShader);
gl.attachShader(shaderProg, fragShader);
gl.linkProgram(shaderProg);
gl.useProgram(shaderProg);
if (!gl.getProgramParameter(shaderProg, gl.LINK_STATUS)) {
console.error('ERROR linking program!', gl.getProgramInfoLog(shaderProg));
return;
}
gl.validateProgram(shaderProg);
if (!gl.getProgramParameter(shaderProg, gl.VALIDATE_STATUS)) {
console.error('ERROR validating program!', gl.getProgramInfoLog(shaderProg));
return;
}
//associate shader and buffer
var coord = gl.getAttribLocation(shaderProg, 'coordinates');
gl.vertexAttribPointer(coord, 2, gl.FLOAT, gl.FALSE, 2*Float32Array.BYTES_PER_ELEMENT, 0);
gl.enableVertexAttribArray(coord);
//Draw
gl.clearColor(0.0, 0.0, 0.2, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length/2);
}
<!DOCTYPE html>
<html>
<head>
<title>Circle Demo</title>
<link rel="stylesheet" type="text/css" href="tutorial.css">
</head>
<body onload="InitDemo();">
<canvas id = "circle-surface" width="800px" height="600px"></canvas>
<script src = "CircleApp.js"></script>
</body>
</html>
我在控制台上没有收到任何错误，但出于某种原因，它并没有显示我想要的圆圈。
答案 0 :(得分：2)
你的错误不是OGL部分的错误，而是在设置顶点数组时出错。您已经为顶点缓冲区生成了一个二维数组，而不是一个线性的一维数组。
您必须使用vertices.push(origin[0], origin[1]);代替vertices.push(origin);（vert相同）。
你的代码看起来应该是这样的：
var vertices = [];
var origin = [0,0];
vertices.push( origin[0], origin[1] ); <-------------------------
for(var i = 0; i <= 360; i+=1){
var j = i*Math.PI/180;
var vert = [Math.sin(j),Math.cos(j)];
vertices.push( vert[0], vert[1] ); <-------------------------
}
更正后的WebGL示例：
var InitDemo = function(){
var canvas = document.getElementById('circle-surface');
var gl = canvas.getContext('webgl');
//define geomtry
var vertices = [];
var origin = [0,0];
vertices.push( origin[0], origin[1] );
for(var i = 0; i <= 360; i+=1){
var j = i*Math.PI/180;
var vert = [Math.sin(j),Math.cos(j)];
vertices.push( vert[0], vert[1] );
}
console.log('the vertices are: '+vertices);
var vertBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
//shaders
var vertSrc = 'attribute vec2 coordinates;'+
'void main(){' +
' gl_Position = vec4(coordinates,0.0,1.0);'+
'}';
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertSrc);
gl.compileShader(vertShader);
if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) {
console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertShader));
return;
}
var fragSrc = 'void main(){'+
' gl_FragColor = vec4(1.0,0.0,1.0,1.0);'+
'}';
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragSrc);
gl.compileShader(fragShader);
if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) {
console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragShader));
return;
}
var shaderProg = gl.createProgram();
gl.attachShader(shaderProg, vertShader);
gl.attachShader(shaderProg, fragShader);
gl.linkProgram(shaderProg);
gl.useProgram(shaderProg);
if (!gl.getProgramParameter(shaderProg, gl.LINK_STATUS)) {
console.error('ERROR linking program!', gl.getProgramInfoLog(shaderProg));
return;
}
gl.validateProgram(shaderProg);
if (!gl.getProgramParameter(shaderProg, gl.VALIDATE_STATUS)) {
console.error('ERROR validating program!', gl.getProgramInfoLog(shaderProg));
return;
}
//associate shader and buffer
var coord = gl.getAttribLocation(shaderProg, 'coordinates');
gl.vertexAttribPointer(coord, 2, gl.FLOAT, gl.FALSE, 2*Float32Array.BYTES_PER_ELEMENT, 0);
gl.enableVertexAttribArray(coord);
//Draw
gl.clearColor(0.0, 0.0, 0.2, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length/2);
}
InitDemo();<canvas id = "circle-surface" width="800px" height="600px"></canvas>