阶段 5 · 进阶进阶22 分钟

查询：测量可见样本与 GPU 工作

Occlusion Query、Resolve 与可选时间戳

为两个对象记录遮挡查询，解析到缓冲区并读回；同时检查 timestamp-query 是否可用。

LEARNING GOALS

先明确本课目标

创建 occlusion query set

在 render pass 中开始与结束查询

解析并读取 64 位结果

MENTAL MODEL · 再建立心智模型

QuerySet 是 GPU 写入的小型统计槽；resolveQuerySet 把不可直接读取的查询结果转换到普通缓冲区。

MINIMAL EXAMPLE

如何测量 GPU 时间或判断物体是否可见？

QuerySet 保存 GPU 写入的查询槽。查询结果不能直接由 JavaScript 读取，要先 resolve 到 Buffer，再复制或映射到 CPU。timestamp-query 还是需要显式请求的可选特性。

最小例子javascript

const querySet = device.createQuerySet({
  type: 'occlusion',
  count: 2,
});

pass.beginOcclusionQuery(0);
pass.draw(vertexCount);
pass.endOcclusionQuery();

encoder.resolveQuerySet(querySet, 0, 1, resultBuffer, 0);

槽位每次查询写入 QuerySet 中一个明确索引。
Resolve 查询数据先解析进带 QUERY_RESOLVE usage 的 Buffer。
延迟读取 不要每帧立即等待结果；实际引擎常延迟数帧消费。

遮挡查询返回通过测试的样本数量；时间戳查询可估算 GPU Pass 耗时。

本课概念

GPUQuerySet Occlusion Query Timestamp Query resolveQuerySet +1 个

●OPTIONAL · 按需查阅完整术语表与概念边界

遇到陌生术语时再展开，不打断主线实验。

展开⌄

测量GPUQuerySetGPU 写入遮挡或时间戳结果的查询槽集合，需 resolve 到缓冲区后读取。测量Occlusion Query统计通过深度/模板测试的样本数，可辅助判断对象可见性。测量Timestamp Query可选特性，用 GPU 时间戳测量 pass 或命令区间，需显式请求 feature。测量BigUint64ArrayJavaScript 的 64 位无符号整数 TypedArray，适合解释时间戳等 u64 查询结果。测量resolveQuerySet把 GPUQuerySet 中不可直接映射的查询结果解析并复制到 GPUBuffer，之后才能进一步读回 CPU。

LIVE EXPERIMENT · 先获得反馈

边改边运行

浏览器加载后会激活代码编辑器、独立运行环境与实时输出。

本课挑战

用上一帧查询结果决定下一帧是否绘制对象。

DEEP DIVE · 实验之后

回到原理，解释刚才发生了什么

先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。

CORE IDEA

核心讲解

遮挡查询返回什么

结果表示通过深度/模板测试的样本数量，可用于近似判断对象是否可见，但读取结果会有延迟。

时间戳是可选特性

timestamp-query 需要在请求 Device 时显式启用，且不同平台的支持与计时精度可能不同。

●OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照

主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。

展开⌄

API COMPARISON

遮挡与计时查询概念相近，但 WebGPU 要显式 resolve 到 Buffer 后再读取。

WebGL

WebGLQuery 包围 draw，通过 getQueryParameter 轮询可用性与结果；计时通常依赖扩展。

WebGPU

GPUQuerySet 在 pass 中记录，resolveQuerySet 写 Buffer，再复制映射到 CPU。

保持延迟消费查询结果；两种 API 中同步等待当前帧查询都会破坏流水线。