Komprimierte Texturformate

Verwendung

Sofern nicht anders angegeben, gilt dieser Artikel sowohl fr WebGL 1- als auch 2-Kontexte.

Wenn untersttzt, knnen Texturen im Videospeicher in einem komprimierten Format gespeichert werden. Dies ermglicht zustzliche Details, whrend der zustzliche bentigte Videospeicher begrenzt bleibt. Texturen werden im laufenden Betrieb entkomprimiert, wenn sie von einem Shader abgerufen werden. Beachten Sie, dass dieser Vorteil nicht auf die Netzwerkauslastung bertragbar ist: Whrend die Formate besser als unkomprimierte Daten sind, sind sie im Allgemeinen weit schlechter als Standard-Bildformate wie PNG und JPG.

Da komprimierte Texturen Hardwareuntersttzung erfordern, sind keine spezifischen Formate von WebGL vorgeschrieben; stattdessen kann ein Kontext je nach Hardwareuntersttzung verschiedene Formate verfgbar machen. Die WebGL Texture Tester Website zeigt, welche Formate im verwendeten Browser untersttzt werden.

Die Verwendung komprimierter Formate erfordert zunchst die Aktivierung der entsprechenden Erweiterung mit WebGLRenderingContext.getExtension(). Wenn untersttzt, wird ein Erweiterungsobjekt mit Konstanten fr die hinzugefgten Formate zurckgegeben und die Formate werden auch durch Aufrufe an gl.getParameter(gl.COMPRESSED_TEXTURE_FORMATS) zurckgegeben. (Z. B. ext.COMPRESSED_RGBA_S3TC_DXT1_EXT fr die WEBGL_compressed_texture_s3tc Erweiterung.) Diese knnen dann mit compressedTexImage[23]D oder compressedTexSubImage[23]D anstelle von texImage2D Aufrufen verwendet werden.

Beachten Sie, dass WebGL keine Funktionalitt bereitstellt, um Texturen zu komprimieren oder zu dekomprimieren: Sie mssen bereits in einem komprimierten Format vorliegen und knnen dann direkt in den Videospeicher hochgeladen werden.

Alle Formate untersttzen 2D-Texturen. Welche Formate die TEXTURE_2D_ARRAY- und TEXTURE_3D-Ziele (in Kombination mit compressedTexImage3D) untersttzen, ist in der folgenden Tabelle angegeben.

Beispiele

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;
  }
}