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 .