This post is a continuation of previous post about WebGL.

Objects are objects.

They have characteristics.

They could have members, parents, or even children.

But does that make us (human) an object?

We are nothing but a bunch of atoms, a lot of it, gathering at one entity to do some stuffs.

And one entity tries to create a post as a response to college assignment about WebGL, which is to create an articulated models.

Prelude

This post is going to depend heavily to my previous post, GLObjects and Renderer. We've turned our drawings into something that can be abstracted better, using object-oriented approach. In here, we can create a better structure, as each drawing is treated as an object that has it's own properties, and can has relation with other object. What a perks of using OOP, right?

So, what is articulated models. Roughly speaking, it's a model that consists of several objects, connected into a system using a hierarchical model. The simplest form of articulated models is us, human. We have bones and joints connecting our skeleton into this entity that can move and has lots of degree of freedom. The main characteristics is, something that attached to something else will follow the orientation caused by the target object. Moving your upper arm will cause translation for your lower arm, and so does your fingers. We have this hierarchical model that whatever happens on the parent also applied to it's child, in here, the bones and joints.

It's basically the foundation of dolls and character rigs inside computer graphics. 2D puppet will have hierarchical model where there will be a root object that other object attached into it. Same with 3D rigs or characters. Simply put, each object will have two information : world transform and local transform.

So, considering it deals with transformation, how do we make it in WebGL?

GLObject Structure

GLObject class we made before just need a little adjustment in order to give it ability of an articulated model. We start by declaring a member attribute which is a list to other GLObject(s), and an attribute to hold it's parent transformation matrix. Additionally, I added extra attribute to hold the anchor point, which is a position in 3D space where the object will apply it's local transformation. Also I put one another extra member just to hold data.

This is my class now :

