Feynman's Blog

Exploring HTML-in-Canvas: A New Web Frontier

Wed, 02 Sep 2026 10:00:00 +0800

HTML-in-Canvas is a Web standard proposal incubated at WICG by the Chrome team — turning <canvas> children from “invisible fallback content” into “layoutable, drawable, interactive offscreen HTML layers.” This means DOM becomes a first-class citizen of the GPU rendering pipeline for the first time.

01 Proposal Background

What is it?

The core problem HTML-in-Canvas solves: render real HTML elements inside Canvas (2D or WebGL/WebGPU), and those elements are “alive” — typeable, interactive, accessible.

moeru.ai | Elastic Tag & Dot Grid

Sat, 01 Aug 2026 10:00:00 +0800

This article clones the two most immersive interactive modules from the moeru.ai landing page: dot grid physics interaction and 3D tag Verlet elastic rope system. It does not cover the variable font pressure animation or GitHub member avatar loading.

01 Overall Architecture & Tech Choices

The original site is a single-page immersive landing page whose core interactions consist of 4 modules. This article focuses on two of them:

11 | Light Fields, Color and Perception

Sat, 03 Oct 2026 15:00:00 +0800

Instructor: Lingqi Yan | UCSB
Bilibili: https://www.bilibili.com/video/BV1X7411F744
Lectures covered: Lecture 20 (Light Field / Lumigraph, Color and Perception)

Note: these are two topics that step outside geometry. The light field asks how much information a scene actually carries visually; colour asks why that information turns into colour once it enters the human eye. They look unrelated but point at the same conclusion: the “image” and the “colour” we perceive are only low-dimensional projections of the physical world onto human senses — the light field squeezes the 7D plenoptic function down to 4D, and colour squeezes an infinite-dimensional spectrum down to 3D. It is precisely because this compression exists that image capture and colour reproduction are possible at all.

12 | Animation and Simulation

Sat, 03 Oct 2026 15:00:00 +0800

Instructor: Lingqi Yan | UCSB
Bilibili: https://www.bilibili.com/video/BV1X7411F744
Lectures covered: Lecture 21 (Animation 1: Basic Concepts, Mass-Spring Systems, Kinematics, Rigging / Blend Shapes / Motion Capture), Lecture 22 (Animation Cont.: Solving ODEs, Rigid Body and Fluids)

Note: the previous eleven posts all dealt with the “static” problem — a scene sits there, and we care about how to compute and draw it. This one changes the dimension: making the scene move over time. Animation and simulation both look like they “generate motion”, but they take two fundamentally different routes: animation describes motion (a human supplies keyframes or joint angles and the computer interpolates), while simulation derives motion (a human supplies the laws of physics and the computer integrates). In practice the two roads meet in the same place — both end up solving differential equations numerically, and both can blow up because of discretisation.

10 | Cameras and Lenses

Sat, 03 Oct 2026 14:00:00 +0800

Instructor: Lingqi Yan | UCSB
Bilibili: https://www.bilibili.com/video/BV1X7411F744
Lectures covered: Lecture 19 (Cameras, Lenses and Light Fields)

Note: the previous nine posts kept answering “how do we draw a model into an image” — that is synthesis. This one turns around and asks how an image gets captured. Nearly every part of a camera — lens, aperture, shutter, sensor — maps onto a parameter in a renderer, and effects like depth of field, defocus blur and exposure finally get a physical model.

07 | Ray Tracing (Whitted-Style, Radiometry and Path Tracing)

Thu, 01 Oct 2026 18:00:00 +0800

Instructor: Lingqi Yan | UCSB
Bilibili: https://www.bilibili.com/video/BV1X7411F744
Lectures covered: Lecture 13 (Ray Tracing 1: Whitted-Style Ray Tracing), Lecture 14 (Ray Tracing 2: Acceleration & Radiometry), Lecture 15 (Light Transport & Global Illumination), Lecture 16 (Ray Tracing 4: Monte Carlo, Path Tracing)

