Comment récupérer les données bitmap WebGL?

Question

Il est possible de récupérer les données bitmap élément HTML Canvas 2D, il est également possible d'accéder au contenu rendu d'un élément de toile 3D / WebGL sous forme de données bitmap?

Answer 1

La signature des readPixels de WebGL a changé dans un projet plus tard.

Au lieu de retourner un nouveau tableau avec les données de pixel à chaque fois, vous passez un tableau à remplir en dernier argument:

readPixels void (GLINT x, y Brill, largeur GLsizei, hauteur GLsizei, le format GLenum, type GLenum, ArrayBufferView pixels)

Cela permet de réutiliser le même tableau pour plusieurs opérations readPixels.

Answer 2

Dans le projet de travail de WebGL Spécification :

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

  

Retourner un ArrayBufferView avec des pixels   dans le rectangle passé. Les données   retour de readPixels doit être   la mise à jour à la plus récente   commande de dessin envoyé. tout l'état brut   commandes de dessin doivent être remplis et   leurs résultats ont été présentés au courant   dessin des tampons avant readPixels   accède à la mémoire tampon de dessin.

     

La sous-classe spécifique de   ArrayBufferView retourné dépend   le type passé. Si c'est   UNSIGNED_BYTE, un Uint8Array est   retourné, sinon un Uint16Array est   retour.

Answer 3

pas aussi direct que l'utilisation readPixels, mais cela pourrait aussi fonctionner. Vous pouvez également rendre la toile à un élément d'image, comme suit:

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

Vous devez obtenir votre contexte WebGL avec l'option spéciale preserveDrawingContext pour que cela fonctionne bien:

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

A partir de là, si vous voulez manipuler l'image facilement, vous pourriez rendre que dans une toile 2d et lire les pixels là-bas si vous voulez.

Je l'utilise régulièrement pour prendre ce « screenshots » des choses que je joue avec.