Transformationen

Sie wissen mittlerweile, was z. B. eine Projektions-Matrix ist, aber nicht, wie man diese jetzt in WebGL einbaut? Falls Sie jetzt noch nicht die ersten beiden Tutorials gelesen haben, sollten Sie das nun tun, da Sie das Wissen benötigen, um mit diesen Matrizen arbeiten zu können.

Vorbereitung

Zuerst müssen wir die jeweiligen Matrizen als Uniform definieren:

uniform mat4 u_modelMatrix;
uniform mat4 u_viewMatrix;
uniform mat4 u_projectionMatrix;

Danach multiplizieren wir die Matrizen mit der Vertex:

gl_Position = u_projectionMatrix * u_viewMatrix * u_modelMatrix * vec4(a_position, 1.0);

Jetzt speichern wir die ID der Uniforms in Variablen im Initialisierungsteil des WebGL-Codes:

var modelMatrixUniformLocation = gl.getUniformLocation(program, "u_modelMatrix");
var viewMatrixUniformLocation = gl.getUniformLocation(program, "u_viewMatrix");
var projectionMatrixUniformLocation = gl.getUniformLocation(program, "u_projectionMatrix");

Weltkoordinaten (Modell-Matrix)

Beispielhaft definieren wir hier eine Translations-, eine Rotations- und eine Skalierungsmatrix:

var translation = [
    [1.0, 0.0, 0.0, 0.0],
    [0.0, 1.0, 0.0, 0.0],
    [0.0, 0.0, 1.0, 0.0],
    [0.0, 0.0, 0.0, 1.0],
];

var rotation = [
    [1.0, 0.0, 0.0, 0.0],
    [0.0, 1.0, 0.0, 0.0],
    [0.0, 0.0, 1.0, 0.0],
    [0.0, 0.0, 0.0, 1.0],
];

var scale = [
    [1.0, 0.0, 0.0, 0.0],
    [0.0, 1.0, 0.0, 0.0],
    [0.0, 0.0, 1.0, 0.0],
    [0.0, 0.0, 0.0, 1.0],
];

Hier nehmen wir erstmal die Einheitsmatrizen der Einfachheit halber. Jetzt müssen diese Daten nur noch multipliziert, in ein eindimensionales Array umgewandelt und anschließend an die Uniform übergeben werden (im Rendering-Teil):

var modelMatrix = math.chain(math.matrix(translation)).multiply(rotation).multiply(scale).done();
var modelMatrixData = [].concat.apply([], modelMatrix.valueOf());

gl.uniformMatrix4fv(modelMatrixUniformLocation, false, modelMatrixData);

Kamera- und Viewport-Koordinaten (Ansichts- und Projektions-Matrizen)

Diese kann man erstmal jeweils als Einheitsmatrix definieren und den jeweiligen Uniforms übergeben:

var view = [
    [1.0, 0.0, 0.0, 0.0],
    [0.0, 1.0, 0.0, 0.0],
    [0.0, 0.0, 1.0, 0.0],
    [0.0, 0.0, 0.0, 1.0],
];

var viewMatrix = math.matrix(view);
var viewMatrixData = [].concat.apply([], viewMatrix.valueOf());

gl.uniformMatrix4fv(viewMatrixUniformLocation, false, viewMatrixData);

var projection = [
    [1.0, 0.0, 0.0, 0.0],
    [0.0, 1.0, 0.0, 0.0],
    [0.0, 0.0, 1.0, 0.0],
    [0.0, 0.0, 0.0, 1.0],
];

var projectionMatrix = math.matrix(projection);
var projectionMatrixData = [].concat.apply([], projectionMatrix.valueOf());

gl.uniformMatrix4fv(projectionMatrixUniformLocation, false, projectionMatrixData);

Das Endergebnis sollte nun identisch mit dem aus dem vorherigen Tutorial sein. Nun kann man aber seine berechneten Werte in die Matrizen eintragen und das Endergebnis “bestaunen”.