W3cubDocs

WebGLRenderingContext.compressedTexImage2D

The WebGLRenderingContext.compressedTexImage2D() method of the WebGL API specifies a two-dimensional texture image in a compressed format.

Compressed image formats must be enabled by WebGL extensions before using this method or a WebGL2RenderingContext must be used.

Syntax

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

// Additionally available in WebGL 2:
void gl.compressedTexImage2D(target, level, internalformat, width, height, border, GLintptr offset); 
void gl.compressedTexImage2D(target, level, internalformat, width, height, border, ArrayBufferView srcData, optional srcOffset, optional srcLengthOverride);

Parameters

target

A GLenum specifying the binding point (target) of the active texture. Possible values:

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.

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. 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_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

width

A GLsizei specifying the width of the texture.

height

A GLsizei specifying the height of the texture.

border

A GLint specifying the width of the border. Must be 0.

pixels

A ArrayBufferView that 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.0 The definition of 'compressedTexImage2D' in that specification.	Recommendation	Initial definition for WebGL.
OpenGL ES 2.0 The definition of 'glCompressedTexImage2D' in that specification.	Standard	Man page of the (similar) OpenGL ES 2.0 API.
OpenGL ES 3.0 The definition of 'glCompressedTexImage2D' in that specification.	Standard	Man page of the (similar) OpenGL ES 3.0 API.

Browser compatibility

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	9	12	4	11	12	5.1
`WebGL2`	56	No	51	No	43	No
`SharedArrayBuffer` as a parameter	60	?	?	?	47	?

Feature	Android webview	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic support	Yes	25	Yes	Yes	11	12	8.1
`WebGL2`	58	58	No	51	No	43	No
`SharedArrayBuffer` as a parameter	60	60	?	?	?	47	?