Création de carte thermique sur un modèle 3D à partir de données vectorielles à 3 points

Question

Je tente de rendre une carte thermique plate, créée dynamiquement, au-dessus d'un modèle 3D chargé à partir d'un OBJ (ou STL).

Je suis actuellement en train de charger et de rendre un OBJ avec Three.js. J'ai vector3 points que je dessine actuellement en cubes rouges simples (image ci-dessous). Ces points de données sont tous raycasted à ma maille OBJs et sont étendus sur la surface. Les points vector3 sont chargés à partir d'une source de données externe et changeront en fonction des données visualisées/collectées.

Je voudrais rendre mes données de point de vector3 dans un heatmap sur la surface de mon OBJ. Voici quelques exemples illustrant le type d'effets visuels que je suis en train de réaliser:

je me sens comme coloration des sommets est la méthode de réalisation ceci, mais mon problème est que mon modèle OBJ n'a pas assez de tessellation pour le faire. Comme vous pouvez le voir beaucoup de points rouges tombent sur chaque visage. J'ai du mal à trouver un moyen de dessiner le maillage de mon objet avec des couleurs exactement où mes données de point rouge est. Je supposais que je devrais convertir mes points vector3 aléatoires dans un maillage, mais ne peux pas trouver une méthode pour le faire.

J'ai regardé la possibilité de générer une texture, mais 1) Je n'ai pas de carte UV pour mes OBJs et je ne vois pas comment les générer par programmation et 2) Je suis un peu perdu sur la façon dont je corrélerait les données ponctuelles vectorielles aux points UV. J'ai regardé l'utilisation des shaders, mais mes données de point vector3 semblent être trop grandes pour utiliser un shader (cela pourrait être des centaines de milliers de points). Je pense aussi que ce n'est pas la bonne approche pour rendre le heatmap à chaque image et que je préfère le rendre une fois en charge. J'ai étudié les isosurfaces avec des nuages ​​de points et l'algorithme des cubes de marche, mais je ne pensais pas que c'était la bonne direction puisque seules mes données ressemblaient un peu à un nuage de points, et je ne sais pas trop comment Je garderais cela en douceur le long de la surface de ma maille OBJ. Bien que je préfère garder tout en JavaScript pour l'affichage dans le navigateur, je suis prêt à faire du traitement côté serveur dans n'importe quel langage/programme avec REST, tant qu'il peut être automatisé sans intervention humaine, et repoussé à la navigateur pour le rendu.

Toutes les suggestions ou conseils sont appréciés.

Answer 1

Je ne fais que deviner, mais il semble que vous devez d'abord avoir des coordonnées UV qui mappent chaque triangle à une texture. Plutôt que de le faire à la main, je suggère d'utiliser un package de modélisation. La plupart des paquets de modélisation ont un moyen de mapper automatiquement et uniformément chaque triangle à une texture. Ensuite, pour placer le heatmap dans la texture, calculez les triangles affectés par chaque point (votre raycasting), en recherchant leurs coordonnées de texture, en projetant ce point dans l'espace de texture et en mettant les couleurs dans cette partie de la texture .Je devine seulement que vous devez non seulement faire des points exacts mais probablement devoir considérer des triangles adjacents puisque certaines informations de chaleur qui frappent près du bord d'un triangle doivent saigner dans le triangle adjacent mais ce triangle adjacent pourrait utiliser complètement partie différente de la texture.