Images 3D sans lunettes : comment créer un GIF animé en 3D

Contenus de la page

J’ai créé un programme qui crée des GIF animés à partir de photos et de vidéos. Ensuite, je l’ai utilisé pour faire des animations 3D.

Créé avec les deux mêmes images que j’ai utilisées pour créer une véritable image 3D.

Michel H

Véritable 3D

Regardez votre ordinateur ou votre téléphone et chaque œil voit d’un point de vue différent. Deux images sont combinées pour former une image tridimensionnelle. Les images 3D réelles sont des images stéréoscopiques. Une image gauche et droite sont fusionnées. Lorsque vous portez un casque ou une paire de lunettes, chaque œil voit une image différente. J’ai acheté une paire de lunettes anaglyphes tridimensionnelles et j’ai commencé à faire des images qui sortaient de l’écran.

Les vraies images stéréoscopiques peuvent être superbes. L’image peut sembler plus intéressante que la réalité. J’ai pris une photo de ma tasse à café et c’est devenu l’une de mes photos les plus populaires. C’est intéressant car la poignée semble sortir de l’écran. Le problème est que la plupart des gens ne peuvent pas voir l’effet. Certaines personnes ne peuvent pas voir en stéréo et la plupart des gens n’ont pas de lunettes spéciales. Un autre problème est qu’ils ne sont pas beaux lorsqu’ils sont vus sans lunettes 3D.

Gardez à l’esprit

Une paire de lunettes 3D de haute qualité coûte environ 8 $.

3D sans lunettes

GIF de profondeur fractionnée sont des GIF animés avec des barres. Les images semblent être contenues dans votre écran plat. Placer des barres sur une image peut donner l’impression que les barres sont devant tout le reste. Retirer une partie d’une barre peut donner l’impression que les barres sont derrière quelque chose. Lorsque le sujet n’est plus obstrué par les barreaux, il semble être devant eux. Les bars étaient tout à l’avant. Puis une image passa devant. Il semble donc être devant l’écran. C’est un effet d’évasion en trois dimensions.

Stéréoscopie oscillante est créé en alternant rapidement entre des images similaires. Prenez deux photos du même sujet sous deux angles différents. Créez ensuite un GIF animé ou une vidéo. Passer rapidement d’une perspective à une autre peut ajouter une apparence de profondeur. Les deux yeux voient les deux images, ce n’est donc pas une vraie stéréoscopie.

Le principal avantage des animations de profondeur divisée et de la stéréoscopie oscillante par rapport aux images stéréoscopiques est qu’elles peuvent fournir un effet tridimensionnel sans lunettes. Vous pouvez obtenir des images intéressantes et il est facile de les partager. Les principaux inconvénients sont que l’effet est limité et qu’ils peuvent être plus difficiles à fabriquer. Les vraies images 3D peuvent fournir plus de profondeur et elles peuvent être réalisées en 30 secondes.

La main immobile semble bouger devant les barreaux.

Michel H

Ma première animation en stop motion

J’ai pris des photos du jouet avec le bras dans différentes positions pour créer du mouvement.

Michel H

Comment créer des GIF animés

Les GIF animés sont créés à l’aide d’une série d’images. Prenez 2 photos ou plus ou une courte vidéo. Enregistrez ensuite les images en tant que GIF animé. Ils sont généralement petits et courts. La plupart répètent sans cesse. Pour une transition en douceur, les images de début et de fin doivent être similaires ou identiques. Dans l’animation ci-dessus, j’ai ajouté les images dans l’ordre. Ensuite, j’ai ajouté les mêmes images dans l’ordre inverse. Il se termine au début.

Ils sont populaires en ligne, mais il peut être difficile de les consulter et de les utiliser hors ligne. Souvent, vous n’obtenez que la première image. Je ne pouvais voir les GIF que sur des pages Web, dans des e-mails ou en ouvrant les images avec un navigateur. Faites un clic droit et sélectionnez « Ouvrir avec » votre navigateur préféré. Les animations qui s’affichent bien sur votre ordinateur ou votre site Web peuvent être bloquées sur les sites de médias sociaux si les dimensions sont trop grandes.

