Our application has grown quite a lot, where we start to have more components. Working on Javascript can be a real hassle because it's not a typed language, as everything is evaluated at runtime. It really is prone to runtime errors because misused type and many more.

Here, I'll restart the project by using TypeScript and transpile/bundle it using Snowpack. Getting the benefits of typed language is a must, unless you're masochist enough

TypeScript and Snowpack

Like any Javascript projects, I'm going to use Node.js to work with this project. I'll assume you already have it, so if you don't, go install it. Now. Oh yeah, I also use yarn over npm.

I'll just go fast in this one. Open your terminal, and just go

mkdir Blog-AwooCAD
cd Blog-AwooCAD
yarn init

You'll get prompt to fill out several metadata for your project. Just fill out as you like. Then, install Snowpack

yarn add snowpack -D

This will install snowpack as devDependencies.

Now, create a folder "src" and create a file "index.html" and "main.ts" inside.

mkdir src
cd src
touch index.html
touch main.ts

Go back to the root directory and create "snowpack.config.js" file.

cd ..
touch snowpack.config.js

Now, edit the contents of the file to these respective contents.

// snowpack.config.js
module.exports = {
    "mount": {
        "src": "/"
    }
}

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AwooCAD</title>
</head>
<body>
    <canvas id="content"></canvas>
    <script src="main.js" type="module"></script>
</body>
</html>

To simplify the workflow, we're adding scripts to package.json, one to start a development server, one to build our files. Having development server will give benefits such as hot reloading and hot module replacement, and such.

// package.json, add this property
"scripts": {
    "start": "snowpack dev",
    "build": "snowpack build"
},

So, the next time, you'll just need to type "yarn start" to start your development server. How convenient, right?

Now, we need to refactor our previous code. We're separating functions and several blocks into separate files, like the multiplyMatrix function can be stored inside a file like utils.ts

Now, because we can work in multiple files, it means we can keep our external scripts out of the HTML file. Those includes the shaders and CSS. Using an external CSS is pretty straightforward, but using external shader requires extra job.

For now, let's start with a project directory like in this picture.

Inside loaders/shader.ts, put this script.

export const loadShader = async (gl: WebGL2RenderingContext, type: number, source: string) => {
    const rawShader = await fetchShader(source)
    const shader = gl.createShader(type)
    gl.shaderSource(shader, rawShader)
    gl.compileShader(shader)
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert('Error when compiling shaders: ' + gl.getShaderInfoLog(shader))
        gl.deleteShader(shader)
        return null
    }
    return shader
}


export async function fetchShader(source: string) {
    const shader = await fetch('/shaders/' + source).then(res => res.text())
    return shader
}

export async function initShaderFiles(gl: WebGL2RenderingContext, vert: string, frag: string) {
    const vs = await loadShader(gl, gl.VERTEX_SHADER, vert)
    const fs = await loadShader(gl, gl.FRAGMENT_SHADER, frag)
    const shaderProgram = gl.createProgram()
    gl.attachShader(shaderProgram, vs)
    gl.attachShader(shaderProgram, fs)
    gl.linkProgram(shaderProgram)
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert('Error on initializing shader program: ' + gl.getProgramInfoLog(shaderProgram))
        return null
    }
    return shaderProgram
}

We defined three functions, one to load a shader from a source, one is a helper function to fetch the external file, and one to produce a WebGLProgram object. You can change the first parameter of fetch function in fetchShader if you want to place your shader files inside another directory name.

Next, copy our shaders from before into each files. Vertex shader goes to "draw-vert.glsl" and fragment shader goes to "draw-frag.glsl".

For the multiplyMatrix, put the function inside utils/matrix.ts, but add "export" keyword in front of the "function" keyword. It should be look like this

export function multiplyMatrix(matA: number[], matB: number[]): number[] {
  // implementation here
}

Something new here is we're adding "number[]" after each parameters and after the function signature. This is to tell TypeScript the types of each parameter and the return type of the function.

And after it's all done, time to write our scripts before into main.ts. Pretty much it's just copy and paste/

On top of main.ts, we inserted import statement and adding type definition towards the canvas variable.

import { multiplyMatrix } from './utils/matrix'

var canvas = document.getElementById('webgl-app') as HTMLCanvasElement
// the rest of script...

We're going to wrap everything after declaration of gl variable inside function called "main". And then, we add "async" keyword in front of the "function" keyword. It should looks like this.

