1. Web
  2. Web API
  3. WebGLRenderingContext
  4. compressedTexImage2D()

WebGLRenderingContext: compressedTexImage2D() 方法

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

注意：此功能在 Web Workers 中可用。

WebGLRenderingContext 介面的 compressedTexImage2D() 方法是 WebGL API 的一部分，用於指定一個以壓縮格式表示的二維紋理影像。

壓縮影像格式只能透過 WebGL2RenderingContext 或某些 WebGL 擴充套件 來獲得。

語法

js
// WebGL 1:
compressedTexImage2D(target, level, internalformat, width, height, border, srcData)

// Additionally available in WebGL 2:
compressedTexImage2D(target, level, internalformat, width, height, border, srcData, srcOffset)
compressedTexImage2D(target, level, internalformat, width, height, border, srcData, srcOffset, srcLengthOverride)
compressedTexImage2D(target, level, internalformat, width, height, border, imageSize, offset)

引數

目標

一個 GLenum，指定活動壓縮紋理的繫結點（目標）。可能的值

  • gl.TEXTURE_2D：一個二維紋理。
  • gl.TEXTURE_CUBE_MAP_POSITIVE_X：立方體貼圖紋理的正 X 面。
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_X：立方體貼圖紋理的負 X 面。
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Y：立方體貼圖紋理的正 Y 面。
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Y：立方體貼圖紋理的負 Y 面。
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Z：立方體貼圖紋理的正 Z 面。
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Z：立方體貼圖紋理的負 Z 面。
level

一個 GLint，指定細節級別。級別 0 是基本影像級別，級別 n 是第 n 個 mipmap 縮減級別。

internalformat

一個 GLenum，指定壓縮影像格式。壓縮影像格式只能透過 WebGL2RenderingContext 或某些 WebGL 擴充套件 來獲得。可能的值

  • 使用 WebGL2RenderingContext 時

    • gl.GL_COMPRESSED_R11_EAC
    • gl.GL_COMPRESSED_SIGNED_R11_EAC
    • gl.GL_COMPRESSED_RG11_EAC
    • gl.GL_COMPRESSED_SIGNED_RG11_EAC
    • gl.GL_COMPRESSED_RGB8_ETC2
    • gl.GL_COMPRESSED_SRGB8_ETC2
    • gl.GL_COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2
    • gl.GL_COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2
    • gl.GL_COMPRESSED_RGBA8_ETC2_EAC
    • gl.GL_COMPRESSED_SRGB8_ALPHA8_ETC2_EAC

  • 使用 WEBGL_compressed_texture_s3tc 擴充套件時

    • ext.COMPRESSED_RGB_S3TC_DXT1_EXT
    • ext.COMPRESSED_RGBA_S3TC_DXT1_EXT
    • ext.COMPRESSED_RGBA_S3TC_DXT3_EXT
    • ext.COMPRESSED_RGBA_S3TC_DXT5_EXT

  • 使用 WEBGL_compressed_texture_s3tc_srgb 擴充套件時

    • 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

  • 使用 WEBGL_compressed_texture_etc 擴充套件時

    • 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

  • 使用 WEBGL_compressed_texture_pvrtc 擴充套件時

    • ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG
    • ext.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG
    • ext.COMPRESSED_RGB_PVRTC_2BPPV1_IMG
    • ext.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG

  • 使用 WEBGL_compressed_texture_etc1 擴充套件時

    • ext.COMPRESSED_RGB_ETC1_WEBGL

  • 使用 WEBGL_compressed_texture_astc 擴充套件時

    • 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

  • 使用 EXT_texture_compression_bptc 擴充套件時

    • ext.COMPRESSED_RGBA_BPTC_UNORM_EXT
    • ext.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT
    • ext.COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXT
    • ext.COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT

  • 使用 EXT_texture_compression_rgtc 擴充套件時

    • ext.COMPRESSED_RED_RGTC1_EXT
    • ext.COMPRESSED_SIGNED_RED_RGTC1_EXT
    • ext.COMPRESSED_RED_GREEN_RGTC2_EXT
    • ext.COMPRESSED_SIGNED_RED_GREEN_RGTC2_EXT
width

一個 GLsizei，指定紋理的寬度（以 texel 為單位）。

height

一個 GLsizei，指定紋理的高度（以 texel 為單位）。

depth

一個 GLsizei，指定紋理的深度/TEXTURE_2D_ARRAY 中紋理的數量。

border

一個 GLint，指定邊框的寬度。必須為 0。

紋理源可以透過兩種方式提供：使用 srcData、srcOffset 和 srcLengthOverride 從 ArrayBuffer（可能共享）提供；或者，在 WebGL 2 中，從 gl.PIXEL_UNPACK_BUFFER 使用 imageSize 和 offset 提供。

srcData

一個包含壓縮紋理資料的 TypedArray 或 DataView。

srcOffset 可選

（僅限 WebGL 2）一個整數，指定 srcData 開始讀取的索引。預設為 0。

srcLengthOverride 可選

(僅限 WebGL 2) 一個指定要讀取的 srcData 中元素數量的整數。預設為 srcData.length - srcOffset。

imageSize

(僅限 WebGL 2) 一個 GLsizei，指定影像資料的大小（以位元組為單位）。

offset

（僅限 WebGL 2）一個 GLintptr，指定繫結到 gl.PIXEL_UNPACK_BUFFER 的緩衝區中的起始地址。

返回值

無（undefined）。

示例

js
const ext =
  gl.getExtension("WEBGL_compressed_texture_s3tc") ||
  gl.getExtension("MOZ_WEBGL_compressed_texture_s3tc") ||
  gl.getExtension("WEBKIT_WEBGL_compressed_texture_s3tc");

const 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);

規範

規範
WebGL 規範
# COMPRESSEDTEXIMAGE2D

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者 更新。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤
© . Content available under a Creative Commons license.