WebGL

Introduction

Généralités

La programmation graphique fait appel à de nombreuses techniques
dont la finalité est de permettre de visualiser des scènes 3D ou 2D.

Elle réunit plusieurs phases aussi fastidieuses qu'essentielles :

Algèbre linéaire (vecteurs & matrices)
Rasterization (primitives → pixels)
Shaders (textures, éclairage, etc.).

Historique

OpenGL vs. DirectX

Les deux principales bibliothèques ont longtemps été :

OpenGL est une interface de programmation
développée, à l’origine, par Silicon Graphics (1992).
Direct3D, sous-ensemble de DirectX,
est l’interface développée par Microsoft (1996).

Généalogie

WebGL 2.0 est issu d'OpenGL ES 3.0 (embedded systems = systèmes embarqués),
lui-même dérivé d'OpenGL 3.3 et 4.2.

Dédié à HTML5, il fait office d'interface entre JavaScript et les drivers OpenGL ES.

(Windows + ANGLE : la couche OpenGL ES est émulée via Direct3D)

Pipeline

Contexte

Indispensable pour exécuter du code WebGL
Supporté par les versions récentes de tous les navigateurs
Disponible à travers l'objet <canvas> de HTML5

var canvas = document.getElementById (id);
var gl = canvas.getContext ('webgl2');
if (gl) gl.clear (gl.COLOR_BUFFER_BIT);
else alert ('Navigateur incompatible !');

`three.js`

Standard de facto du web 3D.

Bilbiothèque haut niveau : caméras, matériaux, etc.
Graphe de scène : animation hiérarchique, articulations
Chargement asynchrone de ressources
WebGL, ~~SVG~~, ~~CSS3D~~

`Babylon.js`

Collisions et moteurs physiques
Spector.js !

Système de vision

Analogies avec la photographie

1	Arranger les éléments de la scène à capturer	Composer une scène virtuelle	Transformation de modélisation
2	Positionner l'appareil photo	Positionner la caméra virtuelle	Transformation de vision
3	Régler la focale de l'appareil photo	Configurer une projection	Transformation de projection
4	Choisir la taille des tirages photographiques	Choisir les dimensions de l’image video	Transformation de cadrage

Transformation de modélisation

Coordonnées homogènes

Vecteurs codés sur quatre composantes
Transformations codées par des matrices 4×4

\[ \mathbf{p} = \begin{pmatrix}x \\ y \\ z \\ 1\end{pmatrix} \quad \mathbf{v} = \begin{pmatrix}x \\ y \\ z \\ 0\end{pmatrix} \quad \mathbf{Id} = \begin{pmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix} \]

Translation

\[\begin{pmatrix} 1 & 0 & 0 & x \\ 0 & 1 & 0 & y \\ 0 & 0 & 1 & z \\ 0 & 0 & 0 & 1 \end{pmatrix}\]

THREE.Object3D.position

Rotation

\[\begin{pmatrix} x^2(1-c)+c & x y(1-c)-zs & x z(1-c)+ys & 0 \\ x y(1-c)+zs & y^2(1-c)+c & y z(1-c)-xs & 0 \\ x z(1-c)-ys & y z(1-c)+xs & z^2(1-c)+c & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}\] \[c = \cos\theta \qquad s = \sin\theta \qquad \sqrt{x^2+y^2+z^2} = 1\]

THREE.Object3D.rotation

Échelle

\[\begin{pmatrix} x & 0 & 0 & 0 \\ 0 & y & 0 & 0 \\ 0 & 0 & z & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}\]

THREE.Object3D.scale

Non-commutativité

\(\mathbf{T} \times \mathbf{R} \times \:\) \(\qquad \neq \qquad\) \(\mathbf{R} \times \mathbf{T} \times \:\)

Transformation de vision

Position relative de la caméra par rapport aux objets :
translater la caméra de \(\mathbf{t}\) = translater tous les objets de \(-\mathbf{t}\).
Souvent, la matrice de la caméra est calculée à partir de trois paramètres :
sa position, sa cible et un vecteur définissant la verticalité de la caméra.

var camera = …;
camera.position.set (px, py, pz);
var cible = new THREE.Vector3 (cx, cy, cz);
camera.lookAt (cible);

new THREE.TrackballControls (camera);
new THREE.FirstPersonControls (camera);

Transformation de projection1/2

volume observé par la caméra :
forme propre au type de projection

