• Y AnimationPlayground
研究工作台
  • 实验总览
    • Three.js
    • Shader Lab
示例库
  • 示例总览
  • Three.js 示例
  • Shader 示例
  • 代码视频示例
项目
  • 版本记录
GitHubX (Twitter)

Shader Lab

v0.8.5 第一层

从像素坐标、时间与距离函数开始,理解程序化图形、GPU 粒子和多 Pass 反馈。

进入粒子架构
LAYER 01本轮实现
Fragment 基础
坐标、uniform、时间、SDF、程序化粒子与像素成本。
LAYER 02已进入
粒子架构
程序化假粒子、Point Sprite、Instancing 与 GPGPU 的同场对比。
LAYER 03已进入
状态与反馈
Ping-pong 纹理、GPGPU 更新、拖尾、流体与 seek 限制。
LAYER 04已进入
收藏与创作
来源、许可、性能和技术标签齐全的公共作品目录与原创系列。
这一层必须理解什么
Shader 的代码量不是性能指标。画面成本约等于分辨率、每像素循环、纹理采样和 Pass 数量的乘积;Studio 会始终把这些量和画面放在一起。
公开作品怎样进入收藏
来源、作者、许可、原始链接、修改记录、运行时、Pass 数和性能档案缺一不可; 许可不清晰的作品只保存链接与分析,不复制源码。
怎样形成原创系列
每个原创 Shader 都要有一个核心函数、一个可控参数空间和一个明确性能预算; 先建立可复用技术词汇,再发展稳定的个人视觉语言。