最大限度地提高WebGL2的使用率，而又不会使其过载

编程问答 2022-08-15

问题描述

我的Web应用程序进行了很长的计算，然后显示结果。我正在使用WebGL2进行计算-绘制到屏幕外 2D纹理。我不能简单地在单个WegGL调用中进行操作-计算将花费很长时间，并导致“丢失上下文”错误。 因此，我将计算分为矩形部分，每个部分都可以在短时间内绘制出来。

问题是安排这些WebGL调用。如果我经常这样做，浏览器可能会变得无响应或无法使用我的WebGL上下文。 如果我做得不够频繁，那么计算将花费比必要时间更长的时间。 我了解偶尔会丢失上下文是很正常的，我担心会系统地丢失上下文，因为我过多地使用了GPU。

我能想到的最好的方法是使工作与睡眠的比率和睡眠时间占我用于计算的时间的一小部分。我认为 我可以使用WebGL2同步对象来等待发出的调用完成并大致估计它们花费了多少时间。像这样：

var workSleepRatio = 0.5; // some value
var waitPeriod = 5;
var sync;
var startTime;

function makeSomeWebglCalls() {
    startTime = performance.now();
    sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE,0);
    for (<estimate how many rectangles we can do so as not to waste too much time on waiting>) {
        gl.drawArrays(); // draw next small rectangle
    }
    setTimeout(timerCb,waitPeriod);
}

function timerCb() {
    var status = gl.getSyncParameter(sync,gl.SYNC_STATUS);
    if (status != gl.SIGNALED) {
        setTimeout(timerCb,waitPeriod);
    } else {
        gl.deleteSync(sync);
        
        var workTime = performance.now() - startTime;
        setTimeout(makeSomeWebglCalls,Math.min(1000,workTime * workSleepRatio));
    }
}

makeSomeWebglCalls();

这种方法不是很好，并且存在以下问题：

  • 不知道将workSleepRatio设置为什么。
  • 在gpu工作完成和计时器回调之间浪费的时间。无法依赖gl.clientWaitSync，因为在许多浏览器中，即使在Web Worker线程中，其timeout参数也受零限制。
  • 无论我将workSleepRatio设置得有多大，我仍然不能确定浏览器不会认为我做得太多，也不会占用WebGL上下文。也许在请求节流时可以使用requestAnimationFrame来减慢它的速度，但是在等待计算完成时，用户无法切换选项卡。
  • setTimeout可能会被浏览器限制，并且睡眠时间会长于请求的时间。

因此，简而言之，我有以下问题：

  • 如何在不使WebGL过载但又不浪费时间的情况下利用WebGL？这有可能吗？
  • 如果不可能，那么还有更好的方法来解决问题吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

webgl2