Compressed texture formats
==========================

The WebGL API provides methods to use compressed texture formats. These are useful to increase texture detail while limiting the additional video memory necessary. By default, no compressed formats are available: a corresponding compressed texture format extension must first be enabled.

Usage
-----

Unless otherwise specified, this article applies to both WebGL 1 and 2 contexts.

If supported, textures can be stored in a compressed format in video memory. This allows for additional detail while limiting the added video memory necessary. Textures are uncompressed on the fly when being accessed by a shader. Note that this advantage doesn't translate to network bandwidth: while the formats are better than uncompressed data, they are in general far worse than standard image formats such as PNG and JPG.

As compressed textures require hardware support, therefore no specific formats are required by WebGL; instead, a context can make different formats available, depending on hardware support. This site shows which formats are supported in the used browser.

Usage of compressed formats first requires activating the respective extension with `WebGLRenderingContext.getExtension()`. If supported, it will return an extension object with constants for the added formats and the formats will also be returned by calls to `gl.getParameter(gl.COMPRESSED_TEXTURE_FORMATS)`. (E.g. `ext.COMPRESSED_RGBA_S3TC_DXT1_EXT` for the `WEBGL_compressed_texture_s3tc` extension.) These can then be used with `compressedTexImage[23]D` or `compressedTexSubImage[23]D` instead of `texImage2D` calls.

Note that WebGL makes no functionality available to compress or decompress textures: they must already be in a compressed format and can then be directly uploaded to video memory.

All formats support 2D textures. Which formats support `TEXTURE_2D_ARRAY` and `TEXTURE_3D` targets (in combination with `compressedTexImage3D`) are noted in the following table.

| Extension | Notes | TEXTURE\_2D\_ARRAY | TEXTURE\_3D |
| --- | --- | --- | --- |
| WEBGL\_compressed\_texture\_astc |  | Yes | Yes |
| WEBGL\_compressed\_texture\_etc |  | Yes | No |
| WEBGL\_compressed\_texture\_etc1\* | Not usable with compressedTexSubImage2D/copyTexSubImage2D. | No | No |
| WEBGL\_compressed\_texture\_pvrtc | Width and height must be powers of 2. | No | No |
| WEBGL\_compressed\_texture\_s3tc | Width and height must be multiples of 4. | Yes | No |
| WEBGL\_compressed\_texture\_s3tc\_srgb | Width and height must be multiples of 4. | ? | No |

Examples
--------


```js
async function getCompressedTextureIfAvailable(gl) {
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE\_2D, texture); // create texture object on GPU
  const ext = gl.getExtension("WEBGL\_compressed\_texture\_s3tc"); // will be null if not supported
  if (ext) {
    // the file is already in the correct compressed format
    const dataArrayBuffer = await fetch(
      "/textures/foobar512x512.RGBA\_S3TC\_DXT1",
    ).then((response) => response.arrayBuffer());
    gl.compressedTexImage2D(
      gl.TEXTURE\_2D,
      0, // set the base image level
      ext.COMPRESSED\_RGBA\_S3TC\_DXT1\_EXT, // the compressed format we are using
      512,
      512, // width, height of the image
      0, // border, always 0
      new DataView(dataArrayBuffer),
    );
    gl.generateMipMap(); // create mipmap levels, like we would for a standard image
    return texture;
  }
}
```