Fundamentals of 3D Graphics Rendering in Front-End Development

Graphics rendering is an indispensable part of the front‑end knowledge system, essential for data visualization, 3D model display, and H5 game development. This article provides a front‑end perspective introduction to basic rendering concepts and demonstrates how to render a simple 3D model in the browser.

The implementation includes data models and mathematical algorithms that are explained only when needed, focusing on vertex manipulation, viewport transformation, and rasterization of triangles.

2D Color Block Rendering explains that every 3D model consists of triangles, each defined by three vertices. Rendering focuses on the changes of these vertices. An example shows how to render a simple triangle using Canvas.

// 一些类与方法会放到整体流程下方讲解
function renderPlane() {
    // canvas 基本信息获取
    const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
    const ctx = canvas.getContext("2d");
    const width = canvas.width;
    const height = canvas.height;
    // 以原始坐标 [-1, 1] 定义三角形顶点
    const v1 = new Vertex();
    v1.position = new Vec4(0, 0.2, 0, 1);
    const v2 = new Vertex();
    v2.position = new Vec4(-0.2, -0.2, 0, 1);
    const v3 = new Vertex();
    v3.position = new Vec4(0.2, -0.2, 0, 1);
    /**
        视口变换: 将标准平面映射到屏幕分辨率范围
    */
    const viewPosition1 = getViewPortPosition(v1.position);
    const viewPosition2 = getViewPortPosition(v2.position);
    const viewPosition3 = getViewPortPosition(v3.position);
    /**
        创建 ImageData
    */
    const imageData = ctx.createImageData(width, height);
    /**
        初始化帧缓冲区
    */
    const buffer = new FrameBuffer(width, height);
    buffer.setFrameBuffer(imageData.data);
    buffer.setClearColor(Color.BLACK);
    for (let x = 0; x < width; x++) {
        for (let y = 0; y < height; y++) {
            const curposition = new Vec4(x + 0.5, y + 0.5, 0, 1);
            const isInner = isTriangleInner(curposition, viewPosition1, viewPosition2, viewPosition3);
            isInner && buffer.setColor(x, y, Color.RED);
        }
    }
    ctx.putImageData(imageData, 0, 0);
};

After rendering a simple triangle, the article discusses viewport transformation, which maps coordinates from the normalized device space [-1, 1] to screen space [0, width] × [0, height].

Further topics include bounding‑box optimization, anti‑aliasing via multi‑sampling, barycentric interpolation, and camera transformations (view, projection, and perspective). Each concept is illustrated with concise code snippets and diagrams.

Camera Transformation shows how to compute direction, up, and right vectors, align the camera with world coordinates, and derive the view matrix.

class Camera {
    // position, direct, up vectors
    position;
    direct;
    up;
    lookAt(point) { /* ... */ }
}

Perspective projection is explained with the relationship between near/far planes and depth scaling, followed by depth testing using a Z‑buffer to resolve occlusion.

class ZBuffer {
    frameBuffer // stores color data
    z // stores depth values
    constructor() {
        this.z = new Float32Array(canvas.width * canvas.height).fill(NaN);
    }
}

The article concludes with a high‑level rendering pipeline that loads model data, sets up textures, computes transformation matrices, rasterizes triangles, performs depth testing, and writes the final image to the canvas.