Three.js 粒子系统教程：分阶段编写计划

本计划用于逐阶段编写教程。技术基线为本仓库的 Three.js r174（0.174.0）和 WebGLRenderer。先用 Three.js 原生 API 解释并实现效果，最后再讲第三方库。章节范围沿用已确定的 01—20 章目录。

参考现有 shader-threejs 的阅读方式、WRITING-GUIDE.md 的正文与练习分离规则，但示例和文字独立编写。

目标目录

particle-system/
├─ README.md                         # 阅读顺序、章节/练习/示例索引、运行方式
├─ WRITING-GUIDE.md                  # 本系列的术语、代码和验收约定
├─ PLAN.md                           # 分阶段计划
├─ 01-*.md ... 20-*.md               # 教程正文
├─ appendix-a-troubleshooting.md     # 常见错误与排查
├─ exercises/
│  ├─ README.md
│  └─ 01-*.md ... 20-*.md            # 对应练习；参考答案位于各文件末尾
└─ examples/
   ├─ stage-00/                      # 最小场景与公共起点
   └─ stage-01/ ... stage-09/        # 按编写阶段组织可运行示例

只为已经完成的章节建立正文、练习、示例和目录链接，不预先放空白占位文件。每个完整示例应能从 particle-system/examples/ 目录启动的静态服务器访问，从该目录的 three.module.js 导入；第三方库章节单独说明依赖和启动方法。

阶段安排

阶段	章节	本阶段重点	代表性示例与阶段成果
00 立基线	暂无	建立目录、写作规范、术语表、最小场景及运行说明	`stage-00` 能显示场景、相机、网格并调节基础参数；README 能引导读者打开页面
01 混合与透明	01—03	像素生成流程、混合公式与模式、Alpha 贴图和黑边	同屏比较烟、火和颜色叠加；可切换混合方式、Alpha 与纹理设置
02 深度控制	04—06	`depthTest`、`depthWrite`、`colorWrite`、`renderOrder` 各自作用及组合	相交平面、半透明烟团、仅写深度的遮挡体；明确比较视觉结果与缓冲行为
03 排序与遮挡	07—08	透明对象排序；Object Occlusion 与 Occlusion Culling 的原理和边界	旋转相机观察排序问题；墙后粒子对比“看不见”与“省掉工作”
04 粒子模型	09—10	发射器、粒子状态、生命周期、属性曲线	持续发射的火焰和一次性爆炸；每个粒子可从出生走到回收
05 时间、池化与数学	11—12	预分配与池化、`deltaTime`、发射率累计、随机分布、运动积分	喷泉、雨和爆炸参数实验；对比不同帧率和创建方式的行为
06 原生 CPU 路线	13—15	`THREE.Points`、Billboard、贴图图集、直接维护属性数组	星空、雪片、烟团；同场景逐步增加粒子数并观察 CPU 与上传成本
07 GPU 与软粒子	16—17	着色器中的解析式运动、有状态模拟边界、场景深度纹理与软交界	大量星尘；烟雾与地面相交时硬边/软边对照
08 效果与群体	18—19	七种特效配方；鸟群/人群所需的行为规则和实例化表现	效果画廊与小型鸟群；解释独立粒子和有邻居关系个体的差异
09 性能与库	20	CPU、上传、绘制调用、overdraw 的诊断；`three.quarks` API 对照	原生实现与库实现的同类效果、性能观察表、全系列链接与排错复核

章节 01—20 的具体标题与范围以已确定的大纲为准。若编写中发现一章过长，可在章内分节，不改变已发布章节编号；确需调整目录时先更新本计划与 README。

每个阶段的交付包

教程正文：每章写清“现象 → 原理 → 最小代码 → 参数变化 → 常见问题”，开头说明前置知识、预期画面和源码位置，结尾链接对应练习。
独立练习：只放在 exercises/，与章节编号对应。每题写目标、起始示例、限制和可观察的完成标准；提示可折叠；参考答案置于同一文件末尾，与题目分隔。
可运行示例：示例页面对应章节和预期画面，控件能切换关键参数。示例使用本地资源，明确启动路径与浏览器要求。
索引与验收记录：同步更新根 README、练习 README、阶段示例 README。核对双向链接、浏览器控制台、主要参数切换和文中描述的画面。

跨阶段技术约定

区分深度测试、深度写入、颜色写入和对象绘制顺序；不要将视觉遮挡直接称为对象级遮挡剔除。
展示透明粒子时说明排序单位与边界：一个 Points 对象内部的点不能指望由 renderOrder 逐点排序。
PointsMaterial.size 在 r174 的 WebGL 路径已处理像素比；自定义 gl_PointSize 另行处理，并说明点大小的硬件限制。
ShaderMaterial 根据初始状态与时间计算运动，不意味着顶点着色器自动保留更新后的状态；有状态模拟需要额外的数据反馈方案。
软粒子明确标注深度纹理的来源、坐标空间、深度线性化以及透明物体参与深度的限制。
性能结论附粒子数、画布尺寸、像素比和设备/浏览器条件；避免给出脱离场景的固定“粒子数上限”。
第三方库章节以与 r174 兼容的版本为准。规划使用 three.quarks@0.16.0；正式编写时重新核对依赖、API 和示例运行结果，不采用当前要求 three >=0.182.0 的最新版。

后续引导方式

按阶段号启动即可，例如“开始阶段 00”或“开始阶段 02”。每次完成一个阶段后，交付对应正文、练习、示例及索引更新，并报告已验证内容和下一阶段的前置条件。阶段之间保留修改空间，但不提前把后续章节写成占位内容。