College strikes again with all the possibilities of giving us complicated assignments. Good thing most of them is fun, especially for this one. The task is pretty simple : make a 2D CAD web application by using only HTML, CSS, JavaScript and WebGL.

Yes, WebGL. It's browser's equivalent for OpenGL stuffs, more specifically roughly a version of OpenGL ES embedded into your web browser.

OpenGL is a rasterization library, which deals in turning your 2D/3D data into something that you can actually see in your screen. Turning from vertex coordinates into screen pixel, that's what OpenGL mostly known for, although there are more into it now. DirectX and Vulkan are also widely known rasterization library that have evolved to do more than that.

This article is aimed towards explaining the basic workflow of modern OpenGL, which also applies to WebGL with slight syntax changes. We're going to talk about the general pattern used in every OpenGL applications, drawing primitives, several math stuff, and adding interactivity. If needed, the post will be split for each topics, so I hope I can nail this well.

General Pattern

Modern OpenGL and WebGL works by taking the source data and process it into something that can be shown on your screen. The source data are mostly vertices with coordinates, color information, and possibly other additional information. The most simple one, bare minimum, information needed is vertices information and color. Because yeah, it boils down into displaying what color each pixels on your screen should have.

The actual process OpenGL (and WebGL) takes into drawing the pixels on your screen is a bit more complicated than this. It involves vertex processor, clipping and projection, rasterizer, and "fragment" processor. Each step has it's own component and carries broad topic to discuss. I'm not going to explain them one by one in this post. We're going to focus on the practical approach on using WebGL, although knowing several basics or how-it-works would be very helpful.

Creating your WebGL application

WebGL works on <canvas> element, an HTML element where you can draw stuffs there. We start by adding a canvas element then instantiate it as a WebGL application through JavaScript

On HTML

<canvas id="webgl-app"></canvas>

On JavaScript

const canvas = document.getElementById('webgl-app')
canvas.width = 800
canvas.height = 600
const 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)

Here, we're setting the canvas size dynamically through JavaScript, then create a 'gl' object. All of our API calls to WebGL will be through this object, so make sure to name it properly. 'gl.clearColor' will set the background to pure white.

This will instantiate a WebGL context on your canvas, and we can go into the actual WebGL stuffs from here.

Defining Your Data

We're going with the most simple thing to make, a triangle. Think it as a 'Hello, World!' but instead it's 'Hello, Triangle!'. A triangle consists of 3 points or vertices. To define this data, we'll just going to write the information as an array of numbers, which follows the pattern of [x1, y1, x2, y2, x3, y3, ..., xn, yn].

const triangleData = [
  0.0, 0.0,
  1.0, 0.0,
  0.0, 1.0
]

Creating 3D vertex just the matter of adding one more number on each row, but these array of numbers are just array of numbers. Later on, we'll need to specifically tell WebGL on how to use the data.

Basic Workflow

Both OpenGL and WebGL works through this simple workflow

Create buffer
Bind buffer to specific WebGL component
Assign the buffer data
Tell WebGL on how to treat our data
Several shader setups (more data defining)
Draw

The actual workflow can be more sophisticated than this, but all it does is to define data, pass it to WebGL, tell it how to treat the data, then draw.

Shaders

I've mentioned shaders above and it's a very broad topic to explain, but here I'll just give a pretty simplified explanation.

Shaders are programs that's going to process your vertex informations and turn it into data that defines what to draw on the screen. The bare minimum is to have two type of shaders : Vertex shader, Fragment shader.

Vertex shader processes the vertex data, in which you can do something like manipulating the position of the vertex. Fragment shader roughly produces the color information using the vertex information from vertex shader. It's a one way workflow in which data sent to vertex shader, and the output is used by fragment shader.

Both shaders using OpenGL Shading Language or GLSL, a C-like language to define their programs. For now, lets just make a simple shader for each shaders required

simple_vert.glsl

attribute vec2 a_pos;

void main() {
  gl_Position = vec4(a_pos, 0, 1);
}

simple_frag.glsl

precision mediump float;

uniform vec4 u_fragColor;
void main() {
  gl_FragColor = u_fragColor;
}

