Un ensemble d'exercices pour débuter avec WebGL. Les exercices sont accessibles depuis le dépôt GitHub https://github.com/spoonless/webgl-intro

• Exercice 1 : le contexte WebGL, la notion de shaders, d'attributs de vertex et premier programme en GLSL
• Exercice 2 : interpolation dans le fragment shader
• Exercice 3 : utilisation des variables uniformes dans les shaders (exemple d'animation)
• Exercice 3.1 : exemple d'animation avancée dans un fragment shader avec interaction
• Exercice 3.2 : un autre exemple d'animation avancée dans un fragment shader
• Exercice 4 : notion de matrices de transformation et de projection 2D
• Exercice 4.1 : notion de matrice MVP (model/view/projection) et introduction de gl-matrix
• Exercice 5 : notion de matrices de transformation et de projection 3D
• Exercice 5.1 : rendu solide avec un shading simple
• Exercice 5.2 : rendu solide en associant des couleurs aux vertices
• Exercice 6 : Shading de lambert
• Exercice 6.1 : Shading de Gouraud
• Exercice 6.2 : Shading de Phong
• Exercice 7 : Utilisation de texture pour la couleur
• Exercice 7.1 : Utilisation de texture pour la couleur avec alpha
• Exercice 7.2 : Compositing avec le navigateur Web
• Exercice 8 : Utilisation de texture pour stocker d'autres attributs que la couleur : exemple de la normal map
• Exercice 9 : Visualiseur d'image à 360°

Un ensemble d'exercices pour débuter avec Three.js. Le site de Three.js présente de nombreux exemples pour lesquels on peut facilement consulter le code source.

• Exercice 1 : une scène simple avec démonstration des matériaux
• Exercice 2 : contrôles utilisateur
• Exercice 3 : implémentation d'un shader personnalisé avec la classe ShaderMaterial

Faire fonctionner les exercices avec Chrome

Si vous voulez ouvrir les fichiers d'exercices depuis votre disque dur avec le navigateur Chrome (ou Chromium), sachez que que ce navigateur n'autorise pas l'utilisation de document tiers (comme les images) dans l'api WebGL. Donc les exemples avec les textures ne fonctionneront pas correctement.

Vous pouvez démarrer Chrome mais cela ne fonctionnera pas avec tous les exercices :

Sous Windows

Sous Linux

Sous Mac OS

La solution la plus optimale est de placer les fichiers d'exemple dans un répertoire d'un serveur Web s'exécutant en local et d'y accéder avec une adresse en localhost.

Quelques schémas pour résumer WebGL

WebGL 1.0 est basé sur Open GL ES 2.0, lui-même basé sur OpenGL 2.0 et OpenGL 3.1. WebGL 2.0 est basé sur OpenGL ES 3.0, lui-même basé sur OpenGL 4.3.

Quelques liens

• Spécification WebGL 1.0 : https://www.khronos.org/registry/webgl/specs/latest/1.0/
• Spécification WebGL 2.0 : https://www.khronos.org/registry/webgl/specs/latest/2.0/
• Fiche de référence WebGL 1.0 : https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf
• Fiche de référence WebGL 2.0 : https://www.khronos.org/files/webgl20-reference-guide.pdf
• API pour le langage GLSL (WebGL 1.0 / OpengGL ES 2.0) : http://www.shaderific.com/glsl/
• Articles, tutos et API de Mozilla sur WebGL : https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
• Documentation de gl-matrix : http://glmatrix.net/docs/
• Les fondamentaux sur WebGL : https://webglfundamentals.org/webgl/lessons/fr/
• Les démos :
  • Mars Curiosity (la démo de la NASA basée sur Blend4Web) : https://eyes.nasa.gov/curiosity/
  • Maps Cube (le jeu autour de Google Maps) : http://www.playmapscube.com/
  • Simulation d'eau : http://madebyevan.com/webgl-water/