Добавьте два шага цвета, чтобы указать, используя ShaderMaterial в ThreeJS

Question

Я пишу шейдер для shadermaterial в three.js.

Я хочу добавить цвет к точке так, чтобы ее граница была черной, а цвет внутренней заливки - оригинальным цветом вершины (например, красным)..

Это можно сделать с помощью текстуры, но я не хочу использовать текстуру.Я применил gl_PointSize для увеличения размера точки.

Есть ли способ сделать это ??

Answer 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 );