Hi everyone, I’m looking for some advice on the best way to do this:
I have a 3d model of a bag loaded with some textures:
And I would like to allow user to add stickers or images on the sides of the bag like in this 2d image:
Any ideas? I’m kind of lost and would appreciate any help or advice on this.
Simple decal demo
https://codepen.io/Fyrestar/pen/xvRpxa
Make sure to insert the decal code at map_fragment instead fog_fragment. Another option are projected decals you can find something like that in the demos, if you’re fine with a fixed amount of decals (e.g 8-24) then you can do it in one shader like the pen above.
Hi @Fyrestar this looks pretty much what I need, is there any way to do it after the material has been created? Also where can I find more documentation about shaders? Thank you so much.
https://thebookofshaders.com/ (different languages)
section shaders there:
You find several docs, tutorials etc for GLSL, like hofk linked. You can change the amount of decals too by setting myMaterial.needsUpdate to true, it will “reset” the code and invoke onBeforeCompile again, or just use the amount of slots you allow, as long as there aren’t too much.
It’s working good so far but I don’t know how can I make it to render multiple images. Any advices?
Just use the line multiple times and alpha blend it each time, you also need a uniform array for the coordinates of each decal.
Thank you so much, this is exactly what I was looking for, thank you for taking the time to put together the codepen.
I hope is not too much to ask, but one last question, Do you know why is it getting like this when I use an image with no transparency?
This is the original image: 
OHE10.png
Also, material.needsUpdate = true; doesn’t seem to recompile the material when I changed the onBeforeCompile definition.
Again, thank you so much, I’m really new on this topic.
The texture is clamping to the edge, you could simply use a 1 pixel transparent border before doing anything arithmetically.
Could you demonstrate that in a pen? What do you change in onBeforeCompile?
I tried to change your codepen and it works fine but on my project it doesn’t, basically I was just changing the onBeforeCompile to add a dynamic number of stickers each time, and then set needsUpdate to true, it doesn’t recompile, I guess I will have to create the Material again each time, tho that way could be less efficient. Anyway, thank you so much for your help.
This code linked here
https://codepen.io/Fyrestar/pen/xvRpxa
won’t work. I get an error here
Fixed it, though this is very strange i can’t remember editing it like that with that extra bracket. (would have thrown than error a year ago already)
