Tinting sprites with various colors

I’m working on a 3D graph visualization (thousands of nodes connected by thousands of edges) where each node has an icon rendered via a sprite. To highlight nodes, I previously just drew a cube around every node via a mesh and gave it partial transparency, but the performance was really bad.

So I’ve gotten rid of the meshes and am trying to just tint the icon textures. There are probably <20 icons and only a handful of different colors I’d want to tint them. So I could potentially just do all of this in Photoshop, but I was wondering if there might be a way of doing this programmatically so that when I add a new node type, I just need to add the default uncolored icon texture.

Hi Calvin, welcome to the Babylon.js forum!

There are lots of possibilities. Can you make a simplified playground at playground.babylonjs.com that shows how you are doing it now? If you do that then we can quickly make changes to it to show how this can be done.

1 Like

Sprites do have a color property to control their tint if it is what you are looking for ? Sprite | Babylon.js Documentation

1 Like

Omg, thank you!

I tried that before but it wasn’t working so I abandoned it thinking the sprite color property didn’t work. Turns out the problem was in another part of my code.

2 Likes