1
我无法使用三角形风扇绘制圆。错误:如何在webgl中使用三角风扇绘制圆圈?
以下代码是我的JavaScript文件。 我的html包含画布和着色器。 另外我还有另一个初始化顶点着色器和片段着色器的JavaScript。从其他JavaScript文件初始化着色器完全没有问题,因为它可以与其他代码正常工作。
请帮我使用这段代码,找出它有什么问题。
var xCenterOfCircle;
var yCenterOfCircle;
var centerOfCircle;
var radiusOfCircle = 200;
var ATTRIBUTES = 2;
var noOfFans = 80;
var anglePerFan;
var verticesData = [];
var canvas;
var gl;
window.onload = function init()
{
canvas = document.getElementById("gl-canvas");
gl = WebGLUtils.setupWebGL(canvas);
if (!gl) { alert("WebGL isn't available"); }
//
// Configure WebGL
//
gl.viewport(0.0, 0.0, canvas.width, canvas.height);
gl.clearColor(1.0, 1.0, 1.0, 1.0);
// Load shaders and initialize attribute buffers
var program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);
drawCircle();
// Load the data into the GPU
var bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, flatten(verticesData), gl.STATIC_DRAW);
// Associate out shader variables with our data buffer
var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
render();
}
function drawCircle()
{
xCenterOfCircle = 400;
yCenterOfCircle = 400;
centerOfCircle = vec2(400, 400);
anglePerFan = (2*Math.PI)/noOfFans;
verticesData = [centerOfCircle];
for(var i = 0; i <= noOfFans; i++)
{
var index = ATTRIBUTES * i + 2;
var angle = anglePerFan * (i+1);
var xCoordinate = xCenterOfCircle + Math.cos(angle) * radiusOfCircle;
var yCoordinate = yCenterOfCircle + Math.sin(angle) * radiusOfCircle;
document.write(xCoordinate);
document.write("\n");
document.write(yCoordinate);
var point = vec2(xCoordinate, yCoordinate);
verticesData.push(point);
}
}
function render()
{
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_FAN, 0, verticesData.length/ATTRIBUTES);
}
这是我的HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Supper Bug Zapper</title>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main(void)
{
gl_Position = vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void main(void)
{
gl_FragColor = vec4(1.0, 0.0, 1.0, 0.5);
}
</script>
<script type="text/javascript" src="js/webgl-utils.js"></script>
<script type="text/javascript" src="js/MV.js"></script>
<script type="text/javascript" src="js/initShaders.js"></script>
<script type="text/javascript" src="js/superBugZapper.js"></script>
</head>
<body>
<canvas id="gl-canvas" width="800" height="800" style="border:1px solid #000000;">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>
我已经添加了更多简化的html代码。你能告诉我我错过了什么吗? –
非常感谢Bro它的工作。 –