使用chrome：//跟踪分析WebGL

Question

我正在尝试提高延迟渲染器的FPS，因此我偶然发现了chrome：// tracing（here和here）。我为每个呈现的图层添加了console.time和console.timeEnd。你可以在这里看到它们：

http://i.imgur.com/Rh5jfpN.jpg

我的跟踪点是以node/...开头的最顶层项目，它们一起运行大约2毫秒。所有gl*次调用都在这两毫秒内完成。我目前的FPS约为38 FPS，一帧约为28ms。另一个用GPU处理缩小图片：

http://i.imgur.com/sM4aAXB.jpg

你仍然可以看到那里的痕迹点，顶部有小条。奇怪的是，Chrome可以非常快速地渲染两个帧，然后运行这个神秘的DoSwapBuffers / Onscreen任务，停止渲染约25毫秒，再加上与第二个重叠的MakeCurrent任务（如两个快速连续帧）帧，需要15ms。

在我看来，Chrome推迟了所有WebGL任务，因此无法进行任何类型的分析。但这只是我的猜测。如何处理这个以及如何分析我的WebGL代码？

Answer 1

由于 GPU 独立于 JS 主线程运行，因此只要渲染数据没有直接反馈到 JS 上下文中，它就不会同步到 JS 活动。所以发出任何 WebGL 命令都不会阻止 JavaScript 继续执行，并且只有 GPU 完成了 JS 发出的所有操作后才会呈现帧。

因此在此跟踪中不可能看到任何 WebGL 操作的实际计算时间。

然而，有一个简单的技巧：通过将一些与渲染相关的数据拉回 JS 世界来同步 JS 线程。最简单的方法是将每个中间纹理的一些像素渲染到 3D 画布，然后通过 2D 上下文 drawImage 方法将此画布转换为 2D 画布（并且确保通过 {{1 }}）。这种方法非常慢，并且会增加一些时间，同时还使所有 WebGL 绘制操作对分析/跟踪可见。 请注意，这也可能会在一定程度上扭曲结果，因为一切都将被迫按顺序计算，并且 GPU 驱动程序无法优化独立绘制以相互交错的操作。