Le web est souvent vu comme un support décidément bidimensionnel. Et pour être juste, ça l'est. C'est ce pour quoi il a été conçu.
De plus, l'ajout de graphiques en trois dimensions, rendus en direct, nécessite traditionnellement des plug-ins. Macromedia nous a donné Shockwave, Unity nous a donné Unity Web Player, et nous avons surtout utilisé des graphismes 3D pour les jeux.
HTML5, CSS3, et un peu de code JavaScript ont fait beaucoup pour changer cela, cependant. Oh, il est encore principalement utilisé pour les jeux, mais vous pouvez aller plus loin et intégrer les graphiques dans un site plus facilement que jamais.
Bien sûr, nous avons toujours des problèmes de convivialité. Un site qui dépend de graphiques 3D pour la navigation ou du contenu essentiel reste une idée terrible. Cependant, lorsqu'il est utilisé avec l'amélioration progressive, la 3D est un moyen viable et même performant de prendre les choses en main.
À cette fin, je présente voxel.css .
voxel.css est un framework qui utilise CSS3 pour faire le gros du rendu des objets 3D. JavaScript est utilisé pour ajouter de l'interactivité, déclencher les animations et à peu près tout le reste.
Eh bien, c'est du CSS dont nous parlons. Vous n'allez pas obtenir de graphiques de niveau Crysis. Comme son nom l'indique, vous obtenez beaucoup de cubes. Pensez Minecraft dans le navigateur. (Et quelqu'un va construire un clone Minecraft avec ceci dans trois ... deux ...)
Cependant, vous pouvez faire des choses impressionnantes avec des graphismes complexes. Pensez-y comme prenant l'art à 8 bits à un tout autre niveau.
L'implémentation de base de voxel.css nécessite uniquement l'inclusion de la bibliothèque et 15 lignes de code. Cela crée une scène virtuelle sauvegardable où vous pouvez éditer vos modèles, pointer-cliquer sur le style.
Vous pouvez ensuite afficher ces scènes sur une page Web et les animer comme vous le souhaitez.
Utilisez un fichier PNG pour la transparence, un fichier GIF pour l'animation ou un fichier SVG pour une évolutivité illimitée. Utilisez un format JPG pour des raisons inconnues ou le format WebP car vous aimez les choses qui ne sont pas encore implémentées dans tous les navigateurs.
Il y a même une démo qui utilise des images en direct de votre webcam comme textures pour les blocs.
Encore une fois, c'est CSS3. Vous pouvez utiliser la puissance de rendu supérieure de la carte graphique d'un périphérique (ou de la puce, selon le cas) pour afficher votre travail. Vous n'aurez pas à vous soucier des graphiques saccadés, sauf sur les appareils mobiles les plus lents. (Vous devriez utiliser un repli pour ceux de toute façon.)
voxel.css est un moyen simple et sans fioriture d'obtenir des avantages en trois dimensions dans votre application Web, votre page, votre site ou votre jeu. Essayez-le, regardez les démonstrations et voyez si cela convient à votre projet.