WebGLRenderingContext.texSubImage2D()
The WebGLRenderingContext.texSubImage2D()
method of the
WebGL API specifies a sub-rectangle of the
current texture.
Syntax
// WebGL 1:
void gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, ArrayBufferView? pixels);
void gl.texSubImage2D(target, level, xoffset, yoffset, format, type, ImageData? pixels);
void gl.texSubImage2D(target, level, xoffset, yoffset, format, type, HTMLImageElement? pixels);
void gl.texSubImage2D(target, level, xoffset, yoffset, format, type, HTMLCanvasElement? pixels);
void gl.texSubImage2D(target, level, xoffset, yoffset, format, type, HTMLVideoElement? pixels);
void gl.texSubImage2D(target, level, xoffset, yoffset, format, type, ImageBitmap? pixels);
// WebGL 2:
void gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, GLintptr offset);
void gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, HTMLCanvasElement source);
void gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, HTMLImageElement source);
void gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, HTMLVideoElement source);
void gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, ImageBitmap source);
void gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, ImageData source);
void gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, ArrayBufferView srcData, srcOffset);
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 lower left texel x coordinate of a width-wide by height-wide rectangular subregion of the texture array. yoffset
- A
GLint
specifying the lower left texel y coordinate of a width-wide by height-wide rectangular subregion of the texture array.. width
- A
GLsizei
specifying the width of the texture in texels. height
- A
GLsizei
specifying the height of the texture in texels. 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.RED
gl.RG
gl.RED_INTEGER
gl.RG_INTEGER
gl.RGB_INTEGER
gl.RGBA_INTEGER
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
,ImageBitmap
.
- 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
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
WebGLRenderingContext.createTexture()
WebGLRenderingContext.bindTexture()
WebGLRenderingContext.texImage2D()
WebGLRenderingContext.compressedTexImage2D()
WebGLRenderingContext.copyTexImage2D()
WebGLRenderingContext.getTexParameter()
OES_texture_float
OES_texture_half_float
EXT_sRGB
EXT_texture_norm16