ThreeJS DecalGeometry Alternative

Questions
,
1

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.

2

Related:

1 Like
3

Thank You. I think there are no alternatives available for it then. :cry:
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.

1 Like
4

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

5

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

1 Like
6

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;

Matlab Code:
https://www.dgp.toronto.edu/~rms/software/matlabmesh/

Hope this helps.

5 Likes
8

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.

9

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

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

2 Likes
10

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 to my question.Can you help me?

11

@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.

1 Like
12

what is eigen_gen.wasm for

13

@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 library built.

geometry-processing.js is the original library that does this and many more things.

14

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

15

@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. :grin:

I think the functions inside 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. :slight_smile:

16

Thanks,this is very approch to my goal

17

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

18

it is discussed at 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.

1 Like
19

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?

20

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.

21

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/
Thie file is expmap.m.
I have shared the part that does expmap uv calculations here;
Hope it helps.

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. :slight_smile:

1 Like