WebGL 是否能够使用 GPU 的全部功能？

Question

我尝试了运行 GPU 密集型 WebGL 着色器，但无法让我的 GPU 在任务管理器中达到超过 30% 的峰值使用率，即使在访问像 this one which renders 30,000 fish复杂的环境。也许这是一个 WebGL 安全功能？是否有任何编程方式，即使它涉及禁用浏览器（任何浏览器）中的安全设置，也可以强制 WebGL 使用 100% 的 GPU？

Answer 1

你尝试了什么？使用 100% 的 GPU 功率是微不足道的。只需给它画一些需要很长时间的东西。您链接到的水族馆并非设计用于此目的。

这是一个简单的

const gl = document.createElement('canvas').getContext('webgl');
gl.canvas.width = 2048;
gl.canvas.height = 2048;
const vs = `
attribute vec4 position;
void main() {
  gl_Position = position;
}
`;
const fs = `
precision mediump float;
void main() {
  gl_FragColor = vec4(1);
}
`;
const quad =  [
  -1, -1,
   1, -1,
  -1,  1,
  -1,  1,
   1, -1,
   1,  1,
];
const maxQuads = 50000;
const quads = [];
for (let i = 0; i < maxQuads; ++i) {
  quads.push(...quad);
}

const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
  position: {
    data: quads,
    numComponents: 2,
  },
});

let count = 10;
function render() {
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  gl.useProgram(programInfo.program);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  gl.drawArrays(gl.TRIANGLES, 0, 6 * count);
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

document.querySelector('input').addEventListener('input', (e) =>  {
  count = Math.min(parseInt(e.target.value), maxQuads);
});

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
<p>increase number to increase GPU usage. Large numbers will get the browser or OS to reset the GPU.</p>
<input type="number" value="10">

对我来说，30 的值会使 GPU 饱和，并且还会使一切变慢（OS 也需要 GPU，但我们正在占用它）

在 30 时，每个绘制调用绘制 2048x2048x30 像素。即每次绘制调用 1.258 亿像素。

WebGL 是否能够使用 GPU 的全部功能？

Is WebGL capable of using the GPU's full power?

webgl