WebGL 2 Guide - #5 Erste WebGL Befehle

Im letzten Schritt haben wir alle Randbedingungen erfüllt und können uns nun WebGL widmen.

Lasst uns als Erstes einmal die Hintergrundfarbe bzw. die ClearColor des Canvas ändern.

Dazu schreiben wir uns eine Funktion updateClearColor(...color).

Öffnet dazu die main.js und fügt folgende Zeilen hinzu:

// Update the canvas clear color
function updateClearColor(...color)
{
    gl.clearColor(...color);
    gl.clear(gl.COLOR_BUFFER_BIT);
}

Wir nutzen hier den ES6 spread operator (...) um Elemente automatisch aus einem Array zu extrahieren.

gl.clearColor(...color);

ist der erste WebGL Befehl, welcher die Farbe, welche zum clearen eines Buffers verwendet werden soll definiert.

gl.clear(gl.COLOR_BUFFER_BIT);

Führt dann das eigentliche clearen des Buffers durch.

gl.COLOR_BUFFER_BIT

Ist der Buffer, den wir clearen  wollen. Es gibt noch mehrere Buffer die wir im Laufe des Guides kennen lernen werden. In diesem Fall möchten wir den Color Buffer clearen.

Um jedoch die Variable gl in unserer neuen Funktion nutzen zu können, müssen wir diese im globalen Scope definieren.

Dazu ändern wir folgende Zeilen in der main.js:

// Get the WebGL context
const gl = canvas.getContext("webgl2")

löscht hier das Keyword const:

// Get the WebGL context
gl = canvas.getContext("webgl2")

Und ganz oben im Dokument, fügt nach "use-strict" folgendes hinzu:

"use-strict"

// Holds the reference to the WebGL context
let gl;

Somit haben wir die Variable gl nicht im lokalen Scope, also innerhalb einer Funktion definiert, sondern Global. Somit kann sie in jeder Funktion verwendet werden.

Normalerweise sollten Variablen im globalen Scope vermeiden werden, wie aber schon erwähnt, geht es hier nicht um Design Patterns, sondern darum, sich auf das wesentliche zu konzentrieren: WebGL.


Nun müssen wir unsere Funktion noch aufrufen, dies tun wir einfach in unserer init-Funktion:
Fügt am Ende folgende Zeile hinzu:

updateClearColor(0.2, 0.2, 0.8, 1.0);

WebGL arbeitet mit Farbwerten im Bereich 0.0 - 1.0, wobei 0 kein Farbanteil, und 1 maximaler Farbanteil bedeutet. Das Format ist dabei (Rotanteil, Grünanteil, Blauanteil, Opazität).
Opazität ist dabei der Alphawert bzw. die Angabe der Transparenz. 0.0 bedeutet komplett Transparent und 1.0 komplett Intransparent.

Den oberen Werten nach, kommt also ein blauer Farbton heraus: viel Blauanteil (0.8).
Öffnet nun die Seite im Browser und überprüft ob das stimmt.
Ich empfehle noch ein bisschen mit diesen Werten zu experimentieren, um ein Gefühl dafür zu bekommen.

Die main.js sieht nun folgendermaßen aus:

"use-strict"

// Holds the reference to the WebGL context
let gl;

// Initialize WebGL
// Is called on onload
function init()
{
    // Get the canvas reference
    const canvas = document.getElementById("webgl-canvas");

    // Ensure a canvas was found
    if (!canvas)
    {
        console.error("Error: no canvas found!");
        return;
    }

    // Get the WebGL context
    gl = canvas.getContext("webgl2")

    // Ensure context was found
    if (!gl)
    {
        console.error("WebGL is not available!");
        return;
    }

    updateClearColor(0.2, 0.2, 0.8, 1.0);
}

// Update the canvas clear color
function updateClearColor(...color)
{
    gl.clearColor(...color);
    gl.clear(gl.COLOR_BUFFER_BIT);
}

Im nächsten Schritt werden wir uns genauer mit Shadern beschäftigen:

WebGL 2 Guide - #6 Shader