Web/API/WebGLRenderingContext/compressedTexImage2D

From Get docs


The WebGLRenderingContext.compressedTexImage2D()  and WebGL2RenderingContext.compressedTexImage3D() methods of the WebGL API specify a two- or three-dimensional texture image in a compressed format.

Compressed image formats must be enabled by WebGL extensions before using these methods.

Syntax

// WebGL 1:
void gl.compressedTexImage2D(target, level, internalformat, width, height, border, ArrayBufferView? pixels);

// Additionally available in WebGL 2: 
// read from buffer bound to gl.PIXEL_UNPACK_BUFFER
void gl.compressedTexImage2D(target, level, internalformat, width, height, border, GLsizei imageSize, GLintptr offset); 
void gl.compressedTexImage2D(target, level, internalformat, width, height, border,
                             ArrayBufferView srcData, optional srcOffset, optional srcLengthOverride);

 // read from buffer bound to gl.PIXEL_UNPACK_BUFFER
void gl.compressedTexImage3D(target, level, internalformat, width, height, depth, border, GLsizei imageSize, GLintptr offset); 
void gl.compressedTexImage3D(target, level, internalformat, width, height, depth, border, 
                             ArrayBufferView srcData, optional srcOffset, optional srcLengthOverride);

Parameters

target
A GLenum specifying the binding point (target) of the active texture. Possible values for compressedTexImage2D:
  • gl.TEXTURE_2D: A two-dimensional texture.
  • gl.TEXTURE_CUBE_MAP_POSITIVE_X: Positive X face for a cube-mapped texture.
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_X: Negative X face for a cube-mapped texture.
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Y: Positive Y face for a cube-mapped texture.
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Y: Negative Y face for a cube-mapped texture.
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Z: Positive Z face for a cube-mapped texture.
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Z: Negative Z face for a cube-mapped texture.

Possible values for compressedTexImage3D:

  • gl.TEXTURE_2D_ARRAY
  • gl.TEXTURE_3D
level
A GLint specifying the level of detail. Level 0 is the base image level and level n is the nth mipmap reduction level.
internalformat
A GLenum specifying the compressed image format. Compressed image formats must be enabled by WebGL extensions before using this method. All values are possible for compressedTexImage2D. See compressed texture formats for which are valid for compressedTexImage3D. Possible values:
  • When using the WEBGL_compressed_texture_s3tc extension:
    • ext.COMPRESSED_RGB_S3TC_DXT1_EXT
    • ext.COMPRESSED_RGBA_S3TC_DXT1_EXT
    • ext.COMPRESSED_RGBA_S3TC_DXT3_EXT
    • ext.COMPRESSED_RGBA_S3TC_DXT5_EXT
  • When using the WEBGL_compressed_texture_s3tc_srgb extension:
    • ext.COMPRESSED_SRGB_S3TC_DXT1_EXT
    • ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT
    • ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT
    • ext.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT
  • When using the WEBGL_compressed_texture_etc extension:
    • ext.COMPRESSED_R11_EAC
    • ext.COMPRESSED_SIGNED_R11_EAC
    • ext.COMPRESSED_RG11_EAC
    • ext.COMPRESSED_SIGNED_RG11_EAC
    • ext.COMPRESSED_RGB8_ETC2
    • ext.COMPRESSED_RGBA8_ETC2_EAC
    • ext.COMPRESSED_SRGB8_ETC2
    • ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC
    • ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2
    • ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2
  • When using the WEBGL_compressed_texture_pvrtc extension:
    • ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG
    • ext.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG
    • ext.COMPRESSED_RGB_PVRTC_2BPPV1_IMG
    • ext.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG
  • When using the WEBGL_compressed_texture_etc1 extension:
    • ext.COMPRESSED_RGB_ETC1_WEBGL
  • When using the WEBGL_compressed_texture_atc extension:
    • ext.COMPRESSED_RGB_ATC_WEBGL
    • ext.COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL
    • ext.COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL
  • When using the WEBGL_compressed_texture_astc extension:
    • ext.COMPRESSED_RGBA_ASTC_4x4_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR
    • ext.COMPRESSED_RGBA_ASTC_5x4_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR
    • ext.COMPRESSED_RGBA_ASTC_5x5_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR
    • ext.COMPRESSED_RGBA_ASTC_6x5_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR
    • ext.COMPRESSED_RGBA_ASTC_6x6_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR
    • ext.COMPRESSED_RGBA_ASTC_8x5_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR
    • ext.COMPRESSED_RGBA_ASTC_8x6_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR
    • ext.COMPRESSED_RGBA_ASTC_8x8_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR
    • ext.COMPRESSED_RGBA_ASTC_10x5_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR
    • ext.COMPRESSED_RGBA_ASTC_10x6_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR
    • ext.COMPRESSED_RGBA_ASTC_10x10_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR
    • ext.COMPRESSED_RGBA_ASTC_12x10_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR
    • ext.COMPRESSED_RGBA_ASTC_12x12_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR
  • When using the EXT_texture_compression_bptc extension:
    • ext.COMPRESSED_RGBA_BPTC_UNORM_EXT
    • ext.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT
    • ext.COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXT
    • ext.COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT
  • When using the EXT_texture_compression_rgtc extension:
    • ext.COMPRESSED_RED_RGTC1_EXT
    • ext.COMPRESSED_SIGNED_RED_RGTC1_EXT
    • ext.COMPRESSED_RED_GREEN_RGTC2_EXT
    • ext.COMPRESSED_SIGNED_RED_GREEN_RGTC2_EXT
