How to use compressedTexSubImage2D with threejs Texture - three.js

Question

I try to make a TextureAtlas for threejs using compressedTexture but I cant find a way to get the correct format/internal format
The error I get is : glCompressedTexSubImage2D: format does not match internalformat.
I load the compressed texture from a THREE.KTXLoader and feed the update function of TextureAtlas with the mipmaps[0].data parsed from KTXLoader
The class is composed in 3 part :
constructor : setup the basic info of the texture
setRender( renderer ) : setup the renderer and utils for futur used
setSize : setup the size of my texture
update : update a part of the texture with a compressed texture
Here the full class :
class TextureAtlas extends THREE.Texture{
constructor() {
super()
this.magFilter = THREE.LinearFilter;
this.minFilter = THREE.LinearMipMapLinearFilter;
const canvas = document.createElement('canvas');
canvas.width = 1;
canvas.height = 1;
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(1, 1);
this.image = imageData
this.generateMipmaps = false
this.flipY = false
// this.unpackAlignment = 1
this.format = THREE.RGBAFormat
this.needsUpdate = true
this.isUpdatableTexture = true
}
setRenderer( renderer ) {
this.renderer = renderer;
this.gl = this.renderer.getContext()
this.ct = this.gl.getExtension("WEBGL_compressed_texture_s3tc");
this.utils = THREE.WebGLUtils(this.gl, this.renderer.extensions)
}
setSize( width, height ) {
if( width === this.width && height === this.height ) return;
if(!this.renderer){ return }
var textureProperties = this.renderer.properties.get( this );
if( !textureProperties.__webglTexture ) return;
this.width = width;
this.height = height;
var activeTexture = this.gl.getParameter( this.gl.TEXTURE_BINDING_2D );
this.gl.bindTexture( this.gl.TEXTURE_2D, textureProperties.__webglTexture );
if( !textureProperties.__webglTexture ) this.width = null;
this.gl.texImage2D(
this.gl.TEXTURE_2D,
0,
this.utils.convert( this.format ),
width,
height,
0,
this.utils.convert( this.format ),
this.utils.convert( this.type ),
null
);
this.gl.bindTexture( this.gl.TEXTURE_2D, activeTexture );
this.needsUpdate = true
}
update = ( pixels, x, y, width, height,format )=> {
// return
var textureProperties = this.renderer.properties.get( this );
if( !textureProperties.__webglTexture ) { return}
var activeTexture = this.gl.getParameter( this.gl.TEXTURE_BINDING_2D );
this.gl.bindTexture( this.gl.TEXTURE_2D, textureProperties.__webglTexture );
// WebGL 1 & 2:
// https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/compressedTexSubImage2D
// void gl.compressedTexSubImage2D(target, level, xoffset, yoffset, width, height, format, ArrayBufferView? pixels);
this.gl.compressedTexSubImage2D(
this.gl.TEXTURE_2D, // texture 2d 3d or cubemap
0, // level of details
0,//x, // left offset
0,//y, // top offset
width, // texture width
height, // texture height
this.utils.convert(this.ct.COMPRESSED_RGBA_S3TC_DXT5_EXT), // format of the compressed texture
pixels // ArrayBufferView
);
this.gl.generateMipmap( this.gl.TEXTURE_2D );
this.gl.bindTexture( this.gl.TEXTURE_2D, activeTexture );
this.needsUpdate = true
}
}