WebGL

Web Graphics Library. : librairie graphique pour le web.

Besoin

Fournir une bibliothèque de fonctions graphiques 2D et 3D pour le Web déléguant des calculs à la carte graphique .

Analyse

WebGL propose des services de gestion de :

1.0 (OpenGL ES 2.0) 2.0 (OpenGL ES 3.0)
Caméra Oui Oui
Rotation 3D d'objets Oui Oui
Remplissage de facettes Oui Oui
Textures Oui Oui
Lumière Oui Oui
Textures 3D Non Oui
Objets Sampler Non Oui
Objets de tampon Uniform Non Oui
Objets Sync Non Oui
Objets Query Non Oui
Objets Transform Feedback Non Oui
objets Vertex Array Non Oui
Instanciation Non Oui
Cibles de rendu multiples Non Oui
Profondeur de fragment Non Oui

Conception

WebGL est basé sur OpenGL ES

, qui est un sous-ensemble de OpenGL.

Comme OpenGL, il permet de faire de rendus à l'aide d'une pipeline de shaders plus limités, ne pouvant inclure que des :

pBuffers

pipeline model.

Mécanisme d'extension

Implémentation

Un contexte de rendu WebGL doit être obtenu à partir d'un canvas.

1.0 2.0
Date 2009 2016
OpenGL ES 2.0 3.0
Langage GLSL ES 1.00.17 (GLSL 1.2) GLSL ES 3.00.6 (GLSL 3.30)

Exemple

WebGL 1.0

HTML


<canvas></canvas>
<script id="vs" type="x-shader/vertex">
  attribute vec3 position;
  void main() {
    gl_Position = vec4( position, 1.0 );
  }
</script>
<script id="fs" type="x-shader/fragment">
  uniform vec2 resolution;
  void main( void ) {
    gl_FragColor = vec4( 1.0, 0.0, 1.0, 0.6 );
  }
</script>

JavaScript


const vertexShader = document.getElementById("vs").textContent
const fragmentShader = document.getElementById("fs").textContent
const canvas = document.querySelector("canvas")
const gl = canvas.getContext("webgl")
const program = gl.createProgram()
const vs = createShader(vertexShader, gl.VERTEX_SHADER)
const fs = createShader("#ifdef GL_ES\nprecision highp float;\n#endif\n\n" + fragmentShader, gl.FRAGMENT_SHADER)
gl.attachShader(program, vs)
gl.attachShader(program, fs)
gl.linkProgram(program)
const resolutionLocation = gl.getUniformLocation(program, "resolution")

WebGL 2.0

Déploiement

En supposant que l'appareil exécutant le programme dispose d'une carte graphique adaptée, l'API WebGL est disponible dans les navigateurs suivants :

1.0 2.0
Chrome 9+ 56+
Chrome Android 88+ 88+
Android browser 81+ 81+
Safari 5.1+ TP
iOS Safari 8+ flag
Firefox 4+ 51+
Firefox Android 86+ 86+
Edge 12+ 79+
IE 11+ Non
Samsung Internet 4+ 7.2+
Baidu Browser 7.12+ Non

Notes

Références