WebGLRenderingContext.texSubImage2D()

The WebGLRenderingContext.texSubImage2D() method of the WebGL API specifies a sub-rectangle of the current texture.

Syntax

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);

Additional signature in a WebGL 2 context:
void gl.texSubImage2D(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.R32F
    • gl.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 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.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 be null)
pixels
One of the following objects can be used as a pixel source for the texture:
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.

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 Internet Explorer Opera Safari Servo
Basic Support9124.011125.1No support
WebGL2No support1No support51.0No supportNo supportNo supportNo support
Feature Android Chrome for Android Edge Mobile Firefox for Android IE Mobile Opera Mobile Safari Mobile
Basic Support(Yes)25(Yes)4.011128.1
WebGL2No supportNo support(Yes)51.0No supportNo supportNo support

1. To use an experimental implementation of WebGL 2 in Chrome, you have to start Chrome with the runtime flag --enable-unsafe-es3-apis.

See also

Document Tags and Contributors

 Contributors to this page: teoli, R1ZZU, fscholz
 Last updated by: teoli,