Pour enregistrer une vidéo ou une série d’images sous forme de GIF animé, vous devrez trouver un programme ou créer le vôtre. Les créateurs de GIF en ligne sont faciles à trouver. Vous pouvez également utiliser un programme de peinture comme Photoshop. Toutes mes animations ont été réalisées à l’aide d’un créateur de GIF 3D que j’ai réalisé pendant que j’apprenais à créer des images en trois dimensions qui ne nécessitaient pas de lunettes spéciales.

Les GIF ont moins de couleurs. Cela réduit donc la qualité des images. Vous voudrez peut-être faire les animations sous forme de vidéos, de fichiers WebP ou d’APNG. Un APNG utilise des images PNG pour l’animation au lieu de GIF. Avec ces alternatives, vous obtenez une meilleure qualité et une taille de fichier plus petite. L’inconvénient est qu’il est moins susceptible de jouer. Lorsqu’il était joint à un e-mail, je devais enregistrer le fichier PNG et l’ouvrir dans un navigateur Web pour afficher l’animation.

J’ai utilisé TinyPNG pour réduire la taille de mon animation Star Wars de 70 %. Pour la plus petite taille possible, je recommande WebP ou vidéo. Il est facile de faire en sorte qu’une courte vidéo se comporte comme un GIF animé sur une page Web. L’élément vidéo dans le code ci-dessous lit la première vidéo qui fonctionne avec le navigateur de l’utilisateur. L’élément image affiche la première image qui fonctionne.

Coups de poing de boxe profondeur divisée GIF.

Michel H

Faites défiler pour continuer

Un autre truc

Faire des barrières et des frontières. Ensuite, percez-les.

Éclater

L’effet d’éclatement de l’écran fonctionne mieux lorsque les objets se rapprochent de la caméra. Au fur et à mesure qu’il se rapproche, il devient un peu plus gros. L’ajout de barres n’est pas le seul moyen de donner à une image un aspect 3D. Vous créez une illusion d’optique. Essayez d’inciter le spectateur à faire de fausses hypothèses en créant de fausses bordures.

Pour l’animation du tank, j’ai pu utiliser un filtre pour effacer la couleur de fond. Le plus difficile n’est pas d’effacer accidentellement l’objet en mouvement pendant que vous supprimez les couleurs d’arrière-plan. Dans la deuxième animation, j’ai utilisé une image fantôme transparente du domaine public. Tout ce que j’avais à faire était de changer la taille du fantôme 50 fois et j’ai demandé à mon programme de le faire pour moi.

images-3d-sans-lunettes-comment-faire-un-gif-animé-3d

Réduire l’espace blanc

La photo ci-dessus semble avoir beaucoup d’espace blanc en dessous. Étant donné que la photo est censée apparaître plus petite qu’elle ne l’est, la distance entre elle et le reste du contenu de la page doit être minimisée. L’espace blanc peut être réduit en ajoutant du texte ou des images à l’arrière-plan de l’image ou en les plaçant sous l’image.

J’ai ajouté du texte à l’image mais j’aurais pu faire plus. Si l’image ci-dessus avait un arrière-plan transparent, je pourrais la mettre sur une page Web avec du texte en dessous sous l’image d’arrière-plan. L’animation serait au-dessus d’un autre contenu, mais le texte serait visible jusqu’à ce que le fantôme soit dessus.

L’effet d’éclatement fonctionne mieux lorsque l’arrière-plan de la page correspond à l’image. J’ai fait les images sur cette page pour un fond blanc. Les arrière-plans transparents correspondent toujours à l’arrière-plan. Au lieu d’avoir du blanc autour de l’image d’arrière-plan, celle-ci pourrait être de la même couleur que la zone qui l’entoure. Vérifiez si le créateur de GIF ou le programme de peinture que vous utilisez vous permet de créer un arrière-plan transparent.

