WebGL-Befehle: 3D-Grafik im Browser mit JavaScript

WebGL (Web Graphics Library) ist eine JavaScript-API der Khronos Group für hardwarebeschleunigte 2D- und 3D-Grafik im Browser — ohne Plugins. WebGL 1.0 erschien im März 2011 und basiert auf OpenGL ES 2.0; WebGL 2.0 folgte im Januar 2017 auf Basis von OpenGL ES 3.0. Die API wird von allen modernen Browsern unterstützt und ist die Grundlage vieler Frameworks wie Three.js und Babylon.js. Als moderne Weiterentwicklung gilt WebGPU.

Kontext erzeugen

WebGL läuft in einem HTML-Canvas. Der Zugriff erfolgt über getContext():

const canvas = document.getElementById('scene');
const gl = canvas.getContext('webgl');      // WebGL 1.0
const gl2 = canvas.getContext('webgl2');    // WebGL 2.0

Ohne GPU-Unterstützung liefert der Aufruf null zurück — das sollte vor dem Rendern geprüft werden.

Shader und Programm

WebGL verwendet Shader in GLSL ES, die als Strings an die GPU übergeben werden:

const vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, vertexShaderSource);
gl.compileShader(vs);
const prog = gl.createProgram();
gl.attachShader(prog, vs);
gl.linkProgram(prog);
gl.useProgram(prog);

Die Shader-Quelltexte werden zur Laufzeit kompiliert; Fehler lassen sich über getShaderInfoLog() beziehungsweise getProgramInfoLog() auslesen.

Geometrie zeichnen

Vertex-Daten liegen in GPU-Puffern. Der typische Zeichenablauf:

const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.vertexAttribPointer(loc, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(loc);
gl.clearColor(0.1, 0.1, 0.1, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);

Wichtige Draw-Funktionen sind drawArrays() für nicht-indizierte und drawElements() für indizierte Geometrie. Texturen werden über createTexture(), texImage2D() und bindTexture() verwaltet.

Einschränkungen

  • WebGL 1.0 kann nur Vertex- und Fragment-Shader (keine Geometry- oder Compute-Shader).
  • Die API ist zustandsbehaftet (State-Machine) wie OpenGL; viele Frameworks kapseln das.
  • WebGL 2.0 bringt Textur-Arrays, Instancing, Uniform Buffer Objects und erweiterte MRTs.

Verwandte Themen: JavaScript-Befehle, GLSL-Befehle, OpenGL-Befehle.