Comment extraire les données bitmap WebGL?

Question

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

Answer 1

La signature des readPixels de WebGL a été modifiée dans un brouillon ultérieur.

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

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

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

Answer 2

du projet de travail du WebGL Specification:

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

Retour un ArrayBufferView avec des pixels dans le rectangle passé. Les données renvoyées par readPixels doivent être mises à jour à la dernière commande de dessin envoyée . Toutes les commandes de dessin non traitées doivent être complétées et leurs résultats présentés aux tampons de dessin actuels avant que readPixels accède au tampon de dessin. La sous-classe spécifique de ArrayBufferView renvoyé dépend de le type passé. Si c'est UNSIGNED_BYTE, un Uint8Array est renvoyé , sinon un Uint16Array est renvoyé .

Answer 3

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

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 pouvez le faire dans un canvas 2d et lire les pixels si vous le souhaitez.

Je l'utilise régulièrement pour prendre des "captures d'écran" des choses avec lesquelles je joue.