时间戳

首页 > 解决方案 > Chrome WebGL 性能大相径庭？

performance - Chrome WebGL 性能大相径庭？

问题描述

function render(time, scene) {
    if (useFramebuffer) {
        gl.bindFramebuffer(gl.FRAMEBUFFER, scene.fb);
    }

    gl.viewport(0.0, 0.0, canvas.width, canvas.height);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.enable(gl.DEPTH_TEST);

    renderScene(scene);

    gl.disable(gl.DEPTH_TEST);
    if (useFramebuffer) {
        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
        copyFBtoBackBuffer(scene.fb);
    }

    window.requestAnimationFrame(function(time) {
        render(time, scene);
    });
}

我无法分享我使用的确切代码，但一个模型可以说明我的观点。

我正在渲染一个相当复杂的场景，并且还在 WebGL 中进行一些光线追踪。我注意到两个非常奇怪的性能问题。

1) 运行之间的帧速率不一致。有时，当页面开始在 25 毫秒内渲染前约 100 帧时，它会突然下降到 45 毫秒，没有任何用户输入或对场景进行更改。我不更新帧中的任何缓冲区或纹理数据，只更新着色器制服。当这种情况发生时，GPU 内存保持不变。

2) 渲染到默认帧缓冲区比使用额外通道要慢。如果我渲染到创建的帧缓冲区，然后将 blit 到 HTML 画布（默认帧缓冲区），我会获得 10% 的性能提升。所以在代码片段中，如果useFramebuffer == true获得了性能，这似乎很反直觉。

编辑1：

由于需求的变化，场景总是会渲染到帧缓冲区，然后复制到画布上。这使得问题 2) 不再是问题。

编辑2：

测试的 PC 系统规格：

编辑3：

我使用 chrome:tracing 对场景进行了分析。前约 100-200 帧渲染 16.6 毫秒。

快速部分

然后它开始丢帧。 缓慢的部分

我将尝试使用计时器查询来分析所有内容，但我担心每个渲染实际上需要相同的时间，并且缓冲区交换将随机花费两倍的时间。

我注意到的另一件事是，当我使用 Chrome 一段时间后，这种情况就开始发生了。当问题开始时，清除浏览器缓存或终止 Chrome 进程无济于事，只有重新启动系统才有用。

Chrome是否有可能一时兴起限制GPU？

PS 由于一些优化，帧时间发生了变化，但核心问题仍然存在。

标签： performancegoogle-chromewebgl

解决方案

推荐阅读