Hello, I’d like to check if there is a way to render outlines on sprites? It doesn’t seem that the option exists currently, is there a simple way to get this going? Thanks.
1 Like
So I tend to be one of the voices for “SHADERS!” around here so my first thought was this is probably completely doable using the Procedural Texture mode of the Node Material Editor.
After a small amount of tinkering we can get something decent. Not perfect, but enough to prove out that there’s promise in this approach.
Here’s the playground:
https://playground.babylonjs.com/#YCY2IL#481
Essentially what’s happening here is that we load a node material from the snippet server:
let nodeMaterial = await BABYLON.NodeMaterial.ParseFromSnippetAsync("1Z5AFG#3", scene);
Then we get a specific node in that node material called “ImageSourceBlock” and set it’s input to the sprite texture we want to use:
nodeMaterial.getBlockByName("ImageSourceBlock").texture = new BABYLON.Texture("textures/palm.png", scene);
Next we tell Babylon to create a procedural texture from that Node Material:
let proceduralTexture = nodeMaterial.createProceduralTexture({width:512, height:1024}, scene);
Finally we tell the sprite manager that we want to use this newly created procedural texture as the texture input for sprite creation:
spriteManagerPlayer.texture = proceduralTexture;
That’s the basic idea behind the setup. So now at this point we’ve unlocked shader capabilities to mess around with how our sprite texture looks.
THIS is where I am NOT an expert at all. There is probably a much more elegant solution to finding edges then what I’ve come up with here, but again, this should prove out the overall theory.
Essentially what we’re doing with this is using two different texture nodes with different uv inputs. One with a “normal” set of UVs and a second with a slightly enlarged set of UVs. By scaling the second set of UVs and tapping into the available alpha channel we can lerp between the two different textures to create what basically looks like an edge render.
Ok now all of this to say, this is a theory and as with most things in the graphics world, there are probably hundreds of different approaches you could take, however this is the one that popped into my head and seemed like a fun method to explore.
I hope this helps open up some possibilities for you to explore!
Cheers!
6 Likes
Nice one @PirateJC !!!
2 Likes
Very cool @PirateJC ! Can I be another one of the voices for “SHADERS!”? 
I played with the material a bit and added a time-varying effect, but I feel a smarter mind than me can do even more cooler stuff on top of it!
https://playground.babylonjs.com/#YCY2IL#482
3 Likes
Thanks a lot for the details in your suggestion @PirateJC! We escalated quickly from “a simple way” to “SHADERS!” haha. Not the first time we have that encounter ;). That actually reminds I do need to jump into them at some point, and this will be one more place I add to my list of where to start. 
2 Likes