Question

我开发了一些在屏幕上绘制了大量数据的网站。用户可以在数据之间拖放，放大和缩小。

我在计算机上使用一块好的图形卡运行它，并且交互非常顺畅。我在不同的图形卡上运行它，图像在我的鼠标光标后运行。几毫秒后，它回到正确的位置。

当我以前在openGL中编程时，我只使用了glFlush＆amp; glFinish方法等待所有GPU处理结束。 WebGL中也有相同的内容，但由于某些原因它无法正常工作。在openGL中使用这种方法会损害绘图速率，但对于我的用户来说，它比在光标后看到的图像更好。

在WebGL中还有其他技巧吗？

P.S。我正在使用最新版本的chrome。

Answer 1

如果您还没有，请确保您在requestAnimationFrame回调中完成所有绘图操作。也就是说，不要为了响应事件而重绘，而是在任何更改时安排单个回调。

// need to redraw
window.addEventListener('mousemove', function (event) {  // or whatever
  ... update drawing parameters, but don’t draw ...
  markDirty();
}, false);

...

var scheduled = false;
function markDirty() {
  if (!scheduled) {
    scheduled = true;
    requestAnimationFrame(draw);
  }
}

...

function draw() {
  scheduled = false;

  ... do WebGL things here ...
}

这将确保您没有比浏览器能够跟上的更多绘图（可能是您看到的延迟的原因），并且它是在浏览器可以安排的最佳时间发生的。

（如果您正在运行连续动画，而不仅仅是响应用户输入。请跳过我示例中的scheduled和markDirty部分，然后从requestAnimationFrame(draw);调用draw在{{1}}内。）

WebGL flush＆amp;完

1 个答案: