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

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.

See also

• Using WebGL extensions
• WebGLRenderingContext.compressedTexSubImage2D()
• WEBGL_compressed_texture_s3tc
• WEBGL_compressed_texture_s3tc_srgb
• WEBGL_compressed_texture_etc
• WEBGL_compressed_texture_pvrtc
• WEBGL_compressed_texture_etc1
• WEBGL_compressed_texture_atc
• WEBGL_compressed_texture_astc