Opengl es 图形webgl原语

我知道如何使用WebGL绘制正方形、矩形和三角形。然而，我对如何使用三角形画圈有点困惑。我创建了一个包含顶点的数组，并将其绑定到缓冲区

以绘制三角形等的方式，我创建一个数组来填充其顶点

var循环=[…]

所以当我这样做来创建一个圆时，似乎我必须放置很多顶点来使它平滑

有没有一种方法可以用更简单、更少的代码创建一个圆？
事实上，常用的方法是使用大量顶点来创建不完美的圆/球。因为我们使用像素来显示事物，所以圆/球从来都不是完美的，但看起来可能是完美的

例如，基本圆是由32个三角形组成的。您应该根据相机离圆的距离增加或减少数量

无论如何，还有其他方法可以创造完美的形状，而不仅仅是圆。根据具体情况，你的想象力或模式被用来实现它

例如，在webgl中，我们只有点和三角形。可以修改着色器中的最终外观：


绘制之前，先建立要绘制的点/三角形集
然后顶点着色器开始旋转。它可能会修改每个顶点的位置。它现在可能没有帮助，所以我现在将跳过描述
片段着色器将打开。片段着色器表示三角形/点所覆盖的每个像素位置上应显示的颜色。
现在重要的部分是，您可以使用aplha通道渲染透明颜色（或者高级，您可以跳过绘制此像素-对此不确定）。所以你们能做的就是内接圆。如果使用顶点着色器更改顶点的位置，也可以执行外切圆，这是前面回答的问题

片段着色器的核心部分：

varying vec4 pos;

uniform vec2 middle;
uniform float r;

void main() {
    // inscribed circle math
    if (distance(pos.xy, middle) > r) {
        discard;
    }
    gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}

我不会说这是最好的选择，这只是可能的

例如，广泛使用的可以帮助您实现任何自定义形状。这通常不用于实时渲染，因为实时渲染速度太慢，但适用于预渲染的视频或电影

我应该提到的最后一件事是顶点法线。这是核心问题。为每个顶点指定一个法向量。然后，可以在着色器中使用此向量修改灯光反射或更多。那个么球看起来更好，因为在反射中并没有尖锐的边缘。
以手表为例。如果你玩一段时间，你会发现表面上有相当大的三角形，或者你可以注意到如果你聚焦在边缘上。但若你们并没有集中注意力，那个球看起来很完美。这是因为镜子分散了你的注意力。一个彩色的球不会是这个样子的。
法线也可以与贝塞尔曲线一样使用
 一种方法是将列表中的前两个顶点设置为
（0,0,0）
和
（1,0,0）
。然后可以使用
cos（）
和
sin（）
计算其余顶点，因为它们将返回圆上点的x和y值

var numTris = 100;

vertices = [
     0.0,  0.0,  0.0,
     1.0,  0.0,  0.0
];

var degPerTri = (2 * Math.PI) / numTris;

for(var i = 0; i < numTris; i++) {
    var index = 2*3 + i*3
    var angle = degPerTri * (i+1);

    vertices[index] = Math.cos(angle); 
    vertices[index+1] = Math.sin(angle); 
    vertices[index+2] = 0; 
}


.cf隐藏{显示：无；}.cf不可见{可见性：隐藏；}
精密中泵浮子；
真空总管（真空）{
gl_FragColor=vec4（1.0,1.0,1.0,1.0）；
}
属性向量3；
均匀mat4-uMVMatrix；
一致mat4上矩阵；
真空总管（真空）{
gl_位置=上矩阵*UMV矩阵*vec4（1.0）；
}
是否使用循环填充顶点数组？我想大约需要5行代码。@Unick如何使用循环填充它？谢谢。我已经学习了顶点和片段着色器。就像@Unick所说的，如果执行
gl.drawArray（triangle\u fan）
时可能会变成一个圆，那么我如何使用循环填充我的数组呢！这正是我所需要的。我认为当你创建一个数组时，它的大小是固定的，但是你仍然可以在其中添加顶点。我真的学到了很多。我想问一个问题。如何创建一个可以将圆放置在画布中特定点的圆。因为当我测试代码时，我可以更改圆的大小，但它不允许我将圆放置在特定的点上。我想知道如何移动圆，因为更改圆心不起作用。如果查看
drawsecene（）
函数中的完整示例代码，您将看到一个名为
mvMatrix
的矩阵。可以移动（平移）、旋转和缩放一个矩阵，如果这样做，圆将随之改变。如果这对你来说没有足够的意义，那么你应该看看下面的教程，以获得更好更全面的解释。所以它在drawscene中，但是否可以只修改圆的代码而不是在片段中遍历drawscene？这是可能的，但需要更多的工作。必须循环遍历阵列中的每个顶点，并将中心点的位置添加到阵列中的每个顶点。