Note: ray tracing is the longest block in GAMES101, spanning lectures 13-18. This post covers lectures 13-16 — from Whitted-style ray tracing, intersection tests and acceleration structures, through radiometry and the rendering equation, to path tracing. Materials and appearances (Lecture 17) and advanced rendering topics (Lecture 18) get their own posts.

08 | Materials and Appearances

Thu, 01 Oct 2026 18:00:00 +0800

Instructor: Lingqi Yan | UCSB
Bilibili: https://www.bilibili.com/video/BV1X7411F744
Lectures covered: Lecture 17 (Materials and Appearances)

Note: the previous post (#7) drove all the way to path tracing and solved the rendering equation. This one turns around and stares at the one term in that equation that is “known” yet endlessly complicated — $f_r$, the BRDF. Materials, appearances, glossiness, Fresnel, microfacets: they all answer the same question. When light hits this surface, how much energy goes where? The advanced rendering topics of Lecture 18 (BDPT, MLT, photon mapping, VCM, plus non-surface models such as participating media and hair) get their own post.

09 | Advanced Light Transport and Complex Appearance Modeling

Thu, 01 Oct 2026 18:00:00 +0800

Instructor: Lingqi Yan | UCSB
Bilibili: https://www.bilibili.com/video/BV1X7411F744
Lectures covered: Lecture 18 (Advanced Topics in Rendering)

Note: this closes out the rendering block. We walked from the rendering equation all the way to path tracing and got the basic framework standing. This post derives no new equation — it spreads out sideways instead. First, what other light transport algorithms exist (BDPT, MLT, photon mapping, VCM, instant radiosity); then, what to do when the “surface + BRDF” assumption stops being enough, and we have to model participating media, hair, skin and cloth.

06 | Geometry (Basic Representations & Curves and Surfaces & Mesh Processing) and Shadow Mapping

Wed, 09 Sep 2026 18:00:00 +0800

Instructor: Lingqi Yan | UCSB
Bilibili: https://www.bilibili.com/video/BV1X7411F744
Lectures covered: Lecture 10 (Geometry 1: Introduction), Lecture 11 (Geometry 2: Curves and Surfaces), Lecture 12 (Geometry 3)

Geometry is an extremely important yet difficult topic in computer graphics. This post covers various ways to represent geometry (implicit and explicit), curves and surfaces (Bezier curves, B-splines, Bezier surfaces), mesh processing (subdivision, simplification, regularization) as well as the shadow mapping technique.

12 | Noise Functions

Mon, 31 Aug 2026 12:00:00 +0800

In the previous lesson, we used GLSL math functions to draw shapes and gradients. This lesson enters the “soul tool” of shaders — noise functions: from random’s snow to Perlin’s continuous clouds, from single-layer noise to FBM’s fractal detail, ultimately driving clouds, terrain, fire, and vertex deformation.

01 Learning Objectives

This lesson focuses on noise function principles and practice:

Understand the core differences between Perlin Noise and Simplex Noise
Master FBM (Fractal Brownian Motion) principles and applications
Learn to create organic effects with noise (clouds, terrain, fire)
Understand vertex deformation using noise in vertex shaders
Master two ways to animate noise (moving sample point / changing frequency)

02 What Is Noise — Continuous Pseudorandom Function

Noise is a continuous pseudorandom function: neighboring points have similar values, but the overall pattern appears random.

05 | Shading (Illumination Models and Texture Mapping)

Sun, 30 Aug 2026 18:00:00 +0800

Instructor: Lingqi Yan | UCSB
Bilibili: https://www.bilibili.com/video/BV1X7411F744
Lectures covered: Lecture 7 (Illumination, Shading and Graphics Pipeline), Lecture 8 (Shading, Pipeline and Texture Mapping), Lecture 9 (Texture Mapping cont.)

Note: In the official condensed slides, texture applications (environment maps, bump/normal/displacement maps, 3D textures) appear in Lecture 10 and shadow mapping in Lecture 12; following the full Bilibili course structure, they are grouped under the shading topic here.

Shading is the process of applying material properties to objects, which determines their color and appearance under different lighting conditions. This post covers the depth buffer (visibility/occlusion), the Blinn-Phong reflectance model, shading frequencies, the graphics pipeline, texture mapping and related techniques.

11 | GLSL Math Functions

Tue, 25 Aug 2026 12:00:00 +0800

Last lesson covered GLSL basics and ShaderMaterial data channels. This lesson dives deep into math functions — mix / step / smoothstep for gradients and boundaries, sin / cos for waves, dot / cross for lighting and Fresnel, fract / mod for repeating patterns. These functions form the core toolchain from “a UV coordinate” to “a final image”.

01 Learning Objectives

This lesson focuses on practical applications of GLSL math functions:

04 | Rasterization (Triangle Discretization and Anti-Aliasing)

Sun, 16 Aug 2026 12:00:00 +0800

Instructor: Lingqi Yan | UCSB
Bilibili: https://www.bilibili.com/video/BV1X7411F744

Rasterization is the process of converting vector graphics (geometric descriptions) into pixel images (raster images).

Rasterization = drawing continuous geometry as discrete pixels. It is the foundational technique of real-time rendering.

This chapter corresponds to lectures 5-6 (the depth buffer part corresponds to the start of lecture 7).

Lecture 05 slides (PDF)

Lecture 06 slides (PDF)

Bilibili video

1 Perspective Projection Wrap-Up: fovY and Aspect Ratio

In the MVP transform, the perspective projection frustum is defined by $l, r, b, t$ (left, right, bottom, top bounds of the near clip plane), but in practice developers prefer vertical field of view (fovY) and aspect ratio (assuming symmetry, i.e. $l = -r$, $b = -t$):

10 | GLSL Basics

Sat, 15 Aug 2026 12:00:00 +0800

The first 9 lessons all used Three.js built-in materials (MeshStandardMaterial, MeshBasicMaterial…). This lesson starts writing custom shaders — talking to the GPU directly with GLSL, so gradients, waves, and Fresnel effects are generated entirely by code instead of built-in material presets.

01 Learning Objectives

This lesson focuses on GLSL shader programming fundamentals:

Understand the structure and execution flow of Vertex / Fragment Shaders
Master the roles of gl_Position / gl_FragColor
Distinguish the three variable types: attribute / uniform / varying
Understand ShaderMaterial vs RawShaderMaterial
Master coordinate transformations (model → world → view → clip)

02 GLSL Basic Syntax

GLSL is a C-style shading language, slightly different from JS/TS. First, the most common “parts”.

03 | Transformations (2D and 3D)

Sun, 09 Aug 2026 12:00:00 +0800

Instructor: Lingqi Yan | UCSB
Bilibili: https://www.bilibili.com/video/BV1X7411F744

1 Why Study Transformations

Transformations have two core applications in graphics:

Application	Description	Example
Modeling	Place objects in a scene	Translate, rotate, scale objects
Viewing	Project 3D scene onto a 2D image	Camera transform, projection transform

2 2D Transformations

Scale

Uniform scale (all directions scaled equally):

$x' = sx \qquad y' = sy$

$$ \begin{pmatrix} x' \\ y' \end{pmatrix} = \begin{pmatrix} s & 0 \\ 0 & s \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} $$

