javascript - Three.js WebGL 从着色器中绘制圆形自定义填充和边框颜色

Question

我将 Three.js 与 WebGLRenderer 一起使用。我正在尝试找出或查看如何使用 CircleGeometry 绘制圆圈并能够从顶点或片段着色器控制它们的填充和边框颜色的示例。如果不使用纹理图像，这甚至可能吗？抱歉，如果这真的很简单，我仍在尝试围绕 Three.js 和 WebGL 进行研究，因此感谢您的帮助。

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

这是片段着色器，我不确定它是否 100% 正确，但你应该从中得到重点，看看发生了什么。