Сжатые форматы текстур

API WebGL предоставляет методы для использования сжатых форматов текстур. Это полезно для повышения детализации текстур при ограничении дополнительной видеопамяти. По умолчанию сжатые форматы недоступны: соответствующее расширение сжатого формата текстуры должно быть сначала включено.

Использование

Если не указано иное, эта статья относится как к контекстам WebGL 1, так и WebGL 2.

Если поддерживается, текстуры могут храниться в сжатом формате в видеопамяти. Это позволяет повысить детализацию при ограничении дополнительной видеопамяти. Текстуры распаковываются на лету при доступе к ним шейдером. Обратите внимание, что это преимущество не распространяется на пропускную способность сети: хотя форматы лучше, чем несжатые данные, они, как правило, гораздо хуже, чем стандартные форматы изображений, такие как PNG и JPG.

Поскольку сжатые текстуры требуют поддержки аппаратного обеспечения, WebGL не требует никаких конкретных форматов; вместо этого контекст может сделать доступными различные форматы в зависимости от поддержки аппаратного обеспечения. Этот сайт показывает, какие форматы поддерживаются в используемом браузере.

Для использования сжатых форматов сначала необходимо активировать соответствующее расширение с помощью WebGLRenderingContext.getExtension(). Если поддерживается, он вернёт объект расширения с константами для добавленных форматов, а форматы также будут возвращены при вызовах gl.getParameter(gl.COMPRESSED_TEXTURE_FORMATS). (Например, ext.COMPRESSED_RGBA_S3TC_DXT1_EXT для расширения WEBGL_compressed_texture_s3tc.) Затем эти константы можно использовать с compressedTexImage[23]D или compressedTexSubImage[23]D вместо вызовов texImage2D.

Обратите внимание, что WebGL не предоставляет функций для сжатия или распаковки текстур: они должны уже быть в сжатом формате и затем могут быть непосредственно загружены в видеопамять.

Все форматы поддерживают 2D-текстуры. Какие форматы поддерживают TEXTURE_2D_ARRAY и TEXTURE_3D целевые значения (в сочетании с compressedTexImage3D) указаны в следующей таблице.

Расширение	Примечания	TEXTURE_2D_ARRAY	TEXTURE_3D
WEBGL_compressed_texture_astc		Да	Да
WEBGL_compressed_texture_etc		Да	Нет
WEBGL_compressed_texture_etc1*	Не может использоваться с compressedTexSubImage2D/copyTexSubImage2D.	Нет	Нет
WEBGL_compressed_texture_pvrtc	Ширина и высота должны быть степенями двойки.	Нет	Нет
WEBGL_compressed_texture_s3tc	Ширина и высота должны быть кратными 4.	Да	Нет
WEBGL_compressed_texture_s3tc_srgb	Ширина и высота должны быть кратными 4.	?	Нет

Примеры

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(gl.TEXTURE_2D); // create mipmap levels, like we would for a standard image
    return texture;
  }
}

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Compressed_texture_formats