Three.js: Examples: Add outline/stroke/border to a transparent PNG sprite

[Josema]

This is a feature request. Would be great the ability to add an outline to a transparent PNG sprite.

[Mugen87]

Can you please share a screenshot of what visual result you are looking for? Besides, what it is your use case for this feature request? Why don't you prepare your PNGs according to your needs before using them in the app?

[Josema]

Why don't you prepare your PNGs according to your needs before using them in the app?

Yes, that's what I've done so far. But using this technique has four disadvantages.

1. More work using my design tool and preparing sprites.
2. More KB for the final user when downloading.
3. Difficult to manipulate inside of Three.js. I have to create a group, import two sprites and make visible the border or not depending on needs.
4. Not working for animated sprites.

I see a clear benefit adding this feature inside of Three.js

[Mugen87]

Ah I see! Yes, such outline effects on sprites are quite common. Maybe it would be a good idea to add a new sprite example that demonstrates how to enhance SpriteMaterial with the respective shader code. After a quick search, there seems to exist a few tutorials about that topic.

[makc]

doing multiple texture reads in the shader all the time instead of creating the 2nd texture once is hardly good idea. if you don't want to spend extra 2 minutes in photoshop, why not add the code like this to create the canvas with the effect, and then wrap it into THREE.Texture?

[Josema]

wrap it into THREE.Texture?

How do you wrap that canvas into a THREE Texture? I don't see it as an elegant solution.

[Mugen87]

You can use THREE.CanvasTexture for this. Example code:

https://github.com/mrdoob/three.js/blob/f5d3dd917e08bf35098579c8fde26f64b1364d50/examples/webgl_materials_texture_canvas.html#L102

[Josema]

Still, create a new canvas and apply that snippet for each sprite is not a good solution in terms of performance IMO.

[Mugen87]

I think it's a nice option if the amount of sprites is manageable. If you have many (animated) sprites or the outline effect will vary in color and size, a shader-based solution is more flexible. Another scenario is to use the outline effect in order to highlight selected sprites. Preparing everything beforehand seems inconvenient to me.

[WestLangley]

I do not think this is the responsibility of three.js.

[makc]

for that many sprites you could use a single canvas + getImageData + THREE.DataTexture-s, just a tiny bit more code

[Mugen87]

I have created a topic for this issue at the forum and a basic fiddle that demonstrates a simple enhancement of THREE.SpriteMaterial. Instead of adding a new example, let's experiment at the forum with the code until there is a more sophisticated solution. @mrdoob can still decide then if it's worth to have a new example.

https://discourse.threejs.org/t/how-to-create-a-simple-outline-around-a-png-sprite/6921

I think it's better to continue the discussion there and close the issue for now.