Now, there are suddenly lots of stuffs here. Let's talk on it, one by one.

'attribute' defines a variable which value are used from 'outside' of the vertex shader. Roughly speaking, you'd feed your vertices data into this variable. 'vec2' is a data type of 2-dimentional vector (an array of 2 elements). There can be up to 'vec4' for 4-dimentional vector. 'gl_Position' is a global variable in vertex shader that will set the actual position of the vertex inside the program. Roughly speaking, it's the output of the vertex shader.

Now on the fragment shader

'precision mediump float' simply defines the precision for the floating number. You can go from low to high, and this affects your performance of course. 'uniform' is like attribute but it's constant for every pixel given, so any number given to uniform value will be applied the same to every pixel given. 'vec4' used to define the color, because color used will be in RGBA, thus requiring array of 4 values. 'gl_fragColor' , like 'gl_Position', defines the output color.

To use these shaders, we'll create a shader program that uses the textual data of each shaders. you can just define the above shaders into a JavaScript string.

const vert = `attribute vec2 a_pos;

void main() {
  gl_Position = vec4(a_pos, 0, 1);
}`

const frag = `precision mediump float;

uniform vec4 u_fragColor;
void main() {
  gl_FragColor = u_fragColor;
}`

const vertShader = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(vertShader, vert)
gl.compileShader(vertShader)

const fragShader = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(fragShader, frag)
gl.compileShader(fragShader)

const shaderProram = gl.createProgram()
gl.attachShader(shaderProgram, vertShader)
gl.attachShader(shaderProgram, fragShader)
gl.linkProgram(shaderProgram)

This will create a bare minimum shader for us to work with. Because it accepts string data, then these shaders could be loaded from external source, in which I fetched from files so I can work on the shaders separately.

You can do a lot of stuffs in these shaders, so I encourage you to explore more.

Binding Data

Now, using these data is the matter of binding them into WebGL and tell it what to do. We already have our vertex data before, so lets start with that.

const vertBuf = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleData), gl.STATIC_DRAW)

This will create a buffer object, using our triangle data before and bind it into WebGL global context. To use this

gl.useProgram(shaderProgram) // always use the program on the beginning
const vertexPos = gl.getAttribLocation(shaderProgram, 'a_pos')
const uniformCol = gl.getUniformLocation(shaderProgram, 'u_fragColor')
gl.vertexAttribPointer(vertexPos, 2, gl.FLOAT, false, 0, 0)
gl.uniform4fv(uniformCol, [1.0, 0.0, 0.0, 1.0])
gl.enableVertexAttribArray(vertexPos)
gl.drawArrays(gl.TRIANGLES, 0, triangleData.length/2)

If nothing goes wrong, you'll have a triangle drawn in full red. Let's go through each lines.

'gl.useProgram' simply tells WebGL to use a particular shader program to draw. If you have different shaders inside a scene, then call this in order to change the shader.

'gl.getAttribLocation' and 'gl.getUniformLocation' will retrieve the 'location' of the variables we've defined inside our shaders before. It searches by string, so make sure it's exact match.

'gl.vertexAttribPointer' tells WebGL how to treat the currently bind array buffer data, and assign it to which part of the shader. In here, we only have one vertex attribute in our shader, each element consist of 2 values, the values are in floating number, values are not normalized, and set the stride and offset to both 0.

'gl.uniform4fv' sets the uniform variable pointed to have a certain value. It's a simply a setter, but pay attention towards the last 3 characters of the function name. These 3 values tend to change according to the usage. 'gl.uniform2iv' will denote that the uniform will be assigned an array of 2 integers. You can read more on the docs.

'gl.enableVertexAttribArray' simply tells WebGL to use the assigned vertex attrib array.

'gl.drawArrays' will do the actual drawing based from the current state. 'gl.TRIANGLES' will draw a triangle, 0 means it starts from vertex at index 0, and goes to last vertex (which basically the total amount of elements divided by two).

By this point, you should have a working WebGL application

Next time, we will talk more on creating more objects and accepting inputs so we can start drawing our own geometries.

Until next time, see ya!

AwooCAD - An Exploration in WebGL (and OpenGL in general)