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

how to avoid webGL shader loading putting too much load on cpu

本文关键字：cpu 太多 负载 加载 webGL 何避免      更新时间：2023-09-26

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

在这种情况下，我能做些什么来显示"加载"屏幕，并限制我的处理器使用量，这样我就不会被chrome激怒？

相关的代码部分，最终导致这些实际的webGL调用：

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);

的几个想法

  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进程将编译程序，而渲染进程（运行JavaScript的进程）将继续运行，因此至少JavaScript不会被阻止，当然，除非在检查结果时还没有完成。

  2. 将东西分解为多个步骤

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

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

    有一些常见的库可以帮助处理这类事情。例如异步库。

相关文章：