WebGL 三角扇缺少切片

问题描述

我一直在尝试使用三角形扇形方法创建一个完整的圆。但是，我尝试将粉丝数从 80 增加到 360。然后我尝试将其增加到 500、5000、50000。它在 50000 处消失只是因为切片太小了……我想知道如何填写那个缺失的切片。

这是我正在使用的代码：

// RotatingTriangle.js (c) 2012 matsuda
// Vertex shader program
var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +
  'uniform mat4 u_ModelMatrix;\n' +
  'void main() {\n' +
  '  gl_Position = a_Position;\n' +
  '}\n';

// Fragment shader program
var FSHADER_SOURCE =
  'void main() {\n' +
  '  gl_FragColor = vec4(1.0,0.0,1.0);\n' +
  '}\n';


function main() {
  // Retrieve <canvas> element
  var canvas = document.getElementById('webgl');

  // Get the rendering context for WebGL
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  // Initialize shaders
  if (!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }

  // Write the positions of vertices to a vertex shader
  var n = initVertexBuffers(gl);
  if (n < 0) {
    console.log('Failed to set the positions of the vertices');
    return;
  }

  // Specify the color for clearing <canvas>
  gl.clearColor(0,1);

  // Clear <canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);

  // Draw the rectangle
  gl.drawArrays(gl.TRIANGLE_FAN,n);
  
}

function initVertexBuffers(gl) {
  
  var circle = {x: 0,y:0,r: 0.75};
  var ATTRIBUTES = 2;
  var numFans = 64;
  var degreePerFan = (2* Math.PI) / numFans;
  var vertexData = [
    0.0,0.0
  ];


  //  updated here,but the problem still persists
  for(var i = 0; i <= numFans; i++) {
    var index = 2 + i*2;
    var angle = degreePerFan * (i+1);
    //console.log(angle)
    vertexData[index] = Math.cos(angle) * 0.5;
    vertexData[index + 1] = Math.sin(angle) * 0.5;
  }
  //console.log(vertexData);
  var vertexDataTyped = new Float32Array(vertexData);
  
    // Create a buffer object
    var vertexBuffer = gl.createBuffer();
    if (!vertexBuffer) {
      console.log('Failed to create the buffer object');
      return -1;
    }
  
    // Bind the buffer object to target
    gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
    // Write date into the buffer object
    gl.bufferData(gl.ARRAY_BUFFER,vertexDataTyped,gl.STATIC_DRAW);
  
    var a_Position = gl.getAttribLocation(gl.program,'a_Position');
    if (a_Position < 0) {
      console.log('Failed to get the storage location of a_Position');
      return -1;
    }
  　// Assign the buffer object to a_Position variable
    gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0);
  
    // Enable the assignment to a_Position variable
    gl.enabLevertexAttribArray(a_Position);
  
    return numFans;
  }

Picture of missing slice

//  SOLUTION
  for(var i = 0; i <= numFans; i++) {
    var index = i*2; <--- (used to be 'var index = 2 + i*2;')
    var angle = degreePerFan * (i+1);
    //console.log(angle)
    vertexData[index] = Math.cos(angle) * 0.5;
    vertexData[index + 1] = Math.sin(angle) * 0.5;
  }

解决方法

我无法重现该问题，但是顶点的生成不正确。第二个顶点坐标的索引是0.0,0.0:

var index = 2*3 + i*2;

var index = 2 + i*2;

顶点生成：

var vertexData = [
    0.0,0.0,];

for(var i = 0; i <= numFans; i++) {
    var index = 2 + i*2;
    var angle = degreePerFan * i;
    vertexData[index] = Math.cos(angle) * 0.5;
    vertexData[index + 1] = Math.sin(angle) * 0.5;
}