The WebGLRenderingContext.texSubImage2D()
method of the WebGL API specifies a sub-rectangle of the current texture.
Syntax
void gl.texImage2D(target, level, xoffset, yoffset, width, height, format, type, ArrayBufferView? pixels); void gl.texImage2D(target, level, xoffset, yoffset, format, type, ImageData? pixels); void gl.texImage2D(target, level, xoffset, yoffset, format, type, HTMLImageElement? pixels); void gl.texImage2D(target, level, xoffset, yoffset, format, type, HTMLCanvasElement? pixels); void gl.texImage2D(target, level, xoffset, yoffset, format, type, HTMLVideoElement? pixels); Additional signature in a WebGL 2 context: void gl.texImage2D(target, level, xoffset, yoffset, format, type, GLintptr offset);
Parameters
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 is the nth mipmap reduction level. xoffset
- A
GLint
specifying the horizontal offset within the texture image. yoffset
- A
GLint
specifying the vertical offset within the texture image. width
- A
GLsizei
specifying the width of the texture. height
- A
GLsizei
specifying the height of the texture. format
- A
GLenum
specifying the format of the texel data. Possible values: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.- When using the
EXT_sRGB
extension:ext.SRGB_EXT
ext.SRGB_ALPHA_EXT
- When using a WebGL 2 context, the following values are available additionally:
gl.R8
gl.R16F
gl.
R32Fgl.R8UI
gl.RG8
gl.RG16F
gl.RG32F
gl.RGUI
gl.RGB8
gl.SRGB8
gl.RGB565
gl.R11F_G11F_B10F
gl.RGB9_E5
gl.RGB16F
gl.RGB32F
gl.RGB8UI
gl.RGBA8
gl.SRGB_APLHA8
gl.RGB5_A1
gl.RGBA4444
gl.RGBA16F
gl.RGBA32F
gl.RGBA8UI
type
- A
GLenum
specifying the data type of the texel data. Possible values:gl.UNSIGNED_BYTE
: 8 bits per channel forgl.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.- When using the
OES_texture_float
extension:gl.FLOAT
- When using the
OES_texture_half_float
extension:gl.HALF_FLOAT_OES
- When using a 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 benull
)
pixels
- One of the following objects can be used as a pixel source for the texture:
ArrayBufferView
,- A
Uint8Array
must be used iftype
isgl.UNSIGNED_BYTE
. - A
Uint16Array
must be used iftype
is eithergl.UNSIGNED_SHORT_5_6_5
,gl.UNSIGNED_SHORT_4_4_4_4
,gl.UNSIGNED_SHORT_5_5_5_1
, orext.HALF_FLOAT_OES
. - A
Float32Array
must be used iftype
isgl.FLOAT
.
- A
ImageData
,HTMLImageElement
,HTMLCanvasElement
,HTMLVideoElement
.
- offset
- (WebGL 2 only) A
GLintptr
byte offset into theWebGLBuffer
's data store. Used to upload data to the currently boundWebGLTexture
from theWebGLBuffer
bound to thePIXEL_UNPACK_BUFFER
target. -
Return value
None.
Examples
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
Specifications
Specification | Status | Comment |
---|---|---|
WebGL 1.0 The definition of 'texSubImage2D' in that specification. |
Recommendation | Initial definition for WebGL. |
OpenGL ES 2.0 The definition of 'glTexSubImage2D' in that specification. |
Standard | Man page of the (similar) OpenGL ES 2.0 API. |
WebGL 2.0 The definition of 'texSubImage2D' in that specification. |
Editor's Draft | Updated definition for WebGL. |
OpenGL ES 3.0 The definition of 'glTexSubImage2D' in that specification. |
Standard | Man page of the (similar) OpenGL ES 3.0 API. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 9 | 12 | 4.0 (2.0) | 11 | 12 | 5.1 |
WebGL 2 | No support [2] | No support | Nightly build [1] | No support | No support | No support |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | ? | 25 | 4.0 (2.0) | 1.0 | ? | 12 | 8.0 |
WebGL 2 | No support | No support | No support | No support | No support | No support | No support |
[1] WebGL 2 is enabled by default in Firefox Nightly. To enable it in a release version of Firefox, set the preference webgl.enable-prototype-webgl2
to true
in about:config.
[2] To use an experimental implementation of WebGL 2 in Chrome, you have to start Chrome with the runtime flag --enable-unsafe-es3-apis
.