Comment puis-je redimensionner WebGLTexture en conservant le contenu?

Question

Je voudrais redimensionner une WebGLTexture qui est rendue en liant avec l'image précédente de Framebuffer.

J'ai essayé de redimensionner cette texture en utilisant texImage2D avec une nouvelle taille et en conservant les formats et le type.

Je sais que cela ne fonctionnera pas. Cela peut générer une nouvelle texture avec la taille effacée avec [0,0,0,0] pour des pixels entiers.

Comment redimensionner WebGLTexture en conservant le contenu?

Answer 1

Vous ne pouvez pas redimensionner une texture dans WebGL et ne pas perdre son contenu. Vous devez allouer une autre texture avec la taille désirée et copier les données de la vieille texture. Il y a deux façons de le faire: via un appel copyTexSubImage2D ou via un appel au tirage. Notez que la première nécessite que l'ancienne texture soit liée à un framebuffer, et la seconde - la nouvelle texture.

Supposons que votre contexte WebGL est gl, la vieille texture est oldTexture, framebuffer il est lié à oldFramebuffer est, nouvelle texture est newTexture et son framebuffer est newFramebuffer.

Avec copyTexSubImage2D vous pouvez faire quelque chose comme ceci:

gl.bindFramebuffer(gl.FRAMEBUFFER, oldFramebuffer); 
gl.bindTexture(gl.TEXTURE_2D, oldTexture); 
gl.copyTexSubImage2D(
    gl.TEXTTURE_2D, 
    0, 
    offsetInNewTextureX, 
    offsetInNewTextureY, 
    offsetInOldTextureX, 
    offsetInOldTextureY, 
    width, 
    height 
); 

Et fait! Notez cependant que cette méthode ne vous permettra pas de manipuler les données de texture, juste pour les copier de pixel à pixel.

La seconde façon est un peu plus complexe et nécessite des shaders que je ne vais pas lister ici. Fondamentalement, vous devez configurer votre contexte pour dessiner un quad texturé.

gl.activeTexture(gl.TEXTURE0); 
gl.bindTexture(gl.TEXTURE_2D, oldTexture); 
gl.uniform1i(shaderTextureUniformLocation, 0); 

gl.bindFramebuffer(gl.FRAMEBUFFER, newFramebuffer); 
gl.drawArrays(/* ... */); // Draw the quad. 

De cette façon, vous serez également capable de manipuler des données copiées, c'est-à-dire de les étirer.

J'ai essayé de redimensionner cette texture en utilisant texImage2D avec une nouvelle taille et en gardant les formats et le type.

Je sais que cela ne fonctionnera pas. Cela peut générer une nouvelle texture avec la taille effacée avec [0,0,0,0] pour des pixels entiers.

Oui, vous êtes exactement ici.