WebGL Essentials: Teil I.

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

WebGL ist ein 3D-Renderer im Browser, der auf OpenGL basiert und es hilft Ihnen, Ihre 3D-Inhalte direkt auf einer HTML5-Seite anzuzeigen. In diesem Tutorial werde ich alle wichtigen Informationen behandeln, die Sie benötigen, um mit diesem Framework beginnen zu können.

Einführung

Es gibt ein paar Dinge, die Sie wissen sollten, bevor wir anfangen. WebGL ist eine JavaScript-API, die 3D-Inhalte auf einer HTML5-Zeichenfläche rendert. Dazu werden zwei Skripte verwendet, die in der "3D-Welt" als Shader bekannt sind. Die zwei Shader sind:

Der Vertex-Shader
Der Fragment-Shader

Seien Sie jetzt nicht zu nervös, wenn Sie diese Namen hören. Es ist nur eine ausgefallene Art zu sagen: "Positionsrechner" bzw. "Farbauswahl". Der Fragment-Shader ist leichter zu verstehen. Es teilt WebGL einfach mit, welche Farbe ein bestimmter Punkt auf Ihrem Modell haben soll. Der Vertex-Shader ist etwas technischer, konvertiert jedoch im Grunde die Punkte in Ihren 3D-Modellen in 2D-Koordinaten. Da alle Computermonitore flache 2D-Oberflächen sind und Sie 3D-Objekte auf Ihrem Bildschirm sehen, sind sie lediglich eine Illusion der Perspektive.

Wenn Sie genau wissen möchten, wie diese Berechnung funktioniert, müssen Sie einen Mathematiker fragen, da er erweiterte 4 x 4-Matrixmultiplikationen verwendet, die etwas über das Tutorial "Essentials" hinausgehen. Sie müssen nicht wissen, wie es funktioniert, da WebGL sich um das meiste kümmert. Also lassen uns anfangen.

Schritt 1: Einrichten von WebGL

WebGL hat viele kleine Einstellungen, die Sie fast jedes Mal vornehmen müssen, wenn Sie etwas auf den Bildschirm zeichnen. Um Zeit zu sparen und Ihren Code ordentlich zu gestalten, werde ich ein JavaScript-Objekt erstellen, das alle Dinge hinter den Kulissen in einer separaten Datei enthält. Erstellen Sie zunächst eine neue Datei mit dem Namen 'WebGL.js' und fügen Sie den folgenden Code ein:

function WebGL(CID, FSID, VSID){
	var canvas = document.getElementById(CID);
	if(!canvas.getContext("webgl") && !canvas.getContext("experimental-webgl"))
		alert("Your Browser Doesn't Support WebGL");
	else
	{
		this.GL = (canvas.getContext("webgl")) ? canvas.getContext("webgl") : canvas.getContext("experimental-webgl");	
		
		this.GL.clearColor(1.0, 1.0, 1.0, 1.0); // this is the color 
		this.GL.enable(this.GL.DEPTH_TEST); //Enable Depth Testing
		this.GL.depthFunc(this.GL.LEQUAL); //Set Perspective View
		this.AspectRatio = canvas.width / canvas.height;
		
		//Load Shaders Here
	}
}

Diese Konstruktorfunktion berücksichtigt die IDs der Zeichenfläche und der beiden Shader-Objekte. Zuerst erhalten wir das Canvas-Element und stellen sicher, dass es WebGL unterstützt. Wenn dies der Fall ist, weisen wir den WebGL-Kontext einer lokalen Variablen namens "GL" zu. Die klare Farbe ist einfach die Hintergrundfarbe, und es ist erwähnenswert, dass in WebGL die meisten Parameter von 0,0 bis 1,0 reichen, sodass Sie Ihre RGB-Werte durch 255 teilen müssten. In unserem Beispiel bedeutet 1.0, 1.0, 1.0, 1.0 einen weißen Hintergrund mit 100% Sichtbarkeit (keine Transparenz). In den nächsten beiden Zeilen wird WebGL angewiesen, Tiefe und Perspektive zu berechnen, damit ein Objekt in Ihrer Nähe Objekte dahinter blockiert. Schließlich legen wir das Seitenverhältnis fest, das berechnet wird, indem die Breite der Leinwand durch ihre Höhe geteilt wird.

