Techno visualisation données 3D

a marqué ce sujet comme résolu.
Auteur du sujet

Hello,

Pour un projet de recherche qui se finit, nous cherchons à mettre en place un site web pour que le public (plus ou moins averti) puisse accéder à nos résultats.

Nous avons de l’ordre d’un millier de data-sets de points 3D (chacun de l’ordre de 100k points). Jusque là, pour présenter les résultats, nous avions un bricolage qui consistait à faire 3 projection sur 3 plans, puis à afficher les images. Avec un script (à revoir…) on avait un affichage qui se faisait en passant la souris au-dessus de la coordonnée de la simulation.

J’étais curieux de vous demander ici si :

  • vous connaissez des technos web appropriées pour faire de l’affichage 2d qui change au survol de la souris (comme on a actuellement, mais en plus propre et efficace) ;
  • des technos web pour afficher de la 3d (avec le data set qui change aussi au survol, ou en cliquant (pour avoir le temps de mettre en cache)).

Nous sommes des matheux … pas des codeurs web, du coup il faudra être gentil =D

On aura peut-être avec la fac des moyens humains pour du code, et très probablement des moyens matériels avec un serveur. Du coup, c’est juste ici histoire de creuser les différentes pistes pour se faire une idée des contraintes réelles

+1 -0

Tu peux regarder du côté de Wolfram Mathematica et Jupyter pour obtenir des notebooks animés. C’est très utilisé aujourd’hui par la communauté scientifique. L’inconvénient c’est que ça ne semble pas s’intégrer à une page web (pas les animations, le contenu peut s’exporter au format HTML).

Pour de la 3D, tu as Three.js. Pour de la 2D, tu as p5js.

Édité par Yarflam

Tant de choses, tant de vies, tant de possibilités.

+0 -0

Les solutions types jupyter ne sont pas du tout assez performantes. Actuellement on utilise ParaView, qui a déjà du mal à suivre

Holosmos

Je comprends, tu risques d’avoir le problème quelque soit la techno. J’ai codé une simulation en 3D, des points pop continuellement ça te permettra de te donner un ordre d’idée niveau perf. : heaplifes.

Sinon je plussoie Unity, en dernier recours.

Tant de choses, tant de vies, tant de possibilités.

+0 -0

Cette réponse a aidé l’auteur du sujet

Alors pour la dataviz j’ai D3.js qui me vient en tête, à base de SVG.

Sinon la 3D en Web c’est globalement vite compliqué, même sur des rendus assez basiques ma machine se prend pour un hélicoptère alors que j’ai quand même un peu de puissance en réserve…

Il y a toujours WebGL si tu veux t’amuser à tout faire, autrement Unity peut être un bon outil puisque bien documenté et de mémoire manipulable avec du JS.

Mes tutos — Architecte technique : JS/Node/Angular/Mongo, PHP/MySQL, AWS — Consultant qualité, ergonomie et UX

+0 -0

D3.js pour 100k points, ça va être chaud.

WebGL, j’ai jamais testé mais ça me semble la seule qui puisse répondre au besoin. :S

PS: La projection xx, yy, zz est déjà assez longue, je suppose que dernière c’est du canvas HTML. C’est signe que même WebGL aura un peu de mal à afficher ça (en admettant que les performances sont égales à celle que je connais d’OpenGL). Je crois que connaître toute la théorie sur les matrices de rotation vous sera utile à ce niveau là, il ne me semble pas que ce soit gérer par OpenGL/WebGL.

Édité par ache

ache.one                 🦹         👾                                🦊

+0 -0

Cette réponse a aidé l’auteur du sujet

Hey, 100k points c’est rien du tout xD Tu m’aurais dis 100M, je t’aurais dit que c’était plus compliqué ^^ (je fais les objets pour un jeu en 3D sur navigateur avec Three.JS, et je peux te dire qu’il y a plus que 100k points à l’écran, avec en plus des triangles, des textures, des lumières et ombrages, etc etc, et que ça tourne même sur smartphone)

Three.JS ou Babylon.JS devraient te convenir.

