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:

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.

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?

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.

3 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