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
GLenumspecifying the binding point (target) of the active texture. Possible values forcompressedTexImage2D: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_ARRAYgl.TEXTURE_3D
level- A
GLintspecifying the level of detail. Level 0 is the base image level and level n is the nth mipmap reduction level. internalformat- A
GLenumspecifying the compressed image format. Compressed image formats must be enabled by WebGL extensions before using this method. All values are possible forcompressedTexImage2D. See compressed texture formats for which are valid forcompressedTexImage3D. Possible values:- When using the
WEBGL_compressed_texture_s3tcextension:ext.COMPRESSED_RGB_S3TC_DXT1_EXText.COMPRESSED_RGBA_S3TC_DXT1_EXText.COMPRESSED_RGBA_S3TC_DXT3_EXText.COMPRESSED_RGBA_S3TC_DXT5_EXT
- When using the
WEBGL_compressed_texture_s3tc_srgbextension:ext.COMPRESSED_SRGB_S3TC_DXT1_EXText.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXText.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXText.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT
- When using the
WEBGL_compressed_texture_etcextension:ext.COMPRESSED_R11_EACext.COMPRESSED_SIGNED_R11_EACext.COMPRESSED_RG11_EACext.COMPRESSED_SIGNED_RG11_EACext.COMPRESSED_RGB8_ETC2ext.COMPRESSED_RGBA8_ETC2_EACext.COMPRESSED_SRGB8_ETC2ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EACext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2
- When using the
WEBGL_compressed_texture_pvrtcextension:ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMGext.COMPRESSED_RGBA_PVRTC_4BPPV1_IMGext.COMPRESSED_RGB_PVRTC_2BPPV1_IMGext.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG
- When using the
WEBGL_compressed_texture_etc1extension:ext.COMPRESSED_RGB_ETC1_WEBGL
- When using the
WEBGL_compressed_texture_atcextension:ext.COMPRESSED_RGB_ATC_WEBGLext.COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGLext.COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL
- When using the
WEBGL_compressed_texture_astcextension:ext.COMPRESSED_RGBA_ASTC_4x4_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHRext.COMPRESSED_RGBA_ASTC_5x4_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHRext.COMPRESSED_RGBA_ASTC_5x5_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHRext.COMPRESSED_RGBA_ASTC_6x5_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHRext.COMPRESSED_RGBA_ASTC_6x6_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHRext.COMPRESSED_RGBA_ASTC_8x5_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHRext.COMPRESSED_RGBA_ASTC_8x6_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHRext.COMPRESSED_RGBA_ASTC_8x8_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHRext.COMPRESSED_RGBA_ASTC_10x5_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHRext.COMPRESSED_RGBA_ASTC_10x6_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHRext.COMPRESSED_RGBA_ASTC_10x10_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHRext.COMPRESSED_RGBA_ASTC_12x10_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHRext.COMPRESSED_RGBA_ASTC_12x12_KHR ext.COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR
- When using the
EXT_texture_compression_bptcextension:ext.COMPRESSED_RGBA_BPTC_UNORM_EXText.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXText.COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXText.COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT
- When using the
EXT_texture_compression_rgtcextension:ext.COMPRESSED_RED_RGTC1_EXText.COMPRESSED_SIGNED_RED_RGTC1_EXText.COMPRESSED_RED_GREEN_RGTC2_EXText.COMPRESSED_SIGNED_RED_GREEN_RGTC2_EXT
- When using the
width- A
GLsizeispecifying the width of the texture. height- A
GLsizeispecifying the height of the texture. depth- A
GLsizeispecifying the depth of the texture/the number of textures in aTEXTURE_2D_ARRAY. border- A
GLintspecifying the width of the border. Must be 0. imageSize- A
GLsizeispecifying the number of bytes to read from the buffer bound togl.PIXEL_UNPACK_BUFFER. offset- A
GLintptrspecifying the offset in bytes from which to read from the buffer bound togl.PIXEL_UNPACK_BUFFER. pixels- An
ArrayBufferViewthat 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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
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
- Using WebGL extensions
WebGLRenderingContext.compressedTexSubImage2D()WEBGL_compressed_texture_s3tcWEBGL_compressed_texture_s3tc_srgbWEBGL_compressed_texture_etcWEBGL_compressed_texture_pvrtcWEBGL_compressed_texture_etc1WEBGL_compressed_texture_atcWEBGL_compressed_texture_astcEXT_texture_compression_bptcEXT_texture_compression_rgtc
WebGLRenderingContext.compressedTexImage[23D()] by Mozilla Contributors is licensed under CC-BY-SA 2.5.