For example: $x = 2, \; y = 2, \; s = 0.5$

09 | Animation System

Thu, 30 Jul 2026 12:00:00 +0800

In the first 8 lessons, all animations were manually written in the requestAnimationFrame loop. This lesson introduces GSAP tweening and Three.js native keyframe system for more elegant and powerful animation control.

01 Learning Objectives

This lesson focuses on Three.js animation system:

Understand requestAnimationFrame loop vs GSAP animation differences
Master gsap.to() / gsap.from() / gsap.timeline()
Learn to use GSAP for smooth camera and object movement
Master AnimationMixer for model animation playback
Learn keyframe animation (KeyframeTrack / AnimationClip)
Understand AnimationObjectGroup for shared animation across multiple objects

02 requestAnimationFrame vs GSAP

Feature	requestAnimationFrame	GSAP
Purpose	Per-frame logic (physics, LOD, rendering)	Tweening (smooth transitions)
Control	Manual delta, progress management	Auto interpolation, easing curves
Easing	Must implement yourself	30+ built-in easing functions
Sequencing	Must orchestrate yourself	timeline in one line
Performance	Optimal	Excellent (auto-optimized)

Both can be used simultaneously: rAF for render loop, GSAP for animation control.

08 | Model Loading

Tue, 28 Jul 2026 12:00:00 +0800

