Javascript 如何避免webGL着色器加载给cpu带来过多负载

当加载几个强大的着色器程序时，webGl会给cpu带来很大的压力，使UI暂停，有时甚至会触发chrome的cpu监视器，从而杀死页面

在这种情况下，我可以做些什么来显示“加载”屏幕，并限制我的处理器使用量，这样我就不会被chrome搞糊涂了

，最终导致：

一些想法

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

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进程将编译程序，而渲染进程（运行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() {
  ...
}    

只要一个函数不需要太长时间，就不会有任何问题

有一些常用的库可以帮助您处理此类内容。比如说

---

谢谢你的建议！我将尝试一下其中的一些方法，并用最有效的方法进行报告。

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() {
  ...
}