Bevor wir fortfahren und die beiden Shader laden, schreiben wir sie. Ich werde diese in die HTML-Datei schreiben, in die wir das eigentliche Canvas-Element einfügen werden. Erstellen Sie eine HTML-Datei und platzieren Sie die folgenden zwei Skriptelemente direkt vor dem schließenden Body-Tag:

<script id="VertexShader" type="x-shader/x-vertex">
  
	attribute highp vec3 VertexPosition;
	attribute highp vec2 TextureCoord;
	
	
	uniform highp mat4 TransformationMatrix;
	uniform highp mat4 PerspectiveMatrix;
	
	varying highp vec2 vTextureCoord;
	
	void main(void) {
		gl_Position = PerspectiveMatrix * TransformationMatrix * vec4(VertexPosition, 1.0);
		vTextureCoord = TextureCoord;
	}
</script>

<script id="FragmentShader" type="x-shader/x-fragment"> 
	varying highp vec2 vTextureCoord;
	
	uniform sampler2D uSampler;
	
	void main(void) {
		highp vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
		gl_FragColor = texelColor;
	}     
</script>

Der Vertex-Shader wird zuerst erstellt und wir definieren zwei Attribute:

die Scheitelpunktposition, d.h. die Position in x-, y- und z-Koordinaten des aktuellen Scheitelpunkts (Punkt in Ihrem Modell)
die Texturkoordinate; die Position im Texturbild, die diesem Punkt zugewiesen werden soll

Danach erstellen wir Variablen für die Transformations- und Perspektivenmatrizen. Diese werden verwendet, um das 3D-Modell in ein 2D-Bild umzuwandeln. In der nächsten Zeile wird eine gemeinsame Variable für den Fragment-Shader erstellt, und in der Hauptfunktion berechnen wir die gl_Position (die endgültige 2D-Position). Anschließend weisen wir der gemeinsam genutzten Variablen die 'aktuelle Texturkoordinate' zu.

Im Fragment-Shader nehmen wir nur die Koordinaten, die wir im Vertex-Shader definiert haben, und "probieren" die Textur an dieser Koordinate aus. Grundsätzlich erhalten wir nur die Farbe in der Textur, die dem aktuellen Punkt in unserer Geometrie entspricht.

Nachdem wir die Shader geschrieben haben, können wir sie wieder in unsere JS-Datei laden. Ersetzen Sie daher die "//Load Shaders Here" durch den folgenden Code:

var FShader = document.getElementById(FSID);
var VShader = document.getElementById(VSID);

if(!FShader || !VShader)
	alert("Error, Could Not Find Shaders");
else
{
	//Load and Compile Fragment Shader
	var Code = LoadShader(FShader);
	FShader = this.GL.createShader(this.GL.FRAGMENT_SHADER);
	this.GL.shaderSource(FShader, Code);
	this.GL.compileShader(FShader);
	
	//Load and Compile Vertex Shader
	Code = LoadShader(VShader);
	VShader = this.GL.createShader(this.GL.VERTEX_SHADER);
	this.GL.shaderSource(VShader, Code);
	this.GL.compileShader(VShader);
	
	//Create The Shader Program
	this.ShaderProgram = this.GL.createProgram();
	this.GL.attachShader(this.ShaderProgram, FShader);
	this.GL.attachShader(this.ShaderProgram, VShader);
	this.GL.linkProgram(this.ShaderProgram);
	this.GL.useProgram(this.ShaderProgram);
	
	//Link Vertex Position Attribute from Shader
	this.VertexPosition = this.GL.getAttribLocation(this.ShaderProgram, "VertexPosition");
	this.GL.enableVertexAttribArray(this.VertexPosition);
	
	//Link Texture Coordinate Attribute from Shader
	this.VertexTexture = this.GL.getAttribLocation(this.ShaderProgram, "TextureCoord");
	this.GL.enableVertexAttribArray(this.VertexTexture);
}

Ihre Texturen müssen in geraden Bytegrößen vorliegen, sonst wird eine Fehlermeldung angezeigt... wie 2x2, 4x4, 16x16, 32x32...

Wir stellen zuerst sicher, dass die Shader vorhanden sind, und laden sie dann einzeln. Der Prozess ruft im Grunde den Quellcode des Shaders ab, kompiliert ihn und hängt ihn an das zentrale Shader-Programm an. Es gibt eine Funktion namens LoadShader, die den Shader-Code aus der HTML-Datei abruft. Wir werden gleich darauf zurückkommen. Wir verwenden das 'Shader-Programm', um die beiden Shader miteinander zu verbinden, und es gibt uns Zugriff auf ihre Variablen. Wir speichern die beiden Attribute, die wir in den Shadern definiert haben. damit wir später unsere Geometrie in sie eingeben können.

Schauen wir uns nun die LoadShader-Funktion an. Sie sollten diese außerhalb der WebGL-Funktion platzieren:

function LoadShader(Script){
	var Code = "";
	var CurrentChild = Script.firstChild;
	while(CurrentChild)
	{
		if(CurrentChild.nodeType == CurrentChild.TEXT_NODE)
			Code += CurrentChild.textContent;
		CurrentChild = CurrentChild.nextSibling;
	}
	return Code;
}

Es durchläuft im Grunde nur den Shader und sammelt den Quellcode.

Schritt 2: Der "einfache" Würfel

Zum Zeichnen von Objekten in WebGL benötigen Sie die folgenden drei Arrays:

Eckpunkte; die Punkte, aus denen Ihre Objekte bestehen
Dreiecke; teilt WebGL mit, wie die Scheitelpunkte zu Flächen verbunden werden sollen
Texturkoordinaten; Definiert, wie die Scheitelpunkte auf dem Texturbild abgebildet werden

Das wird als UV-Mapping bezeichnet. In unserem Beispiel erstellen wir einen Basiswürfel. Ich werde den Würfel in 4 Eckpunkte pro Seite teilen, die sich in zwei Dreiecke verbinden. Lassen Sie uns eine Variable erstellen, die die Arrays eines Cubes enthält.

1	var Cube = {
2	Vertices : [ // X, Y, Z Coordinates
3
4	//Front
5
6	1.0, 1.0, -1.0,
7	1.0, -1.0, -1.0,
8	-1.0, 1.0, -1.0,
9	-1.0, -1.0, -1.0,
10
11	//Back
12
13	1.0, 1.0, 1.0,
14	1.0, -1.0, 1.0,
15	-1.0, 1.0, 1.0,
16	-1.0, -1.0, 1.0,
17
18	//Right
19
20	1.0, 1.0, 1.0,
21	1.0, -1.0, 1.0,
22	1.0, 1.0, -1.0,
23	1.0, -1.0, -1.0,
24
25	//Left
26
27	-1.0, 1.0, 1.0,
28	-1.0, -1.0, 1.0,
29	-1.0, 1.0, -1.0,
30	-1.0, -1.0, -1.0,
31
32	//Top
33
34	1.0, 1.0, 1.0,
35	-1.0, -1.0, 1.0,
36	1.0, -1.0, -1.0,
37	-1.0, -1.0, -1.0,
38
39	//Bottom
40
41	1.0, -1.0, 1.0,
42	-1.0, -1.0, 1.0,
43	1.0, -1.0, -1.0,
44	-1.0, -1.0, -1.0
45
46	],
47	Triangles : [ // Also in groups of threes to define the three points of each triangle
48	//The numbers here are the index numbers in the vertex array
49
50	//Front
51
52	0, 1, 2,
53	1, 2, 3,
54
55	//Back
56
57	4, 5, 6,
58	5, 6, 7,
59
60	//Right
61
62	8, 9, 10,
63	9, 10, 11,
64
65	//Left
66
67	12, 13, 14,
68	13, 14, 15,
69
70	//Top
71
72	16, 17, 18,
73	17, 18, 19,
74
75	//Bottom
76
77	20, 21, 22,
78	21, 22, 23
79
80	],
81	Texture : [ //This array is in groups of two, the x and y coordinates (a.k.a U,V) in the texture
82	//The numbers go from 0.0 to 1.0, One pair for each vertex
83
84	//Front
85
86	1.0, 1.0,
87	1.0, 0.0,
88	0.0, 1.0,
89	0.0, 0.0,
90
91
92	//Back
93
94	0.0, 1.0,
95	0.0, 0.0,
96	1.0, 1.0,
97	1.0, 0.0,
98
99	//Right
100
101	1.0, 1.0,
102	1.0, 0.0,
103	0.0, 1.0,
104	0.0, 0.0,
105
106	//Left
107
108	0.0, 1.0,
109	0.0, 0.0,
110	1.0, 1.0,
111	1.0, 0.0,
112
113	//Top
114
115	1.0, 0.0,
116	1.0, 1.0,
117	0.0, 0.0,
118	0.0, 1.0,
119
120	//Bottom
121
122	0.0, 0.0,
123	0.0, 1.0,
124	1.0, 0.0,
125	1.0, 1.0
126	]
127	};

