WebGL - lecture des données de pixels à partir du tampon de rendu

Question

Existe-t-il un moyen d'obtenir les données de pixels brutes à partir d'un tampon de rendu WebGL ou d'un tampon d'image hors écran? J'utilise WebGL pour faire un traitement d'image, par exemple. flou d'une image, ajustement de la couleur, etc. J'utilise des tampons d'image pour rendre des textures à la taille d'image complète, puis j'utilise cette texture pour afficher dans la fenêtre d'affichage à une taille plus petite. Est-ce que je peux obtenir les données de pixel d'un tampon ou d'une texture pour pouvoir travailler dans un contexte 2d normal? Ou suis-je coincé avec la modification de la fenêtre d'affichage à la taille d'image complète et saisissant les données avec canvas.toDataURL()?

Merci.

Answer 1

Ceci est une question très ancienne, mais j'ai cherché la même chose dans three.js récemment. Il n'y a pas de moyen direct de rendre au frame buffer, mais en réalité c'est fait par render to texture (RTT). Je vérifie le code source de l'infrastructure et trouve le code suivant:

renderer.render(rttScene, rttCamera, rttTexture, true); 

// ... 

var width = rttTexture.width; 
var height = rttTexture.height; 
var pixels = new Uint8Array(4 * width * height); // be careful - allocate memory only once 

// ... 

var gl = renderer.context; 
var framebuffer = rttTexture.__webglFramebuffer; 
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);   
gl.viewport(0, 0, width, height); 
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels); 
gl.bindFramebuffer(gl.FRAMEBUFFER, null); 

Answer 2

readPixels() devrait faire ce que vous voulez. Lire la suite dans la spécification WebGL au http://www.khronos.org/registry/webgl/specs/latest/