Unlocking WebGL: From JavaScript to 3D Graphics Mastery

NO.1 Journey to Frontend

After moving from client development to frontend, the author discovered the vast possibilities of JavaScript, including WebGL and WebAssembly, and decided to explore graphics programming using the knowledge of ARM assembly and OpenGLES.

NO.2 What is WebGL?

WebGL (Web Graphics Library) is a 3D drawing protocol that combines JavaScript with OpenGL ES 2.0, providing hardware‑accelerated 3D rendering in HTML5 Canvas. It enables browsers to display complex 3D scenes, visualizations, and even 3D web games without plugins.

WebGL (full name Web Graphics Library) is a 3D drawing protocol that allows JavaScript and OpenGL ES 2.0 to be combined, providing hardware‑accelerated 3D rendering for HTML5 Canvas.

WebGL 1.0 is based on OpenGL ES 2.0; WebGL 2.0 builds on OpenGL ES 3.0 and adds more extensions.

NO.3 Graphics Foundations

Graphics programming sits between the operating system and hardware. The GPU contains many parallel processing units, making it far more efficient than the CPU for rendering. Pixels are represented by RGBA values (four bytes), forming a 2‑D integer matrix that the GPU renders.

Two major graphics APIs are OpenGL (cross‑platform) and DirectX (Windows). OpenGL is the basis for WebGL.

NO.4 What is OpenGL ES?

OpenGL ES is a subset of OpenGL designed for embedded systems. Version 2.0 introduced programmable pipelines with vertex and fragment shaders, while 1.0 only offers fixed‑function APIs.

OpenGL ES 1.0 Rendering Pipeline

The pipeline processes primitives (points, lines, triangles), rasterizes them into fragments, and outputs pixels.

Primitive: basic geometric unit (point, line, triangle).

Rasterization: converts vertices to fragments.

Fragment: the 3‑D counterpart of a pixel.

OpenGL ES 2.0 Rendering Pipeline

Adds programmable vertex and fragment shaders.

Vertex Shader Example

uniform mat4 uMVPMatrix; // total transformation matrix
attribute vec3 aPosition; // vertex position
attribute vec2 aTexCoor; // texture coordinate
varying vec2 vTextureCoord; // passed to fragment shader
void main() {
    gl_Position = uMVPMatrix * vec4(aPosition, 1);
    vTextureCoord = aTexCoor;
}

Fragment Shader Example

precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D sTexture;
void main() {
    gl_FragColor = texture2D(sTexture, vTextureCoord);
}

Hello World in C

#include <stdio.h>
void main() {
    printf("Hello World!
");
}

NO.5 Summary

The article introduces WebGL by linking it to OpenGL ES, explains the graphics pipeline, and provides basic shader code. It encourages a step‑by‑step learning approach before writing complex applications.