性能、采样与移动端质量 · source map

粒子贵在哪里：不是数量一个数字：代码定位

这里显示课程实际引用的代码片段。先看每段在说人话，再回到实验验证它对画面的影响。

透明 Overdraw

一像素多层透明片元为什么会重复工作。

src/lib/lab/shader-performance/shaders.ts · section overdraw

当前起点查看这段精确实现

// SECTION:overdraw - transparent layers repeat fragment work for one screen pixel
float overdrawHeat() { return clamp(uOverdrawLayers / 16.0 * (uEarlyZEffective ? 0.55 : 1.0), 0.0, 1.0); }

粒子批量实例

同一份 geometry 如何减少绘制提交。

src/lib/lab/shader-performance/shaders.ts · section instancing

按需展开查看这段精确实现

  // SECTION:instancing - instance data changes transforms without multiplying draw submissions
  vInstanceId = aInstanceId;
  vec4 localPosition = vec4(position, 1.0);
  #ifdef USE_INSTANCING
    localPosition = instanceMatrix * localPosition;
  #endif
  float distanceToCamera = length((modelViewMatrix * localPosition).xyz);

GPU 预算时间线

把估算 ms 和目标帧预算放到一起。

src/lib/lab/shader-performance/shaders.ts · section timeline

按需展开查看这段精确实现

// SECTION:timeline - show a budget ratio instead of pretending a single knob is performance
vec3 timelineColor() { float ratio = clamp(uEstimatedMs / max(uTargetMs, 0.01), 0.0, 1.8); return mix(vec3(0.17, 0.8, 0.48), vec3(0.94, 0.24, 0.16), clamp(ratio, 0.0, 1.0)); }