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% 正确，但你应该从中得到要点，看看发生了什么。