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: [image] And I would like to allow user to add stickers or images on the sides of the bag like in this 2d image: [image] Any ideas? I’m kind of lost and would appreciate any help or advice on this.

Just use the line multiple times and alpha blend it each time, you also need a uniform array for the coordinates of each decal. https://codepen.io/Fyrestar/pen/GRKbVaq

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.

[image] juanchomogi: Also where can I find more documentation about shaders? https://thebookofshaders.com/ (different languages) section shaders there: [image] closed_book three.js Bookshelf Resources Feel free to add more resources/books to help the three.js community! three.js Website Documentation Official Examples Scene Editor Github Download Latest Release Release Log Migration Guide Wiki Report a Bug/Request a Feature NPM Package Community Portals Official Discord Stackoverflow Twitter Slack Reddit Resources Chrome Devtools extension Firefox Devtools extension spectorJS Discover three.js Tips and Tricks Tutorials Creating a Scene (from the three.js Docs) Books Not…

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?

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?[image] This is the original image: [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. [image] juanchomogi: Also, material.needsUpdate = true; doesn’t seem to recompile the material when I changed the onBeforeCompile definition. 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 [image]

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)

Images on top of textures

Questions

hofk September 30, 2019, 7:36pm 4

https://thebookofshaders.com/ (different languages)

section shaders there:

Topic		Replies	Views
Place an image onto a part of a loaded model (GLB/GLTF) Questions textures , materials , shaders	7	3868	July 3, 2020
Image Projection by Decal geometry on clothes 3d model(uv projection) Questions textures , materials , uv-mapping , shaders , decal , projection , uv , decalgeometry	14	1873	March 5, 2024
THREE.patchShader is not a function Questions textures , materials , shaders	3	1195	June 29, 2020
Putting multiple images on a mesh in three.js Questions react-three-fiber	7	3526	March 8, 2023
Best Way to Render Images (& Text) on Model? (Textures, Decals, etc.) Questions textures , react-three-fiber	7	4176	November 15, 2024

Images on top of textures

Related topics