Les types de fichiers prenant en charge la transparence incluent PNG, WebP, WebM, Mov et GIF. Les images et les vidéos peuvent être vues à travers. Pour voir un exemple, consultez mon animation Star Wars. Ouvrez-le dans un nouvel onglet pour le voir avec un fond noir. Je ne recommande pas de créer des GIF avec des arrière-plans transparents. Les bords lisses peuvent devenir irréguliers.

Positionnement du contenu sur une page Web

Le code ci-dessous modifie la position du texte sur la page afin qu’il soit sous l’image. GetBoundingClientRect obtient l’emplacement et les dimensions de l’image. Position lui indique que la position est définie à l’aide du code sur la page. La définition des valeurs de gauche et du haut lui indique où le texte doit apparaître. Vous pouvez copier le code et l’enregistrer dans un éditeur de texte comme le Bloc-notes dans un répertoire avec une image.

Le nom de fichier « transparent.gif » doit être remplacé par le fichier que vous souhaitez utiliser. Pour de meilleurs résultats, utilisez un GIF transparent. Le fichier s’ouvrira dans votre navigateur Web par défaut. Changer la position du contenu sur une page Web peut être très utile pour les effets spéciaux, les jeux et les éditeurs d’images en ligne.

poste.htm






Moving Text Under a Picture  
  


Make a transparent image appear smaller than it is by placing text or images under it.

Images 3D

Les GIF à profondeur fractionnée sont presque en 3D.

Stéréogrammes 3D Wiggle

Les stéréogrammes sont des images qui combinent une perspective gauche et droite. Les différents angles permettent de les voir en 3D. Les images Wiggle sont censées pouvoir fournir un véritable effet 3D sans lunettes. Ils peuvent ajouter de la profondeur, mais ils semblent seulement entrer dans ou derrière l’écran. Pour les faire, vous avez juste besoin de deux ou trois images. Une photo de gauche, de droite et une transition facultative prise entre la gauche et la droite. La photo du milieu serait utilisée deux fois.

Créer des GIF agités est vraiment facile, mais il peut être difficile d’en créer des que les gens aiment regarder. Limitez la quantité de secousses. Habituellement, vous voulez que les deux images soient centrées sur le sujet principal afin que le sujet de l’image bouge à peine. Cela ne devrait pas donner l’impression que vous enregistrez un tremblement de terre.

Images partiellement 3D

Les stéréogrammes Wiggle sont vus par les deux yeux, vous n’obtenez donc pas le plein effet.

Avec ou sans lunettes

La stéréoscopie Wiggle est comme une contrefaçon bon marché de véritables images stéréoscopiques. Les images sont tremblantes et elles ne sortent pas assez de l’écran. Les images 3D réelles ont tendance à être bien meilleures, mais elles nécessitent des lunettes spéciales. Utilisez la stéréoscopie oscillante si vous voulez que plus de personnes voient l’effet. Utilisez la vraie 3D pour de meilleurs résultats. Vous pouvez utiliser les mêmes images pour faire les deux.

Les GIF animés à profondeur fractionnée ne fournissent pas un véritable effet 3D et nécessitent plus de temps et d’efforts. Ils ont tendance à être plus intéressants à regarder que les images stéréoscopiques agitées. Je pense donc qu’ils valent l’effort supplémentaire. J’ai aimé les résultats que j’ai obtenus lorsque j’ai ajouté des barres, mais mes préférées semblent quitter l’image.

Si vous souhaitez créer des images en trois dimensions, je vous recommande de vous procurer une paire de lunettes en trois dimensions afin de pouvoir réaliser de véritables animations en 3D, en 3D et en profondeur fractionnée. Faites des images qui ont l’air bien avec les lunettes et d’autres qui ont l’air bien sans elles. Les images sur cette page sont quelques-unes des premières animations que j’ai faites. J’apprenais encore à les fabriquer et je n’avais pas beaucoup de pratique. Utilisez-les comme exemples, mais essayez de faire mieux.

Quelques liens plus utiles

PNG animé en 3D d’un vaisseau Star Wars. Image de fond prise par la NASA.

Michel H

Ce contenu est exact et fidèle au meilleur de la connaissance de l’auteur et ne vise pas à remplacer les conseils formels et individualisés d’un professionnel qualifié.