In the first 7 lessons, we created geometry with code. In real projects, 3D models are usually made in Blender/Maya, exported as GLTF/GLB, and loaded into the scene. This lesson covers the complete model loading pipeline: load → compress → scale → animate.

01 Learning Objectives

This lesson focuses on Three.js model loading system:

Understand GLTF/GLB format differences and file structure
Learn to use GLTFLoader to load models
Understand Draco compression principles and configuration
Implement LoadingManager for unified progress management
Master model auto-scaling and centering algorithms
Understand LOD (Level of Detail) strategy
Learn AnimationMixer for animation playback

02 GLTF Format Details

GLTF vs GLB

Format	Description	Use Case
GLTF	JSON text, resources scattered (.gltf + .bin + textures)	Development/debugging
GLB	Binary, single file with all resources	Production

GLTF File Structure:

07 | Scene Graph and Transformations

Fri, 24 Jul 2026 12:00:00 +0800

The scene graph is the skeleton system of Three.js. Understanding parent-child relationships, transform inheritance, and coordinate system conversion allows you to build complex 3D structures from simple geometry. This lesson explores the solar system model and block-based animal assembly to deeply understand the scene graph’s tree structure.

01 Learning Objectives

This lesson focuses on Three.js scene graph and transform system:

Understand the scene graph tree structure
Master parent-child relationships and transform inheritance
Distinguish local versus world coordinate systems
Learn Object3D grouping management
Master scene.traverse() traversal
Learn AxesHelper / GridHelper debugging

02 Scene Graph Tree Structure

What is a Scene Graph

All objects in Three.js are organized as a tree, with scene as the root node. A child object’s transform (position/rotation/scale) is relative to its parent. When the parent transforms, all children follow.

06 | Textures and Mapping

Thu, 23 Jul 2026 12:00:00 +0800

Textures are how you “dress up” 3D objects. Understanding UV coordinates, learning to load and control textures, and mastering environment map reflections will transform your scene from “bare models” to a “world with质感”.

01 Learning Objectives

This lesson focuses on Three.js texture and mapping system:

Master TextureLoader for loading image textures
Understand UV coordinates and texture mapping
Learn to control texture repeat, offset, and wrap
Master CubeTextureLoader for skybox loading
Master environment maps (envMap) and reflections
Understand RGBELoader for HDRI environment maps

02 Texture Basics

What is a Texture

A texture is the process of “sticking” a 2D image onto a 3D object’s surface. Three.js maps image pixels to each vertex of the geometry using UV coordinates.

02 | Vectors and Linear Algebra

Tue, 21 Jul 2026 12:00:00 +0800

Instructor: Lingqi Yan | UCSB
Bilibili: https://www.bilibili.com/video/BV1X7411F744

1 Vector Basics

Definition of Vectors

Vectors have direction and length, but no absolute starting position
Commonly denoted as $\vec{a}$ or bold a
Represented by start and end points: $\overrightarrow{AB} = B - A$

Vector Normalization

Magnitude (length) of a vector: $||\vec{a}||$
Unit vector: A vector with magnitude 1, used to represent direction
Normalization: $\hat{a} = \frac{\vec{a}}{||\vec{a}||}$

Vector Addition

Geometric representation: Parallelogram law & triangle law
Algebraic calculation: Add corresponding coordinates

$$ \vec{a} + \vec{b} = \begin{pmatrix} x_a + x_b \\ y_a + y_b \end{pmatrix} $$

Geometric representation of vector addition:

01 | Overview & Rasterization

Mon, 20 Jul 2026 12:00:00 +0800

Instructor: Lingqi Yan | UCSB
Course Link: https://www.bilibili.com/video/BV1X7411F744

1 What is Computer Graphics

