internet

Du CSS pour faire de la 3D

par Arnauld de La Grandière le 09.02.2010 à 11:58
skitched

Parce qu'il n'y a pas que le JavaScript dans la vie, Román Cortés a réussi à tirer d'impressionnants résultats de CSS de niveau 1 et 2.1, et HTML, juste en exploitant leurs fonctions à des fins originales. Il a réalisé quelques démos basées sur son implémentation de displacement maps sans la moindre ligne de JavaScript. Le résultat est assez saisissant : une cannette de coca qui roule sur elle-même avec un effet de simili 3D, la même après écrasage, un prisme semi-transparent qui déforme l'arrière plan vu à travers, un tableau de Van Gogh qui prend vie, un effet de transition "rideaux vénitiens", rien qu'en faisant défiler les ascenseurs de la fenêtre, sans mettre à genoux votre machine, et le tout fonctionne quasiment sur tous les navigateurs (y compris sur l'iPhone, veillez cependant à provoquer le défilement avec deux doigts à l'intérieur de la zone active). On peut trouver de nombreux autres effets assez impressionnants sur le blog de Román Cortés.

skitchedLes displacement maps, souvent utilisées en 3D, sont des images en niveaux de gris qui permettent d'indiquer à un moteur de rendu comment déplacer des pixels localement, sans affecter la géométrie de l'objet sur lequel elles sont appliquées. La méthode permet un rendu plus détaillé sans ajouter de polygones aux modèles, ce qui est plus efficace tant en gestion mémoire qu'en vitesse d'exécution. On s'en sert également pour les objets translucides pour affecter la réfraction de la lumière à travers.

Tags: , ,
Source: Ajaxian
|  

2
1
Vos réactions (27 réactions)
oxof [09/02/2010 12:11]

Super. Ça me rappelle les débuts de Flash il y a 10 ans...
Sinon il y a le gif animé qui marche pas mal. Mais il faudrait tester voir si ça ne fait pas chauffer le mac.
bugman [09/02/2010 12:13]

Les effets :

- CSS 3D Meninas
- CSS Paper Bird

sur son blog, sont aussi assez impressionnants.
BS0D [09/02/2010 12:14]

J'ai un niveau moyen en CSS, mais j'en utilise énormément pour mes site web (j'utilise que ça en fait, pas d'images ni rien), c'est intéressant de voir à quel point c'est puissant quand on le maitrise...
Là encore, j'imagine que tous les navigateurs n'affichent pas ça correctement? Ca reste pour moi le seul problème :/
Nonoche [09/02/2010 12:15]

Les navigateurs qui ne gèrent pas bien le css 1 et 2.1, ça ne court plus les rues… (à part IE 6, mais IE6 cay le mal)
ThoTokio [09/02/2010 12:32]

Quand on y pense c'est assez con...

Encore faut il y penser. XD
ShowMeHowToLive [09/02/2010 12:33]

Euh, pour la canette, autant utiliser des photos/rendus 3D et les faire défiler image par image ;)
Nonoche [09/02/2010 12:41]

@ ShowMeHowToLive : ça prend un peu plus de bande passante, et offre moins de fluidité…
Inick06 [09/02/2010 13:08] via MacG Mobile

"ecrasage" ....!!!???
J'ai cherchisé la sensitude de cette moture.
J'ai pas eu de resultation.
Même si "écrasement" serai plus correctitudien.
kritof [09/02/2010 13:21]

Après la fin du Flash annoncé par L'iPad, c'est la fin du javascript !!!!! Bientôt le retour du Basic !!!!
mp_ [09/02/2010 13:25]

@oxof : faut arrêter de se sentir "Flash-agressed" dès qu'on cause de technos web, hein.
On peut faire tout ça en Flash, c'est cool. Mais faut quand même admettre que les rendus sont impressionnants pour du simple CSS.
lechat666 [09/02/2010 13:36]

arretez avec vos "ont aurait pu faire ça comme ça ou avec ça"...on s'en fout, c'est de la recherche technique là, c'est ça qui est interessant...
youyou54 [09/02/2010 13:47]

Pour ceux que cela intéresse:
http://www.cssplay.co.uk/menu/

Ce type (Stuart Nicholls) réalise des choses impressionnantes en CSS.

Et pour coller à l'article, voici un truc basé sur la canette de Román Cortés:
http://www.cssplay.co.uk/menu/css3-duff-roll.html
Loriskumo [09/02/2010 14:03]

Pfff... C'est lourd de lire "flash fait ça depuis 10 ans" à chaque fois que ça parle de CSS ou de JS...
Nonoche [09/02/2010 14:40]

@ Inick06 :

http://littre.reverso.net/dictionnaire-francais/definition/écrasage/24891

Merci d'avoir joué avec nous ;¬)
oxof [09/02/2010 14:47]

Ouè bon j'ai un peu troller (la faute à MacGé : "sans mettre à genoux votre machine").
Mais je ne vois pas où est la performance en fait.
2
1

Réagir

Cinq consignes avant de réagir :
  1. Rester dans le cadre de la dépêche. Pour des discussions plus générales, vous pouvez utiliser nos forums.
  2. Développer son argumentation. Les messages dont le seul but est de mettre de l'huile sur le feu seront modifiés ou effacés sans préavis par la rédaction.
  3. Respecter les acteurs de l'informatique et les autres lecteurs. Les messages agressifs, vulgaires, haineux, etc. seront modifiés ou effacés sans préavis par la rédaction.
  4. Pour toute remarque concernant le contenu de l'article, pour nous signaler une erreur, une faute d'orthographe, une omission, merci de nous contacter exclusivement par e-mail.
  5. Relisez-vous, et pour les utilisateurs de Safari profitez de l'aide du navigateur : activez le menu édition > Orthographe > Vérifier l'orthographe lors de la frappe.