WebGL readPixels с несколькими целями рендеринга - PullRequest
Новая
       110

WebGL readPixels с несколькими целями рендеринга

0 голосов
/ 19 июня 2020

Я использую MRT (Multiple Render Targets, drawBuffers, и т. Д. c) с использованием WebGL 1.0 (расширения) и в WebGL 2.0.

Как лучше всего читать пиксели () из указанного? c привязка привязанного цвета?

Все, что я могу придумать, - это создать еще один FBO с моей желаемой текстурой, установленной как COLOR_ATTACHMENT0, чтобы читать из нее.

Интересно, есть ли другой подход или лучший подход, который я ' м не видишь?

1 Ответ

1 голос
/ 20 июня 2020

Я не думаю, что есть лучший способ. В WebGL2 вы можете использовать gl.readBuffer, в WebGL1 и WebGL2 вы можете создать несколько кадровых буферов, по одному для каждой текстуры.

Вот их чтение, установив readBuffer. 

function main() {
  const gl = document.querySelector('canvas').getContext('webgl2');
  if (!gl) {
    return alert("need WebGL2");
  }
  
  const textures = [];
  const fb = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  for (let i = 0; i < 4; ++i) {
    const tex = gl.createTexture();
    textures.push(tex);
    gl.bindTexture(gl.TEXTURE_2D, tex);
    const width = 1;
    const height = 1;
    const level = 0;
    const data = new Uint8Array(4);
    data[i] = 255;
    gl.texImage2D(gl.TEXTURE_2D, level, gl.RGBA, width, height, 0, 
                  gl.RGBA, gl.UNSIGNED_BYTE, data);
    // attach texture to framebuffer
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i,
                            gl.TEXTURE_2D, tex, level);
  }
  
  // now try to read them
  for (let i = 0; i < textures.length; ++i) {
    gl.readBuffer(gl.COLOR_ATTACHMENT0 + i);
    const pixel = new Uint8Array(4);
    gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
    console.log(`${i}: ${pixel}`);
  }
}
main();
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
<canvas></canvas>

И чтение их фреймбуфером 

function main() {
  const gl = document.querySelector('canvas').getContext('webgl2');
  if (!gl) {
    return alert("need WebGL2");
  }
  
  const textures = [];
  const fb = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  for (let i = 0; i < 4; ++i) {
    const tex = gl.createTexture();
    textures.push(tex);
    gl.bindTexture(gl.TEXTURE_2D, tex);
    const width = 1;
    const height = 1;
    const level = 0;
    const data = new Uint8Array(4);
    data[i] = 255;
    gl.texImage2D(gl.TEXTURE_2D, level, gl.RGBA, width, height, 0, 
                  gl.RGBA, gl.UNSIGNED_BYTE, data);
    // attach texture to framebuffer
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i,
                            gl.TEXTURE_2D, tex, level);
  }
  
  const fbs = textures.map(tex => {
    const fb = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,
                            gl.TEXTURE_2D, tex, 0);
    return fb;
  });
  
  // now try to read them
  for (let i = 0; i < fbs.length; ++i) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, fbs[i]);
    const pixel = new Uint8Array(4);
    gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
    console.log(`${i}: ${pixel}`);
  }
}
main();
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
<canvas></canvas>
...