0

我一直在尝试使用三角形扇形方法创建一个完整的圆圈。但是，我尝试将粉丝数量从 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, 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, 0, 0, 1);

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

  // Draw the rectangle
  gl.drawArrays(gl.TRIANGLE_FAN, 0, 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, 0);
  
    // Enable the assignment to a_Position variable
    gl.enableVertexAttribArray(a_Position);
  
    return numFans;
  }

缺片图片

//  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;
  }
4

1 回答 1

0

我无法重现该问题，但是顶点的生成不正确。第 2 个顶点坐标的索引为 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;
}
于 2021-03-04T21:41:31.103 回答