class GLObject {
    public id: number;
    public va: number[];
    public shader: WebGLProgram;
    public pos: [number, number, number];
    public rot3: [number, number, number];
    public scale: [number, number, number];
    public gl: WebGL2RenderingContext;
    public projectionMat: number[];
    public childs: GLObject[];
    public parentTransfomationMatrix: number[];
    public anchorPoint: number[];
    public parentAnchorPoint: number[];
...

If you noticed, the transformation attributes now turned into 3D, which holds more data that we need to deal with. So, let's convert our 2D rendering into 3D. We're going for orthographic projection for simplicity.

Converting into 3D

There are 4 main part you need to deal when converting from 2D to 3D :

Your object data.
Transformation Matrix
WebGL Functions invocation
Shaders

First, you need to convert your object data into something 3D. Here I'll just give a base cube model where the size can be changed from a variable.

const baseVal = 100
    const triangleData = [
        0,0,0,
        baseVal,0,0,
        0,baseVal,0,
        baseVal,0,0,
        0,baseVal,0,
        baseVal,baseVal,0,


        0,0,baseVal,
        baseVal,0,baseVal,
        0,baseVal,baseVal,
        baseVal,0,baseVal,
        0,baseVal,baseVal,
        baseVal,baseVal,baseVal,


        0,0,0,
        0,baseVal,0,
        0,0,baseVal,
        0,baseVal,0,
        0,0,baseVal,
        0,baseVal,baseVal,


        baseVal,0,0,
        baseVal,baseVal,0,
        baseVal,0,baseVal,
        baseVal,baseVal,0,
        baseVal,0,baseVal,
        baseVal,baseVal,baseVal,
        
        0,0,0,
        baseVal,0,0,
        0,0,baseVal,
        baseVal,0,0,
        0,0,baseVal,
        baseVal,0,baseVal,


        0,baseVal,0,
        baseVal,baseVal,0,
        0,baseVal,baseVal,
        baseVal,baseVal,0,
        0,baseVal,baseVal,
        baseVal,baseVal,baseVal
    ]

This will assume we're still using gl.drawArrays in order to draw our stuffs.

Next, convert the transformation matrix into 3D. Because I'm using anchor point, it needs to be treated properly. How I make is I have transformation matrix for every form of transform : translate, rotate, scale. Just for the translation, I added the value of parent anchor point to make sure that the transform applied in respect to position to it's parent.

const [u,v,w] = this.pos
const [a,b,c] = this.parentAnchorPoint
        const translateMat3 = [
            1,  0,  0,  0,
            0,  1,  0,  0,
            0,  0,  1,  0,
            u+a, v+b, w+c, 1,
        ]

The rest is pretty straightforward and you can just search it on internet (or webglfundamentals).

Now, there is big difference when talking about articulated models, because we now have 2 transformation matrices : local and world. To properly apply the transformation to the current object in context, I use this order of matrix multiplication.

const localProjectionMat = multiplyMatrix(
            translateMat3,
            multiplyMatrix(rot3Mat, scaleMat),
        )
const projectionMat = multiplyMatrix(
     this.parentTransfomationMatrix,
     localProjectionMat
)

The order can differ (or switched) depends on your implementation of matrix multiplication function.

Next is to convert WebGL function invocation. Simply, change any parameter that uses 2D-related element count into 3D. This includes :

Vertex Attrib Pointer
Resolution Uniform (because we're in 3D now)
Projection matrix uniform (it's mat4 now because it's 3D)
Draw Arrays (just change the division into 3)

This is what I did to my WebGL functions invocations.

        gl.vertexAttribPointer(vertexPos, 3, gl.FLOAT, false, 0, 0)
        gl.uniformMatrix4fv(uniformPos, false, this.projectionMat)
        gl.uniform4fv(uniformCol, [1.0, 0.0, 0.0, 1.0])
        gl.uniform3fv(uniformRes, [gl.canvas.width, gl.canvas.height, this.sceneDepth])
        gl.drawArrays(gl.TRIANGLES, 0, this.va.length/3)

Notice that I have "sceneDepth" member attribute, which is basically a data used for defining the camera inside the shader.

Talking about shader, we need to change it also! But it's only on the vertex shader. Turn it into something like this, and you'll be good.

attribute vec4 a_pos;
uniform mat4 u_proj_mat;
uniform vec3 u_resolution;


void main() {
    vec3 pos = (u_proj_mat * a_pos).xyz;
    vec3 a = pos / u_resolution;
    vec3 b = a * 2.0;
    vec3 c = b - 1.0;
    gl_Position = vec4(c, 1);
}

What it does is it will apply the transformation into each vertex, and adjust the coordinate type. WebGL and OpenGL both only understand clip space coordinates, so the variable "a", "b", and "c" are side products of converting from pixel space into clip space. "a" will adjust the vertex position into clip space, while "b" and "c" will reposition the values so that it matches the clip space range ([-1, 1]).

From here, we're pretty much done with converting 2D into 3D. Next is to handle the logic of articulated models.

Articulated Models

The logic is to pass the transformation matrix for the current object into it's children as the parents transformation matrix. But because we have anchor point data, we need to pass this thing down also.

I did lots of attempt and combination, and for my case I found by setting the children's anchor point as it's parents anchor point, I found the result I wanted.

const proj = this.calcProjectionMatrix()
        for (const obj of this.childs) {
            obj.parentTransfomationMatrix = [...proj]
            obj.parentAnchorPoint = [
                obj.anchorPoint[0],
                obj.anchorPoint[1],
                obj.anchorPoint[2],
            ]
            obj.projectionMat = obj.calcProjectionMatrix()
            obj.draw();
        }

So what it does is to retrieve the projection matrix, and inherit it to it's children. Set the parentAnchorPoint and the children's projection matrix, and then draw the children.

Beforehand, I added an object method which is to add another GLObject as it's children. It's straightforward.

addChild(obj: GLObject) {
        if (!this.childs.find(x => x.id === obj.id)) {
            this.childs.push(obj);
        }
    }

And the rest is just setting up your scene.

Below is my setting of articulated models of 4 cubes, connected at the corner.

const glObject = new GLObject(0, shaderProgram, gl)
    glObject.setVertexArray(triangleData)
    glObject.setAnchorPoint([0,0,0], 3)
    glObject.setPosition(200,200,0)
    glObject.setRotation(0,45,0)
    glObject.setScale(1,1,1)
    glObject.bind()


    const glObject2 = new GLObject(1, shaderProgram, gl)
    glObject2.setVertexArray(triangleData)
    glObject2.setAnchorPoint([100,100,100], 3)
    glObject2.setPosition(0,0,0)
    glObject2.setRotation(0,0,0)
    glObject2.setScale(1,1,1)
    glObject2.bind()


    const glObject3 = new GLObject(2, shaderProgram, gl)
    glObject3.setVertexArray(triangleData)
    glObject3.setAnchorPoint([100,100,100], 3)
    glObject3.setPosition(0,0,0)
    glObject3.setRotation(0,0,0)
    glObject3.setScale(1,1,1)
    glObject3.bind()


    const glObject4 = new GLObject(3, shaderProgram, gl)
    glObject4.setVertexArray(triangleData)
    glObject4.setAnchorPoint([100,100,100], 3)
    glObject4.setPosition(0,0,0)
    glObject4.setRotation(0,0,0)
    glObject4.setScale(1,1,1)
    glObject4.bind()


    // parent;
    glObject3.addChild(glObject4)
    glObject2.addChild(glObject3)
    glObject.addChild(glObject2)

And here is the result. I added several sliders to control each objects' rotation.

With this, you can create your own armature, and possibly to create your own minecraft/roblox ripoff as you please.

Afterwords

This post is possibly the shortest of all. There are lots of things you can do to enhance this, like a toggle to apply only certain transformations into it's children. You can start adding textures or even a basic shading or lighting to make a proper scene.

And I think that's it. See ya

AwooCAD - Articulated Models