↓

volume de vision normalisé :
\([-1,+1]\times[-1,+1]\times[-1,+1]\)

Transformation de projection2/2

Deux types de projection pour modéliser l'optique des caméras :

projection orthogonale: 2D, visualisation scientifique, architecturale, etc.
projection perspective: perception de l'éloignement (jeux vidéos, cinéma, etc.)

Démo

Projection orthogonale

\[\begin{pmatrix} \frac{2}{x_r-x_l} & 0 & 0 & -\frac{x_r+x_l}{x_r-x_l} \\ 0 & \frac{2}{y_t-y_b} & 0 & -\frac{y_t+y_b}{y_t-y_b} \\ 0 & 0 & \frac{-2}{z_f-z_n} & -\frac{z_f+z_n}{z_f-z_n} \\ 0 & 0 & 0 & 1 \end{pmatrix}\]

new THREE.OrthographicCamera (xl, xr, yt, yb, zn, zf);

Projection perspective

\[\begin{pmatrix} \frac{f}{aspect} & 0 & 0 & 0 \\ 0 & f & 0 & 0 \\ 0 & 0 & \frac{z_n+z_f}{z_n-z_f} & \frac{2 z_n z_f}{z_n-z_f} \\ 0 & 0 & -1 & 0 \end{pmatrix}\]

où \(f = \cot\frac{fov_y}{2}\).

new THREE.PerspectiveCamera (fov, aspect, zn, zf);

Transformation de cadrage

gl.viewport (x, y, w, h);

Surface utilisée lors du dessin
Coordonnées dans le repère du <canvas>

gl.scissor (x, y, w, h);

Restriction lors du traitement des fragments
Zone rectangulaire appelée scissor box

`matrix.js`

Tableaux
de sommets

Vertex buffer objects1/2

Tableaux d'octets dans la mémoire graphique
Sources potentielles d'attributs de sommets
Structures et types connus du seul développeur

Vertex buffer objects2/2

// Création du VBO.
var vbo = gl.createBuffer ();

// Activation du VBO.
gl.bindBuffer (gl.ARRAY_BUFFER, vbo);

// Initialisation des données (avec copie).
var VERTICES = new Float32Array ([…]);
gl.bufferData (gl.ARRAY_BUFFER, VERTICES, gl.STATIC_DRAW);

// Désactivation du VBO.
gl.bindBuffer (gl.ARRAY_BUFFER, null);

Tableaux typés

Attributs de sommets1/2

gl.enableVertexAttribArray (index);

Activation d'un attribut identifié par son indice

gl.vertexAttribPointer (index, size, type, normalized, stride, offset);

Attributs de sommets2/2

// Activation du VBO.
gl.bindBuffer (gl.ARRAY_BUFFER, vbo);

// Activation de l'attribut nº 0.
gl.enableVertexAttribArray (0);
// Déclaration de la structure du tableau.
gl.vertexAttribPointer (0, 3, gl.FLOAT, false, 16, 0);

// Activation de l'attribut nº 1.
gl.enableVertexAttribArray (1);
// Déclaration de la structure du tableau.
gl.vertexAttribPointer (1, 3, gl.UNSIGNED_BYTE, true, 16, 12);

Primitives géométriques1/3

gl.POINTS

