前端 | Feynman 的博客

深入探索 Chrome 团队提出的 HTML-in-Canvas 提案——让 Canvas 原生绘制真实、可交互、可访问的 HTML 内容。从基础用法到 WebGL 3D 纹理，从踩坑清单到跨浏览器 polyfill 方案，一文打通 DOM 与像素世界。

2026年9月2日 • 5270 字 • 11 分钟

噪声函数原理（Perlin 梯度噪声、Simplex 单纯形、FBM 分形布朗运动）、云雾/地形/火焰/顶点变形实战、噪声动画、频率与振幅、课后作业五大案例

2026年8月31日 • 7267 字 • 15 分钟

GLSL 内置数学函数（mix/step/smoothstep/sin/cos/pow）、向量运算（dot/cross/normalize）、用数学函数画基本形状、fract/mod 周期函数、坐标系变换与 UV 映射

2026年8月25日 • 4737 字 • 10 分钟

顶点/片元着色器执行流程，gl_Position / gl_FragColor，attribute / uniform / varying 三种通道，ShaderMaterial vs RawShaderMaterial，GLSL 强类型与常用内置函数

2026年8月15日 • 6596 字 • 14 分钟

复刻 moeru.ai 落地页的两大核心交互：波点网格物理排斥 + 3D 挂牌 Verlet 绳索模拟。从原理到实现，逐行解析 CSS/JS 关键代码。

2026年8月1日 • 4643 字 • 10 分钟

requestAnimationFrame vs GSAP，gsap.to/from/timeline，KeyframeTrack 关键帧动画，AnimationObjectGroup 共享动画，AnimationMixer 模型动画

2026年7月30日 • 4553 字 • 10 分钟

GLTF/GLB 格式详解，GLTFLoader 加载模型，Draco 压缩，LoadingManager 进度管理，模型自动缩放居中，LOD 策略，AnimationMixer 动画播放

2026年7月28日 • 4736 字 • 10 分钟

场景图的树形结构，父子关系与变换继承，局部坐标系 vs 世界坐标系，Object3D 分组管理，scene.traverse() 遍历，AxesHelper/GridHelper 调试

2026年7月24日 • 2560 字 • 6 分钟

TextureLoader 加载图片纹理，UV 坐标与纹理映射，纹理 repeat/offset/wrap 控制，CubeTextureLoader 天空盒，环境贴图与反射，RGBELoader HDRI

2026年7月23日 • 2574 字 • 6 分钟

从零搭建 Vite + TypeScript + Three.js 项目，理解 Scene / Camera / Renderer 三件套，掌握 requestAnimationFrame + delta time 动画循环。

2026年7月7日 • 1291 字 • 3 分钟