width
A GLsizei specifying the width of the texture.
height
A GLsizei specifying the height of the texture.
depth
A GLsizei specifying the depth of the texture/the number of textures in a TEXTURE_2D_ARRAY.
border
A GLint specifying the width of the border. Must be 0.
imageSize
A GLsizei specifying the number of bytes to read from the buffer bound to gl.PIXEL_UNPACK_BUFFER.
offset
A GLintptr specifying the offset in bytes from which to read from the buffer bound to gl.PIXEL_UNPACK_BUFFER.
pixels
An ArrayBufferView that will be used as a data store for the compressed image data in memory.

Return value

None.

Examples

var ext = (
  gl.getExtension('WEBGL_compressed_texture_s3tc') ||
  gl.getExtension('MOZ_WEBGL_compressed_texture_s3tc') ||
  gl.getExtension('WEBKIT_WEBGL_compressed_texture_s3tc')
);

var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.compressedTexImage2D(gl.TEXTURE_2D, 0, ext.COMPRESSED_RGBA_S3TC_DXT5_EXT, 512, 512, 0, textureData); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

Specifications

Specification Status Comment
WebGL 1.0The definition of 'compressedTexImage2D' in that specification. Recommendation Initial definition for WebGL.
OpenGL ES 2.0The definition of 'glCompressedTexImage2D' in that specification. Standard Man page of the (similar) OpenGL ES 2.0 API.
OpenGL ES 3.0The definition of 'glCompressedTexImage2D' in that specification. Standard Man page of the (similar) OpenGL ES 3.0 API.

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

compressedTexImage2D

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
compressedTexImage2D Chrome

Full support 9

Edge

Full support 12

Firefox

Full support 4

IE

Full support 11

Opera

Full support 12

Safari

Full support 5.1

WebView Android

Full support Yes

Chrome Android

Full support 25

Firefox Android

Full support Yes

Opera Android

Full support 12

Safari iOS

Full support 8

Samsung Internet Android

Full support 1.5

SharedArrayBuffer as a parameter Chrome

Full support 60

Edge

Full support ≤79

Firefox

Full support 79

IE

?

Opera

Full support 47

Safari

?

WebView Android

Full support 60

Chrome Android

Full support 60

Firefox Android

?

Opera Android

Full support 44

Safari iOS

?

Samsung Internet Android

Full support 8.0

WebGL2 Chrome

Full support 56

Edge

Full support 79

Firefox

Full support 51

IE

No support No

Opera

Full support 43

Safari

No support No

WebView Android

Full support 58

Chrome Android

Full support 58

Firefox Android

Full support 51

Opera Android

Full support 43

Safari iOS

No support No

Samsung Internet Android

Full support 7.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown


compressedTexImage3D

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
compressedTexImage3D Chrome

Full support 56

Edge

Full support 79

Firefox

Full support 51

IE

No support No

Opera

Full support 43

Safari

No support No

WebView Android

Full support 58

Chrome Android

Full support 58

Firefox Android

Full support 51

Opera Android

Full support 43

Safari iOS

No support No

Samsung Internet Android

Full support 7.0

SharedArrayBuffer as a parameter Chrome

Full support 60

Edge

Full support 79

Firefox

Full support 79

IE

No support No

Opera

Full support 47

Safari

No support No

WebView Android

Full support 60

Chrome Android

Full support 60

Firefox Android

?

Opera Android

Full support 44

Safari iOS

No support No

Samsung Internet Android

Full support 8.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown


See also