I’ve just started using three.js, and I’m having trouble finding resources that can lead me to solving this problem. I’ve been digging through the book of shaders, and while immensely educational, I haven’t been able to wrap my mind around it enough to solve this on my own yet.
For some context, I’m building an application that visualizes data with a 3d scatterplot. Here’s a quick clip of an early iteration of the scatterplot portion of it:
I’m currently using InstancedBufferGeometry to keep the draw calls down to a minimum as there could potentially be 10’s of thousands of nodes on display at any given time, and I’d like these nodes to be able to animate between states when the user filters / changes settings. I’m currently using a RawShaderMaterial with basic vertex and fragment shaders that take into account some fog for color adjustment.
Currently, each node is just its own colored geometry (RingBufferGeometry for the rings, and a custom ShapeBufferGeometry path to create the X’s). There’s no background to these, and in the case of the rings, no filling. It’s very difficult to discern depth, especially when zoomed in to the plot. My thought is for every node to be solid (black) and then have the node color “painted” onto it via the shader. Here’s a video example of what I’m looking to do:
As shown in the above video, I’d like to be able to pass something into the shader to determine the thickness of the inner-stroke; and because I’m going to be using multiple shapes, having it work regardless of shape would be fantastic; essentially, it’s a stroke that’s “inside” the geometry, offset a bit to allow for a black outline at all times, and grows inward.
Here’s a link to a single circle codepen that is pretty much using the same structure as my full scatterplot, just cut down to only deal with one node for the ease of trying to solve this problem:
Really appreciate any assistance!