perf(terminal): draw webgl backdrops with quads

This commit is contained in:
zhangheng
2026-06-24 18:46:44 +08:00
parent fb1a6d5fe7
commit a1d5752d59
2 changed files with 289 additions and 58 deletions

View File

@@ -146,7 +146,7 @@
- WebGL2 初始化 shader/program/vertex buffer/atlas texture/fallback texture。
- `GlyphAtlas` 按 grapheme + bold/italic + cell width 缓存字形ASCII、CJK wide 字符、组合字符按 `unicode-segmentation` / `unicode-width` 拆成 cell glyph。
- 文本通过 per-cell quad 批量绘制,颜色作为 vertex attribute小字号不再走整屏纹理二次采样。
- 背景、underline、cursor 背景由 Canvas backdrop 绘制后作为底层 texture 合成cursor 前景文字仍进 atlas。
- 背景、underline、cursor 背景在 WebGL 正常路径中直接绘制为纯色 quadcursor 前景文字仍进 atlas。
- atlas 溢出或遇到不可拆分复杂段时自动回退整屏 Canvas texture避免真实终端内容白屏。
- WebGL2 不可用时自动落回 Canvas 2D。
2. **Canvas 2D 渲染器**
@@ -255,6 +255,10 @@
- WebGL render path 记录阶段耗时DOM/canvas 同步、backdrop 绘制、glyph collect、backdrop texture pass、glyph atlas、atlas upload、vertex build/upload、draw call。
- 记录计数cells、atlas entries、atlas insertions/resets、full-canvas fallback 次数、glyph draw failed 次数。
- `window.__terminalBench.webglFrames` 暴露每帧采样,`scripts/terminal-bench.mjs` 汇总为 `rendererStats`,用于判断慢点是整屏 backdrop texture、atlas、vertex buffer还是 fallback。
6. **WebGL backdrop texture pass 拆除**
- 正常 WebGL 路径不再每帧把 Canvas backdrop 上传为整屏 texture背景、underline、cursor 背景改为 1×1 白色纹理 + 纯色 quad 批量绘制。
- `backdropTextureMs` 只在复杂 glyph / atlas 失败等 full-canvas fallback 路径产生,用于继续观察 fallback 是否被真实内容触发。
- 页面切换、`?renderer=webgl``--renderer webgl` 保留,下一轮基准可直接对比这次优化后 WebGL 是否追近 Canvas。
---