Webgl 在三维空间中绘制空心圆时出现的奇怪错误

我试图画两个空心圆，它们围绕着一个位于0，0，0位置的立方体

到目前为止，我已经实现了立方体，这里的两个圆就是我得到的

这里发生了两件奇怪的事情

一是我想画圆，但我可以看到从原点辐射的线

第二种是插值颜色，尽管我只为片段着色器设置了一种颜色

这里是你可以清楚地看到这些线与插值颜色

这是我的顶点着色器代码和片段着色器代码

"use strict";
const loc_aPosition = 1;
const loc_aColor = 2;
const loc_UVCoord = 3;
const VSHADER_SOURCE = 
`#version 300 es
layout(location=${loc_aPosition}) in vec4 aPosition;
layout(location=${loc_aColor}) in vec4 aColor;
layout(location=${loc_UVCoord}) in vec2 UVCoord;
out vec4 vColor;
out vec2 vUVCoord;
uniform mat4 uMVP;
void main()
{
    gl_Position = uMVP * aPosition;
    vColor = aColor;
    vUVCoord = UVCoord;
}`;

const FSHADER_SOURCE =
`#version 300 es
precision mediump float;
in vec4 vColor;
out vec4 fColor;
void main()
{
    fColor = vColor;
}`;

两个圆的初始化函数，唯一的区别是目标平面

function init_equator(gl)
{
  let vertices = []; // for the vertices
  let color = [1, 0, 0]; // red color
  for(var i = 0; i <= 360; i+=10)
  {
    let j = i * Math.PI/180;
    let vert = [R * Math.cos(j), 0, R * Math.sin(j)]; // drawing a circle at the XZ plane since it has to be an equator for the cube...
    vertices.push( vert[0], vert[1], vert[2] );   // push the vertices
    vertices.push( color[0], color[1], color[2]); // set the color
  }  
  const SZ = vertices.BYTES_PER_ELEMENT;

  let vao = gl.createVertexArray();
  gl.bindVertexArray(vao);
  let vbo = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

  gl.vertexAttribPointer(loc_aPosition, 3, gl.FLOAT, false, SZ * 6, 0); // stride is 6, 3 for positions and 3 for the color
  gl.enableVertexAttribArray(loc_aPosition);


  gl.vertexAttribPointer(loc_aColor, 3, gl.FLOAT, false, SZ * 6, SZ * 3); // stride is 6, offset is this is because 3 color elements are located after 3 position elements..
  gl.enableVertexAttribArray(loc_aColor);

  gl.bindVertexArray(null);
  gl.bindBuffer(gl.ARRAY_BUFFER, null);

  return { vao, n : vertices.length / 3 }; // since it has three coordinates so devide by 3
}


function init_latitude(gl)
{
  let vertices = []; // for the vertices
  let color = [1, 0, 0]; // supposed to be the red
  for(var i = 0; i <= 360; i+=10)
  {
    let j = i * Math.PI/180;
    let vert = [0, R * Math.cos(j), R * Math.sin(j)]; // drawing a circle on the YZ plane
    vertices.push( vert[0], vert[1], vert[2] ); 
    vertices.push( color[0], color[1], color[2]);   
  }  
  const SZ = vertices.BYTES_PER_ELEMENT;

  let vao = gl.createVertexArray();
  gl.bindVertexArray(vao);
  let vbo = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

  gl.vertexAttribPointer(loc_aPosition, 3, gl.FLOAT, false, SZ * 6, 0); // stride is 6, 3 for positions and 3 for the color
  gl.enableVertexAttribArray(loc_aPosition);

  gl.vertexAttribPointer(loc_aColor, 3, gl.FLOAT, false, SZ * 6, SZ * 3); // stride is 6, offset is this is because 3 color elements are located after 3 position elements..
  gl.enableVertexAttribArray(loc_aColor);

  gl.bindVertexArray(null);
  gl.bindBuffer(gl.ARRAY_BUFFER, null);

  return { vao, n : vertices.length / 3 }; // since it has three coordinates so devide by 3
}

我不知道为什么这些线是从原点和混合色辐射出来的

---

有人能帮我吗？

这一行，在你发布的代码中出现了两次

const SZ = vertices.BYTES_PER_ELEMENT;

is

SZ

将是

未定义的

vertices

是一个本机JavaScript数组，而不是像

Float32Array

那样的typedarray数组。此后，使用

SZ

进行的每次计算将为

0

或

NaN

换句话说，这些线

  gl.vertexAttribPointer(loc_aPosition, 3, gl.FLOAT, false, SZ * 6, 0);
  gl.vertexAttribPointer(loc_aColor, 3, gl.FLOAT, false, SZ * 6, SZ * 3); 

将是

  gl.vertexAttribPointer(loc_aPosition, 3, gl.FLOAT, false, 0, 0);
  gl.vertexAttribPointer(loc_aColor, 3, gl.FLOAT, false, 0, 0); 

这意味着每一个其他位置都是一种颜色，而每一种其他颜色都是一种位置，它解释了为什么直线会指向中心，为什么会对颜色进行插值

请注意，如果您在调试器中逐步完成了代码，您可能已经看到了这个问题，因此最好学习如何使用

另外，仅供参考，与您的问题无关，您无需连续调用

gl.bindVertexArray

两次，一次调用

null

，一次调用下一个要绘制的对象

这个

可能就是这样

    gl.bindVertexArray(cube.vao);
    gl.drawElements(gl.TRIANGLES, cube.n, gl.UNSIGNED_BYTE, 0)
    gl.bindVertexArray(equator.vao);
    gl.drawArrays(gl.LINE_LOOP, 0, equator.n);
    gl.bindVertexArray(latitudeCircle.vao);
    gl.drawArrays(gl.LINE_LOOP, 0, latitudeCircle.n);
    gl.bindVertexArray(null);  // this is also not technically needed

此外，还可以使用“排列”操作符

这个

可能是这样吗

    vertices.push( ...vert );   // push the vertices
    vertices.push( ...color ); // set the color

---

您可能会发现这很有用。

非常感谢您，先生！我犯了非常愚蠢的错误。。。我想不出SZ值有0。。。在调试期间，我应该更仔细地查看我的代码。。。祝您愉快，先生！

    gl.bindVertexArray(cube.vao);
    gl.drawElements(gl.TRIANGLES, cube.n, gl.UNSIGNED_BYTE, 0)
    gl.bindVertexArray(equator.vao);
    gl.drawArrays(gl.LINE_LOOP, 0, equator.n);
    gl.bindVertexArray(latitudeCircle.vao);
    gl.drawArrays(gl.LINE_LOOP, 0, latitudeCircle.n);
    gl.bindVertexArray(null);  // this is also not technically needed

    vertices.push( vert[0], vert[1], vert[2] );   // push the vertices
    vertices.push( color[0], color[1], color[2]); // set the color

    vertices.push( ...vert );   // push the vertices
    vertices.push( ...color ); // set the color