Computer Graphics: The use of computers to synthesize and manipulate visual information.

The core task of computer graphics is to represent, process, render, and display graphics and images in computers.

Application Areas

Area	Examples
Video Games	Real-time rendering, 3D scenes
Film VFX	Offline rendering, visual effects
Animation	CG animation like Frozen, Zootopia
Design & CAD	Industrial design, architectural visualization
Data Visualization	Scientific, engineering, medical data
Virtual Reality	Immersive virtual environments
Augmented Reality	Real-virtual fusion (AR navigation)
Simulation	Physics, weather, black hole visualization

2 Four Core Topics

GAMES101 covers four core topics in modern computer graphics:

05 | Cameras and Controls

Sun, 19 Jul 2026 12:00:00 +0800

The camera determines “where you look from” and “how much you see”. Master the difference between perspective and orthographic cameras, understand frustum and clipping planes, and you can precisely control the visual presentation of a 3D scene.

01 Learning Objectives

This lesson focuses on Three.js cameras and controls:

Distinguish PerspectiveCamera and OrthographicCamera
Master OrbitControls configuration
Understand camera parameters (fov, aspect, near, far)
Learn camera switching and parameter adjustment

02 Perspective vs Orthographic Camera

Feature	Perspective Camera	Orthographic Camera
Perspective	Near-far scale	Uniform scale
Light convergence	Diverges from a point	Parallel (no convergence)
Frustum shape	Truncated pyramid	Rectangular box
Use case	3D games, realistic scenes	CAD, 2D games, UI

/**
 * Perspective Camera — Simulates human eye
 *
 * Near-far scale, suitable for 3D scenes, games, realistic rendering.
 *
 * PerspectiveCamera(fov, aspect, near, far)
 * fov — Field of view (degrees), wider = more distortion
 * aspect — Aspect ratio (width/height), must update on resize
 * near — Near clipping plane, closer objects hidden
 * far — Far clipping plane, farther objects hidden
 */
const perspectiveCamera = new THREE.PerspectiveCamera(50, aspect, 0.1, 100)
perspectiveCamera.position.set(5, 5, 10)
perspectiveCamera.lookAt(0, 0, 0)

/**
 * Orthographic Camera — No perspective effect
 *
 * Uniform scale, suitable for CAD, architecture preview, 2D games.
 *
 * OrthographicCamera(left, right, top, bottom, near, far)
 * left/right — Visible range horizontal bounds
 * top/bottom — Visible range vertical bounds
 * near/far — Near/far clipping planes
 *
 * Note: Must maintain aspect ratio with screen, otherwise objects stretch
 */
const frustumSize = 10
const orthographicCamera = new THREE.OrthographicCamera(
 -frustumSize * aspect / 2, // left
 frustumSize * aspect / 2, // right
 frustumSize / 2, // top
 -frustumSize / 2, // bottom
 0.1, // near
 100 // far
)

03 Camera Parameters

Parameter	Meaning	Perspective	Orthographic
FOV	Field of view angle	30°-120°	N/A
aspect	Aspect ratio	width/height	width/height
near	Near clipping plane	Closer hidden	Closer hidden
far	Far clipping plane	Farther hidden	Farther hidden
frustumSize	Visible range height	N/A	Controls visible range

FOV and Perspective Distortion

Small FOV (e.g. 30°) → Narrow view (telephoto), objects look large, weak distortion
Large FOV (e.g. 120°) → Wide view (wide-angle), objects look small, strong distortion

Near/Far Clipping Planes

Large Near/Far ratio causes depth precision loss (far objects flicker):

04 | Lights and Shadows

Fri, 17 Jul 2026 10:00:00 +0800

Lights are the soul of a 3D scene. Master 5 light types and the three shadow elements to transform your scene from “flat” to a layered, realistic world.

Left to right: Ambient, Hemisphere, Directional, Point, Spot — five light types comparison, with shadow quality showcase at different resolutions below

01 Learning Objectives

This lesson focuses on the Three.js lights and shadows system:

03 | Material System

Thu, 16 Jul 2026 10:00:00 +0800

