Chaque jour apporte son lot de nouvelles connaissances. Pour moi, c’est à propos de WebGL et du CSS3D.
Bon, j’ai pas tout à fait appris l’existence de ces deux technos aujourd’hui, mais c’est tout comme. Alors si t’es comme moi, que le web en mode 3D t’intéresse, que tu te demandes à quoi va ressembler le web de demain grâce aux casques de VR, et que si en plus on pouvait mêler WordPress à tout ça, bah ça serait super cool ! Lis la suite. C’est pas long. Je vais vite fais te parler de WebGL et CSS3D
Web 3D et Casque VR
Bon, je viens de te le dire. Je me pose une question que je considère comme fondamentale ces derniers temps : ne suis-je pas un dinosaure d’internet ? Sur le point de disparaître sans y prêter gare ? J’écris des articles. Je fais pas de Podcasts; je fais pas de VBlog (vidéo blog); je fais pas de live; je suis pas sur Facebook. Et je dois en oublier. Mais mon internet se réduit de plus en plus. Je ne parle même pas de IoT, ou de l’internet sonore qui arrive avec tout ces assistants vocaux. Si je suis passé sans soucis au travers de toutes ces gouttes, la VR ne va-t-elle pas mettre un coup de frein à cela ?
Nan mais la VR, c’est comme les TV 3D, ça va faire un flop.
Bon, ça, c’est ce que je disais y’a… 6 mois ? Entre temps, quelques chose d’énorme est arrivé. Le premier film porno en VR… Si j’ajoute à ça les sex toys connectés, j’ai le combo gagnant. Maintenant j’en suis certain, la VR va percer 😉 Ça sera le début d’une nouvelle manière de surfer sur internet; voir de l’utiliser.
En fait, ma vérité, c’est que la VR ne va pas tant percer que cela. Ça va surtout faire décoller la réalité augmentée. Mais là, on parle de quelque chose qui arrivera en masse d’ici 10 à 15 ans. Google avec ses Google Glass n’était juste pas Time to market comme on dit à Clermont-Ferrand.
J’oublierais presque de préciser qu’il faut aussi que le site soit accessible en 3D, sans VR. Soit à partir d’un ordinateur ou d’un smartphone, c’est juste un site en 3D.
WebGL / CSS 3D : LA solution ?
Mon taf, c’est pas d’apprendre à utiliser tout le temps à fond une techno. Par contre, mon boulot c’est d’arriver à en comprendre les tenants et les aboutissants; rapidement.
Alors je vais pas te la faire à l’envers. Je vais pas te faire un cours. Je vais pas te donner des ressources de ouf que t’aurais pas réussis à trouver tout seul. Non, je vais simplement me contenter de dire ce que j’en pense; ce que je pense avoir appris; ce que je pense avoir compris. Mais je ne suis pas parfait (si si, je sais, c’est dur à apprendre pour toi), alors tu sais quoi ? Tu me ferais super plaisir à venir commenter un peu plus bas. J’ai dis une connerie ? Je me manque de précision ? T’es pas du tout d’accord avec moi (et tu sais l’argumenter) ? Écoute, tu sais quoi faire 😉 Ah ouais tiens, pendant que j’y suis, utilise pas les commentaires pour me faire parts de mes supers fautes de français. Par contre, un gentil petit mail ici et tu seras un amour.
WebGL et CSS 3D, sont les deux seuls technos qui semblent permettent quelque des choses très intéressantes :
- Reposer sur des technos répandues et supporté par tous les navigateurs web (Tous les navigateur modernes le monsieur voulait dire)
- Une technologie reposant sur des composants standards du web (Tu te vois utiliser autre chose ?)
- Permettre de créer des interfaces 3D (Ouais, ça semble con, mais c’est quand même un peu essentiel)
- Permettre une sortie VR easy (faut que l’interface soit 3D sur un desktop, VR sur un casque de VR. On va pas tout refaire deux fois…)
- Faire de WordPress le moteur des contenus (Osé le bougre)
Bon ok, c’est pas bien dur de deviner que ce sont les deux technos à étudier lorsqu’il est question, donc, de web 3D. Mais si ces points communs réunissent ces deux technos sous la bannière du web 3D; si deux technos il existe, alors différences il y a. Mais quelles sont telles ?
Alors, c’est là que tout se joue. Pardon par avance si je t’enduis d’erreur avec des imprécisions…
Avant que quelqu’un ne prenne du temps pour bien m’expliquer les choses (enfin… Je crois :))) voila ce que je pensais savoir de ces deux technos :
- Le WebGL, cela produit un fichier compilé de type SWF (ah… La belle époque du Flash. Si je pouvais éviter de faire la même connerie aujourd’hui…)
- En fait, WebGL, c’est la réponse libre au Flash d’Adobe
- WebGL, c’est pas performant.
- WebGL, euh… OpenGL non ? (bon, ça c’était pour la blague. Quoi que… :))
- On est dépendant du modéliste 3D.
- Créer des objets, et les appeler en WebGL pour créer un interface construite dynamiquement, cela semble possible, mais sans plus.
- WebGL, on fait des jeux avec, c’est tout.
- WebGL n’est pas SEO Ready.
- On peut mettre à jour le contenu d’un objet déjà compilé par l’utilisation de fichiers XML contenants le texte.
- CSS 3D, jamais entendu parlé.
- CSS 3D ne semble franchement pas des masses utilisé.
- CSS 3D apporte plus de liberté par rapport au modéliste 3D.
- CSS 3D est un techno plus libre que WebGL
- CSS 3D repose sur plus de standards du web que WebGL . C’est du CSS quoi.
- Faire de la 3D avec du CSS, faut pas être net.
- CSS 3D est affreusement lent.
- CSS 3D offre plus d’avantages d’interfacages avec WordPress que WebGL.
- CSS 3D vaincra.
C’est pas glop glop quand même quand je vois la liste. Mais pour le boulot, pas le choix, il va falloir une interface en 3D pour un projet. Donc je pars avec mes a prioris, et quelques mauvaises infos techniques données en tout début de projet. Sinon ça serait pas drôle 🙂 Pour être transparent, mon cœur penchait pour le CSS 3D. Une sensation née du fait que je ne voyais pas la vraie différence en terme de rendu entre les deux, et que le CSS 3D me semble plus natif. C’est dans le nom… CSS !
Bref… Revenons en à nos moutons électroniques.
Première chose, j’ai découvert ce site de ouf : Chrome Experiments. J’imagine que pour certain, j’arrive après la guerre. Mais voila la claque que j’ai pris en découvrant ce site. Mieux, lorsque j’ai vu tourner certaines interfaces sur un iPhone 6s. Une fluidité impressionnantes. Une interface qui réagit super bien.
Ensuite, pour enfoncer le clou, on me présente three.js. Définitivement, je suis passé à côté d’un truc là. Cette librairie JavaScript semble juste dingue. Je ne suis pas plus expert JavaScript que je suis astronaute, donc je resterais sur mon effet waouh du début pour dire que c’est une super libraire JS l’ami. Nan… En fait y’a pas une personne que j’ai croisé qui m’ait pas parlé de Three.js au bout de 10 minutes max.
Tout cela se poursuit avec quelques démos de CSS 3D. Toutes reposait sur des cubes en rotations. Mais ça tombait bien, c’est ce qu’aurais besoin d’animer. Enfin, presque.
À ce niveau, c’est toujours le CSS 3D qui gagne pour moi. Pourquoi ? Car c’est toujours une grosse boite noire pour moi. Three.js me semble plus expérimental qu’autre chose. Il semble falloir des connaissances pointues (trop). Et surtout… Personne ne m’avait donné toutes les cartes pour choisir.
WebGL rulez
Alors on s’excite pas (encore) car là, j’ai toujours pas géré un projet avec. Ça va pas tarder, mais c’est pas fait.
La différence, c’est ma rencontre avec une personne dont c’est le métier. Mais vraiment quoi. De quoi ? Bah de pondre du code de ouf pour du WebGL voyons ! Un expert quoi.
Pour faire simple, voila comment il résume le CSS 3D.
Le CSS 3D a été inventé pour que les designers qui savent pas faire de code, puissent faire des petites interfaces en 3D.
Après un avoir mis une p’tite claque aux designers, ils apprécierons, il se met à me sortir des trucs en 3D que CSS 3D ne sait pas gérer, enfin mal, et qui va nous poser à nous, un vrai soucis. Sur le design de l’interface en 3D, les points les plus éloignés ne sont plus aussi lumineux quand ils sont loin que lorsqu’ils sont proches. En CSS 3D, il faut gérer la couleur de chaque élément. En WebGL, un brouillard sera appliqué, et ça sera géré tout seul. En plus de comprendre ce qu’il raconte, c’est un exemple bien concret. Pratique pour choisir.
Venons-en maintenant au côté boite noire. Genre WebGL c’est du Flash quoi. Oui c’est possible. Mais c’est certainement pas comme cela qu’il faut l’utiliser pour une interface web. En fait, il faut simplement s’appuyer sur un canvas et appeler des objets modélisés en 3D. En plus, three.js cartonne la dedans.
Et tu sais quoi ? Three.js… C’est du JavaScript gros !
WebGL permet en plus d’appeler un objet de l’interface 3D par une URL qui lui est propre. Cool.
WebGL rules.
ATTENTION, y’a quand même un putain de soucis. S’il y a bien un point sur lequel je voulais me tromper, c’était bien sur celui-ci. Mais de quoi je parle ?
WEBGL N’EST PAS SEO READY. Merde. On est des fous, on va quand même le faire.
WebGL vaincra. Stay tuned bro’.
