WebGLRenderingContext: texImage2D() method

The WebGLRenderingContext.texImage2D() method of the WebGL API specifies a two-dimensional texture image.

Syntax 

// WebGL1
texImage2D(target, level, internalformat, width, height, border, format, type, pixels)
texImage2D(target, level, internalformat, format, type, pixels)
// WebGL2
texImage2D(target, level, internalformat, width, height, border, format, type, offset)
texImage2D(target, level, internalformat, width, height, border, format, type, source)
texImage2D(target, level, internalformat, width, height, border, format, type, 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 n-th mipmap reduction level.
    internalformat

    A GLenum specifying the color components in the texture.

    Possible values in both WebGL1 and WebGL2

    Format Channels Bytes per pixel Possible values in WebGL2 for the versions of texImage2D that take a texture an HTMLImageElement , HTMLCanvasElement , HTMLVideoElement , ImageBitmap , or ImageData 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
  • gl.LUMINANCE_ALPHA : Each component is a luminance/alpha component.

    • When using the WEBGL_depth_texture extension:

  • gl.DEPTH_COMPONENT
  • gl.DEPTH_STENCIL

    • 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.RG8UI
  • gl.RG16UI
  • gl.RG32UI
  • gl.RGB8
  • gl.SRGB8
  • gl.RGB565
  • gl.R11F_G11F_B10F
  • gl.RGB9_E5
  • gl.RGB16F
  • gl.RGB32F
  • gl.RGB8UI
  • gl.RGBA8
  • gl.SRGB8_ALPHA8
  • gl.RGB5_A1
  • gl.RGB10_A2
  • gl.RGBA4
  • gl.RGBA16F
  • gl.RGBA32F
  • gl.RGBA8UI
    • width

    A GLsizei specifying the width of the texture.

    height

    A GLsizei specifying the height of the texture.

    border

    A GLint specifying the width of the border. Must be 0.

    format
    A GLenum specifying the format of the texel data. In WebGL 1, this must be the same as internalformat (see above). in WebGL 2, the combinations are listed in this table .

    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 WEBGL_depth_texture extension:

  • gl.UNSIGNED_SHORT
  • gl.UNSIGNED_INT
  • ext.UNSIGNED_INT_24_8_WEBGL (constant provided by the extension)
  • When using the OES_texture_float extension:
  • gl.FLOAT

    • When using the OES_texture_half_float extension:

  • ext.HALF_FLOAT_OES (constant provided by the extension)
    • 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

    The following types can always be used as a pixel source for the texture:

  • ImageData ,
  • HTMLImageElement ,
  • HTMLCanvasElement ,
  • HTMLVideoElement ,
  • ImageBitmap .

    • The following types can only be used as a pixel source when width , height , and border are specified:

  • 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 , gl.UNSIGNED_SHORT or ext.HALF_FLOAT_OES )
  • Uint32Array (must be used if type is gl.UNSIGNED_INT or ext.UNSIGNED_INT_24_8_WEBGL )
  • Float32Array (must be used if type is gl.FLOAT )
    • 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 ( undefined ).

    Examples 

    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

    Specifications

    Specification
    WebGL Specification
    # 5.14.8
    WebGL 2.0 Specification
    # 3.7.6

    Browser compatibility

    BCD tables only load in the browser

    See also