Great. Now we can draw something in WebGL.

Now what?

Ah yes, how to move this thing tho..., and how to rotate or to scale it.

Well, those got something to do with matrices and also few maths.

Actually a lot of math (but not so complicated), hehe.

Transformation : The Math

Let's go back to our days back in high school, where math is still the thing that scared us all in most cases. To represent something in 2D space, we mostly use the tuple (x, y), where x denotes the x coordinate, and you know the rest. Representing two or more points require you to write several tuples, making it doesn't look very convenient or tidy. That's why we introduced matrix.

Matrix has helped us in many fields, including solving linear equations and most of linear algebra problems. But one strong power it has is to be able to assist in geometries. Using matrix, lets say we have a point (x, y), and we want to move it somewhere with the amount of translation (u, v). We can solve this by using matrix by composing a 4x4 matrix and writing down our point in homogenous coordinate representation, then just multiply it. The same thing can also apply for rotation and scale.

In the end, we just need to define the matrix that will do the transform. This matrix will take input coordinates and "projects" it into output coordinates using the said matrix. And in computer graphics, we call this as projection matrix.

Projection matrix can consist of values that only holds for translation, or only rotation, or only scale, or any combination of those three. Combining each transform operation is as simple as multiplying those transform matrices, and then apply this to our input. That is to say, any transformation that involves the three of these operations can be achieved by defining the matrix for each transform operation, then multiply it altogether. We will have a matrix which is the actual projection matrix we want, and the rest is just to apply it with to the inputs.

Transform Matrix Forms

To work with transformations in WebGL, we need to define our matrix first. In most data structures, matrix are defined as an array of array, but in the simplest form, it's just a single array of numbers. So, we will write down our matrix using arrays.

const matrix = [
  a, b
  c, d
]

That is a simple way to write our matrix.

For simplicity, we will only create a 3x3 matrix because the other one value can be defined when we work with our shaders, and also we're working in 2D.

To make translation matrix, with translation of (u, v), we write it as

const translateMat = [
  1, 0, 0,
  0, 1, 0,
  u, v, 1
]

To make rotation matrix, we need to work a bit further.

Sine and cosine function in JavaScript accepts input in radians, which means we need to convert our input value to radians first, if it were in radians. Then we calculate the sine and cosine value of the angle, and we plug it into our rotation matrix.

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
]

And that's it. Scale matrix is as easy as translation matrix. For scaling with scaling factor of (k1, k2), we write it as.

const scaleMat = [
  k1, 0, 0,
  0, k2, 0,
  0, 0, 1
]

Now, to create our projection matrix, just multiply those three. But here is the catch : order matters. To scale then rotate then translate is different than to translate then rotate then scale. This is solely boils down to the characteristics of matrix itself, where A.B is not equal to B.A. My preferred order to multiply is from scale -> rotate -> translate, which to avoid problem like "scaled/rotated from origin". I'll trust the multiplication method for readers to exercise.

Using Projection Matrix

Now we have our projection matrix, it's time to link it with our program.

Using the projection matrix is pretty straightforward as to create a buffer then bind the buffer. To actually use it means we're going to use shaders, particularly on our vertex shaders.

Vertex Shader and Uniforms

Vertex shader is a C-like program written in GLSL that acts as our vertex processor. It takes the information assigned to the shader, may it be attribute array, or uniforms, or varying, and then process it using the algorithm you've defined inside the shader.

For this case, because we're going to do some transformation towards to position of each vertex by using our projection matrix, we need to specify our matrix as an input inside our shader. Because the info will be applied the same for all the vertices, then we're going to mark is as a 'uniform'. Uniform is a data type inside GLSL that acts like a constant, they don't change for each vertex.

attribute vec2 a_position;

uniform mat3 u_proj_mat;
void main() {
    vec2 position = (u_proj_mat * vec3(a_position, 1)).xy;
    gl_Position = vec4(position, 0, 1);
}

There is nothing much to this, but essentially it's going to multiply the value of the vertex with the matrix, transforming it, then we're only going to take the XY value, and use it as the position.

Specifying Our Uniform

Now, it's time to use this. Let's assume you have a fancy matrix multiplication function, so we're going to use that to create our projection matrix.

const projectionMat = multiplyMatrix(multiplyMatrix(rotationMat, scaleMat), translateMat);

The result of this should be "feeded" into our WebGL program. For any variable we've defined inside our shader, it always follow the routine of :

Get the variable location
Somehow feed the data
???
Yay, it renders! haha.... :'D

