Je crée un globe 3D avec une carte qui est censée défaire et remplir l'écran après quelques secondes.WebGL Change Shape Animation
J'ai réussi à créer le globe en utilisant three.js et webGL, mais j'ai du mal à trouver des informations sur la possibilité d'animer un changement de forme. Quelqu'un peut-il fournir de l'aide? Est-ce même possible?
En 3D, tout et n'importe quoi est possible. ;)
La géométrie de votre sphère possède ses propres sommets, et fondamentalement vous avez juste besoin d'animer leur position, donc après l'animation, ils sont tous assis sur une surface plane. Essayez de créer une géométrie de sphère et de plan, avec le même nombre de sommets, et d'animer les sommets de la sphère avec les valeurs interpolées des valeurs originales de la sphère et du plan. De cette façon, au début, vous auriez une forme de sphère et à la fin, une forme d'avion.
J'espère que cela aide, dites-moi si vous avez besoin de plus de directives sur la façon de le faire.
myGlobe.geometry.vertices[index].position = something_calculated;
// myGlobe is instance of THREE.Mesh and something_calculated would be THREE.Vector3 instance that you can calculate in some manner (sphere-plane interpolation over time)
(réponse de Résumé algorithme est bonne, mais je pense une chose qu'il faut améliorer. À savoir l'utilisation vertex shaders)
Vous faites un ensemble de sommets texture à l'image de la carte. Ensuite, concevez un calcul pour interpoler entre la forme de la sphère et la forme plate. Cela ne doit pas nécessairement être une interpolation linéaire - par exemple, une façon qui pourrait être bonne est de placer la carte sur une petite partie d'une sphère de rayon croissant jusqu'à ce qu'elle soit plate (l'obtenir tout le chemin sera difficile).
Ensuite, écrivez ce calcul dans votre vertex shader. La position de chaque sommet peut être entièrement calculée à partir des coordonnées de la texture (puisque cela détermine où va le sommet sur la carte et implique sa position) et une variable uniforme contenant une valeur de temps. L'utilisation du vertex shader sera beaucoup plus efficace que le recalcul et le re-téléchargement des coordonnées en utilisant JavaScript, permettant une animation parfaitement fluide avec beaucoup de ressources de rechange pour faire d'autres choses. Malheureusement, je ne suis pas assez familier avec Three.js pour décrire comment faire cela en détail, mais tout ce qui précède est simple dans WebGL de base et devrait être possible dans n'importe quel cadre décent.
Merci. Je voulais aussi dire vertex shader, ajoutant simplement un attribut supplémentaire, et Three.js propose d'ajouter des attributs personnalisés à travers ShaderMaterial. –
@AbstractAlgorithm OK, désolé "à ce sujet. Prenez le mien comme un petit éclaircissement alors :) –
Je suis vraiment à la recherche d'une façon de faire trois.js car je n'ai que quelques jours pour l'utiliser. J'espérais juste pouvoir dire, c'est une sphère, c'est un avion, animer de l'un à l'autre. – ise
(réponses de Résumé d'algorithme et Kevin Reid sont bons, et une seule chose manque:. Un code Three.js réel)
Vous devez essentiellement calculer où chaque point de la sphère d'origine sera mis en correspondance après il s'aplatit dans un avion. Cette donnée est un attribut du shader: une donnée attachée à chaque sommet qui diffère du sommet au sommet de la géométrie. Ensuite, pour animer la transition de la position d'origine à la position finale, dans votre boucle d'animation, vous devrez mettre à jour la durée écoulée. Cette donnée est un uniforme du shader: une donnée qui reste constante pour tous les sommets au cours de chaque trame de l'animation, mais qui peut changer d'une image à l'autre. Enfin, il existe une fonction pratique appelée "mix" qui interpolera linéairement entre la position d'origine et la position de fin/but de chaque sommet.
J'ai écrit deux exemples pour vous: le premier "aplatit" une sphère, envoyant le point (x, y, z) au point (x, 0, z).
http://stemkoski.github.io/Three.js/Shader-Attributes.html
Le deuxième exemple suit la suggestion de Résumé algorithme dans les commentaires: « déballant retour des sommets de la sphère sur la surface plane, comme la cartographie UV sphère inverse. » Dans cet exemple, nous pouvons facilement calculer la position finale à partir des coordonnées UV, et nous n'avons donc pas besoin d'attributs dans ce cas.
http://stemkoski.github.io/Three.js/Sphere-Unwrapping.html
Hope this helps!
Je suis totalement nouveau à utiliser et je n'ai aucune idée de la façon dont je suis supposé animer les sommets avec des valeurs interpolées. Si j'ai une forme de sphère et une forme plane, ils ont des nombres différents de sommets? Je n'utilise que trois.js depuis quelques jours, tout cela est complètement nouveau pour moi. Si je dois commencer à écrire du code shader, cela ne sera pas compatible avec tous les navigateurs et ce n'est pas ce dont j'ai besoin. – ise
Vous pouvez simplement calculer la position des sommets. Les sommets de Sphère sont quelque peu groupés dans les parallèles. Ainsi, pour chaque sommet, vous pouvez calculer un angle à partir du méridien «de départ», puis convertir en position sur la surface plane. C'est pour l'axe X, alors que Y reste le même. C'est comme si vous déplaciez les sommets de la sphère sur la surface plane, comme la cartographie UV de la sphère inverse. –
Cela pourrait aider: http://learningwebgl.com/blog/?p=1253. Dans ce tutoriel, vous apprendrez comment créer des sommets de sphère et assigner une assignation à une coordonnée UV [0..1], alors que vous avez besoin du processus inverse, convertissant ainsi la position du vertex en [0..1] et que vous pourriez redimensionner jusqu'à [-width/2..width/2] de l'avion. –