Materials determine how object surfaces interact with light. Master 6 material types and PBR parameters to transform 3D objects from “plastic look” to “photorealistic”.

01 Learning Objectives

This lesson focuses on the Three.js material system:

Distinguish 6 material types and their use cases
Understand PBR material roughness and metalness parameters
Master environment mapping (CubeTexture) for reflection effects
Understand normal mapping principles and usage
Learn to use TextureLoader for external texture loading

02 Material Types Comparison

Three.js provides multiple material types, each suitable for different scenarios:

02 | Geometry and Primitives

Fri, 10 Jul 2026 10:00:00 +0800

Geometry is the building block of the 3D world. Master 5 basic primitives and you can combine almost any shape.

01 Learning Objectives

This lesson focuses on Three.js built-in geometries:

Master the constructors and parameters of 5 basic geometries
Understand the relationship between segments and vertex count
Learn to combine multiple primitives into complex objects
Understand Wireframe visualization principles
Learn procedural texture generation (Canvas)

02 The Nature of Geometries

Three.js geometries are essentially collections of vertex data:

01 | Building 3D Project Architecture from Scratch

Tue, 07 Jul 2026 10:00:00 +0800

Everything in Three.js starts with three objects: Scene (stage), Camera (lens), Renderer (projector). Master this trio and you have your ticket to the 3D world.

Normal material cube rotating and floating on a black background, different faces showing different colors (normal direction mapped to RGB)

01 Learning Objectives

This lesson builds a complete Three.js project from scratch:

Set up Vite + TypeScript + Three.js project scaffold
Understand the responsibilities of Scene / Camera / Renderer
Master requestAnimationFrame + delta time animation loop
Learn window resize handling and pixel ratio settings

02 The Three.js Trio

Everything in Three.js starts with three objects:

Math Basics: A Complete Guide to Trigonometry

Sun, 05 Jul 2026 10:00:00 +0800

Trigonometric functions are the core tool for describing periodic phenomena and the mathematical foundation for 3D graphics. This article starts from right triangles and systematically reviews the definitions, formulas, graphs, and inverse trigonometric functions.

01 Basic Definitions

Right Triangle Definition

In a right triangle, let angle $\theta$ be an acute angle:

Sine (sin): $\sin\theta = \frac{\text{opposite}}{\text{hypotenuse}}$
Cosine (cos): $\cos\theta = \frac{\text{adjacent}}{\text{hypotenuse}}$
Tangent (tan): $\tan\theta = \frac{\text{opposite}}{\text{adjacent}} = \frac{\sin\theta}{\cos\theta}$

Opposite, Adjacent, Hypotenuse Computation Formulas

Given a trigonometric function value and one side, the other sides can be found:

About

Mon, 01 Jan 0001 00:00:00 +0000

About Me

A developer who loves technology, exploring the world of computer graphics and web development. I believe the best way to learn is by doing — recording and sharing knowledge along the way to deepen understanding.

Learning Focus

Three.js + GLSL + WebGPU — Computer graphics, from foundational math to shader development
React + TypeScript — Modern frontend engineering
Web Art Effects — Creative interactions and visual experience exploration

About This Blog

This blog is my learning notebook and tech sharing space, mainly covering:

Privacy Policy

Mon, 01 Jan 0001 00:00:00 +0000

This policy explains how information is handled when you visit and use this site (blog.deltastudio.space, “the Site”). If you do not agree with this policy, please stop using the Site.

Article 1 Scope

This policy applies to browsing all pages of the Site (Chinese and English).
The Site is a personal tech blog. It does not offer account registration, paid membership, or checkout. Account/order clauses do not apply.
Read this together with other site notices (e.g. About). For personal information, this policy controls.

Article 2 Operator and Contact

Site name: Feynman’s Blog.
Operator: Feynman (individual).
URL: https://blog.deltastudio.space/en/.
Contact: GitHub and other channels listed on the About page.

Article 3 What We Collect

Local preferences (not uploaded)
Theme (light/dark) and similar UI preferences may be stored in your browser localStorage to restore settings on the next visit. They are not transmitted to this site’s server.