WebGLRenderingContext.texImage2D()

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

语法

// WebGL1:
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ArrayBufferView? pixels);
void gl.texImage2D(target, level, internalformat, format, type, ImageData? pixels);
void gl.texImage2D(target, level, internalformat, format, type, HTMLImageElement? pixels);
void gl.texImage2D(target, level, internalformat, format, type, HTMLCanvasElement? pixels);
void gl.texImage2D(target, level, internalformat, format, type, HTMLVideoElement? pixels);
void gl.texImage2D(target, level, internalformat, format, type, ImageBitmap? pixels);

// WebGL2:
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, GLintptr offset);
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, HTMLCanvasElement source);
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, HTMLImageElement source); 
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, HTMLVideoElement source); 
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ImageBitmap source);
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ImageData source);
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ArrayBufferView 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个金字塔简化级.
internalformat
 GLenum 指定纹理中的颜色组件.
在 WebGL1 和 WebGL2 中可能的值:
Format Type Channels Bytes per pixel
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 中,对带有 ArrayBufferView 或 GLintptr offset的  texImage2D 版本,其它可能的值
Sized
Format
Base
Format
R
bits
G
bits
B
bits
A
bits
Shared
bits
Color
renderable
Texture
filterable
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: E每个颜色组件是一个亮度组件,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 context, 另外还提供以下值:
    • 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 指定texel数据格式。在 WebGL 1中,它必须与 internalformat 相同(查看上面). 在WebGL 2中, 这张表中列出了这些组合。
type
 GLenum 指定texel数据的数据类型。可能的值:
  • gl.UNSIGNED_BYTE:  gl.RGBA每个通道8位
  • gl.UNSIGNED_SHORT_5_6_5: 5 bits红, 6 bits绿, 5 bits蓝
  • gl.UNSIGNED_SHORT_4_4_4_4: 4 bits红, 4 bits绿, 4 bits蓝, 4 alpha bits.
  • gl.UNSIGNED_SHORT_5_5_5_1: 5 bits红, 5 bits绿, 5 bits蓝, 1 alpha bit.
  • 当使用 WEBGL_depth_texture 扩展:
    • gl.UNSIGNED_SHORT
    • gl.UNSIGNED_INT
    • ext.UNSIGNED_INT_24_8_WEBGL (constant provided by the extension)
  • 当使用 OES_texture_float扩展 :
    • gl.FLOAT
  • 当使用 OES_texture_half_float 扩展:
    • ext.HALF_FLOAT_OES (constant provided by the extension)
  • 当使用 WebGL 2 context,下面的值也是可用的:
    • 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 (pixels must be null)
pixels
下列对象之一可以用作纹理的像素源:
offset
 GLintptr 类型偏移到 WebGLBuffer的数据存储中。 用于上传数据到当前范围 WebGLTextureWebGLBuffer 范围到PIXEL_UNPACK_BUFFER 目标。(仅在WebGL 2中 )

返回值

None.

示例

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

说明

Specification Status Comment
WebGL 1.0
texImage2D
Recommendation WebGL.初始定义
OpenGL ES 2.0
glTexImage2D
Standard OpenGL ES 2.0 API手册(类似).
WebGL 2.0
texImage2D
Editor's Draft WebGL更新定义.
OpenGL ES 3.0
glTexImage2D
Standard OpenGL ES 3.0 API手册(类似).

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
texImage2DChrome Full support 9Edge Full support 12Firefox Full support 4IE Full support 11Opera Full support 12Safari Full support 5.1WebView Android Full support YesChrome Android Full support 25Firefox Android Full support YesOpera Android Full support 12Safari iOS Full support 8Samsung Internet Android Full support Yes
WebGL2Chrome Full support 56Edge No support NoFirefox Full support 51IE No support NoOpera Full support 43Safari No support NoWebView Android Full support 58Chrome Android Full support 58Firefox Android Full support 51Opera Android Full support 43Safari iOS No support NoSamsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support

另见