WebGLRenderingContext: texImage2D() 方法
WebGL API 的 **WebGLRenderingContext.texImage2D()
** 方法指定二维纹理图像。
语法
// 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 中其他可能的值,用于采用
TypedArray
或DataView
或GLintptr offset
的texImage2D
版本大小
格式基础
格式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 中其他可能的值,用于采用纹理、
HTMLImageElement
、HTMLCanvasElement
、HTMLVideoElement
、ImageBitmap
或ImageData
的texImage2D
版本-
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
)
像素
-
以下类型始终可用作纹理的像素源
以下类型仅在指定了
width
、height
和border
时可用作像素源Uint8Array
(如果type
为gl.UNSIGNED_BYTE
,则必须使用)-
Uint16Array
(如果type
为gl.UNSIGNED_SHORT_5_6_5
、gl.UNSIGNED_SHORT_4_4_4_4
、gl.UNSIGNED_SHORT_5_5_5_1
、gl.UNSIGNED_SHORT
或ext.HALF_FLOAT_OES
,则必须使用) Uint32Array
(如果type
为gl.UNSIGNED_INT
或ext.UNSIGNED_INT_24_8_WEBGL
,则必须使用)Float32Array
(如果type
为gl.FLOAT
,则必须使用)
偏移量
-
(仅限 WebGL 2)
GLintptr
字节偏移量,指向WebGLBuffer
的数据存储区。用于从绑定到PIXEL_UNPACK_BUFFER
目标的WebGLBuffer
将数据上传到当前绑定的WebGLTexture
。
返回值
无(undefined
).
示例
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 表格仅在浏览器中加载
另请参阅
WebGLRenderingContext.createTexture()
WebGLRenderingContext.bindTexture()
WebGLRenderingContext.texSubImage2D()
WebGLRenderingContext.compressedTexImage2D()
WebGLRenderingContext.copyTexImage2D()
WebGLRenderingContext.getTexParameter()
WEBGL_depth_texture
OES_texture_float
OES_texture_half_float
EXT_texture_norm16
EXT_sRGB