WebGLRenderingContext: texImage2D() 方法

基线 广泛可用

此功能已得到良好建立,并且可以在许多设备和浏览器版本中使用。它自以下日期起在各浏览器中可用: 2015 年 7 月.

WebGL API 的 **WebGLRenderingContext.texImage2D()** 方法指定二维纹理图像。

语法

js
// WebGL1
texImage2D(target, level, internalformat, width, height, border, format, type, pixels)
texImage2D(target, level, internalformat, format, type, pixels)


// WebGL2
texImage2D(target, level, internalformat, width, height, border, format, type, offset)
texImage2D(target, level, internalformat, width, height, border, format, type, source)
texImage2D(target, level, internalformat, width, height, border, format, type, srcData, srcOffset)

参数

target

指定活动纹理绑定点 (目标) 的 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

WebGL1 和 WebGL2 中可能的值

格式 类型 通道 每个像素的字节数
RGBA UNSIGNED_BYTE 4 4
RGB UNSIGNED_BYTE 3 3
RGBA UNSIGNED_SHORT_4_4_4_4 4 2
RGBA UNSIGNED_SHORT_5_5_5_1 4 2
RGB UNSIGNED_SHORT_5_6_5 3 2
LUMINANCE_ALPHA UNSIGNED_BYTE 2 2
LUMINANCE UNSIGNED_BYTE 1 1
ALPHA UNSIGNED_BYTE 1 1

WebGL2 中其他可能的值,用于采用 TypedArrayDataViewGLintptr offsettexImage2D 版本

大小
格式
基础
格式
R
G
B
A
共享
颜色
可渲染
纹理
可过滤
R8 RED 8
R8_SNORM RED s8
RG8 RG 8 8
RG8_SNORM RG s8 s8
RGB8 RGB 8 8 8
RGB8_SNORM RGB s8 s8 s8
RGB565 RGB 5 6 5
RGBA4 RGBA 4 4 4 4
RGB5_A1 RGBA 5 5 5 1
RGBA8 RGBA 8 8 8 8
RGBA8_SNORM RGBA s8 s8 s8 s8
RGB10_A2 RGBA 10 10 10 2
RGB10_A2UI RGBA ui10 ui10 ui10 ui2
SRGB8 RGB 8 8 8
SRGB8_ALPHA8 RGBA 8 8 8 8
R16F RED f16
RG16F RG f16 f16
RGB16F RGB f16 f16 f16
RGBA16F RGBA f16 f16 f16 f16
R32F RED f32
RG32F RG f32 f32
RGB32F RGB f32 f32 f32
RGBA32F RGBA f32 f32 f32 f32
R11F_G11F_B10F RGB f11 f11 f10
RGB9_E5 RGB 9 9 9 5
R8I RED i8
R8UI RED ui8
R16I RED i16
R16UI RED ui16
R32I RED i32
R32UI RED ui32
RG8I RG i8 i8
RG8UI RG ui8 ui8
RG16I RG i16 i16
RG16UI RG ui16 ui16
RG32I RG i32 i32
RG32UI RG ui32 ui32
RGB8I RGB i8 i8 i8
RGB8UI RGB ui8 ui8 ui8
RGB16I RGB i16 i16 i16
RGB16UI RGB ui16 ui16 ui16
RGB32I RGB i32 i32 i32
RGB32UI RGB ui32 ui32 ui32
RGBA8I RGBA i8 i8 i8 i8
RGBA8UI RGBA ui8 ui8 ui8 ui8
RGBA16I RGBA i16 i16 i16 i16
RGBA16UI RGBA ui16 ui16 ui16 ui16
RGBA32I RGBA i32 i32 i32 i32
RGBA32UI RGBA ui32 ui32 ui32 ui32

WebGL2 中其他可能的值,用于采用纹理、HTMLImageElementHTMLCanvasElementHTMLVideoElementImageBitmapImageDatatexImage2D 版本

  • gl.ALPHA:丢弃红色、绿色和蓝色组件,并读取 alpha 组件。
  • gl.RGB:丢弃 alpha 组件,并读取红色、绿色和蓝色组件。
  • gl.RGBA:从颜色缓冲区读取红色、绿色、蓝色和 alpha 组件。
  • gl.LUMINANCE:每个颜色组件都是亮度组件,alpha 为 1.0。
  • gl.LUMINANCE_ALPHA:每个组件都是亮度/alpha 组件。

