WebGLRenderingContext：compressedTexImage2D() 方法

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本上运行。它自以下日期起在浏览器中可用： 2015 年 7 月.

compressedTexImage2D() 是 WebGLRenderingContext 接口（WebGL API 的一部分）的方法，用于指定压缩格式的二维纹理图像。

在使用这些方法之前，必须通过 WebGL 扩展 启用压缩图像格式。

语法

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

// Additionally available in WebGL 2:
// read from buffer bound to gl.PIXEL_UNPACK_BUFFER
compressedTexImage2D(target, level, internalformat, width, height, border, imageSize, offset)
compressedTexImage2D(target, level, internalformat, width, height, border, srcData)
compressedTexImage2D(target, level, internalformat, width, height, border, srcData, srcOffset)
compressedTexImage2D(target, level, internalformat, width, height, border, srcData, srcOffset, srcLengthOverride)

参数

target

一个 GLenum，指定活动纹理的绑定点（目标）。对于 compressedTexImage2D，可能的值包括：

  • 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，指定压缩图像格式。在使用此方法之前，必须通过 WebGL 扩展 启用压缩图像格式。所有值都可能用于 compressedTexImage2D。可能的值包括：

  • 使用 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_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，指定纹理的宽度。

height

一个 GLsizei，指定纹理的高度。

depth

一个 GLsizei，指定纹理的深度/TEXTURE_2D_ARRAY 中纹理的数量。

border

一个 GLint，指定边框的宽度。必须为 0。

imageSize

一个 GLsizei，指定要从绑定到 gl.PIXEL_UNPACK_BUFFER 的缓冲区中读取的字节数。

offset

一个 GLintptr，指定要从绑定到 gl.PIXEL_UNPACK_BUFFER 的缓冲区中读取的偏移量（以字节为单位）。

pixels

一个 TypedArray 或 DataView，用作内存中压缩图像数据的存储。

返回值

无 (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

浏览器兼容性

BCD 表仅在浏览器中加载。

另请参阅