Es mag wie eine Menge Daten für einen einfachen Würfel erscheinen. In Teil 2 dieses Tutorials werde ich jedoch ein Skript erstellen, das Ihre 3D-Modelle importiert, damit Sie sich nicht um die Berechnung dieser Daten kümmern müssen.

Sie fragen sich vielleicht auch, warum ich 24 Punkte (4 für jede Seite) gemacht habe, wenn ein Würfel wirklich nur insgesamt acht eindeutige Punkte enthält? Ich habe dies getan, weil Sie nur eine Texturkoordinate pro Scheitelpunkt zuweisen können. Wenn wir also nur die 8 Punkte eingeben würden, müsste der gesamte Würfel gleich aussehen, da er die Textur um alle Seiten wickeln würde, die der Scheitelpunkt berührt. Auf diese Weise hat jede Seite ihre eigenen Punkte, sodass wir auf jeder Seite einen anderen Teil der Textur platzieren können.

Wir haben jetzt diese Würfelvariable und können mit dem Zeichnen beginnen. Kehren wir zur WebGL-Methode zurück und fügen eine Draw-Funktion hinzu.

Schritt 3: Die Zeichenfunktion

Das Verfahren zum Zeichnen von Objekten in WebGL umfasst viele Schritte. Daher ist es eine gute Idee, eine Funktion zu erstellen, um den Prozess zu vereinfachen. Die Grundidee besteht darin, die drei Arrays in WebGL-Puffer zu laden. Anschließend verbinden wir diese Puffer mit den Attributen, die wir in den Shadern definiert haben, zusammen mit den Transformations- und Perspektivmatrizen. Als nächstes müssen wir die Textur in den Speicher laden und schließlich können wir den Befehl draw aufrufen. Also lasst uns anfangen.

Der folgende Code ist in der WebGL-Funktion enthalten:

this.Draw = function(Object, Texture)
{
    var VertexBuffer = this.GL.createBuffer(); //Create a New Buffer

    //Bind it as The Current Buffer
    this.GL.bindBuffer(this.GL.ARRAY_BUFFER, VertexBuffer);

    // Fill it With the Data
    this.GL.bufferData(this.GL.ARRAY_BUFFER, new Float32Array(Object.Vertices), this.GL.STATIC_DRAW);

    //Connect Buffer To Shader's attribute
    this.GL.vertexAttribPointer(this.VertexPosition, 3, this.GL.FLOAT, false, 0, 0);

    //Repeat For The next Two
    var TextureBuffer = this.GL.createBuffer();
    this.GL.bindBuffer(this.GL.ARRAY_BUFFER, TextureBuffer);
    this.GL.bufferData(this.GL.ARRAY_BUFFER, new Float32Array(Object.Texture), this.GL.STATIC_DRAW);
    this.GL.vertexAttribPointer(this.VertexTexture, 2, this.GL.FLOAT, false, 0, 0);

    var TriangleBuffer = this.GL.createBuffer();
    this.GL.bindBuffer(this.GL.ELEMENT_ARRAY_BUFFER, TriangleBuffer);
    //Generate The Perspective Matrix
    var PerspectiveMatrix = MakePerspective(45, this.AspectRatio, 1, 10000.0);

    var TransformMatrix = MakeTransform(Object);

    //Set slot 0 as the active Texture
    this.GL.activeTexture(this.GL.TEXTURE0);

    //Load in the Texture To Memory
    this.GL.bindTexture(this.GL.TEXTURE_2D, Texture);

    //Update The Texture Sampler in the fragment shader to use slot 0
    this.GL.uniform1i(this.GL.getUniformLocation(this.ShaderProgram, "uSampler"), 0);

    //Set The Perspective and Transformation Matrices
    var pmatrix = this.GL.getUniformLocation(this.ShaderProgram, "PerspectiveMatrix");
    this.GL.uniformMatrix4fv(pmatrix, false, new Float32Array(PerspectiveMatrix));

    var tmatrix = this.GL.getUniformLocation(this.ShaderProgram, "TransformationMatrix");
    this.GL.uniformMatrix4fv(tmatrix, false, new Float32Array(TransformMatrix));

    //Draw The Triangles
    this.GL.drawElements(this.GL.TRIANGLES, Object.Trinagles.length, this.GL.UNSIGNED_SHORT, 0);
};

Der Vertex-Shader positioniert, dreht und skaliert Ihr Objekt basierend auf den Transformations- und Perspektivmatrizen. Wir werden im zweiten Teil dieser Reihe eingehender auf Transformationen eingehen.

Ich habe zwei Funktionen hinzugefügt: MakePerspective() und MakeTransform(). Diese generieren nur die notwendigen 4x4-Matrizen für WebGL. Die Funktion MakePerspective() akzeptiert das vertikale Sichtfeld, das Seitenverhältnis sowie die nächstgelegenen und am weitesten entfernten Punkte als Argumente. Alles, was näher als 1 Einheit und weiter als 10000 Einheiten ist, wird nicht angezeigt. Sie können diese Werte jedoch bearbeiten, um den gewünschten Effkt zu erzielen. Schauen wir uns nun diese beiden Funktionen an:

function MakePerspective(FOV, AspectRatio, Closest, Farest){
	var YLimit = Closest * Math.tan(FOV * Math.PI / 360);
	var A = -( Farest + Closest ) / ( Farest - Closest );
	var B = -2 * Farest * Closest / ( Farest - Closest );
	var C = (2 * Closest) / ( (YLimit * AspectRatio) * 2 );
	var D =	(2 * Closest) / ( YLimit * 2 );
	return [
		C, 0, 0, 0,
		0, D, 0, 0,
		0, 0, A, -1,
		0, 0, B, 0
	];
}
function MakeTransform(Object){
	return [
		1, 0, 0, 0,
		0, 1, 0, 0,
		0, 0, 1, 0,
		0, 0, -6, 1
	];
}

Beide Matrizen wirken sich auf das endgültige Aussehen Ihrer Objekte aus, aber die perspektivische Matrix bearbeitet Ihre '3D-Welt' wie das Sichtfeld und die sichtbaren Objekte, während die Transformationsmatrix die einzelnen Objekte wie ihre Rotationsskala und Position bearbeitet. Nachdem dies erledigt ist, sind wir fast bereit zu zeichnen. Alles, was übrig bleibt, ist eine Funktion zum Konvertieren eines Bildes in eine WebGL-Textur.

Schritt 4: Laden von Texturen

Das Laden einer Textur erfolgt in zwei Schritten. Zuerst müssen wir ein Bild wie in einer Standard-JavaScript-Anwendung laden und dann in eine WebGL-Textur konvertieren. Beginnen wir also mit dem zweiten Teil, da wir uns bereits in der JS-Datei befinden. Fügen Sie am Ende der WebGL-Funktion direkt nach dem Befehl Zeichnen Folgendes hinzu:

this.LoadTexture = function(Img){
	//Create a new Texture and Assign it as the active one
	var TempTex = this.GL.createTexture();
	this.GL.bindTexture(this.GL.TEXTURE_2D, TempTex);  
	
	//Flip Positive Y (Optional)
	this.GL.pixelStorei(this.GL.UNPACK_FLIP_Y_WEBGL, true);
	
	//Load in The Image
	this.GL.texImage2D(this.GL.TEXTURE_2D, 0, this.GL.RGBA, this.GL.RGBA, this.GL.UNSIGNED_BYTE, Img);  
	
	//Setup Scaling properties
	this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_MAG_FILTER, this.GL.LINEAR);  
	this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_MIN_FILTER, this.GL.LINEAR_MIPMAP_NEAREST);  
	this.GL.generateMipmap(this.GL.TEXTURE_2D); 
	
	//Unbind the texture and return it.
	this.GL.bindTexture(this.GL.TEXTURE_2D, null);
	return TempTex;
};

Es ist erwähnenswert, dass Ihre Texturen in geraden Byte-Größen vorliegen müssen, sonst erhalten Sie eine Fehlermeldung. Es müssen also Abmessungen wie 2x2, 4x4, 16x16, 32x32 usw. vorliegen. Ich habe die Linie hinzugefügt, um die Y-Koordinaten einfach umzudrehen, weil die Y-Koordinaten meiner 3D-Anwendung rückwärts waren, aber es hängt davon ab, was Sie verwenden. Dies liegt daran, dass einige Programme 0 in der Y-Achse in der oberen linken Ecke und einige Anwendungen in der unteren linken Ecke festlegen. Die von mir festgelegten Skalierungseigenschaften teilen WebGL lediglich mit, wie das Bild vergrößert und verkleinert werden soll. Sie können mit verschiedenen Optionen herumspielen, um verschiedene Effekte zu erzielen, aber ich dachte, diese funktionieren am besten.

