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
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 n-th 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:
Uint8Array
(Must be used iftype
isgl.UNSIGNED_BYTE
)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
)Float32Array
(Must be used iftype
isgl.FLOAT
)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 (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_float
OES_texture_half_float
EXT_sRGB
EXT_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