Fatal编程技术网
  • geometry/
  • Geometry 错误：如何在webgl中使用三角形扇形绘制圆？

Geometry 错误：如何在webgl中使用三角形扇形绘制圆？

geometry webgl

Geometry 错误：如何在webgl中使用三角形扇形绘制圆？,geometry,webgl,Geometry,Webgl,我不能用三角扇子画圆 下面的代码是我的JavaScript文件的一部分。 我的html包含画布和着色器。 我还有另一个JavaScript，它初始化顶点着色器和片段着色器。从其他javascript文件初始化着色器完全没有问题，因为它可以与其他代码正常工作 请帮我处理这个代码，找出它的错误 var xCenterOfCircle; var yCenterOfCircle; var centerOfCircle; var radiusOfCircle = 200; var ATTRIBUTES =

我不能用三角扇子画圆

下面的代码是我的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 );
}

var xcenterfcircle；
圆心；
旋转中心；
var圆半径=200；
var属性=2；
var noOfFans=80；
var anglePerFan；
var verticesData=[]；
var帆布；
var-gl；
window.onload=函数init（）
{
画布=document.getElementById（“gl画布”）；
gl=WebGLUtils.setupWebGL（画布）；
如果（！gl）{alert（“WebGL不可用”）；}
//
//配置WebGL
//
总图视口（0.0，0.0，canvas.width，canvas.height）；
gl.clearColor（1.0,1.0,1.0,1.0）；
//加载着色器并初始化属性缓冲区
var program=initShaders（gl，“顶点着色器”、“片段着色器”）；
gl.useProgram（程序）；
画圈（）；
//将数据加载到GPU中
var bufferId=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，bufferId）；
gl.bufferData（gl.ARRAY\u BUFFER，展平（verticesData），gl.STATIC\u DRAW）；
//将着色器变量与数据缓冲区相关联
var vPosition=gl.GetAttriblLocation（程序，“vPosition”）；
gl.VertexAttribute指针（vPosition，2，gl.FLOAT，false，0，0）；
gl.EnableVertexAttributeArray（vPosition）；
render（）；
}
函数drawCircle（）
{
xCenterOfCircle=400；
c圆心=400；
圆心=vec2（400400）；
anglePerFan=（2*Math.PI）/noOfFans；
verticesData=[centerOfCircle]；

对于（var i=0；i屏幕的视口坐标定义在-1和1之间。屏幕的中心为[0,0]，左下角为[-1，-1]等

你的圆的半径是200，它的中心是[400400]，在你的屏幕上，它是一个巨大的圆，远远超出了右上角

开始创建一个圆心半径为.5的圆[0,0]。您应该会看到一些东西


如果需要在缓冲区中保持此比例，还可以为顶点着色器提供一个矩阵，以将空间坐标转换为常规openGL视口坐标。
我添加了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>