Texte en perspective 3D sur une page Web

Question

Comment puis-je réaliser des transformations de texte 3D en perspective en utilisant Javascript/CSS.

Solutions utilisant des bibliothèques externes de Javascript/CSS sont également possibles

Answer 1

transformations CSS avec perspective ne sont possibles qu'avec Safari à ce stade. Hélas Chrome, bien que basé sur Webkit, et qui semble soutenir les attributs CSS appropriés, will not apply perspective transformations. Ils seront pris en charge à un moment donné sur Firefox, aucune idée sur IE.

Votre seule autre option est vraiment <canvas>. Cependant, tout comme avec les transformations CSS, l'API canvas fournit uniquement des fonctions pour les transformations affines "2D" (mise à l'échelle, rotation, inclinaison). Avec cela, le mieux que vous pouvez obtenir est une perspective isométrique, car cela peut être réalisé avec juste biaiser. Cependant, étant donné que le canevas vous donne un contrôle au niveau des pixels sur l'image, vous pouvez fausser la perspective, bien que cela soit complexe. La méthode la plus simple consiste à utiliser la fonction putImageData et à calculer chaque pixel à l'aide d'une matrice de transformation perspective 3D. Évidemment, vous devez connaître certaines choses à propos de l'algèbre linéaire et de la trigonométrie. Peu importe vos compétences en mathématiques, faire des transformations 3D à un niveau aussi bas est extrêmement coûteux en termes de performances, et très variable selon les navigateurs (Chrome est le plus rapide de loin, Firefox passera à des framerate assez bas, et Safari est au milieu). Une meilleure solution en termes de performances, mais aussi complexe et mathématique, consiste à utiliser drawImage pour peindre une image/un texte/un canevas une ligne à la fois, et entre chaque changement les valeurs de transformation d'échelle du canevas. C'est exactement la méthode qui a été utilisée pour obtenir une perspective sur le SNES avec le mode 7 qui ne supporte que nativement les transformations 2D.

Another method is detailed here.

Comme vous pouvez l'imaginer rien de tout cela est trivial, et la performance est inégale au mieux. Donc, si vous n'êtes pas prêt à plonger dans une masse d'algèbre linéaire, de trigonométrie et de documentation sur l'API de toile, je dirais que vous n'avez pas vraiment de chance. Toute bibliothèque JS qui fait ce que vous demandez est soumise à toutes ces limitations. Je connais une poignée de démos là-bas, mais aucune qui pourrait vraiment s'appeler une bibliothèque (bien que si quelqu'un sait de quelque chose que je serais heureux d'être corrigé).

Si quelqu'un s'intéresse aux détails noiseux de l'une des approches que j'ai mentionnées, je serais heureux d'essayer de les exposer de manière plus complète. En attendant, vous pouvez jouer avec ma propre démo qui utilise une combinaison des deux premières techniques que j'ai spécifiées.

http://bigmooworld.com/pwings/pilotwings/pilotwings.html

Certains d'entre vous le reconnaître ...

Utilisez WASD pour faire un panoramique, haut/bas pour zoomer, droite/gauche pour tourner, et Q/E pour changer la perspective. N'hésitez pas à parcourir le code, mais sachez qu'il n'est pas bien organisé ou commenté, et que la majeure partie de ce code est rejetée.

Donc de toute façon ma réponse est ... Oui c'est possible, facilement en Safari, ou avec beaucoup d'effort et de mauvaise qualité dans d'autres navigateurs (et il y a probablement un moyen dans IE mais je n'ai aucune idée de comment).