The WebGLRenderingContext.texSubImage2D() method of the WebGL API specifies a sub-rectangle of the current texture.
The WebGLRenderingContext.texSubImage2D() method of the WebGL API specifies a sub-rectangle of the current texture.
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)
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.
widthA GLsizei specifying the width of the texture in texels.
heightA GLsizei specifying the height of the texture in texels.
formatA 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_EXText.SRGB_ALPHA_EXTWhen using a WebGL 2 context, the following values are available additionally:
gl.REDgl.RGgl.RED_INTEGERgl.RG_INTEGERgl.RGB_INTEGERgl.RGBA_INTEGERtypeA 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. When using the OES_texture_float extension:
gl.FLOATWhen using the OES_texture_half_float extension:
gl.HALF_FLOAT_OESWhen 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 be null) pixelsOne of the following objects can be used as a pixel source for the texture:
Uint8Array (Must be used if type is gl.UNSIGNED_BYTE)Uint16Array (Must be used if type is either gl.UNSIGNED_SHORT_5_6_5, gl.UNSIGNED_SHORT_4_4_4_4, gl.UNSIGNED_SHORT_5_5_5_1, or ext.HALF_FLOAT_OES) Float32Array (Must be used if type is gl.FLOAT)ImageData,HTMLImageElement,HTMLCanvasElement,HTMLVideoElement,ImageBitmap.offset (WebGL 2 only) A GLintptr byte offset into the WebGLBuffer's data store. Used to upload data to the currently bound WebGLTexture from the WebGLBuffer bound to the PIXEL_UNPACK_BUFFER target.
None (undefined).
js
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
| 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 |
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