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 an…

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 sha…

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 com…

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] O…

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 tha…

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…

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	3845	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	1793	March 5, 2024
THREE.patchShader is not a function Questions textures , materials , shaders	3	1187	June 29, 2020
Putting multiple images on a mesh in three.js Questions react-three-fiber	7	3492	March 8, 2023
Best Way to Render Images (& Text) on Model? (Textures, Decals, etc.) Questions textures , react-three-fiber	7	4123	November 15, 2024

Images on top of textures

Related topics