就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. Web API
  3. WebGLRenderingContext
  4. WebGLRenderingContext.texImage2D()

WebGLRenderingContext.texImage2D() 方法在 WebGL API specifies a two-dimensional texture image.

句法 

// 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
A GLenum specifying the binding point (target) of the active texture. Possible values:
  • gl.TEXTURE_2D : A two-dimensional texture.
  • gl.TEXTURE_CUBE_MAP_POSITIVE_X : Positive X face for a cube-mapped texture.
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_X : Negative X face for a cube-mapped texture.
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Y : Positive Y face for a cube-mapped texture.
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Y : Negative Y face for a cube-mapped texture.
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Z : Positive Z face for a cube-mapped texture.
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Z : Negative Z face for a cube-mapped texture.
level
A GLint specifying the level of detail. Level 0 is the base image level and level n 是 n th mipmap reduction level.
internalformat
A GLenum specifying the color components in the texture.

Possible values in both WebGL1 and WebGL2

格式 类型 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
Other possible values in WebGL2 for the versions of texImage2D that take an ArrayBufferView 或 GLintptr offset
Sized
格式 		基
格式 		R
bits 		G
bits 		B
bits 		A
bits 		共享
bits 		颜色
renderable 		纹理
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 ●


Possible values in WebGL2 for the versions of texImage2D that take a texture an HTMLImageElement , HTMLCanvasElement , HTMLVideoElement , ImageBitmap ，或 ImageData

  • gl.ALPHA : Discards the red, green and blue components and reads the alpha component.
  • gl.RGB : Discards the alpha components and reads the red, green and blue components.
  • gl.RGBA : Red, green, blue and alpha components are read from the color buffer.
  • gl.LUMINANCE : Each color component is a luminance component, alpha is 1.0.
  • gl.LUMINANCE_ALPHA : Each component is a luminance/alpha component.
  • 当使用 WEBGL_depth_texture extension:
    • gl.DEPTH_COMPONENT
    • gl.DEPTH_STENCIL
  • 当使用 EXT_sRGB extension:
    • ext.SRGB_EXT
    • ext.SRGB_ALPHA_EXT
  • 当使用 WebGL 2 context , the following values are available additionally:
    • 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
A GLsizei specifying the width of the texture.
height
A GLsizei specifying the height of the texture.
border
A GLint specifying the width of the border. Must be 0.
format
A GLenum specifying the format of the texel data. In WebGL 1, this must be the same as internalformat (see above). in WebGL 2, the combinations are listed in this table .
type
A GLenum specifying the data type of the texel data. Possible values:
  • gl.UNSIGNED_BYTE : 8 bits per channel for gl.RGBA
  • gl.UNSIGNED_SHORT_5_6_5 : 5 red bits, 6 green bits, 5 blue bits.
  • gl.UNSIGNED_SHORT_4_4_4_4 : 4 red bits, 4 green bits, 4 blue bits, 4 alpha bits.
  • gl.UNSIGNED_SHORT_5_5_5_1 : 5 red bits, 5 green bits, 5 blue bits, 1 alpha bit.
  • 当使用 WEBGL_depth_texture extension:
    • gl.UNSIGNED_SHORT
    • gl.UNSIGNED_INT
    • ext.UNSIGNED_INT_24_8_WEBGL (constant provided by the extension)
  • 当使用 OES_texture_float extension:
    • gl.FLOAT
  • 当使用 OES_texture_half_float extension:
    • ext.HALF_FLOAT_OES (constant provided by the extension)
  • 当使用 WebGL 2 context , the following values are available additionally:
    • 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
One of the following objects can be used as a pixel source for the texture:
offset
(WebGL 2 only) A GLintptr byte offset into the WebGLBuffer 's data store. Used to upload data to the currently bound WebGLTexture 从 WebGLBuffer bound to the PIXEL_UNPACK_BUFFER 目标。

返回值

None.

范例 

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

规范

规范 状态 注释
WebGL 1.0
The definition of 'texImage2D' in that specification. 		推荐 Initial definition for WebGL.
OpenGL ES 2.0
The definition of 'glTexImage2D' in that specification. 		标准 Man page of the (similar) OpenGL ES 2.0 API.
WebGL 2.0
The definition of 'texImage2D' in that specification. 		编者草案 Updated definition for WebGL.
OpenGL ES 3.0
The definition of 'glTexImage2D' in that specification. 		标准 Man page of the (similar) OpenGL ES 3.0 API.

浏览器兼容性

更新 GitHub 上的兼容性数据
桌面 移动
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
texImage2D Chrome 9 Edge 12 Firefox 4 IE 11 Opera 12 Safari 5.1 WebView Android Yes Chrome Android 25 Firefox Android Yes Opera Android 12 Safari iOS 8 Samsung Internet Android 1.5
WebGL2 Chrome 56 Edge 79 Firefox 51 IE 不支持 No Opera 43 Safari 不支持 No WebView Android 58 Chrome Android 58 Firefox Android 51 Opera Android 43 Safari iOS 不支持 No Samsung Internet Android 7.0

图例

完整支持

