Thank you so much for helping, @prisoner849!
Is it possible to make the shader work regardless of shape, though? Right now it will only work for a circle, but because I’m going to be using several shapes to designate different statuses, having a “one shader that rules them all” would be amazing. Is that not possible? Would it require multiple shaders (one per unique shape)?
I was reading up on normals last night, and while I can’t get it to do what I want, could that be part of the answer? (following a contour, rather than always being a circle)
Here’s a video clip of how your example looks when I change the amount of segments for the CircleGeometry to 3/4 (triangle and square, respectively):
And here’s what I’d like a single shader to do (without branching / conditional logic):
To your question about instanced buffer geometry vs points… I think I settled on Instanced Geometry because points weren’t as flexible with what you could do with them visually maybe? I don’t remember my thought process entirely at the time.
Essentially, these nodes will have several properties that can be changed by the user (color, thickness, opacity, x, y and z positions, etc.) and as the user adjusts which variable is used for each property, I want the nodes to quickly animate to their new states. You mentioned that I could be using points with custom textures, but wouldn’t the textures get blurry when zoomed in close? Not only that, but if the line thicknesses can be changed, how would that be achieved with a static texture?
One of the big selling points for me on switching from pixi.js to three.js–aside from being able to visualize data in 3d, which is awesome–was that everything is so much easier to scale and stay crisp in three.js.
Really appreciate all the help!