Question

我在WebGLRenderer中使用Three.js。我试图找出或看到如何使用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％正确但你应该从中得到它的重点，看看发生了什么。

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

1 个答案: