Using Web-GL with Typescript
Sample 3 - Adding simple Rotation.
This example extends the previous example by adding a rotation matrix to rotate the quad through
360 degrees.
At the bottom of the code sections, you can see an example of the code in action.
The new code sections are shown in bold, for the sake of brevity, unchanged sections are omitted and denoted by ...
The HTML code below contains the basic shader initialisation code for both the Vertex and Fragment shaders and attaches gl-matrix.js & the transpiled Typescript file: app.js.
The example can be downloaded from Github
At the bottom of the code sections, you can see an example of the code in action.
The new code sections are shown in bold, for the sake of brevity, unchanged sections are omitted and denoted by ...
The HTML code below contains the basic shader initialisation code for both the Vertex and Fragment shaders and attaches gl-matrix.js & the transpiled Typescript file: app.js.
The example can be downloaded from Github
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script id="shader-vs" type="x-shader/x-vertex">
...
</script>
<script id="shader-fs" type="x-shader/x-fragment">
...
</script>
<script src="gl-matrix.js"></script>
<script src="app.js"></script>
</head>
<body>
<canvas id="CanvasGL" style="border: none;" width="500" height="500"></canvas>
</body>
</html>
The Typescript code below initialises the canvas, shaders, buffers and sets up the camera to draw a
simple coloured Quad.
declare var mat4: any;
declare var vec3: any;
class Plane {
...
private DrawScene() {
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
mat4.rotate(this.mvMatrix, this.mvMatrix, 0.01, vec3.fromValues(1, 0, 0));
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexPositionBuffer);
this.gl.vertexAttribPointer(this.shaderProgram.vertexPositionAttribute, this.vertexPositionBuffer.itemSize, this.gl.FLOAT,
false, 0, 0);
...
}
...
}
window.onload = () => {
var plane = new Plane();
}