import { multiplyMatrix } from './utils/matrix'


var canvas = document.getElementById('webgl-app') as HTMLCanvasElement
canvas.width = 800
canvas.height = 600
var gl = canvas.getContext('webgl2')
async function main() {
    if (!gl) {
        alert('Your browser does not support WebGL')
        return
    }
    // the rest of the script
}

main()

Why we added "async" keyword is to be able to use async/await feature of Javascript, where we can call promises without using .then or .catch handlers. This is because we've defined our shaders outside of our HTML files or Javascript files, and to use that means we need to fetch the data first.

Change the assignments towards vert and frag variables to these.

// before
var vert = document.getElementById('vert').innerText
var frag = document.getElementById('frag').innerText

// after
var vert = await fetchShader('draw-vert.glsl')
var frag = await fetchShader('draw-frag.glsl')

If things goes nicely, we should be having our triangle image from before rendered nicely.

Now, we're ready to refactor more stuffs, but lets start with our objects itself.

GLObject Class

This can be confusing because in Javascript, "everything is an object"™, so when I say "object" then it refers to the object in Javascript. When I refer to the object drawn inside WebGL, it will be in "GLObject". Just to make it clear, hehe.

Handling a single drawing is pretty simple, we've done it with our script. But handling more drawings will need more attention, and nothing beats Object Oriented Programming in this case.

So, we're defining a class called "GLObject" inside a file called "GLObject.ts" inside src directory. Start filling it with the basic structure of a class.

// GLObject.ts
class GLObject {
  // stuffs goes here
}

export default GLObject

The last line is just to make sure that we're exporting this class, so it's accessible from another file.

So far, in order to draw something, we need to define two major components : vertex data and shader program. But we've added more information for the transforms, so we're adding more attributes for position, rotation, and scale. Add these attributes inside GLObject class with a constructor.

class GLObject {
    public id: number;
    public va: number[];
    public shader: WebGLProgram;
    public pos: [number, number];
    public rot: number;
    public scale: [number, number];
    public gl: WebGL2RenderingContext;


    constructor(id: number, shader: WebGLProgram, gl: WebGL2RenderingContext) {
        this.id = id;
        this.shader = shader;
        this.gl = gl;
    }
}

Notice that we're only adding id and shader into our GLObject. The rest of the attributes will be handled using setters, so add them now.

// ...    
    setVertexArray(va: number[]) {
        this.va = va;
    }


    setPosition(x: number, y: number) {
        this.pos = [x,y];
    }


    setRotation(rot: number) {
        this.rot = rot;
    }


    setScale(x: number, y:number) {
        this.scale = [x,y];
    }
// ...

We're going to use this information to calculate and store our projection matrix. Add new attribute "projectionMat" and a method "calcProjectionMatrix". Fill it with these, and call this function in the end of setPosition, setRotation, and setScale.

// beginning of GLObject.ts
import { multiplyMatrix } from './utils/matrix.ts'

// attributes
    public projectionMat: number[];


// methods
    setPosition(x: number, y: number) {
        this.pos = [x,y];
        this.projectionMat = this.calcProjectionMatrix()
    }


    setRotation(rot: number) {
        this.rot = rot;
        this.projectionMat = this.calcProjectionMatrix()
    }


    setScale(x: number, y:number) {
        this.scale = [x,y];
        this.projectionMat = this.calcProjectionMatrix()
    }


    calcProjectionMatrix() {
        if (this.pos === undefined || this.rot === undefined || this.scale === undefined) return null
        const [u,v] = this.pos
        const translateMat = [
            1, 0, 0,
            0, 1, 0,
            u, v, 1
        ]
        const degrees = this.rot;
        const rad = degrees * Math.PI / 180;
        const sin = Math.sin(rad)
        const cos = Math.cos(rad)
        const rotationMat = [
            cos, -sin, 0,
            sin, cos, 0,
            0, 0, 1
        ]
        const [k1, k2] = this.scale
        const scaleMat = [
            k1, 0, 0,
            0, k2, 0,
            0, 0, 1
        ]
        const projectionMat = multiplyMatrix(multiplyMatrix(rotationMat, scaleMat), translateMat)
        return projectionMat
    }

By our default routine, to draw something, we need to bind the vertex array into a buffer, and then begin the drawing process. We're going to define two separate functions : bind() and draw(). This is because the information inside the vertex array will stay constant (for now), so we're just making sure to bind the vertex array once.

// ...
    bind() {
        const gl = this.gl
        const vbo = gl.createBuffer()
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo)
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.va), gl.STATIC_DRAW)
    }


    draw() {
        const gl = this.gl
        gl.useProgram(this.shader)
        var vertexPos = gl.getAttribLocation(this.shader, 'a_pos')
        var uniformCol = gl.getUniformLocation(this.shader, 'u_fragColor')
        var uniformPos = gl.getUniformLocation(this.shader, 'u_proj_mat')
        gl.vertexAttribPointer(vertexPos, 2, gl.FLOAT, false, 0, 0)
        gl.uniformMatrix3fv(uniformPos, false, this.projectionMat)
        gl.uniform4fv(uniformCol, [1.0, 0.0, 0.0, 1.0])
        gl.enableVertexAttribArray(vertexPos)
        gl.drawArrays(gl.TRIANGLES, 0, this.va.length/2)
    }
// ...

Now, we can just delete the similar codes in main.ts, and replace it with GLObject creation and do several setters and invocations.

// beginning of main.ts
import GLObject from './GLObject.ts'

// after gl.linkProgram line
    const glObject = new GLObject(0, shaderProgram, gl)
    glObject.setVertexArray(triangleData)
    glObject.setPosition(0,0)
    glObject.setRotation(0)
    glObject.setScale(1,1)
    glObject.bind()
    glObject.draw()
// ...

We will now have our triangle rendered at position (0,0), rotation of 0 degrees, and original size (scale at [1,1]).

Adding more drawings is as simple as adding more GLObject(s), so lets draw two but with one rotated 180 degrees.

// main.ts, somewhere after gl.linkProgram
    const glObject = new GLObject(0, shaderProgram, gl)
    glObject.setVertexArray(triangleData)
    glObject.setPosition(0,0)
    glObject.setRotation(0)
    glObject.setScale(1,1)
    glObject.bind()
    glObject.draw()


    const glObject2 = new GLObject(0, shaderProgram, gl)
    glObject2.setVertexArray(triangleData)
    glObject2.setPosition(0,0)
    glObject2.setRotation(180)
    glObject2.setScale(1,1)
    glObject2.bind()
    glObject2.draw()
// ...

And tadaa!!

Now, handling these two GLObject is pretty easy, but it's going to be tedious with more and more drawings, so we need to make a simple renderer. Renderer here is just a simple GLObject manager which tracks every single drawings in the scene, and render it.

Creating Simple Renderer

Create a file renderer.ts. Add class definition Renderer and default export.

import GLObject from './GLObject'


class Renderer {
    public objectList: Array<GLObject>;
    public count: number;


    constructor() {
        this.objectList = new Array<GLObject>();
        this.count = 0;
    }


    addObject(obj: GLObject) {
        this.objectList.push(obj)
        this.count++
    }


    removeObject(id: number) {
        const idx = this.objectList.findIndex(obj => obj.id === id)
        this.objectList.splice(idx, 1)
        this.count--
    }


    render() {
        for (const obj of this.objectList) {
            obj.draw()
        }
    }
}


export default Renderer

This separates the responsibility of drawing the GLObject and assigning the data of GLObject. When we want to define the GLObject, we create an instance of GLObject, set several required data, and push this object into our renderer. When we want to render the object, we simply call the render function of the renderer.

// top of main.ts
import Renderer from './renderer'

// somewhere below
    const glObject = new GLObject(0, shaderProgram, gl)
    glObject.setVertexArray(triangleData)
    glObject.setPosition(0,0)
    glObject.setRotation(0)
    glObject.setScale(1,1)
    glObject.bind()


    const glObject2 = new GLObject(0, shaderProgram, gl)
    glObject2.setVertexArray(triangleData)
    glObject2.setPosition(0,0)
    glObject2.setRotation(180)
    glObject2.setScale(1,1)
    glObject2.bind()


    const renderer = new Renderer()
    renderer.addObject(glObject)
    renderer.addObject(glObject2)
    renderer.render()
// ...

And then, we'll get the same result.

Why this is important, because in the next post we're going to introduce user interactions, and picking our drawings.

Until then, see ya!

AwooCAD - TypeScript, WebGL, and Renderer