Feynman 的博客

HTML-in-Canvas 新特性探索

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

HTML-in-Canvas 是由 Chrome 团队发起、在 WICG 下孵化的 Web 标准提案——让 <canvas> 的子元素从"不可见的 fallback"变成"可布局、可绘制、可交互的离屏 HTML 图层"。这意味着 DOM 首次成为 GPU 渲染管线的一等公民。

moeru.ai ｜弹性吊牌与波点网格

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

本文复刻 moeru.ai 落地页中两个最具沉浸感的交互模块：波点网格物理交互和3D 挂牌 Verlet 弹性吊绳系统。不涉及可变字体压力动画和 GitHub 成员头像加载。

01 整体架构与技术选型

原站是一个单页面沉浸式落地页，核心交互由 4 个模块组成。本文聚焦其中两个：

01｜从零搭建 3D 项目架构

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

Three.js 的一切始于三个对象：Scene（舞台）、Camera（镜头）、Renderer（投影仪）。掌握这三件套，就掌握了 3D 世界的入场券。

法线材质立方体在黑色背景上旋转浮动，不同面呈现不同颜色（法线方向映射为 RGB）

11｜光场、颜色与感知

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

课程主讲：闫令琪 (Lingqi Yan) | UCSB
B站课程链接：https://www.bilibili.com/video/BV1X7411F744
本章对应课件：第 20 讲（Light Field / Lumigraph, Color and Perception）

说明：这是两个"跳出几何"的主题。光场问的是一个场景在视觉上到底包含多少信息，颜色问的是这些信息进入人眼之后为什么变成了颜色。两者看似无关，却指向同一个结论：我们感知到的"图像"和"颜色"，都只是物理世界在人类感官上的一个低维投影——光场把 7 维的全光函数压到 4 维，颜色把无穷维的光谱压到 3 维。正因为这种压缩存在，图像采集和颜色复现才成为可能。

12｜动画与模拟

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

课程主讲：闫令琪 (Lingqi Yan) | UCSB
B站课程链接：https://www.bilibili.com/video/BV1X7411F744
本章对应课件：第 21 讲（Animation 1: Basic Concepts, Mass-Spring Systems, Kinematics, Rigging / Blend Shapes / Motion Capture）、第 22 讲（Animation Cont.: Solving ODEs, Rigid Body and Fluids）

说明：前面十一篇处理的都是"静态"的问题——一个场景摆在那里，我们关心怎么把它算出来、画出来。这一篇换了个维度：让场景随时间动起来。动画和模拟表面上都在"生成运动"，但走的是两条完全不同的路：动画是"描述运动"（人给出关键帧或关节角度，计算机负责插值），模拟是"推导运动"（人给出物理规律，计算机负责积分）。两条路在工程上会汇合到同一个地方——都要数值求解微分方程，也都可能因为离散化而崩溃。

10｜相机与透镜

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

课程主讲：闫令琪 (Lingqi Yan) | UCSB
B站课程链接：https://www.bilibili.com/video/BV1X7411F744
本章对应课件：第 19 讲（Cameras, Lenses and Light Fields）

说明：前九篇一直在回答"怎么把模型画成图"，那是合成 (Synthesis)；这一篇换个方向，讲图像是怎么被**捕获 (Capture)**下来的。相机的每个部件——镜头、光圈、快门、传感器——几乎都能在渲染器里找到一个对应参数，而景深、散焦模糊、曝光这些效果，也由此第一次有了物理模型。

07｜光线追踪（Whitted-Style、辐射度量学与路径追踪）

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

课程主讲：闫令琪 (Lingqi Yan) | UCSB
B站课程链接：https://www.bilibili.com/video/BV1X7411F744
本章对应课件：第 13 讲（Ray Tracing 1: Whitted-Style Ray Tracing）、第 14 讲（Ray Tracing 2: Acceleration & Radiometry）、第 15 讲（Light Transport & Global Illumination）、第 16 讲（Ray Tracing 4: Monte Carlo, Path Tracing）

说明：光线追踪是 GAMES101 中篇幅最大的一块内容，跨越第 13-18 讲。本文覆盖第 13-16 讲 —— 从 Whitted-Style 光线追踪、求交与加速结构，到辐射度量学、渲染方程，最终走到路径追踪。第 17 讲的材质与外观、第 18 讲的高级渲染主题另开两篇。

