Le b.a.-ba de Canvas [partie 1]

L’élément Canvas ouvre des possibilités prometteuses en matière de création de contenus graphiques 2D et de manipulation d’images et de vidéo. Voilà qui le distingue des nouveaux éléments du HTML5 comme Video et Audio qui servent simplement à l’intégration de contenu multimédia pré-existant sur le Web.

L’élément Canvas lui-même est un simple un conteneur d’éléments graphiques. Il devient utile en compagnie de son API Javascript correspondant qui crée des éléments graphiques à la volée.

Canvas a été inventé par Apple pour afficher les widgets du Tableau de bord. Son entrée sur le Web s’est faite par l’intermédiaire de Webkit avant d’être adopté progressivement par les autres navigateurs. Son ajout relativement récent dans la spécification officielle de HTML5 a favorisé l’uniformisation de sa prise en charge.

Prise en charge

Internet Explorer 9, Firefox, Opera, Chrome et Safari offrent le support de l’élément Canvas. Pour Internet Explorer 8 et les versions précédentes, il existe l’extension Javascript ExplorerCanvas (http://code.google.com/p/explorercanvas/) qui reproduit Canvas sans avoir à modifier le code, mais cela, non sans perte de perte de performance.

Implémentation native de Canvas

La performance de Canvas peut varier légèrement d’un navigateur à l’autre, et d’une plateforme à l’autre. Ce problème proviendrait de la difficulté qu’ont certains navigateurs à implémenter l’accélération matérielle sur Mac. Canvas est donc, dans ces navigateurs, un peu plus rapide en version Windows.

Sur mobile, Canvas et ses nombreuses fonctionnalités sont pris en charge. La performance y est cependant sensiblement inférieure à celle des ordinateurs de bureau. La performance varie également d’une plate-forme mobile à l’autre, puisque l’accélération matérielle n’est pas la même partout. La situation évolue cependant rapidement.

Canvas est un couple

Canvas est formé de l’élément du DOM et de l’API Javascript qui l’accompagne. L’élément du DOM sert à définir la zone de dessin sur la page – le canevas littéralement – et l’API Javascript prend en charge la création et la manipulation des éléments graphiques.

Voici un exemple de l’élément DOM. La taille de la surface est spécifiée à même l’élément Canvas (elle pourrait aussi l’être par JavaScript; en CSS par contre, l’attribut Height ne peut être contrôlé convenablement). L’attribut style confère à l’élément une bordure grise, pleine, de 5 pixels d’épaisseur (cet attribut en revanche peut très bien faire partie des CSS pour une efficacité accrue).

<canvas id="monCanvas" width="300" height="300" style="border: 5px solid #999999;">
Votre navigateur ne supporte pas l'élément canvas du HTML5.</canvas>


Votre navigateur ne supporte pas l’élément canvas du HTML5.

Il ne reste plus qu’à dessiner sur la surface définie par Canvas grâce à un API JavaScript accompagnant celui-ci ou encore situé dans un fichier .js comme c’est le cas ici:

<script type="text/javascript" src="/scripts/dessincanvas.js"></script>
<script type="text/javascript">
<!--
dessincanvas();
//--></script>

Les éléments graphiques sont décrits dans le fichier JS externe:

// JavaScript Document

function dessincanvas() {
	
// Dessiner un carré rouge  
var canvas = document.getElementById("monCanvas");
var ctx1 = canvas.getContext("2d");
ctx1.fillStyle="#FF0000";
ctx1.fillRect(30, 30, 80, 80); 

// Dessiner une ligne diagonale 
var ctx2 = canvas.getContext("2d");
ctx2.moveTo(0,0);
ctx2.lineTo(300,300);
ctx2.stroke();

// Dessiner un cercle 
var canvas = document.getElementById("monCanvas");
var ctx3 = canvas.getContext("2d");
ctx3.beginPath();
ctx3.arc(200,100,40,0,2*Math.PI);
ctx3.stroke();

// Écrire du texte
var canvas = document.getElementById("monCanvas");
var ctx4 = canvas.getContext("2d");
ctx4.fillStyle="#0000FF";
ctx4.font="30px Arial";
ctx4.fillText("Mon Canvas",10,200);

}


Votre navigateur ne supporte pas l’élément canvas du HTML5.



C’est tout pour la mise en bouche! Nous explorerons dans un prochain article le fonctionnement proprement dit de l’objet HTML5 getContext(« 2d ») qui permet de dessiner sur le Canvas.

Quelques liens

Publié dans Animation Web, HTML5, JavaScript, Projet de perfectionnement | Laisser un commentaire

WebGL: la 3D pour le Web

Le WebGL, ou Web-based Graphics Library, est l’un des rejetons technologiques les plus impressionnants de la « famille » HTML5. Cette méthode d’affichage 3D dans le canevas existe depuis 2006 même si la version 1.0 est apparue récemment, soit en février 2011. Ce n’est que depuis peu que le WebGL est opérable directement dans les navigateurs Web, sans installation supplémentaire.
[ Spécifications du WebGL 1.0 ]

Pour utiliser l’application graphique en WebGL, il s’agit de charger une page dans un navigateur Web. Le navigateur exécute alors le Javascript appelant l’interface WebGL sur la page de l’utilisateur. La bibliothèque WebGL utilisée solicite ensuite le pilote OpenGL du système d’exploitation qui prend en charge l’affichage des images directement sur l’écran, tout en exploitant les accélérations matérielles de la carte graphique.
[ Source: WebGL sur Wikipédia ]

Bien que la création de contenu adapté au WebGL demande une bonne connaissance à la fois du monde la 3D et de l’écriture de code, elle se démocratise de plus en plus, notamment grâce à l’apparition de bibliothèques Javascript dédiées.

Les navigateurs compatibles

Depuis peu, plusieurs navigateurs Web sont pourvus des ressources qui permettent d’afficher en temps réel des objets et des animations 3D grâce au WebGL. Voici le portrait actuel chez les acteurs les plus importants:

  • Firefox supporte WebGL à partir de la version 4
  • Google Chrome supporte WebGL à partir de la version 9
  • Safari propose le support de WebGL dans son menu Développement de la version 5.1 (désactivé par défaut); pour faire afficher le menu Développement, accédez aux préférences du logiciel, puis, sous l’onglet Avancées cochez Afficher le menu Développement…
  • Opera supporte cette technologie depuis la version 12 de son logiciel
  • Internet Explorer ne supporte pas WebGL par défaut, il existe cependant des modules externes qui le permettent, comme IEWebGL

Évidemment, pour profiter des applications WebGL, encore faut-il que votre navigateur puisse les rendre. Vous pouvez tester un navigateur en visitant ce site: http://get.webgl.org/. Dans la mesure où votre navigateur permet le rendu des objets en WebGL, vous y verrez un cube en fil de fer pivotant sur lui-même.

La bibliothèque Three.js

L’une des bibliothèques dédiée au WebGL les plus populaires est Three.js. Elle peut être téléchargée à cette adresse: https://github.com/mrdoob/three.js. On y trouve aussi les ressources pour composer le code nécessaire à la création d’une scène, d’une caméra, de lumières, tout comme dans le monde de l’infographie 3D.

Voici un exemple simple de ce que j’ai pu faire en peu de temps avec Three.js: un logo 3D inséré dans une scène comprenant une caméra et trois lumières, le tout piloté par la position du curseur de la souris.
[ Exemple 1 ]

Exemple d'utilisation du WebGL.

Voyez maintenant le même exemple après l’insertion d’un effet après-rendu de type « grain de film » en temps réel.
[ Exemple 2 – Avec l’effet « grain de film » ]

Exemple d'utilisation du WebGL.

Les objets affichés en WebGL peuvent être nettement plus complexes et comporter des matériaux de haute résolution, au prix de quelques secondes de chargement), comme en fait foi cette Ferrari que vous pouvez piloter avec les touches W, A, S, D de votre clavier.
[ Ferrari, par HelloRacer ]

