Distorted decal texture

Hello. I am using Decal geometry in my project. I took the example https://threejs.org/examples/#webgl_decals as a basis.

But I got a problem. If I “shoot” at the places where the model is bent, the texture of the decal is distorted. The same situation is in the example.

Can I fix this somehow? I think this is an orientation setting!? Or not? I would be grateful for any help.

1 Like

What you see is a limitation of the used approach in DecalGeometry. The texture is projected based on planar projection on the base mesh. If the mesh’s surface has steep changes in depth, you will see stretched texture parts like in your screenshot.

I’m not aware of a solution for this issue. You can read more about the used technique here:

http://blog.wolfire.com/2009/06/how-to-project-decals/

Hi @Mugen87
Is there another way to just wrap a texture around an object? Like sticking a piece of cloth or a patch around the object.

did you find anyway?

Did you find solution?

There has been some discussion about this topic at GitHub (see DecalGeometry: Decal projections without distortions. · Issue #21187 · mrdoob/three.js · GitHub) however the algorithm implemented in DecalGeometry has not been updated/enhanced so far.

so what is the solution to create such 3d configurations?

I’d use a canvas texture, that is already well wrapped around the model. When a custom logo is uploaded, it is drawn in the canvas … and it will magically appear on the model.

If decals should be used, I’d project them from the most orthogonal direction, to reduce distortion. However, large decals will still be badly wrapped.

1 Like

can you send the code to me?
I use canvas texture to load images on the material of the model but it appears lighter than the main image and resolution and contrast are not good.
I have a question about using this way of 2d canvas,can I add more than one image and text on one mesh and change the position of each of them I need independently when the user wants to design for example a t-shirt? How?

I don’t have code for any 3D configuration. It might be better to start new topics with your own questions. Also, post your attempt, so that other can review it.

As for canvas textures, it is possible to draw various logos and move them, add them, delete them at any time. Here is a simplified proof of concept: a pure white skirt with a canvas texture with static black rims, black grid and moving logos.

https://codepen.io/boytchev/full/NWmaWVL

1 Like

great
this is what I need
If you find any links please send to me to create sth like this skirt