Рендеринг WebGL вне времени рисования браузера - PullRequest
Новая
       1

Рендеринг WebGL вне времени рисования браузера

1 голос
/ 18 января 2020

Мы создаем приложение WebGL, которое имеет несколько объектов с высокой нагрузкой рендеринга. Есть ли способ, которым мы можем визуализировать эти объекты вне времени рисования браузера, то есть в фоновом режиме? Мы не хотим, чтобы наш FPS снижался, и возможен разрыв нашего процесса рендеринга (для разделения между кадрами).

1 Ответ

2 голосов
/ 18 января 2020

На ум приходят три идеи.

  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 холста. Холст webgl, которого нет в DOM. Вы визуализируете его во многих кадрах, и когда вы закончите, вы рисуете его на 2D-холст с ctx.drawImage(webglCanvas, ...) Это в основном то же самое, что и # 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>
Вы можете использовать OffscreenCanvas и визуализировать в работнике. Это поставляется только в Chrome.

Обратите внимание, что если вы используете DOS для GPU (слишком много работы с GPU), вы все равно можете повлиять на скорость отклика основного потока, поскольку большинство графических процессоров не поддерживают упреждающая многозадачность. Так что, если у вас много действительно тяжелой работы, разбейте ее на более мелкие задачи.

Например, если вы взяли один из самых тяжелых шейдеров от shadertoy.com, который работает с частотой 0,5 кадра в секунду при рендеринге в 1920x1080 Даже за кадром это заставит всю машину работать со скоростью 0,5 кадра в секунду. Чтобы исправить это, вам нужно визуализировать меньшие части в нескольких кадрах. Если он работает со скоростью 0,5 кадра в секунду, это говорит о том, что вам нужно разбить его по крайней мере на 120 меньших частей, а может и больше, чтобы обеспечить поддержку основного потока, а на 120 меньших частях вы будете видеть результаты только каждые 2 секунды.

На самом деле, пробуя это показывает некоторые проблемы. Вот пример Iq's Happy Jumping, нарисованный на 960 кадрах . Он по-прежнему не может поддерживать 60 кадров в секунду на моем Macbook Air конца 2018 года, даже при том, что он отображает только 2160 пикселей в кадре (2 столбца холста 1920x1080). Вероятно, проблема заключается в том, что некоторые части сцены должны быть глубоко задвинуты, и нет никакого способа узнать заранее, какие части сцены будут. Одна из причин, по которой шейдерные шейдеры в стиле, использующие поля расстояния со знаком, - это скорее игрушка (отсюда и shaderTOY), а не техника производственного стиля.

В любом случае, смысл в том, что если GPU слишком много работы, вы все равно получите неотзывчивую машину.

...