# ThreeJS DecalGeometry Alternative

**URL:** <https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205>\
**Category:** Questions\
**Tags:** textures, geometry\
**Created:** [June 13, 2022, 3:05am UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205 "2022-06-13T03:05:42Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dipesh\_Dulal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dipesh_dulal/32/27056_2.png) [@Dipesh\_Dulal](https://discourse.threejs.org/u/Dipesh_Dulal)\
**Post date:** [June 13, 2022, 3:05am UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/1 "2022-06-13T03:05:42Z")

</div>

Since decal geometry has stretching problems with it.  
Are there any alternative algorithms available for attaching stickers to a model?

The added stickers are dynamically added. We can’t find the position beforehand.

Any insights would be helpful.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [June 13, 2022, 6:32am UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/2 "2022-06-13T06:32:18Z")

</div>

Related:

> <https://github.com/mrdoob/three.js/issues/21187>
>
> \*\*Describe the bug\*\*
> 
> The decal gets replicated when splatted. This happens wh…en you try to splat just around the corners; you can then clearly see the partial/full replication (just once) of that decal on the adjacent side to the face you have splatted on.
> 
> \*\*To Reproduce\*\*
> 
> Steps to reproduce the behavior:
> 1. Go to https://threejs.org/examples/?q=decal#webgl\_decals
> 2. Click on bottom part of the model's shoulder
> 3. You can see the decal being replicated partially on the adjacent side
> 
> 
> 
> \*\*Expected behavior\*\*
> 
> The decal should only be present on the side splatted on
> 
> \*\*Screenshots\*\*
> 
> !\[Splat\_bug\](https://user-images.githubusercontent.com/24234466/106471544-a66f0680-6499-11eb-90ee-293c724c0091.PNG)
> 
> 
> 
> \*\*Platform tested on:\*\*
> 
> - Device: \[Desktop\]
> - OS: \[Windows, MacOS, Linux\]
> - Browser: \[Chrome, Firefox\]
> - Three.js version: \[r125\]

> [@Distorted decal texture](https://discourse.threejs.org/t/distorted-decal-texture/18442):
>
> Hello. I am using Decal geometry in my project. I took the example [https://threejs.org/examples/#webgl\_decals](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.

---

<div class="post-metadata">

**Author:** ![Dipesh\_Dulal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dipesh_dulal/32/27056_2.png) [@Dipesh\_Dulal](https://discourse.threejs.org/u/Dipesh_Dulal)\
**Post date:** [June 16, 2022, 11:50am UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/3 "2022-06-16T11:50:11Z")

</div>

Thank You. I think there are no alternatives available for it then. 😢  
It could be better if there were examples but couldn’t find one. Maybe I am searching for a lot or asking a lot.

I am trying to create an editor that sticks images in a model and then move, rotate, scale those images and couldn’t find any ideas. One idea was to use DecalGeometry to stick images to model and then move the decals but looks like they inherently have stretching problems with them because of the approach they use.

---

<div class="post-metadata">

**Author:** ![Dipesh\_Dulal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dipesh_dulal/32/27056_2.png) [@Dipesh\_Dulal](https://discourse.threejs.org/u/Dipesh_Dulal)\
**Post date:** [December 1, 2022, 3:16am UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/4 "2022-12-01T03:16:41Z")

</div>

I implemented a paper that works well with our requirement.  
Thank you for the reply.

---

<div class="post-metadata">

**Author:** ![Sam\_Dixon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sam_dixon/32/34903_2.png) [@Sam\_Dixon](https://discourse.threejs.org/u/Sam_Dixon)\
**Post date:** [March 27, 2023, 8:33pm UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/5 "2023-03-27T20:33:49Z")

</div>

Hi, I have a similar issue that I’m trying to overcome – would you be able to share the paper/your approach?

---

<div class="post-metadata">

**Author:** ![Dipesh\_Dulal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dipesh_dulal/32/27056_2.png) [@Dipesh\_Dulal](https://discourse.threejs.org/u/Dipesh_Dulal)\
**Post date:** [March 28, 2023, 5:05am UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/6 "2023-03-28T05:05:37Z")

</div>

The paper I used is called ExpMap.  
I got a matlab code from the paper author and ported into Javascript. But this approach is not one size fits all as the approach to calculate uv coordinates is different.

This is the link to the paper;

> **[sig2006tm.pdf](https://web.engr.oregonstate.edu/~grimmc/content/papers/sig2006tm/sig2006tm.pdf)**
>
> 5.40 MB

Matlab Code:  
[https://www.dgp.toronto.edu/~rms/software/matlabmesh/](https://www.dgp.toronto.edu/~rms/software/matlabmesh/)

Hope this helps.

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [April 11, 2023, 4:55pm UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/8 "2023-04-11T16:55:53Z")

</div>

Nice article. So basically for every vertex they ~~calculate a distance to decal center and and 2D direction, right? That would be quite a lot of code, no?~~ ah I see they discuss an “approximation” method.

---

<div class="post-metadata">

**Author:** ![Dipesh\_Dulal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dipesh_dulal/32/27056_2.png) [@Dipesh\_Dulal](https://discourse.threejs.org/u/Dipesh_Dulal)\
**Post date:** [April 17, 2023, 3:03am UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/9 "2023-04-17T03:03:47Z")

</div>

Umm yes.  
I have found HeatMap method for geodesic approximation to be faster than dijkstras’ algorithm they implement in their code. [Keenan Crane - The Heat Method for Distance Computation](https://www.cs.cmu.edu/~kmcrane/Projects/HeatMethod/)

I think we can calculate the decals uv directly if we have the geodesic distance but not implemented heat-map method directly yet.

---

<div class="post-metadata">

**Author:** ![wikiNed](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wikined/32/31738_2.png) [@wikiNed](https://discourse.threejs.org/u/wikiNed)\
**Post date:** [June 20, 2023, 2:27am UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/10 "2023-06-20T02:27:45Z")

</div>

Did you implement it based on that?I have a similar problem, I want to do color overlay on the 3D model by the power value of the points.But I can’t finish it.And here’s the [link](https://discourse.threejs.org/t/how-to-creating-heatmap-over-3d-model/52744) to my question.Can you help me?

---

<div class="post-metadata">

**Author:** ![Dipesh\_Dulal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dipesh_dulal/32/27056_2.png) [@Dipesh\_Dulal](https://discourse.threejs.org/u/Dipesh_Dulal)\
**Post date:** [June 20, 2023, 3:20am UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/11 "2023-06-20T03:20:06Z")

</div>

@wikiNed  
Checkout this repository.  
I modified a bit from the original geodesic heat method implementation to work with threejs. The code is on react-three-fiber but I think same logic applies to normal threejs as well.

> **[GitHub - dipeshdulal/geodesic-heat-method: Heat method for Geodesic Distance...](https://github.com/dipeshdulal/geodesic-heat-method)**
>
> Heat method for Geodesic Distance Calculation . Contribute to dipeshdulal/geodesic-heat-method development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [June 20, 2023, 7:23am UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/12 "2023-06-20T07:23:45Z")

</div>

what is [eigen\_gen.wasm](https://github.com/dipeshdulal/geodesic-heat-method/blob/48094875bfa1fd8bff54b3f6eb72bd18616bcd45/src/Eigen/eigen_gen.wasm) for

---

<div class="post-metadata">

**Author:** ![Dipesh\_Dulal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dipesh_dulal/32/27056_2.png) [@Dipesh\_Dulal](https://discourse.threejs.org/u/Dipesh_Dulal)\
**Post date:** [June 20, 2023, 7:41am UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/13 "2023-06-20T07:41:36Z")

</div>

@makc3d  
It’s for geometry processing.js library.  
It is a webassembly port of linear algebra library that is used by the geodesic heatmap method.

I am not sure, but I think its [this](https://github.com/BertrandBev/eigen-js) library built.

[geometry-processing.js](https://github.com/geometrycollective/geometry-processing-js) is the original library that does this and many more things.

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [June 20, 2023, 10:27am UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/14 "2023-06-20T10:27:36Z")

</div>

but what exactly is used from eigen? which methods? do you know. because using wasm only for basic vector / matrix math feels like overkill

---

<div class="post-metadata">

**Author:** ![Dipesh\_Dulal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dipesh_dulal/32/27056_2.png) [@Dipesh\_Dulal](https://discourse.threejs.org/u/Dipesh_Dulal)\
**Post date:** [June 20, 2023, 1:15pm UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/15 "2023-06-20T13:15:02Z")

</div>

@makc3d  
Umm. I just used the code from geometry-processing.js (geometry framework without three.js) inside three.js without much modification so, yes its overkill. 😁

I think the functions inside [LinearAlgebra](https://github.com/dipeshdulal/geodesic-heat-method/tree/main/src/LinearAlgebra) i.e. dense-matrix, sparse-matrix, vector are used from the linear algebra library. In the files there are code for LU factorization, QR factorization, and other different linear algebra functions. I am not sure of the actual functions specific used by heat map method, for that I need to take a deep dive into the code.

If we can integrate vector processing, geometry processing functions and some linear algebra functions from three.js core the code code would be a lot better in my opinion. 🙂

---

<div class="post-metadata">

**Author:** ![wikiNed](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wikined/32/31738_2.png) [@wikiNed](https://discourse.threejs.org/u/wikiNed)\
**Post date:** [June 21, 2023, 5:54am UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/16 "2023-06-21T05:54:19Z")

</div>

Thanks,this is very approch to my goal

---

<div class="post-metadata">

**Author:** ![iefreer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/iefreer/32/28788_2.png) [@iefreer](https://discourse.threejs.org/u/iefreer)\
**Post date:** [December 18, 2023, 3:14pm UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/17 "2023-12-18T15:14:05Z")

</div>

Can you please explain what is the exact way to get uv from geodesic distance? thanks.

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [December 18, 2023, 4:11pm UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/18 "2023-12-18T16:11:24Z")

</div>

it is discussed at [page 4](https://web.engr.oregonstate.edu/~grimmc/content/papers/sig2006tm/sig2006tm.pdf#page=4) of 2006 article

TL;DR the way I understood it, you use vertex normals to calculate the transform between tangent planes at those vertices, and then apply these transforms to rotate the edges to decal plane coords.

---

<div class="post-metadata">

**Author:** ![iefreer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/iefreer/32/28788_2.png) [@iefreer](https://discourse.threejs.org/u/iefreer)\
**Post date:** [December 19, 2023, 4:57pm UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/19 "2023-12-19T16:57:47Z")

</div>

thanks for reply, let’s say p is the decal center, q is the vertex to be mapped, we have normal vector at p (Np), and also normal vector at q (Nq), and I also have already calculated the geodesic distance from p to q by some methods, the question now is how to get the theta angle of the q in the tagent plane of p and also the uvs of point q?

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [December 20, 2023, 11:34pm UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/20 "2023-12-20T23:34:40Z")

</div>

by rotating p-\>q vector by the same matrix that rotates Nq to Np and then just projecting on that tangent plane? keep doing it for the rest of the vertices, and you will end up with sort of a tree with the root at p, projected on that plane, then just scale the 2D coords by something and you get UVs. I think.

---

<div class="post-metadata">

**Author:** ![Dipesh\_Dulal](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dipesh_dulal/32/27056_2.png) [@Dipesh\_Dulal](https://discourse.threejs.org/u/Dipesh_Dulal)\
**Post date:** [December 21, 2023, 3:17am UTC](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205/21 "2023-12-21T03:17:52Z")

</div>

Hi all,

I ported the matlab code from the expmap paper into javascript (one to one port).  
[https://www.dgp.toronto.edu/~rms/software/matlabmesh/](https://www.dgp.toronto.edu/~rms/software/matlabmesh/)  
Thie file is `expmap.m`.  
I have shared the part that does expmap uv calculations here;  
Hope it helps.

> <https://gist.github.com/dipeshdulal/a7b4104f65f70d0df1c248360a04a9dd>

BTW, the geodesic heat method that I mention is a slightly different approach to the original deodesic distance paper. I found that the geodesic distance of heat method gives better output than the dijkstras method to approximate the geodesic distance.

I think the calculation of expmap can be avoided fully and use the geodesic heat output to map the uv coordinates. I haven’t tried this approach though. 🙂

[Next page](https://discourse.threejs.org/t/threejs-decalgeometry-alternative/39205.md?page=2)