エラー：webglに三角形ファンを使って円を描く方法は？

三角形のファンを使用して円を描くことができません。エラー：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>

出典

2016-10-02 Harsh_Joshi