¿Cómo puede recuperar los datos de mapa de bits WebGL?

Question

Es posible recuperar el elemento HTML Canvas 2D de datos de mapa de bits, es también posible acceder al contenido representado de un elemento Canvas 3D / WebGL como datos de mapa de bits?

Answer 1

La firma de readPixels de WebGL ha cambiado en un proyecto más adelante.

En lugar de devolver una nueva matriz con los datos de cada pixel, se pasa una matriz para llenar como último argumento:

readPixels void (GLINT x, brillo y, ancho GLsizei, altura GLsizei, formato GLenum, tipo GLenum, los píxeles ArrayBufferView)

Esto permite reutilizar la misma matriz para las operaciones de múltiples readPixels.

Answer 2

Desde el borrador de trabajo de la WebGL Especificación :

ArrayBufferView readPixels(GLint x, GLint y, 
    GLsizei width, GLsizei height, GLenum format, GLenum type)

  

Vuelta un ArrayBufferView con píxeles   dentro del rectángulo que se pasa. Los datos   regresar de readPixels debe ser   hasta a la fecha a partir de la más reciente   enviado comando de dibujo. cualquier sin procesar   comandos de dibujo deben ser completados y   sus resultados presentados a la corriente   dibujo tampones antes readPixels   accede a la memoria intermedia de dibujo.

     

La subclase específica de   ArrayBufferView volvió depende   el tipo pasado. Si esto es   UNSIGNED_BYTE, un Uint8Array es   devuelto, de lo contrario un Uint16Array es   devuelto.

Answer 3

No es tan directo como el uso de readPixels, pero esto podría también trabajo. También puede hacer que el lienzo a un elemento de la imagen, así:

var img = document.getElementById("game-canvas").toDataURL("image/jpeg");
$("#shots").append("<img src=\"" + img + "\" width=\"320\" height=\"480\"/>");

Se tiene que conseguir su contexto webgl con la opción especial preserveDrawingContext para que esto funcione sin embargo:

var gl = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});

A partir de ahí, si se quiere manipular la imagen con facilidad, usted podría hacer que en un lienzo 2D y leer los píxeles allí si quieres.

Yo uso regularmente esta a tomar "imágenes" de las cosas que estoy jugando con.