The WebGLRenderingContext.texSubImage2D() method of the WebGL API specifies a sub-rectangle of the current texture.
On this page
WebGLRenderingContext: texSubImage2D() method
Syntax
js
// WebGL1
texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, pixels) // pixels is a TypedArray or a DataView
texSubImage2D(target, level, xoffset, yoffset, format, type, pixels)
// WebGL2
texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, offset)
texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, source)
texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, pixels, srcOffset)
Parameters
-
target -
A
GLenumspecifying 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
GLintspecifying the level of detail. Level 0 is the base image level and level n is the n-th mipmap reduction level. -
xoffset -
A
GLintspecifying the lower left texel x coordinate of a width-wide by height-wide rectangular subregion of the texture array. -
yoffset -
A
GLintspecifying the lower left texel y coordinate of a width-wide by height-wide rectangular subregion of the texture array. -
width -
A
GLsizeispecifying the width of the texture in texels. -
height -
A
GLsizeispecifying the height of the texture in texels. -
format -
A
GLenumspecifying 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_sRGBextension:ext.SRGB_EXText.SRGB_ALPHA_EXT
When using a WebGL 2 context, the following values are available additionally:
gl.REDgl.RGgl.RED_INTEGERgl.RG_INTEGERgl.RGB_INTEGERgl.RGBA_INTEGER
-
type -
A
GLenumspecifying the data type of the texel data. Possible values:gl.UNSIGNED_BYTE: 8 bits per channel forgl.RGBAgl.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_floatextension:gl.FLOAT
When using the
OES_texture_half_floatextension:gl.HALF_FLOAT_OES
When using a WebGL 2 context, the following values are available additionally:
gl.BYTEgl.UNSIGNED_SHORTgl.SHORTgl.UNSIGNED_INTgl.INTgl.HALF_FLOATgl.FLOATgl.UNSIGNED_INT_2_10_10_10_REVgl.UNSIGNED_INT_10F_11F_11F_REVgl.UNSIGNED_INT_5_9_9_9_REVgl.UNSIGNED_INT_24_8gl.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:
Uint8Array(Must be used iftypeisgl.UNSIGNED_BYTE)Uint16Array(Must be used iftypeis eithergl.UNSIGNED_SHORT_5_6_5,gl.UNSIGNED_SHORT_4_4_4_4,gl.UNSIGNED_SHORT_5_5_5_1, orext.HALF_FLOAT_OES)Float32Array(Must be used iftypeisgl.FLOAT)ImageData,HTMLImageElement,HTMLCanvasElement,HTMLVideoElement,ImageBitmap.
-
offset -
(WebGL 2 only) A
GLintptrbyte offset into theWebGLBuffer's data store. Used to upload data to the currently boundWebGLTexturefrom theWebGLBufferbound to thePIXEL_UNPACK_BUFFERtarget.
Return value
None (undefined).
Examples
js
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
Specifications
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
texSubImage2D |
9 | 12 | 4 | 11 | 12 | 5.1 | 4.4.3 | 25 | 4 | 12 | 8 | 1.5 |
See also
WebGLRenderingContext.createTexture()WebGLRenderingContext.bindTexture()WebGLRenderingContext.texImage2D()WebGLRenderingContext.compressedTexImage2D()WebGLRenderingContext.copyTexImage2D()WebGLRenderingContext.getTexParameter()OES_texture_floatOES_texture_half_floatEXT_sRGBEXT_texture_norm16
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texSubImage2D