For this case, we're having a uniform, and WebGL already have a function for that!

// put this before gl.drawArrays call
const uniformPos = gl.getUniformLocation(shaderProgram, 'u_proj_mat')
gl.uniformMatrix3fv(uniformPos, false, projectionMat);
// gl.drawArrays call below

And by setting our transform into :

Translate : [-0.12, 0]
Rotation : 270 degrees
Scale : [0.25, 0.25]

We now have this result. I've colored the background in bisque color so the actual WebGL space in white.

In the next post, we're going to render multiple objects and turn this into classes for better handling and abstraction (we're going OOP, baby!)

Appendix : The entire code so far.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AwooCAD Blog Post 2</title>
</head>
<body style="background-color: bisque;">
    <script>
        function multiplyMatrix(matA, matB){
            const out = []
            for (let i = 0; i < 3; ++i) {
                for (let j = 0; j < 3; ++j) {
                    let temp = 0
                    for (let k = 0; k < 3; ++k) {
                        temp += matA[i*3 + k] * matB[k*3 + j]
                    }
                    out.push(temp)
                }
            }
            return out
        }
        function addMatrix(matA, matB){
            const out = []
            for (let i = 0; i < matA.length; i++) {
                out.push(matA[i] + matB[i])
            }
            return out
        }
    </script>
    <script type="text" id="vert">
        attribute vec2 a_pos;
        uniform mat3 u_proj_mat;
        
        void main() {
            vec2 position = (u_proj_mat * vec3(a_pos, 1)).xy;
            gl_Position = vec4(position, 0, 1);
        }
    </script>
    <script type="text" id="frag">
        precision mediump float;
        uniform vec4 u_fragColor;
        void main() {
            gl_FragColor = u_fragColor;
        }
    </script>
    <canvas id="webgl-app"></canvas>
    <script>
        var canvas = document.getElementById('webgl-app')
        canvas.width = 800
        canvas.height = 600
        var gl = canvas.getContext('webgl2')
        if (!gl) {
        alert('Your browser does not support WebGL')
        }
        gl.clearColor(1,1,1,1)
        gl.clear(gl.COLOR_BUFFER_BIT)
        console.log('initialized')
        var triangleData = [
        0.1, 0.1,
        1.0, 0.0,
        0.0, 1.0
        ]


        var vert = document.getElementById('vert').innerText
        var frag = document.getElementById('frag').innerText
        console.log(vert);
        const [u,v] = [-0.12,0];
        const translateMat = [
        1, 0, 0,
        0, 1, 0,
        u, v, 1
        ]
        let degrees = 270;
        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] = [0.25,0.25]
        const scaleMat = [
        k1, 0, 0,
        0, k2, 0,
        0, 0, 1
        ]
        const projectionMat = multiplyMatrix(multiplyMatrix(rotationMat, scaleMat), translateMat)
        var vertShader = gl.createShader(gl.VERTEX_SHADER)
        gl.shaderSource(vertShader, vert)
        gl.compileShader(vertShader)
        if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) {
            alert('Error when compiling shaders: ' + gl.getShaderInfoLog(vertShader))
        }
        var fragShader = gl.createShader(gl.FRAGMENT_SHADER)
        gl.shaderSource(fragShader, frag)
        gl.compileShader(fragShader)
        if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) {
            alert('Error when compiling shaders: ' + gl.getShaderInfoLog(fragShader))
        }
        var shaderProgram = gl.createProgram()
        gl.attachShader(shaderProgram, vertShader)
        gl.attachShader(shaderProgram, fragShader)
        gl.linkProgram(shaderProgram)
        var vertBuf = gl.createBuffer()
        gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf)
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleData), gl.STATIC_DRAW)


        gl.useProgram(shaderProgram) // always use the program on the beginning
        var vertexPos = gl.getAttribLocation(shaderProgram, 'a_pos')
        var uniformCol = gl.getUniformLocation(shaderProgram, 'u_fragColor')
        var uniformPos = gl.getUniformLocation(shaderProgram, 'u_proj_mat')
        gl.vertexAttribPointer(vertexPos, 2, gl.FLOAT, false, 0, 0)
        gl.uniformMatrix3fv(uniformPos, false, projectionMat)
        gl.uniform4fv(uniformCol, [1.0, 0.0, 0.0, 1.0])
        gl.enableVertexAttribArray(vertexPos)
        gl.drawArrays(gl.TRIANGLES, 0, triangleData.length/2)
    </script>
</body>
</html>

Until next time, see ya!

AwooCAD - Transformations in WebGL