Ferrari créée par HelloRacer à l'aide de Three.js.

Exporter de la 3D au format JSON avec Blender

La bibliothèque Three.js inclut quelques ressources qui permettent d’exporter des objets et des animations 3D au format JSON (JSON sur Wikipédia: http://fr.wikipedia.org/wiki/JavaScript_Object_Notation) à partir de plusieurs applications 3D. Le module d’exportation pour Blender (un script Python) est facile à installer: il suffit d’ajouter le dossier du module dans le dossier « addons » de Blender (vour le trouverez dans le « Content » de blender.app) puis d’activer ce addon dans les préférences du logiciel. L’option d’exportation au format .js sera ainsi disponible dans les options d’exportation.
[ Module d’exportation pour Blender sur github ]

Quelques liens

Publié dans 3D, Animation Web, HTML5, Projet de perfectionnement | Laisser un commentaire

Un journal de prof

Bienvenue, chers lecteurs. Ce carnet regroupe les réflexions, les expérimentations et les découvertes qui jonchent cette route sans fin qu’est la formation d’un enseignant. L’exploration incessante du monde de la connaissance, la nécessité de la formation continue, ce vertige que donne l’impression de ne pas en savoir assez… Autant de cailloux dans la chaussure qu’un prof passionné ne souhaitera jamais vraiment vouloir se débarrasser! C’est de cette matière que sera fait le carnet « Air libre ».

Je ne suis pas bien du tout assis sur cette chaise
Et mon pire malaise est un fauteuil où l’on reste
Immanquablement je m’endors et j’y meurs.
Mais laissez-moi traverser le torrent sur les roches
Par bonds quitter cette chose pour celle-là
Je trouve l’équilibre impondérable entre les deux
C’est là sans appui que je me repose.

– St-Denys-Garneau, Regards et jeux dans l’espace

Bonne lecture.

Publié dans Salmigondis | Laisser un commentaire