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.