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

Instancing 与批处理：少提交，不等于免费：代码定位

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

Instance matrix

实例属性改变变换，但 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);

LOD 配合批次

远处实例可以换低成本级别。

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

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

  // SECTION:lod - distance uses world depth; screen-size asks how large this
  // object projects through the current camera. They intentionally differ.
  float objectRadius = 0.2;
  #ifdef USE_INSTANCING
    objectRadius *= length(instanceMatrix[0].xyz);
  #endif
  float projectedRadius = projectionMatrix[1][1] * objectRadius / max(distanceToCamera, 0.001);
  float screenSizeMetric = 0.25 / max(projectedRadius, 0.001);
  float lodMetric = uLodMode < 1.5 ? distanceToCamera : screenSizeMetric;
  vLod = uLodMode < 0.5 ? 0.0 : clamp(floor(log2(max(lodMetric, 1.0)) + uLodBias), 0.0, 4.0);
  gl_Position = projectionMatrix * modelViewMatrix * localPosition;
}



precision highp float;
uniform int uDebugMode;
uniform int uBranchMode;
uniform float uBranchRatio;
uniform float uShaderWork;
uniform float uTextureReads;
uniform float uOverdrawLayers;
uniform float uTargetMs;
uniform float uEstimatedMs;
uniform bool uEarlyZEffective;
varying float vInstanceId;
varying float vLod;

性能预算

用时间线同时看提交和 GPU 变化。

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)); }