从一个三角形开始理解 GPU 渲染管线，亲手写顶点与片元着色器、噪声、光线步进。
不借助任何库，用原生 WebGL2 一步步画出第一个三角形，看清管线的每个阶段。
每个顶点带一个颜色，光栅化器自动把它们在三角形内平滑插值；顺便学会交错缓冲区的步长与偏移。
用 u_time、u_resolution、u_mouse 这三个经典 uniform，从 JavaScript 驱动一朵会呼吸的花。
不用任何数学库，手写 mat4 的透视、lookAt、旋转与平移，让一个立方体在 3D 空间里转起来。
用 JS 逐像素生成纹理，理解纹理单元、采样器、环绕模式，以及 NEAREST、LINEAR 和 mipmap 的区别。
一个全屏三角形加一段片元着色器：UV 坐标、有向距离场、smoothstep 抗锯齿和余弦调色板，Shadertoy 风格。
从哈希函数出发写值噪声和梯度噪声，叠加成分形布朗运动，再用域扭曲做出流动的云和大理石。
在一个片元着色器里完成整个 3D 场景：球体追踪、SDF 图元、平滑并集、梯度法线、软阴影与环境光遮蔽。
在 three.js 场景里写自己的 GLSL：顶点着色器把平面推成波浪，片元着色器负责光照，GUI 实时调 uniform。
先把场景渲染到纹理，再用全屏着色器做模糊、色差和暗角：原生 WebGL2 的两遍渲染。
在 GLSL 里亲手实现 Lambert 漫反射、Phong 与 Blinn-Phong 高光，以及菲涅尔边缘光，用 GUI 逐个切换对比。
GPU 上没有 printf：用法线、UV、深度、热力图和 NaN 检测这些调试视图看清着色器里的数值，并学会读懂编译错误。