Initiation au WebGL en 5 minutes

J’imagine que vous n’avez pas pu fermer l’oeil après la lecture de mon premier article WebGL, une technologie prometteuse. Pour satisfaire vos attentes justifiées, je vous présente aujourd’hui la suite avec une démonstration WebGL simplifiée au maximum que vous pourrez éditer directement de cette page.

Tout le code s’exécute du côté client et est hébergé sur jsfiddle, ce qui vous permettra d’effectuer des tests sans avoir à utiliser un hébergement ni d’éditeur Javascript.

Les navigateurs supportés à ce jour sont Google Chrome, Safari, Firefox et Opera, donc si vous utilisez un de ces derniers, vous voyez présentement le texte tourner en 3D. Appuyez sur le bouton “Javascript” ci-dessous pour voir la source qui compose cette animation.

Pour la cause, j’ai utilisé la librairie three.js qui fait une couche d’abstraction par dessus WebGL et diminue considérablement les lignes de code source nécessaires. Cette librairie, bien qu’elle soit une des plus populaire présentement, ne conviendra pas à tous les types de projets. Comme vous savez, toute couche d’abstraction peut présenter ses avantages mais comportera aussi un coût.

Merci d’avoir consulté mon deuxième article sur WebGL. Si ce n’est pas déjà fait, je vous mets au défi de changer le texte de la démo avant de quitter! Ouvrez le jsfiddle pour éditer la source en temps réel.

Laisser un commentaire

Votre adresse courriel ne sera pas publiée. Entrez votre nom, courriel et votre commentaire.

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">