Portfolio

Logo 3D

Compétences utilisées sur le projet

  • Intégration

D’où m’est venue l’idée d’un logo 3D ?

Tout commença à la Google DevFest 2011. Ce jour là, mon école Cifacom organisait cette journée de conférences sur les technologies Google à Montreuil en région parisienne, et avec quelques camarades de classe, nous y avions été invité. Notre directeur, Bruno Faure, nous présenta à l’organisateur de l’évènement et nous fûmes invité à participer à l’atelier CSS3 3D. Lors de cet atelier, je me suis questionné sur les performances des navigateurs concernant le CSS3 3D et donc est-ce que je serais capable de réaliser mon Logo 3D ?

Comment ai-je fais ?

Voulant vérifier mon questionnement j’ai passé ma soirée à réaliser ce petit projet.

Partant du principe de 1 div = 1 face de cube, j’entrepris l’intégration comme suit : 6 faces pour 1 cube, puis 1 colonne = 15 cubes, ensuite 1 tranche = 9 colonnes et enfin 5 tranches = 1 personnage. J’ai ainsi placé les différents éléments de mon Logo 3D avec CSS3 transform et colorié les cubes avec des class CSS.

J’ai terminé par « animer » mon Logo 3D grâce aux CSS3 keyframes.

Mon retour d’expérience

Le rendu est plutôt joli, néanmoins il semblerait que seul Safari arrive à rester fluide avec autant de div (environ 10 000 lignes) à recalculer à chaque instance de la keyframe. Google Chrome affiche un bon rendu mais reste saccadé. Les autres navigateurs n’arrivent malheureusement pas à afficher correctement mon personnage.

La prochaine fois j’essayerais de réaliser mon logo 3D avec Canvas, ce qui sera beaucoup plus performant, et plus facilement reproduit sur les différents navigateurs récents.

 

Si vous voulez voir mon logo en 3D, cliquez sur ce lien avec Safari