fragment.glsl
raymarch · 90 steps36
示例
3
学习路径
30
快捷键
9
主题
三条学习路径
13 节课
Three.js 核心
场景图、相机、材质、灯光、动画与后期处理：用最流行的 3D 库搭建完整的实时场景。
已完成 0/13
12 节课
WebGL 与着色器
从一个三角形开始理解 GPU 渲染管线，亲手写顶点与片元着色器、噪声、光线步进。
已完成 0/12
11 节课
GPU 与 WebGPU 计算
GPU 并行思维、WebGPU 渲染与计算管线、GPGPU 粒子与性能优化。
已完成 0/11
精选示例
Three.js
PBR 与环境光照
用 PMREMGenerator + RoomEnvironment 做基于图像的光照，体验 MeshPhysicalMaterial 的清漆、透射、虹彩，以及各种色调映射。
高级WebGL#pbr#environment
着色器
光线步进：用距离场画 3D
在一个片元着色器里完成整个 3D 场景：球体追踪、SDF 图元、平滑并集、梯度法线、软阴影与环境光遮蔽。
高级WebGL 2#raymarching#sdf
GPU
GPU 粒子：计算 + 实例化
十几万个粒子完全在 GPU 上模拟：计算 pass 原地更新存储缓冲，渲染 pass 直接从同一缓冲读取并实例化绘制。
进阶WebGPU#webgpu#compute-shader
Three.js
后期处理
用 EffectComposer 串起 RenderPass、UnrealBloomPass、自定义 ShaderPass 和 OutputPass，做出霓虹辉光与镜头效果。
高级WebGL#postprocessing#bloom
着色器
噪声与 fBm：程序化云和大理石
从哈希函数出发写值噪声和梯度噪声，叠加成分形布朗运动，再用域扭曲做出流动的云和大理石。
进阶WebGL 2#noise#fbm
GPU
GPU 上的生命游戏
用两个存储缓冲轮流读写（乒乓）运行康威生命游戏，二维工作组每个线程负责一个细胞，再用实例化按年龄上色绘制。
进阶WebGPU#webgpu#compute-shader
为什么在这里学
所见即所得
每个概念都配有实时运行的效果，修改代码后 ⌘/Ctrl + Enter 立即重新运行。
中英双语讲解
概念文章、代码注释思路与练习题都有中文和英文版本，随时切换。
你的私人实验室
登录后，进度、收藏和代码片段保存在云端，只有你自己能看到。
?显示快捷键