Question

当加载几个大量的着色器程序时，webGl会对cpu造成很大的压力，使UI失速，有时甚至会触发chrome的cpu监视程序来杀死页面。

在此过程中，如何显示“加载”屏幕并限制我的处理器使用量，以便我不会被Chrome打伤？

relevant section of code，最终导致these actual webGL calls：

var p = this.program = gl.createProgram();
gl.attachShader(p, this.makeShader(gl.VERTEX_SHADER, vertex));
gl.attachShader(p, this.makeShader(gl.FRAGMENT_SHADER, fragment));
gl.linkProgram(p);

Answer 1

一些想法

您可以尝试等待几帧来检查结果

var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, vSource);
gl.compileShader(vs);
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, vSource);
gl.compileShader(fs);
var p = gl.createProgram();
gl.attachShader(p, vs);
gl.attachshader(p, fs);
gl.linkProgram(p);
gl.flush(); // Important!
setTimeout(checkResults, 2000);  // check results 2 seconds later

function checkResults() {
   var status = gl.getProgramParameter(p, gl.LINK_STATUS);
   ...
}

至少在Chrome中，这可能意味着GPU进程将编译程序，而Render进程（运行JavaScript的进程）将继续运行，因此至少JavaScript不会阻止，除非它当然没有完成当你检查结果时。

将内容分解为多个步骤

var tasks = [];

addTask(compileVertexShader);
addTask(compileFragmentShader);
addTask(linkProgram);
addTask(render);

function addTask(fn) {
  tasks.push(fn);
  runNextTask();
}

var taskRunning = false;
function runNextTask() {
  if (taskRunning) {
    return;
  }
  var taskFn = tasks.shift();
  if (taskFn) {
    taskRunning = true;
    setTimeout(function() {
      taskRunning = false;
      taskFn();
      runNextTask();
    }, 1);
  }
}

function compileVertexShader() {
  ...
}

function compileFragmentShader() {
  ...
}

function linkProgram() {
  ...
}

function render() {
  ...
}

只要一个功能不会花费太长时间，就不会有任何问题。

有一些常见的图书馆可以帮助解决这类问题。例如the async library。

如何避免webGL着色器加载对cpu施加过多负载

1 个答案: