WebGLを使用してDDS（DXT3）テクスチャをImageDataに変換する

Question

WebGLを使用してDDS texture（主にDXT1とDXT3）をImageDataに変換しようとしています。ここに私のattemp ...

let ext = <WEBGL_compressed_texture_s3tc>gl.getExtension('WEBGL_compressed_texture_s3tc'); 

let texture = gl.createTexture(); 
gl.bindTexture(gl.TEXTURE_2D, texture); 

let fb = gl.createFramebuffer(); 
gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); 

gl.compressedTexImage2D(gl.TEXTURE_2D, 0, ext.COMPRESSED_RGBA_S3TC_DXT3_EXT, width, height, 0, sourceImage); 

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 

let data = new Uint8Array(width * height * 4); 

gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data); 
gl.deleteFramebuffer(fb); 

let image = new ImageData(new Uint8ClampedArray(data), width, height); 

GLがWebGLRenderingContextとsourceImage（Uint8Array）である

はDXT3形式のテクスチャではあります。ミップマップや何かがない。確かに、 thisスニペットを使ってこのテクスチャをレンダリングしようとしていて、うまくいきました。

コードは、次のエラー（Google Chromeの）でreadPixels機能で失敗：

[.Offscreen-FOR-WebGLの-000001F2F3C04690] GLのERROR ：GL_INVALID_FRAMEBUFFER_OPERATION：glReadPixels：フレームバッファ 不完全

もちろん私は答えを探していますが、成功することはありません。たぶんthisが役立つかもしれません。必要があれば、私はいくつかのテクスチャの例を提供することができます。

Answer 1

圧縮テクスチャ形式にはレンダリングできないため、フレームバッファに貼り付けると無効な操作エラーが発生します。非圧縮テクスチャをフレームバッファに添付し、DXTテクスチャからスクリーンスペースクワッドサンプリングを描画する必要があります。これと同じように：私が正しく理解していれば

let ext = <WEBGL_compressed_texture_s3tc>gl.getExtension('WEBGL_compressed_texture_s3tc'); 

// create framebuffer attachment texture 
let colorTarget = gl.createTexture(); 
gl.bindTexture(gl.TEXTURE_2D, colorTarget); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 
gl.texImage2D(
    gl.TEXTURE_2D, 
    0, 
    gl.RGBA, 
    width, 
    height, 
    0, 
    gl.RGBA, 
    gl.UNSIGNED_BYTE, 
    null 
); 
// setup framebuffer 
let fb = gl.createFramebuffer(); 
gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTarget, 0); 

// create and upload compressed texture 
let compressedTexture = gl.createTexture(); 
gl.bindTexture(gl.TEXTURE_2D, compressedTexture); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 
gl.compressedTexImage2D(gl.TEXTURE_2D, 0, ext.COMPRESSED_RGBA_S3TC_DXT3_EXT, width, height, 0, sourceImage); 

gl.viewport(0,0,width,height); 
//draw screenspace quad here 

// read back uncompressed color data 
let data = new Uint8Array(width * height * 4); 
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data); 

gl.deleteFramebuffer(fb); 

let imageData = new ImageData(new Uint8ClampedArray(data), width, height);