08｜材质与外观

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

课程主讲：闫令琪 (Lingqi Yan) | UCSB
B站课程链接：https://www.bilibili.com/video/BV1X7411F744
本章对应课件：第 17 讲（Materials and Appearances）

说明：上一篇（第 07 篇）一路推导到路径追踪，把渲染方程解出来了；这一篇反过来盯住方程里那个"已知但最复杂"的量 —— $f_r$，也就是 BRDF。材质、外观、光泽、菲涅尔、微表面，归根到底都是在回答同一个问题：光打到这个表面上，会往哪些方向反射多少能量？第 18 讲的高级渲染主题（BDPT、MLT、光子映射、VCM，以及参与介质、毛发等非表面模型）另开一篇。

09｜高级光线传播与复杂外观建模

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

课程主讲：闫令琪 (Lingqi Yan) | UCSB
B站课程链接：https://www.bilibili.com/video/BV1X7411F744
本章对应课件：第 18 讲（Advanced Topics in Rendering）

说明：这是渲染这一大块的收尾。前面从渲染方程一路走到路径追踪，基本框架已经搭好了；这一篇不再推导新方程，而是横向铺开——先看还有哪些别的光传输算法（BDPT、MLT、光子映射、VCM、即时辐射度），再看当"表面 + BRDF"这套假设不够用时，怎么给参与介质、毛发、皮肤、布料这些复杂外观建模。

06｜几何（基本表示方法 & 曲线与曲面 & 网格处理）与阴影映射

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

课程主讲：闫令琪 (Lingqi Yan) | UCSB
B站课程链接：https://www.bilibili.com/video/BV1X7411F744
本章对应课件：第 10 讲（Geometry 1: Introduction）、第 11 讲（Geometry 2: Curves and Surfaces）、第 12 讲（Geometry 3）

几何 (Geometry) 是图形学中极其重要且困难的一个主题。本文介绍几何的各种表示方法（隐式与显式）、曲线与曲面（贝塞尔曲线、B 样条、贝塞尔曲面）、网格处理（细分、简化、正规化）以及阴影映射 (Shadow Mapping) 技术。

12｜噪声函数

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

上节课用 GLSL 数学函数画出了形状和渐变。本节课进入着色器的"灵魂工具"——噪声函数：从 random 的雪花到 Perlin 的连续云雾，从单层噪声到 FBM 的分形细节，最终用噪声驱动云雾、地形、火焰和顶点变形。

05｜着色（光照模型与纹理映射）

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

课程主讲：闫令琪 (Lingqi Yan) | UCSB
B站课程链接：https://www.bilibili.com/video/BV1X7411F744
本章对应课件：第 7 讲（Illumination, Shading and Graphics Pipeline）、第 8 讲（Shading, Pipeline and Texture Mapping）、第 9 讲（Texture Mapping cont.）

说明：官方精简版课件中，纹理应用（环境贴图、凹凸/法线贴图、位移贴图、3D 纹理）位于第 10 讲、阴影贴图位于第 12 讲；本文按 B 站完整版课程结构将其归入着色主题之下。

11｜GLSL 数学函数

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

上节课掌握了 GLSL 基础语法和 ShaderMaterial 的数据通道。本节课深入数学函数——mix / step / smoothstep 控制渐变与边界，sin / cos 制造波浪，dot / cross 做光照和 Fresnel，fract / mod 生成重复图案。这些函数是从"一张 UV 坐标"到"一幅画面"的核心工具链。

04｜光栅化（三角形的离散化与抗锯齿）

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

课程主讲：闫令琪 (Lingqi Yan) | UCSB
B站课程链接：https://www.bilibili.com/video/BV1X7411F744

光栅化 (Rasterization) 是将矢量图形（几何描述）转换为像素图像（光栅图像）的过程。

10｜GLSL 基础

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

前 9 课用的都是 Three.js 内置材质（MeshStandardMaterial、MeshBasicMaterial……）。本节课开始写自定义 shader —— 直接用 GLSL 和 GPU 对话，让渐变、波浪、Fresnel 这些效果完全由代码生成，不再依赖内置材质的预设参数。

03｜变换（二维与三维）

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

