WebGL 渲染在浏览器绘制时间之外

Question

我们正在构建一个WebGL应用程序，它有一些高渲染负载对象。有没有办法在浏览器绘制时间之外(即在后台(渲染这些对象？我们不希望我们的 FPS 下降，并且可能会破坏我们的渲染过程(在帧之间拆分(。

Answer 1

我想到了三个想法。

1. 您可以通过多个帧上的帧缓冲渲染到纹理，完成后将该纹理渲染到画布。

const gl = document.querySelector('canvas').getContext('webgl');
const vs = `
attribute vec4 position;
attribute vec2 texcoord;
varying vec2 v_texcoord;
void main() {
gl_Position = position;
v_texcoord = texcoord;
}
`;
const fs = `
precision highp float;
uniform sampler2D tex;
varying vec2 v_texcoord;
void main() {
gl_FragColor = texture2D(tex, v_texcoord);
}
`;
// compile shader, link program, look up locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
// gl.createBuffer, gl.bindBuffer, gl.bufferData
const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
position: {
numComponents: 2,
data: [
-1, -1,
1, -1,
-1,  1,
-1,  1,
1, -1,
1,  1,
],
},
texcoord: {
numComponents: 2,
data: [
0,  0,
1,  0,
0,  1,
0,  1,
1,  0,
1,  1,
],  
},
});
// create a framebuffer with a texture and depth buffer
// same size as canvas
// gl.createTexture, gl.texImage2D, gl.createFramebuffer
// gl.framebufferTexture2D
const framebufferInfo = twgl.createFramebufferInfo(gl);
const infoElem = document.querySelector('#info');
const numDrawSteps = 16;
let drawStep = 0;
let time = 0;
// draw over several frames. Return true when ready
function draw() {
// draw to texture
// gl.bindFrambuffer, gl.viewport
twgl.bindFramebufferInfo(gl, framebufferInfo);

if (drawStep == 0) {
// on the first step clear and record time
gl.disable(gl.SCISSOR_TEST);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT  | gl.DEPTH_BUFFER_BIT);
time = performance.now() * 0.001;
}

// this represents drawing something. 
gl.enable(gl.SCISSOR_TEST);

const halfWidth = framebufferInfo.width / 2;
const halfHeight = framebufferInfo.height / 2;

const a = time * 0.1 + drawStep
const x = Math.cos(a      ) * halfWidth + halfWidth;
const y = Math.sin(a * 1.3) * halfHeight + halfHeight;
gl.scissor(x, y, 16, 16);
gl.clearColor(
drawStep / 16,
drawStep / 6 % 1,
drawStep / 3 % 1,
1);
gl.clear(gl.COLOR_BUFFER_BIT);

drawStep = (drawStep + 1) % numDrawSteps;
return drawStep === 0;
}
let frameCount = 0;
function render() {
++frameCount;
infoElem.textContent = frameCount;

if (draw()) {
// draw to canvas
// gl.bindFramebuffer, gl.viewport
twgl.bindFramebufferInfo(gl, null);

gl.disable(gl.DEPTH_TEST);
gl.disable(gl.BLEND);
gl.disable(gl.SCISSOR_TEST);

gl.useProgram(programInfo.program);

// gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);

// gl.uniform...
twgl.setUniformsAndBindTextures(programInfo, {
tex: framebufferInfo.attachments[0],
});

// draw the quad
gl.drawArrays(gl.TRIANGLES, 0, 6);
}

requestAnimationFrame(render);
}
requestAnimationFrame(render);

<canvas></canvas>
<div id="info"></div>
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>

2. 你可以制作2张画布。不在 DOM 中的 webgl 画布。您可以在许多帧上渲染它，完成后，您将它绘制到带有ctx.drawImage(webglCanvas, ...)的 2D 画布上 这与#1基本相同，只是您让浏览器"将该纹理渲染到画布"部分

const ctx = document.querySelector('canvas').getContext('2d');
const gl = document.createElement('canvas').getContext('webgl');
const vs = `
attribute vec4 position;
attribute vec2 texcoord;
varying vec2 v_texcoord;
void main() {
gl_Position = position;
v_texcoord = texcoord;
}
`;
const fs = `
precision highp float;
uniform sampler2D tex;
varying vec2 v_texcoord;
void main() {
gl_FragColor = texture2D(tex, v_texcoord);
}
`;
// compile shader, link program, look up locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
const infoElem = document.querySelector('#info');
const numDrawSteps = 16;
let drawStep = 0;
let time = 0;
// draw over several frames. Return true when ready
function draw() {  
if (drawStep == 0) {
// on the first step clear and record time
gl.disable(gl.SCISSOR_TEST);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT  | gl.DEPTH_BUFFER_BIT);
time = performance.now() * 0.001;
}

// this represents drawing something. 
gl.enable(gl.SCISSOR_TEST);

const halfWidth = gl.canvas.width / 2;
const halfHeight = gl.canvas.height / 2;

const a = time * 0.1 + drawStep
const x = Math.cos(a      ) * halfWidth + halfWidth;
const y = Math.sin(a * 1.3) * halfHeight + halfHeight;
gl.scissor(x, y, 16, 16);
gl.clearColor(
drawStep / 16,
drawStep / 6 % 1,
drawStep / 3 % 1,
1);
gl.clear(gl.COLOR_BUFFER_BIT);

drawStep = (drawStep + 1) % numDrawSteps;
return drawStep === 0;
}
let frameCount = 0;
function render() {
++frameCount;
infoElem.textContent = frameCount;

if (draw()) {
// draw to canvas
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(gl.canvas, 0, 0);
}

requestAnimationFrame(render);
}
requestAnimationFrame(render);

<canvas></canvas>
<div id="info"></div>
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>

3. 您可以使用 OffscreenCanvas 并在 worker 中渲染。不过，这仅在Chrome中提供。

请注意，如果您DOS了GPU(给GPU太多的工作(，您仍然会影响主线程的响应能力，因为大多数GPU不支持抢占式多任务处理。所以，如果你有很多非常繁重的工作，那就把它分成更小的任务。

例如，如果您从 shadertoy.com 中选取了最重的着色器之一，当以 1920x1080 渲染时，该着色器以 0.5 fps 的速度运行，即使在屏幕外，它也会强制整个机器以 0.5 fps 的速度运行。要修复，您需要在几帧上渲染较小的部分。如果它以 0.5 fps 的速度运行，这表明您需要将其拆分为至少 120 个较小的部分，也许更多，以保持主线程的响应，而在 120 个较小的部分时，您只能每 2 秒看到一次结果。

事实上，尝试一下会发现一些问题。这是智商的快乐跳跃示例，绘制了 960 多帧。它仍然无法在我的 2018 年末的 Macbook Air 上保持 60fps，即使它每帧仅渲染 2160 像素(1920x1080 画布的 2 列(。问题可能是场景的某些部分必须深入递归，并且事先无法知道场景的哪些部分会是。使用带符号距离字段的着色器样式着色器更像是一种玩具(因此 shaderTOY(而不是实际上是一种生产风格技术的原因之一。

无论如何，重点是如果你给GPU太多的工作，你仍然会得到一台反应迟钝的机器。