Using Web-GL with Typescript
Sample 6 - Displaying Multiple Objects.
This example splits each object out into seperate classes and uses a seperate shader class to allow
each object to use a different shader if required.
There is no new functionality in this sample, the only changes are the class seperations.
At the bottom of the code sections, you can see an example of the code in action.
The example can be downloaded from Github
There is no new functionality in this sample, the only changes are the class seperations.
At the bottom of the code sections, you can see an example of the code in action.
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">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 mVMatrix;
uniform mat4 pMatrix;
varying lowp vec4 vColor;
void main(void) {
gl_Position = pMatrix * mVMatrix * vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying lowp vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}
</script>
<script src="Plane.js"></script>
<script src="Cube.js"></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 Main Class contains the base code to initialise the objects and the shaders.
//<reference path="ShaderProgram.ts"/>
//<reference path="Plane.ts"/>
//<reference path="Cube.ts"/>
declare var mat4: any;
declare var vec3: any;
class Main {
private gl: WebGLRenderingContext;
private zNear: number = 0.1;
private zFar: number = 100.0;
private projectionMatrix: any = mat4.create();
private aspect: number = 0;
// In radians
private fieldOfView: number = 45 * Math.PI / 180;
private pMatrix = mat4.create();
private shaderProgram;
private sp: ShaderProgram;
private plane: Plane;
private cube: Cube;
constructor() {
var canvas = document.getElementById("squareWithDrawArrays");
this.InitGL(canvas)
this.sp = new ShaderProgram(this.gl);
this.shaderProgram = this.sp.GetShaderProgram();
this.SetUpCamera();
this.plane = new Plane(this.shaderProgram, this.gl, this.pMatrix);
this.cube = new Cube(this.shaderProgram, this.gl, this.pMatrix);
this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
this.gl.enable(this.gl.DEPTH_TEST);
setInterval(() => this.DrawScene(), 10);
}
private SetUpCamera(): void {
this.aspect = this.gl.canvas.clientWidth / this.gl.canvas.clientHeight;
mat4.perspective(this.pMatrix,
this.fieldOfView,
this.aspect,
this.zNear,
this.zFar);
}
private InitGL(canvas) {
var names = ["webgl", "experimental-webgl", "webkit-3d", "mozwebgl"];
for (var i = 0; i < names.length; ++i) {
try {
this.gl = canvas.getContext(names[i]);
} catch (e) { }
if (this.gl) {
break;
}
}
if (this.gl == null) {
alert("Could not initialise WebGL");
return null;
}
}
private DrawScene() {
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
this.plane.Draw();
this.cube.Draw();
}
}
window.onload = () => {
var main = new Main();
}
The Plane Class contains the code required to initialise the Plane object.
class Plane {
private shaderProgram;
private gl: WebGLRenderingContext;
private mvMatrix = mat4.create();
private pMatrix = mat4.create();
private vertexPositionBuffer;
private vertexColorBuffer;
private vertexIndexBuffer;
private vertices;
private indices;
private colors;
constructor(shaderProgram, gl: WebGLRenderingContext, pMatrix) {
this.shaderProgram = shaderProgram;
this.gl = gl;
this.pMatrix = pMatrix;
this.InitBuffers();
mat4.translate(this.mvMatrix, this.mvMatrix, vec3.fromValues(0, 0, -7.0))
}
private InitBuffers() {
this.vertexPositionBuffer = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexPositionBuffer);
this.vertices = [
-1.0, -1.0, 0.0, //v0
1.0, -1.0, 0.0, //v1
1.0, 1.0, 0.0, //v2
-1.0, 1.0, 0.0 //v3
];
this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(this.vertices), this.gl.STATIC_DRAW);
this.vertexPositionBuffer.itemSize = 3;
this.vertexPositionBuffer.numItems = 4;
this.vertexColorBuffer = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexColorBuffer);
this.colors = [
1.0, 1.0, 1.0, 1.0,
1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0
];
this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(this.colors), this.gl.STATIC_DRAW);
this.vertexColorBuffer.itemSize = 4;
this.vertexColorBuffer.numItems = 4;
this.vertexIndexBuffer = this.gl.createBuffer();
this.indices = [0, 1, 2, 0, 2, 3];
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.vertexIndexBuffer);
this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this.indices), this.gl.STATIC_DRAW);
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);
}
public Draw() {
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);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexColorBuffer);
this.gl.vertexAttribPointer(this.shaderProgram.vertexColorAttribute, this.vertexColorBuffer.itemSize, this.gl.FLOAT,
false, 0, 0);
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.vertexIndexBuffer);
this.SetMatrixUniforms();
this.gl.drawElements(this.gl.TRIANGLES, this.indices.length, this.gl.UNSIGNED_SHORT, 0);
}
private SetMatrixUniforms() {
this.gl.uniformMatrix4fv(this.shaderProgram.pMatrixUniform, false, this.pMatrix);
this.gl.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform, false, this.mvMatrix);
}
}
The Cube Class contains the code required to initialise the Cube object.
class Cube {
private shaderProgram;
private gl: WebGLRenderingContext;
private mvMatrix = mat4.create();
private pMatrix = mat4.create();
private vertexPositionBuffer;
private vertexColorBuffer;
private vertexIndexBuffer;
private vertices;
private indices;
private colors;
constructor(shaderProgram, gl: WebGLRenderingContext, pMatrix) {
this.shaderProgram = shaderProgram;
this.gl = gl;
this.pMatrix = pMatrix;
this.InitBuffers();
mat4.translate(this.mvMatrix, this.mvMatrix, vec3.fromValues(-1.0, 0, -7.0))
}
private InitBuffers() {
this.vertexPositionBuffer = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexPositionBuffer);
this.vertices = [
// Front face
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
// Back face
-1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
1.0, -1.0, -1.0,
// Top face
-1.0, 1.0, -1.0,
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, -1.0,
// Bottom face
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
1.0, -1.0, 1.0,
-1.0, -1.0, 1.0,
// Right face
1.0, -1.0, -1.0,
1.0, 1.0, -1.0,
1.0, 1.0, 1.0,
1.0, -1.0, 1.0,
// Left face
-1.0, -1.0, -1.0,
-1.0, -1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, 1.0, -1.0,
];
this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(this.vertices), this.gl.STATIC_DRAW);
this.vertexPositionBuffer.itemSize = 3;
this.vertexPositionBuffer.numItems = 24;
this.vertexColorBuffer = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexColorBuffer);
this.colors = [
[1.0, 0.0, 0.0, 1.0], // Front face
[1.0, 1.0, 0.0, 1.0], // Back face
[0.0, 1.0, 0.0, 1.0], // Top face
[1.0, 0.5, 0.5, 1.0], // Bottom face
[1.0, 0.0, 1.0, 1.0], // Right face
[0.0, 0.0, 1.0, 1.0], // Left face
];
var unpackedColors = [];
for (var i in this.colors) {
var color = this.colors[i];
for (var j = 0; j < 4; j++) {
unpackedColors = unpackedColors.concat(color);
}
}
this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(unpackedColors), this.gl.STATIC_DRAW);
this.vertexColorBuffer.itemSize = 4;
this.vertexColorBuffer.numItems = 24;
this.vertexIndexBuffer = this.gl.createBuffer();
this.indices = [
0, 1, 2, 0, 2, 3, // Front face
4, 5, 6, 4, 6, 7, // Back face
8, 9, 10, 8, 10, 11, // Top face
12, 13, 14, 12, 14, 15, // Bottom face
16, 17, 18, 16, 18, 19, // Right face
20, 21, 22, 20, 22, 23 // Left face
];
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.vertexIndexBuffer);
this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this.indices), this.gl.STATIC_DRAW);
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);
}
public Draw() {
mat4.rotate(this.mvMatrix, this.mvMatrix, 0.01, vec3.fromValues(0, 1, 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);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexColorBuffer);
this.gl.vertexAttribPointer(this.shaderProgram.vertexColorAttribute, this.vertexColorBuffer.itemSize, this.gl.FLOAT,
false, 0, 0);
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.vertexIndexBuffer);
this.SetMatrixUniforms();
this.gl.drawElements(this.gl.TRIANGLES, this.indices.length, this.gl.UNSIGNED_SHORT, 0);
}
private SetMatrixUniforms() {
this.gl.uniformMatrix4fv(this.shaderProgram.pMatrixUniform, false, this.pMatrix);
this.gl.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform, false, this.mvMatrix);
}
}
The ShaderProgram Class contains the code required to initialise the Shaders.
class ShaderProgram {
gl: WebGLRenderingContext;
shaderProgram;
constructor(gl: WebGLRenderingContext) {
this.gl = gl;
this.InitShaders();
}
InitShaders() {
var fragmentShader = this.GetShader(this.gl, "shader-fs");
var vertexShader = this.GetShader(this.gl, "shader-vs");
this.shaderProgram = this.gl.createProgram();
this.gl.attachShader(this.shaderProgram, vertexShader);
this.gl.attachShader(this.shaderProgram, fragmentShader);
this.gl.linkProgram(this.shaderProgram);
if (!this.gl.getProgramParameter(this.shaderProgram, this.gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
this.gl.useProgram(this.shaderProgram);
// Bind the position attribute
this.shaderProgram.vertexPositionAttribute = this.gl.getAttribLocation(this.shaderProgram, "aVertexPosition");
this.gl.enableVertexAttribArray(this.shaderProgram.vertexPositionAttribute);
// Bind the colour attribute
this.shaderProgram.vertexColorAttribute = this.gl.getAttribLocation(this.shaderProgram, "aVertexColor");
this.gl.enableVertexAttribArray(this.shaderProgram.vertexColorAttribute);
this.shaderProgram.pMatrixUniform = this.gl.getUniformLocation(this.shaderProgram, "pMatrix");
this.shaderProgram.mvMatrixUniform = this.gl.getUniformLocation(this.shaderProgram, "mVMatrix");
}
private GetShader(gl, id) {
var shaderScript = (document.getElementById(id));
if (!shaderScript) {
return null;
}
var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
public GetShaderProgram() {
return this.shaderProgram;
}
}