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

【问题标题】：Three.js WebGL Draw a circle custom fill and border color from shaderThree.js WebGL 从着色器中绘制圆形自定义填充和边框颜色
【发布时间】：2013-08-27 19:48:53
【问题描述】：

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

【问题讨论】：

标签： javascript three.js webgl

【解决方案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% 正确，但您应该从中得到重点，看看发生了什么。

【讨论】：

我想使用片段着色器来实现这一点。你能告诉我一个如何使用片段着色器设置自定义填充和边框颜色的例子吗？
抱歉，我仍在努力理解这一点。那时我的顶点着色器会是什么样子？
void main() { gl_Position = vec3(aVertexPos, 1.) } 并提供具有正确索引的顶点[[1,1,0],[1,-1,0],[-1,-1,0],[-1,1,0]]。请接受答案，因为它回答了您的问题，对于编写着色器，请了解更多关于 LightHouse3D 上的 GLSL 的信息。谢谢。
似乎有点过于复杂。可能是if (d<radius) {...} else if (d < radius + stroke) {...} else discard
应避免丢弃。对于所需区域之外的像素，最好将 alpha 设置为 0。