Nachdem wir mit der JS-Datei fertig sind, kehren wir zur HTML-Datei zurück und implementieren all dies.

Schritt 5: Einpacken

Wie bereits erwähnt, wird WebGL in ein Canvas-Element gerendert. Das ist alles was wir im Körperteil brauchen. Nach dem Hinzufügen des Canvas-Elements sollte Ihre HTML-Seite wie folgt aussehen:

<html>
	<head>
		<!-- Include Our WebGL JS file -->
		<script src="WebGL.js" type="text/javascript"></script>
		<script>
			
		</script>
	</head>
	<body onload="Ready()">  
	  <canvas id="GLCanvas" width="720" height="480">
	    	Your Browser Doesn't Support HTML5's Canvas.  
	  </canvas>
	  
	<!-- Your Vertex Shader -->
	
	<!-- Your Fragment Shader -->
	
	</body>
</html>

Es ist eine ziemlich einfache Seite. Im Kopfbereich habe ich auf unsere JS-Datei verlinkt. Lassen Sie uns nun unsere Ready-Funktion implementieren, die beim Laden der Seite aufgerufen wird:

//This will hold our WebGL variable
var GL; 
	
//Our finished texture
var Texture;
	
//This will hold the textures image 
var TextureImage;
	
function Ready(){
	GL = new WebGL("GLCanvas", "FragmentShader", "VertexShader");
	TextureImage = new Image();
	TextureImage.onload = function(){
		Texture = GL.LoadTexture(TextureImage);
		GL.Draw(Cube, Texture);
	};
	TextureImage.src = "Texture.png";
}

Also erstellen wir ein neues WebGL-Objekt und übergeben die IDs für die Zeichenfläche und die Shader. Als nächstes laden wir das Texturbild. Nach dem Laden rufen wir die Draw()-Methode mit dem Cube und der Texture auf. Wenn Sie mitgemacht haben, sollte Ihr Bildschirm einen statischen Würfel mit einer Textur haben.

Obwohl ich sagte, dass wirdas nächste Mal Transformationen behandeln werden, kann ich Sie nicht einfach mit einem statischen Quadrat zurücklassen. Es ist nicht 3D genug. Gehen wir zurück und fügen eine kleine Drehung hinzu. Ändern Sie in der HTML-Datei die onload-Funktion folgendermaßen:

1	TextureImage.onload = function(){
2	Texture = GL.LoadTexture(TextureImage);
3	setInterval(Update, 33);
4	};

Dadurch wird alle 33 Millisekunden eine Funktion namens Update() aufgerufen, die eine Bildrate von ca. 30 fps ergibt. Hier ist die Update-Funktion:

1	function Update(){
2	GL.GL.clear(16384 \| 256);
3	GL.Draw(GL.Cube, Texture);
4	}

Dies ist eine ziemlich einfache Funktion; Es löscht den Bildschirm und zeichnet dann den aktualisierten Cube. Gehen wir nun zur JS-Datei, um den Rotationscode hinzuzufügen.

Schritt 6: Hinzufügen von Spin

Ich werde Transformationen nicht vollständig implementieren, da ich sie für das nächste Mal speichere, aber fügen wir eine Drehung um die Y-Achse hinzu. Zuerst fügen Sie dem unseren Cube-Objekt eine Rotationsvariable hinzu. Dadurch wird der aktuelle Winkel verfolgt und die Drehung kann weiter erhöht werden. Der obere Rand Ihrer Cube-Variablen sollte also folgendermaßen aussehen:

1	var Cube = {
2	Rotation : 0,
3	//The Other Three Arrays
4	};

Aktualisieren wir nun die Funktion MakeTransform(), um die Rotation einzubeziehen:

function MakeTransform(Object){
	var y = Object.Rotation * (Math.PI / 180.0);
	var A = Math.cos(y);
	var B = -1 * Math.sin(y);
	var C = Math.sin(y);
	var D = Math.cos(y);
	Object.Rotation += .3;	
	return [
		A, 0, B, 0,
		0, 1, 0, 0,
		C, 0, D, 0,
		0, 0, -6, 1
	];
}

Abschluss

Und das ist es! Im nächsten Tutorial werden wir das Laden von Modellen und das Durchführen von Transformationen behandeln. Ich hoffe, Ihnen hat dieses Tutorial gefallen. Fühlen Sie sich frei, Fragen oder Kommentare zu hinterlassen, die Sie möglicherweise unten haben.