使用 WEBGL_depth_texture 扩展时

  • gl.DEPTH_COMPONENT
  • gl.DEPTH_STENCIL

使用 EXT_sRGB 扩展时

  • ext.SRGB_EXT
  • ext.SRGB_ALPHA_EXT

在使用 WebGL 2 上下文 时,以下值也可使用

  • gl.R8
  • gl.R16F
  • gl.R32F
  • gl.R8UI
  • gl.RG8
  • gl.RG16F
  • gl.RG32F
  • gl.RG8UI
  • gl.RG16UI
  • gl.RG32UI
  • gl.RGB8
  • gl.SRGB8
  • gl.RGB565
  • gl.R11F_G11F_B10F
  • gl.RGB9_E5
  • gl.RGB16F
  • gl.RGB32F
  • gl.RGB8UI
  • gl.RGBA8
  • gl.SRGB8_ALPHA8
  • gl.RGB5_A1
  • gl.RGB10_A2
  • gl.RGBA4
  • gl.RGBA16F
  • gl.RGBA32F
  • gl.RGBA8UI
width

指定纹理宽度的 GLsizei

height

指定纹理高度的 GLsizei

border

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

format

指定纹素数据格式的 GLenum。在 WebGL 1 中,这必须与 internalformat 相同(见上文)。在 WebGL 2 中,组合列在 此表 中。

type

指定纹素数据类型的 GLenum。可能的值

  • gl.UNSIGNED_BYTE:对于 gl.RGBA,每个通道 8 位。
  • gl.UNSIGNED_SHORT_5_6_5:5 位红色,6 位绿色,5 位蓝色。
  • gl.UNSIGNED_SHORT_4_4_4_4:4 位红色,4 位绿色,4 位蓝色,4 位 alpha。
  • gl.UNSIGNED_SHORT_5_5_5_1:5 位红色,5 位绿色,5 位蓝色,1 位 alpha。

使用 WEBGL_depth_texture 扩展时

  • gl.UNSIGNED_SHORT
  • gl.UNSIGNED_INT
  • ext.UNSIGNED_INT_24_8_WEBGL(扩展提供的常量)
  • 使用 OES_texture_float 扩展时
    • gl.FLOAT

使用 OES_texture_half_float 扩展时

  • ext.HALF_FLOAT_OES(扩展提供的常量)

在使用 WebGL 2 上下文 时,以下值也可使用

  • gl.BYTE
  • gl.UNSIGNED_SHORT
  • gl.SHORT
  • gl.UNSIGNED_INT
  • gl.INT
  • gl.HALF_FLOAT
  • gl.FLOAT
  • gl.UNSIGNED_INT_2_10_10_10_REV
  • gl.UNSIGNED_INT_10F_11F_11F_REV
  • gl.UNSIGNED_INT_5_9_9_9_REV
  • gl.UNSIGNED_INT_24_8
  • gl.FLOAT_32_UNSIGNED_INT_24_8_REV(像素必须为null
像素

以下类型始终可用作纹理的像素源

以下类型仅在指定了widthheightborder时可用作像素源

  • Uint8Array(如果typegl.UNSIGNED_BYTE,则必须使用)
  • Uint16Array(如果typegl.UNSIGNED_SHORT_5_6_5gl.UNSIGNED_SHORT_4_4_4_4gl.UNSIGNED_SHORT_5_5_5_1gl.UNSIGNED_SHORText.HALF_FLOAT_OES,则必须使用)
  • Uint32Array(如果typegl.UNSIGNED_INText.UNSIGNED_INT_24_8_WEBGL,则必须使用)
  • Float32Array(如果typegl.FLOAT,则必须使用)
偏移量

(仅限 WebGL 2)GLintptr 字节偏移量,指向WebGLBuffer的数据存储区。用于从绑定到PIXEL_UNPACK_BUFFER目标的WebGLBuffer将数据上传到当前绑定的WebGLTexture

返回值

无(undefined).

示例

js
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

规范

规范
WebGL 规范
# 5.14.8
WebGL 2.0 规范
# 3.7.6

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