使用Three.js的WebGL绘制圆形，可以通过着色器自定义填充和边框颜色。

Question

我正在使用WebGLRenderer和Three.js。我正在尝试找到或查看关于如何使用CircleGeometry绘制圆并能够从顶点或片段着色器控制它们的填充和边框颜色的示例。如果不使用纹理图像，这是否可能？抱歉，如果这很简单，我仍在努力理解Three.js和WebGL，所以任何帮助都将不胜感激。

- wwwuser

Answer 1

• 圆形的几何表达不完美，因为它的圆滑程度取决于构成圆形的顶点数量，并且很难改变参数。

• 纹理表现在缩放时有明显的限制。

• 最好的选择是着色器。创建方形表面并编写片段着色器，以生成圆形图像。这很容易修改，因为在片段着色器中，您只需要检查片段距离圆形中心的距离，并且可以轻松更改颜色和描边参数。此外，只有4个顶点，如果有许多类似圆形的对象，则非常低效。

希望这有所帮助。

编辑：

uniform vec3 innerCol;
uniform vec3 strokeCol;
uniform float radius;
uniform float stroke;

varying vec2 vUV;

void main() {
    float border = (radius - stroke/2.)/(stroke/2.+radius);
    float d = distance(vUV, vec2(.5, .5));

    if(d<=border) gl_FragColor = vec4(innerCol, 1.);
    else if(d>border && d<1.) gl_FragColor = vec4(strokeCol, 1.);
    else discard;
}

这是一个片段着色器，我不确定它是否完全正确，但你应该能够从中理解并看到正在发生的事情。

- Dragan Okanovic

---

我想使用片段着色器来实现这个。你能给我展示一下如何使用片段着色器设置自定义填充和边框颜色的例子吗？ - wwwuser

抱歉，我仍在努力理解这个问题。那么我的顶点着色器应该是什么样子的？ - wwwuser

void main() { gl_Position = vec3(aVertexPos, 1.) }并使用正确的索引提供顶点[[1,1,0]，[1，-1，0]，[-1，-1，0]，[-1,1,0]]。请接受答案，因为它回答了您的问题，并且要了解有关GLSL的更多信息，可以在LightHouse3D上学习。谢谢。 - Dragan Okanovic

看起来有点过于复杂了。可以这样写： if (d<radius) {...} else if (d < radius + stroke) {...} else discard - dansch

应避免使用“Discard”。最好将超出所需区域的像素的alpha值设置为0。 - Zach Saucier