课程主讲：闫令琪 (Lingqi Yan) | UCSB
B站课程链接：https://www.bilibili.com/video/BV1X7411F744

1 为什么要学习变换

变换在图形学中有两大核心应用：

09｜动画系统

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

前 8 课的动画都是在 requestAnimationFrame 循环里手动写位移和旋转。本节课引入 GSAP 补间动画和 Three.js 原生关键帧系统，让动画控制更优雅、更强大。

01 学习目标

本节课聚焦 Three.js 动画系统：

08｜模型加载

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

前 7 课我们一直在用代码创建几何体。真实项目中，3D 模型通常由美术在 Blender/Maya 中制作，导出为 GLTF/GLB 格式后加载到场景中。本节课掌握模型加载的完整流程：加载 → 压缩 → 缩放 → 动画。

07｜场景图与变换

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

场景图是 Three.js 的骨架系统。理解父子关系、变换继承和坐标系转换，就能用简单的几何体拼出复杂的 3D 结构。本节课通过太阳系模型和积木小动物拼装，深入理解场景图的树形结构。

06｜纹理与贴图

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

纹理是给 3D 物体「穿衣服」的过程。理解 UV 坐标、学会加载和控制纹理、掌握环境贴图的反射原理，就能让场景从「素模」变成「有质感的世界」。

01 学习目标

本节课聚焦 Three.js 纹理与贴图系统：

02｜向量与线性代数

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

课程主讲：闫令琪 (Lingqi Yan) | UCSB
B站课程链接：https://www.bilibili.com/video/BV1X7411F744

1 向量基础

向量的定义

向量有方向和长度，没有绝对起始位置
通常记为 $\vec{a}$ 或粗体 a
用起止点表示：$\overrightarrow{AB} = B - A$

向量归一化 (Normalization)

向量的模（长度）：$||\vec{a}||$
单位向量：模为 1 的向量，用于表示方向
归一化：$\hat{a} = \frac{\vec{a}}{||\vec{a}||}$

向量加法

几何表示：平行四边形法则 & 三角形法则
代数计算：对应坐标相加

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

向量加法的几何图示：

01｜概览与光栅化

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

课程主讲：闫令琪 (Lingqi Yan) | UCSB
B站课程链接：https://www.bilibili.com/video/BV1X7411F744

1 什么是计算机图形学

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

05｜相机与控制

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

相机决定了用户「从哪里看」和「看到多大范围」。掌握透视相机和正交相机的区别，理解视锥体和裁剪面，就能精确控制 3D 场景的视觉呈现。

04｜灯光与阴影

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

灯光是 3D 场景的灵魂。掌握 5 种灯光类型和阴影三要素，就能让场景从「扁平感」变成「有层次的真实世界」。

从左到右：Ambient、Hemisphere、Directional、Point、Spot 五种灯光效果对比，下方为不同分辨率的阴影质量展示

03｜材质系统

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

材质决定了物体表面如何与光线交互。掌握 6 种材质类型和 PBR 参数，就能让 3D 物体从"塑料感"变成"照片级真实"。

02｜几何体与图元

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

几何体是 3D 世界的积木。掌握 5 种基础图元，就能组合出几乎任何形状。

从左到右：Wireframe 球体（低分段）、Box、Sphere、Cylinder、Torus，底部为棋盘格纹理的 Plane 地面

数学基础：三角函数完全指南

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

三角函数是描述周期性现象的核心工具，也是 3D 图形学的数学基础。本文从直角三角形出发，系统梳理三角函数的定义、公式、图像与反三角函数。

01 基本定义

直角三角形定义

在直角三角形中，设角 $\theta$ 为一个锐角：

关于

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

关于我

一个热爱技术的开发者，正在探索计算机图形学和 Web 开发的世界。我相信最好的学习方式是边学边写，通过记录和分享来加深理解。

学习方向

Three.js + GLSL + WebGPU — 计算机图形学，从基础数学到着色器开发
React + TypeScript — 现代前端工程化
网站艺术特效 — 创意交互与视觉体验探索

关于本站

这个博客是我的学习笔记和技术分享空间，主要记录：

隐私政策

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

本隐私政策说明您访问与使用本站（blog.deltastudio.space，以下简称「本站」）时，相关信息如何被处理。若您不同意本政策内容，请停止使用本站。