不支持

不支持

另请参阅

元数据

  1. WebGL API
  2. WebGLRenderingContext
  3. 特性
    1. canvas
    2. drawingBufferHeight
    3. drawingBufferWidth
  4. 方法
    1. activeTexture()
    2. attachShader()
    3. bindAttribLocation()
    4. bindBuffer()
    5. bindFramebuffer()
    6. bindRenderbuffer()
    7. bindTexture()
    8. blendColor()
    9. blendEquation()
    10. blendEquationSeparate()
    11. blendFunc()
    12. blendFuncSeparate()
    13. bufferData()
    14. bufferSubData()
    15. checkFramebufferStatus()
    16. clear()
    17. clearColor()
    18. clearDepth()
    19. clearStencil()
    20. colorMask()
    21. commit()
    22. compileShader()
    23. compressedTexImage[23]D()
    24. compressedTexSubImage2D()
    25. copyTexImage2D()
    26. copyTexSubImage2D()
    27. createBuffer()
    28. createFramebuffer()
    29. createProgram()
    30. createRenderbuffer()
    31. createShader()
    32. createTexture()
    33. cullFace()
    34. deleteBuffer()
    35. deleteFramebuffer()
    36. deleteProgram()
    37. deleteRenderbuffer()
    38. deleteShader()
    39. deleteTexture()
    40. depthFunc()
    41. depthMask()
    42. depthRange()
    43. detachShader()
    44. disable()
    45. disableVertexAttribArray()
    46. drawArrays()
    47. drawElements()
    48. enable()
    49. enableVertexAttribArray()
    50. finish()
    51. flush()
    52. framebufferRenderbuffer()
    53. framebufferTexture2D()
    54. frontFace()
    55. generateMipmap()
    56. getActiveAttrib()
    57. getActiveUniform()
    58. getAttachedShaders()
    59. getAttribLocation()
    60. getBufferParameter()
    61. getContextAttributes()
    62. getError()
    63. getExtension()
    64. getFramebufferAttachmentParameter()
    65. getParameter()
    66. getProgramInfoLog()
    67. getProgramParameter()
    68. getRenderbufferParameter()
    69. getShaderInfoLog()
    70. getShaderParameter()
    71. getShaderPrecisionFormat()
    72. getShaderSource()
    73. getSupportedExtensions()
    74. getTexParameter()
    75. getUniform()
    76. getUniformLocation()
    77. getVertexAttrib()
    78. getVertexAttribOffset()
    79. hint()
    80. isBuffer()
    81. isContextLost()
    82. isEnabled()
    83. isFramebuffer()
    84. isProgram()
    85. isRenderbuffer()
    86. isShader()
    87. isTexture()
    88. lineWidth()
    89. linkProgram()
    90. pixelStorei()
    91. polygonOffset()
    92. readPixels()
    93. renderbufferStorage()
    94. sampleCoverage()
    95. scissor()
    96. shaderSource()
    97. stencilFunc()
    98. stencilFuncSeparate()
    99. stencilMask()
    100. stencilMaskSeparate()
    101. stencilOp()
    102. stencilOpSeparate()
    103. texImage2D()
    104. texParameter[fi]()
    105. texSubImage2D()
    106. uniform[1234][fi][v]()
    107. uniformMatrix[234]fv()
    108. useProgram()
    109. validateProgram()
    110. vertexAttrib[1234]f[v]()
    111. vertexAttribPointer()
    112. viewport()
  5. WebGL 相关页面
    1. ANGLE_instanced_arrays
    2. EXT_blend_minmax
    3. EXT_color_buffer_half_float
    4. EXT_disjoint_timer_query
    5. EXT_frag_depth
    6. EXT_sRGB
    7. EXT_shader_texture_lod
    8. EXT_texture_filter_anisotropic
    9. OES_element_index_uint
    10. OES_standard_derivatives
    11. OES_texture_float
    12. OES_texture_float_linear
    13. OES_texture_half_float
    14. OES_texture_half_float_linear
    15. OES_vertex_array_object
    16. WEBGL_color_buffer_float
    17. WEBGL_compressed_texture_atc
    18. WEBGL_compressed_texture_etc1
    19. WEBGL_compressed_texture_pvrtc
    20. WEBGL_compressed_texture_s3tc
    21. WEBGL_compressed_texture_s3tc_srgb
    22. WEBGL_debug_renderer_info
    23. WEBGL_debug_shaders
    24. WEBGL_depth_texture
    25. WEBGL_draw_buffers
    26. WEBGL_lose_context
    27. WebGL2RenderingContext
    28. WebGLActiveInfo
    29. WebGLBuffer
    30. WebGLContextEvent
    31. WebGLFramebuffer
    32. WebGLObject
    33. WebGLProgram
    34. WebGLQuery
    35. WebGLRenderbuffer
    36. WebGLSampler
    37. WebGLShader
    38. WebGLShaderPrecisionFormat
    39. WebGLSync
    40. WebGLTexture
    41. WebGLTransformFeedback
    42. WebGLUniformLocation
    43. WebGLVertexArrayObject