在threejs中使用ShaderMaterial添加两步颜色指向答案

【问题标题】：Add two step colors to point using ShaderMaterial in threejs在threejs中使用ShaderMaterial添加两步颜色指向
【发布时间】：2018-09-21 17:44:21
【问题描述】：

我正在为three.js 中的shadermaterial 编写一个着色器。

我想为一个点添加颜色，使其边框为黑色，内部填充颜色应为原始顶点颜色（例如红色）。

这可以通过使用纹理来完成，但我不想使用纹理。我已经应用了 gl_PointSize 来增加点的大小。

有什么办法吗？

【问题讨论】：

您在寻找这样的东西吗？ jsfiddle.net/f2Lommf5/14532 BTW：你为什么不只使用纹理？
是的，我正在寻找相同的，但我不希望它在渐变中......想要一个清晰的边框。不使用纹理的原因是性能下降。我有超过 20,000,000 个点，所以使用纹理显然会降低渲染性能。

【解决方案1】：

试试这个小提琴中的方法：https://jsfiddle.net/f2Lommf5/14545/

这个想法是使用step() 函数为每个点生成一个清晰的矩形边框。你可以通过改变函数的第二个参数来改变边框的粗细。

vec2 c = abs( gl_PointCoord - vec2( 0.5 ) ) * 2.0; // move origin to center
float f = step( c.x, 0.6 ) * step( c.y, 0.6 );

【讨论】：