https://threejs.org/examples/?q=Poi#webgl_interactive_raycasting_points

Après, si tu as des besoins plus spécifiques ou autre, hésite pas à être plus précis sur le genre d’interaction que tu veux ;)

+0 -0
Auteur du sujet

100k c’est le minorant oui, ça monte des fois à 50M, mais c’est pas le plus préoccupant.

Pour les interactions, on aurait juste besoin de laisser l’utilisateur zoomer et faire des rotations.

Tu n’aurais pas par hasard un exemple minimal pour que je puisse tester ?

+0 -0
Auteur du sujet

Oui j’ai vu cet exemple et je n’excède pas 30fps. Mais ceci dit c’est pas mal.

Je n’ai pas réussi à faire fonctionner le code, mais c’est probablement du à mon inconnaissance des technos web …

Ceci dit, je garde l’info, et si on obtient un ingénieur pour coder le site, je ressortirai ça comme exemple

Édité par Holosmos

+0 -0

Oui j’ai vu cet exemple et je n’excède pas 30fps. Mais ceci dit c’est pas mal.

Holosmos

Ah oui quand même, je suis à 54 fps avec une carte graphique plutôt vieille (Nvidia 940M).

Après tu ne peux pas réduire le nombre de points ? En groupant par rayon d’affichage par exemple.

Tant de choses, tant de vies, tant de possibilités.

+0 -0

edit: Grillé par Yarflam

Après, il est possible d’optimiser tout ça. Par exemple tu peux ne pas afficher certains points en fonction de la distance à la caméra et de la distance entre les points (car de toute façon, 25 points sur un pixel… ^^)

En faisant des octrees, il y a parfaitement moyen de réduire la complexité d’affichage et de tourner beaucoup plus rapidement.


Votre format de données est complexe ? Car si tu m’envoies un exemple, je peux peut-être voir si ça peut se faire rapidement.

Édité par JuDePom

+0 -0

Cette réponse a aidé l’auteur du sujet

Oui bien sûr, voici un exemple (relativement léger)

Chaque ligne est un point, et chaque colonne une coordonnée !

Holosmos

Je viens de tester un rendu : https://codesandbox.io/s/points-threejs-4invk.

Le chargement est relativement rapide. Y’aurait de quoi encore optimiser. Pour tourner autour c’est un peu lent. Faudrait creuser. :) Sinon j’aime bien cette forme fractale, c’est esthétique.

Tant de choses, tant de vies, tant de possibilités.

+0 -0
Auteur du sujet

Mmh c’est pas franchement efficace.

J’avoue avoir une machine sans CG, mais faut voir que la normale des matheux n’a pas de machine pour jouer…

Qu’est-ce qu’il y aurait comme solution pour accélérer ? C’est three.js qui limite?

En tout cas merci beaucoup d’y passer du temps <3

Édité par Holosmos

+0 -0

Cette réponse a aidé l’auteur du sujet

Je me suis basé sur ce qu’a fait @Yarflam , et j’ai un peu (beaucoup) réduit la charge GPU ^^

https://codesandbox.io/s/points-threejs-4viye

Edit:

J’ai ajouté un multiplier en haut du fichier test.js, il sert a ajouter x fois le nombre de points, histoire d’avoir un fichier un peu plus lourd. Du coup chez moi avec 7 000 000 de points ça met une dizaine de secondes à charger, mais ça s’affiche.

Après, ce qui ralentit pas mal, c’est les timeouts successifs, hébergé en local ou sur un site web qui ne bloque pas si une boucle fait 10001 exécution, le chargement devrait être plus rapide.

Édité par JuDePom

+2 -0

Je me suis basé sur ce qu’a fait @Yarflam , et j’ai un peu (beaucoup) réduit la charge GPU ^^

https://codesandbox.io/s/points-threejs-4viye

JuDePom

Efficace, bien joué ! :)

La rotation marche même sur smartphone maintenant. A voir sur un PC sans GPU … De mon côté au-delà de 3 000 000 points il commence à prendre cher.

Édité par Yarflam

Tant de choses, tant de vies, tant de possibilités.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte