Formation HTML5 : WebGL
HTML5 - effets et graphisme

Formation HTML5 : WebGL

  1. WebGL

WebGL

<canvas id="canvas3d" width="800" height="560"> Votre navigateur ne semble pas prendre en charge l'élément canvas. </canvas>
function initWebGL(canvas) { try { // Acquérir le context 3D de canvas ou la version expérimentale gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); } catch(e) { console.log("Impossible d'aquérir le contexte canvas 3D"); } }

WebGL

Buffers
Des mémoires tampons contiennent l'information sur les objets à dessiner
Shaders (OpenGL ES Shading Language)
Langage servant à donner des instructions de rendu à la carte graphique (éclairage, couleurs, etc). Fragment Shader : chaque pixel est un fragment. Vertex Shader : défini la position d'un vecteur.
Sylverter.js
Librairie JavaScript simplifiant les calculs avec matrice.
Tutorials
Tutorial WebGL chez Mozilla
Learning WebGL
SceneJS
Moteur 3D open source API basé sur JSON et WebGL

Appliquer les buffers et shaders on contexte 3D WebGL, faire les divers calculs et gérer les événements en Javascript

Exemples

Exemples basés sur https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL