Discussion :

[elkyu]

Bonjour,

Tout d'abord désolé si je ne suis pas exactement au bon endroit sur ce forum, je ne suis pas un habitué de ce site.

J'ai besoin de votre aide pour me guider pour une réalisation personnelle.

Je vous explique le concept :

Je voudrais créer une sphère 3d avec dessus plusieurs "facettes", plusieurs visuels, images correspondant chacune à un projet par exemple. Au clique sur une de ces images j'aimerais un effet de zoom dans la sphère, comme si on entre dans la sphère et une fois dedans charger le contenu ou la page correspondant à l'image choisi.

Je ne sais pas si tout cela est très clair.

Je précise que je n'ai pas beaucoup de connaissance en javascript et que je ne sais pas trop par où commencer, comment l'aborder etc ..

Pour ce qui est de la sphère, il y a par exemple http://seenjs.io/ ou http://www.babylonjs.com/ qui permettent d'en créer, mais une fois la sphère créée je ne sais pas comment l'adapter, créer l'effet que je veux etc ..

Pouvez-vous m'aider ?
Peut-être avez vous des exemples de réalisation similaire à ce que je voudrais faire ?
Pouvez-vous m'indiquer la marche à suivre ?

Merci d'avance

[p3ga5e]

Salut,
Si j’avais à réaliser cet effet, j’utiliserai la techno WebGL,
Pour chaque projet image, j’instancierais un quadrilatère que je projetterai sur une sphère par une position en coordonnées sphériques et une résolution (hauteur et largeur) en angle d’ouverture.
Pour la transition , j’ajouterai un facteur d’interpolation linéaire qui a l’état 0, serai la projection du quadrilatère sur la sphère et a l’état 1 serait la projection du quadrilatère sur le plan 2D

Si j’ai le temps, cet am je posterai un bout code pour t’aider à débuter.

[elkyu]

Bonjour,

Merci de cette réponse et du temps que tu prend pour t'y intéressé. Je regarderai tout ça ce soir en rentrant, calmement.

Un début de code m'aiderai beaucoup oui ! Encore merci !
Il va pleuvoir des lignes de codes pendant ce week end de 3 jours je sent.

[p3ga5e]

Bon ! voilà ce que j’ai réalisé

Je pense que c’est un bonne base de départ, pour le moment je rasterise, un quadrilatere par projet, dans l’espace 2D Equirectangulaire, le centre de chaque projet est exprimé par Array contenant la Longitude et la Latitude.
Cette vue a l’avantage de définir les positions des quadrilatères sur la sphère

Bon pour la prochaine étape, je dois réviser un peu les équations de projection de perspective

Tu as de la chance que je m’ennuis royalement au boulot en ce moment de plus lundi je bosse ( jour de solidarité pour les vieux)

[elkyu]

Merci pour tout ça, je pense comprendre la façon dont tu amènes le truc.
Je vais prendre tout ça et essayer d'en faire quelques chose ce week end.

Merci beaucoup encore une fois

[p3ga5e]

J’ai peut-être été un peu vite et trop optimiste

Un simple quad ne peut pas être projeté sur une sphère, tel quel , seule ces sommets peuvent l’être , dans l’espace 3D orthogonal le quad va couper la sphère et ne pas suivre la courbe de la sphere.

Je vois 3 solutions pour palier à ce problème :

1. Subdiviser le quadrilatère en plus de 2 triangles , afin de disposer de sommets suffisant pour approximer au mieu la courbe de la sphere
2. Mapper en tant que texture le résultat de ma projection Equirectangulaire sur une sphère polygonnal
3. Sortir des sentiers battus et utiliser uniquement le pixel shader pour rayer les polygone de l’équation en s’inspirant des techniques de raytracing temps réel ( le raymarching )

[elkyu]

oulah ça deviens compliqué cette histoire j'avoue que ça me dépasse un peu tout ça .. mais j'ai vraiment envie de la faire cette sphère, je ne lache pas

Merci pour tout le mal que tu te donnes ..

[elkyu]

Au passage, j'ai trouvé quelque chose qui s'approche de ce que je veux et qui utilise three.js
http://lightgraffiti.littlesun.com/

[p3ga5e]

Ok ! Cela te sera peut-être plus clair avec ce visuel
Comme tu peux le voir les sommets des quadrilatères se trouve bien sur la sphère mais le polygone (composé de 2 triangles) n’épouse pas la forme sphérique.
Toutefois cela peut ne pas être trop gênant si la taille des quadrilatères reste petit ( de l’ordre de 1 a 2 dégrée d’ouverture)

Si quelque chose t’échappe n’hésite pas à poser des questions, je te demanderais juste d’etre plus précis que "Je comprends rien"

[p3ga5e]

J’ai opté pour la 1er solution, c’est à dire subdiviser les quadrilatères afin de disposer d’un maillage suffisant pour qu’ils épousent la courbe de la sphère

Voilà ce que cela donne

Prochaine étape le texturage des quadrilatères

[p3ga5e]

J’ai pensé, a tort, que l’étape de texturage des quadrilatères serait une simple formalité
En réalité je me suis heurté a 2 problèmes :

1. La sécurité : impossible de transférer en mémoire vidéo une image en provenance d’un autre domaine, pourtant on peut la charger en RAM et la dessiner dans un canvas avec le context 2D. Du coup pour jsfiddle j’ai embarqué les images en base64 directement dans le code JavaScript
2. La semi-transparence : mon idée première était de gérer toutes les opérations géométrique dans le VertexShader et d’en faire le moins possible coté CPU, mais comme peu le voir ici certaine image ( notament le logo de developpez.com) bien qu’ayant de la semi-transparence cache d'autre image. Cela explique pourquoi un moteur 3D doit gérer les rendus des objets semi-transparents a part car on doit appliquer l’algorithme du peintre à chaque rendu. Ce que j’ai fait ici en ajoutant un tri sur les distances de chaque quadrilatère.

Prochaine étape la gestion du click pour sélectionner une image .