Du cube au FPS : jusqu’où peut aller la 3D en CSS ?

Aujourd'hui, le Blog Du Webdesign vous propose un voyage au pays de la 3D en CSS, du simple cube a l'environnement complet en CSS.

Créer des cubes en CSS

Commençons en douceur avec la création de cubes 3Ds en CSS, probablement la tâche la plus simple que vous pourrez effectuer pour bien comprendre comment créer des volumes en CSS. Pour cela, la tache est assez simple : il vous suffit de créer 6 divs, que vous placerez ensuite dans l'espace pour former votre cube. Un des meilleurs tuto que vous pourrez trouver pour cette réalisation est Intro to CSS 3D transforms : Cube (en anglais).

Pour aller un petit peu plus loin, je vous propose cet exemple de cube construit comme si les plans etaient "plies" comme du papier, ainsi qu'une utilisation "pratique" avec VoxelCSS.

See the Pen yNgadW by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Voxelcss

Pour commencer, un peu de vocabulaire.

Le voxel (contraction de « volumetric pixel ») est un pixel en 3D. Il consiste à stocker une information colorimétrique avec ses coordonnées spatiales, voire temporelles, de positionnement ainsi que, facultativement, une taille relative à l'unité utilisée ou d'autres informations telles qu'une matière.

wikipedia

En quelques mots, Voxelcss est donc une lib permettant de créer et manipule de manière très simple des en CSS, et de profiter de tous les avantages de travailler avec le DOM : gestion très simple des interactions souris et tactile grace au javascript, simplicité de mise en place et support navigateur très grand (basiquement tous les navigateurs qui supportent les transformations 3D.

Malheureusement, la création de cubes en CSS reste un détournement, et possède ses propres limites : chaque cube est fait de 6 plans (1 pour chaque face) que le navigateur va devoir dessiner, et ce en toutes situations. Que le cube soit visible ou non, que les faces soient dans le champ de la caméra ou non, les plans seront "dessinés" tant qu'ils ne sont pas display: none. Inutile donc d'essayer de créer un jeu complet avec cette ressource, les performances ne tiendront pas la route.

Créer des mondes 3D en CSS et HTML

Maintenant que vous avez créez votre premier cube, je vous propose de découvrir le travail de Keith Clark : un FPS en CSS. Comme vous pourrez le voir, tout est présent : gestion des textures, des ombres, mouvement fluide même sûr de petites configurations, et support du mobile.

Pour plus d'informations sur cette impressionnante création, je vous propose de lire l'article expliquant la création de cette démo : Creating 3D worlds with HTML and CSS (en anglais), ainsi que le le reste des articles de l'auteur traitant de la gestion des ombres et des volumes en CSS. Ces articles ont certes 3 ans, mais vous trouverez difficilement mieux sur le sujet.

See the Pen 3D objects in CSS by Keith Clark (@keithclark) on CodePen.

Si creer des objets complexes et des environnement en CSS vous interesse, mais que vous ne vous voyez pas y passer plusieurs annees, j'ai tout de meme une solution pour vous : Tridiv

Créer des formes 3D impressionnantes avec Tridiv

Pour réussir à créer des formes très complexe sans pour autant y passer des mois, il existe Trivid ! Ce service en ligne est un éditeur 3D en ligne dont la particularité est de générer les models sous la forme de code HTML/CSS3. 

 

L'interface est relativement simple bien que très complète, et certains des résultats sont particulièrement impressionnants.