(cliquez pour redémarrer l'animation)

Primitives géométriques2/3

gl.LINES / gl.LINE_STRIP / gl.LINE_LOOP

(cliquez pour redémarrer l'animation)

Primitives géométriques3/3

gl.TRIANGLES / gl.TRIANGLE_STRIP / gl.TRIANGLE_FAN

(clic : redémarrer ; double clic : redistribuer les points)

Mode direct

gl.drawArrays (mode, first, count);

Indices de sommets 1/3

gl.TRIANGLE_STRIP et gl.TRIANGLE_FAN pas toujours adaptés
Nombreux sommets identiques dupliqués au sein du VBO
Deux sommets sont identiques si tous leurs attributs sont identiques
Ajout d'un second buffer pour accéder aux sommets de façon indirecte

Indices de sommets 2/3

Indices de sommets 3/3

// Création du VBO.
var indices = gl.createBuffer ();

// Activation du VBO.
gl.bindBuffer (gl.ELEMENT_ARRAY_BUFFER, indices);

// Initialisation des données (avec copie).
var INDICES = new Uint16Array ([…]);
gl.bufferData (gl.ELEMENT_ARRAY_BUFFER, INDICES, gl.STATIC_DRAW);

// Désactivation du VBO.
gl.bindBuffer (gl.ELEMENT_ARRAY_BUFFER, null);

Mode indirect

gl.drawElements (mode, count, type, offset);

`vbo.js`

Vertex array objects

Mémorisation de la structure du VBO !
- OES_vertex_array_object
- Natif depuis WebGL 2.0 !
Réduction du nombre de commandes GPU
Modes direct et indirect

`vao.js`

`quad.js`

Instanciation géométrique

Geometry instancing
- ANGLE_instanced_arrays
- Natif depuis WebGL 2.0 !
Plusieurs instances d'un même objet
Attributs d'instances via un VBO supplémentaire

Maillages

new THREE.Mesh (geometry, material);

// Création d'un cube.
var geometry = new THREE.BoxGeometry (1, 1, 1);

// Création d'un matériau rouge uni.
var material = new THREE.MeshBasicMaterial ({color: 'red'});

// Création d'un maillage associant géométrie et matériau.
var mesh = new THREE.Mesh (geometry, material);

// Ajout du maillage à la scène.
scene.add (mesh);

Géométries1/2

// Création d'une géométrie vide.
var geometry = new THREE.Geometry ();

// Création des quatre sommets.
geometry.vertices.push (
  new THREE.Vector3 (-0.5, -0.5, 0),
  new THREE.Vector3 (+0.5, -0.5, 0),
  new THREE.Vector3 (-0.5, +0.5, 0),
  new THREE.Vector3 (+0.5, +0.5, 0)
);

// Création des deux faces.
geometry.faces.push (
  new THREE.Face3 (0, 1, 2),
  new THREE.Face3 (2, 1, 3)
);

Géométries2/2

Buffer geometries

var geometry = new THREE.BufferGeometry ();

geometry.addAttribute ('position',
  new THREE.BufferAttribute (
    new Float32Array ([
      -0.5, -0.5, 0,
      +0.5, -0.5, 0,
      -0.5, +0.5, 0,
      +0.5, +0.5, 0
    ]), 3));

geometry.setIndex (
  new THREE.BufferAttribute (
    new Uint16Array ([
      0, 1, 2,
      2, 1, 3
    ]), 1));

Buffer geometry loader

Chargement asynchrone d'un maillage JSON

// Gestionnaire de chargement.
var loader = new THREE.BufferGeometryLoader ();

// Déclenchement d'un chargement.
loader.load ('00/teapot.json',
  function (geometry) {
    var m = new THREE.MeshBasicMaterial ();
    scene.add (new THREE.Mesh (geometry, m));
  });

Élimination
des faces cachées

Ordre d'affichage

Si tous les triangles sont affichés dans n’importe quel ordre,
le dernier affiché recouvrira tous les autres, qu’ils soient devant ou derrière lui.

Algorithme du peintre 1/2

L’algorithme du peintre propose de dessiner les polygones
du plus lointain au plus proche.

fr.wikipedia.org

Algorithme du peintre 2/2

Cet algorithme est coûteux car il faut trier tous les polygones.
Pour trier \(n\) primitives, il faut au minimum \(n\log(n)\) opérations.
Comment trier des polygones dont les intervalles de profondeur se chevauchent ?

Partition binaire de l'espace (Wikipédia)

Z-buffer1/2

L’algorithme du Z-buffer permet de résoudre le problème des faces cachées à coût constant.
L’utilisation d’un 2^e buffer, de dimensions égales à celles du framebuffer, permet de conserver la profondeur associée à chaque pixel.
Pour chaque pixel, on peut ainsi déterminer si celui-ci doit être conservé ou écrasé par un autre simplement en comparant les deux profondeurs.

// Activation du test de profondeur.
gl.enable (gl.DEPTH_TEST);
// Mode de filtrage : fragments les plus proches.
gl.depthFunc (gl.LESS);
// Effacement simultané des deux buffers.
gl.clear (gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);

Z-buffer2/2

Visibilité 1/2

L’étape de rasterization est la plus coûteuse.
Certes, le Z-buffer permet de générer correctement les images
mais il n’évite pas les calculs que nécessitent les faces cachées.
Besoin de tests simples, qui éliminent un grand nombre de primitives !

Visibilité 2/2

Back-face culling

Produit scalaire entre \(\mathbf{v}\) et \(\mathbf{n}\).
Élimine en moyenne 50 % des facettes.

// Activation du culling.
gl.enable (gl.CULL_FACE);
// Élimination des faces arrières :
// gl.FRONT, gl.BACK ou gl.FRONT_AND_BACK.
gl.cullFace (gl.BACK);

Alpha blending1/2

Effets de transparence
Opérateur OVER de Porter & Duff (Lucasfilm)
Combinaison de deux fragments :
- celui que l'on s'apprête à écrire (source)
- celui déjà présent dans le framebuffer (destination)

// Activation du blending.
gl.enable (gl.BLEND);
// Définition des facteurs de blending.
gl.blendFunc (src, dst);

T. Porter & T. Duff. Compositing Digital Images. Computer Graphics 18(3):253-259, July 1984.

Alpha blending2/2

	src	dst	R	G	B	A

Shaders

Programmation GPU

Principe introduit dans RenderMan de Pixar
Programmabilité de certaines étapes clés
Code exécuté par le processeur graphique
Massivement parallèle

OpenGL ES Shading Language

ESSL 3.0, ou GLSL ES 3.0, dérivé de GLSL 3.3
Compatibilité OpenGL, OpenGL ES et WebGL
Types natifs adaptés à l'algèbre linéaire
Syntaxe proche du C

Rasterization

Pipeline

Types natifs


Scalaires	`float`	`int`	`uint`	`bool`
Vecteurs	`vec2`	`ivec2`	`uvec2`	`bvec2`
	`vec3`	`ivec3`	`uvec3`	`bvec3`
	`vec4`	`ivec4`	`uvec4`	`bvec4`

Matrices	`mat2`	`mat3x2`	`mat4x2`
	`mat2x3`	`mat3`	`mat4x3`
	`mat2x4`	`mat3x4`	`mat4`

Qualificatifs de type1/3

const: Constante substituée directement à la compilation
uniform: Quasi-constante accessible par tous,
modifiable uniquement hors rendu (lecture seule)

Qualificatifs de type2/3

#version 100

attribute: Variable d'entrée d'un vertex shader,
issue directement du VBO actif (lecture seule)
varying: Variable de sortie d'un vertex shader; Variable d'entrée d'un fragment shader,
interpolée à partir des valeurs définies aux sommets

Qualificatifs de type3/3

#version 300 es

in: Attribut d'entrée d'un vertex shader; Variable d'entrée d'un fragment shader (interpolée)
out: Variable de sortie d'un vertex shader (interpolable); Résultat d'un fragment shader (ex : couleur)

Swizzling1/2

Accès aux composantes d'un vecteur
Création de nouveaux vecteurs par ré-arrangement
Différents jeux de noms selon le type d'utilisation

x y z w / r g b a / s t p q

Swizzling2/2

vec4 v1;
float f = v1.x + v1.y;

vec2 v2 = vec2 (1, 2);
vec4 v3 = v2.xyxx;           // 1 2 1 1
vec3 v4 = v3.zyy;            // 1 2 2

vec4 v5;
v5.wzyx = vec4 (1, 2, 3, 4); // 4 3 2 1
v5.zx   = vec2 (5, 6);       // 6 3 5 1

Vertex shaders1/2

Exécutés une fois pour chaque sommet transmis au GPU
Accès en lecture seule à tous les attributs de sommets
Peuvent déclarer des variables de type varying :
position, normale, couleur, coordonnées de textures, etc.
Doivent définir la position 2D du sommet : gl_Position

Vertex shaders2/2

#version 300 es
precision mediump float;
in vec2 position;
void main ()
{
  gl_Position = vec4 (position, 0.0, 1.0);
}

Fragment shaders1/2

Exécutés une fois pour chaque fragment issu de la rasterization
Paramètres de type varying (interpolation bilinéaire)
Doivent définir la couleur du fragment : gl_FragColor

Fragment shaders2/2

#version 100
precision mediump float;
uniform vec4 color;
// out vec4 gl_FragColor
void main ()
{
  gl_FragColor = color;
}

#version 300 es
precision mediump float;
uniform vec4 color;
out vec4 fragment;
void main ()
{
  fragment = color;
}

Programmes de rendu1/2

Paire vertex shader + fragment shader
Correspondance numéros ↔ noms d'attributs
Compilation des shaders
Édition des liens du programme
Indispensable pour effectuer un rendu

Programmes de rendu2/2

« Hello, world! »

`program.js`

`coloring-book.js`

Pour les curieux…

Shadertoy

Firefox Shader Editor

Textures

Intérêt

Cycle de vie

// Crée un objet texture.
var texture = gl.createTexture ();

// Associe la texture à l'unité 2D.
gl.bindTexture (gl.TEXTURE_2D, texture);

// Transfère les pixels dans la texture 2D actuelle.
var pixels = new Uint8Array ([…]);
gl.texImage2D (gl.TEXTURE_2D, 0, gl.RGB,
               w, h, 0,
               gl.RGB, gl.UNSIGNED_BYTE, pixels);

// Libère l'objet texture.
gl.deleteTexture (texture);

DOM

// Élément <img>
var image = document.getElementById ('huey');
gl.texImage2D (gl.TEXTURE_2D, 0, gl.RGBA,
               gl.RGBA, gl.UNSIGNED_BYTE, image);

// Élément <canvas>
var canvas = document.getElementById ('dewey');
gl.texImage2D (gl.TEXTURE_2D, 0, gl.RGBA,
               gl.RGBA, gl.UNSIGNED_BYTE, canvas);

// Élément <video>
var video = document.getElementById ('louie');
gl.texImage2D (gl.TEXTURE_2D, 0, gl.RGBA,
               gl.RGBA, gl.UNSIGNED_BYTE, video);

Coordonnées de texture

Gestion des bords 1/2

gl.texParameteri (gl.TEXTURE_2D, param, value);

Deux paramètres à configurer pour le filtrage :

`gl.TEXTURE_WRAP_S`	abscisses dans l'espace texture
`gl.TEXTURE_WRAP_T`	ordonnées dans l'espace texture

Trois modes possibles :

`gl.CLAMP_TO_EDGE`	coordonnée bornée entre 0 et 1
`gl.REPEAT`	répétition de la texture
`gl.MIRRORED_REPEAT`	répétition avec réflexion

Gestion des bords 2/2


`gl.CLAMP_TO_EDGE`	`gl.REPEAT`	`gl.MIRRORED_REPEAT`

Filtrage 1/2

gl.texParameteri (gl.TEXTURE_2D, param, value);

Deux paramètres à configurer pour le filtrage :

`gl.TEXTURE_MIN_FILTER`	la texture est réduite à l'écran
`gl.TEXTURE_MAG_FILTER`	la texture est agrandie à l'écran

Deux modes possibles (pour l’instant) :

`gl.NEAREST`	couleur du pixel le plus proche
`gl.LINEAR`	couleur interpolée linéairement

Filtrage 2/2


`gl.NEAREST`	`gl.LINEAR`

Mipmaps1/4

Mipmaps2/4

« Multum in parvo »


32×32	16×16	8×8	4×4	2×2	1×1

gl.generateMipmap (gl.TEXTURE_2D);

Mipmaps3/4

gl.TEXTURE_MIN_FILTER

Quatre modes supplémentaires :

`gl.NEAREST_MIPMAP_NEAREST`	mipmap le plus proche
`gl.LINEAR_MIPMAP_NEAREST`
`gl.NEAREST_MIPMAP_LINEAR`	interpolation mipmaps
`gl.LINEAR_MIPMAP_LINEAR`

Mipmaps4/4

// EXT_texture_filter_anisotropic.
if (e = gl.getExtension ('EXT_texture_filter_anisotropic'))
{
  // Valeur maximale supportée par l'implémentation.
  var m = gl.getParameter (e.MAX_TEXTURE_MAX_ANISOTROPY_EXT);

  // Application à la texture courante. 
  gl.texParameterf (gl.TEXTURE_2D, e.TEXTURE_MAX_ANISOTROPY_EXT, m);
}

1 | 2

Non-puissances de deux

OpenGL s'est longtemps limité aux textures
dont chaque dimension était une puissance de deux.

Cette contrainte affecte toujours OpenGL ES 2.0
et l'usage de textures « NPOT » reste limité :

Pas de filtrage !
Pas de répétition !
Pas de mipmaps !

Cube mapping1/2

Cube mapping2/2

Éclairage,
ombrage

Modèles d’éclairement

Déterminent la couleur en chaque point de la surface
en fonction de propriétés optiques ou empiriques.

Matériau
Lumière
Type d'éclairage
Type d'ombrage

Matériau

Comportement vis-à-vis de la lumière qui l'atteint.

Ensemble de caractéristiques propre à chaque objet :

couleur
opacité
rugosité

réflexion
réfraction
etc.

Lumière

Source ambiante: Couleur
Source ponctuelle: Couleur + position + direction (une ampoule)
Source directionnelle: Couleur + direction (le soleil)
Spot: Source ponctuelle avec angle d'ouverture

Éclairage ambiant

Interréflexion de la lumière :
- la lumière rebondit sur les objets
- perte d'énergie à chaque rebond
Simplification radicale :
- contribution identique partout,
  quelles que soient position et orientation
- couleur uniforme sur tous les objets

Éclairage de Lambert 1/2

Modèle physique basé sur la loi de Lambert
Surfaces idéalement diffuses (= lambertiennes)

\[C_d = K_d L_d \cos\theta = K_d L_d (\mathbf{N} \cdot \mathbf{L})\]

Éclairage de Lambert 2/2

Éclairage de Phong 1/3

Développé par Bùi Tường Phong en 1973
Perception des tâches de réflexion spéculaire

\[C_s = K_s L_s \cos^n\phi = K_s L_s (\mathbf{V} \cdot \mathbf{R})^n\]

Bùi Tường Phong. Illumination for Computer Generated Pictures. Communications of the ACM 18(6):311-317, June 1975

Éclairage de Phong 2/3

fr.wikipedia.org

Éclairage de Phong 3/3

Éclairage Blinn-Phong 1/2

Proposé par Jim Blinn en 1977
Version simplifiée/accélérée de l'éclairage de Phong
Évaluation de \(\mathbf{R}\) relativement coûteuse

\[C_s = K_s L_s (\mathbf{N} \cdot \mathbf{H})^n\]

James F. Blinn. Models of Light Reflection for Computer Synthesized Pictures. SIGGRAPH Comput. Graph. 11(2):192-198, July 1977

Éclairage Blinn-Phong 2/2

fr.wikipedia.org

Modèles d’ombrage

Ombrage plat	Ombrage de Gouraud	Ombrage de Phong
1 normale pour 1 facette	1 normale pour 1 sommet	1 normale pour 1 fragment
couleur uniforme	interpolation de la couleur	interpolation de la normale

Matériaux `three.js`

Lumières `three.js`

Démo

WebGL

Introduction

Généralités

Historique

Généalogie

Pipeline

Contexte

Système de vision

Analogies avec la photographie

Transformation de modélisation

Coordonnées homogènes

Translation

Rotation

Échelle

Non-commutativité

Transformation de vision

Transformation de projection1/2

Transformation de projection2/2

Projection orthogonale

Projection perspective

Transformation de cadrage

Tableauxde sommets

Vertex buffer objects1/2

Vertex buffer objects2/2

Tableaux typés

Attributs de sommets1/2

Attributs de sommets2/2

Primitives géométriques1/3

Primitives géométriques2/3

Primitives géométriques3/3

Mode direct

Indices de sommets 1/3

Indices de sommets 2/3

Indices de sommets 3/3

Mode indirect

Vertex array objects

Instanciation géométrique

Maillages

Géométries1/2

Géométries2/2

Buffer geometries

Buffer geometry loader

Éliminationdes faces cachées

Ordre d'affichage

Algorithme du peintre 1/2

Algorithme du peintre 2/2

Z-buffer1/2

Z-buffer2/2

Visibilité 1/2

Visibilité 2/2

Back-face culling

Alpha blending1/2

Alpha blending2/2

Shaders

Programmation GPU

OpenGL ES Shading Language

Rasterization

Pipeline

Types natifs

Qualificatifs de type1/3

Qualificatifs de type2/3

Qualificatifs de type3/3

Swizzling1/2

Swizzling2/2

Vertex shaders1/2

Vertex shaders2/2

Fragment shaders1/2

Fragment shaders2/2

Programmes de rendu1/2

Programmes de rendu2/2

Pour les curieux…

Textures

Intérêt

Cycle de vie

DOM

Coordonnées de texture

Gestion des bords 1/2

Gestion des bords 2/2

Filtrage 1/2

Filtrage 2/2

Tableaux
de sommets

Élimination
des faces cachées

Éclairage,
ombrage

Matériaux `three.js`

Lumières `three.js`