WebGLTexture
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Note: This feature is available inWeb Workers.
TheWebGLTexture interface is part of theWebGL API and represents an opaque texture object providing storage and state for texturing operations.
In this article
WebGL textures
TheWebGLTexture object does not define any methods or properties of its own and its content is not directly accessible. When working withWebGLTexture objects, the following methods of theWebGLRenderingContext are useful:
WebGLRenderingContext.bindTexture()WebGLRenderingContext.createTexture()WebGLRenderingContext.deleteTexture()WebGLRenderingContext.isTexture()
See also theWebGL tutorial onUsing textures in WebGL.
WebXR opaque textures
When usingWebXR layers, theXRWebGLBinding object will return instances of anopaqueWebGLTexture for the color and depth/stencil attachments.
WebXR methods that returnopaqueWebGLTexture objects:
The WebXRopaque texture is identical to the standardWebGLTexture with the following exceptions:
- A WebXR opaque texture is invalid outside a WebXR
requestAnimationFrame()callback for its session. - A WebXR opaque texture is invalid until it is returned by
XRWebGLBinding.getSubImage()orXRWebGLBinding.getViewSubImage(). - A WebXR opaque texture for the color attachment contains colors with premultiplied alpha.
- At the end of a
requestAnimationFrame()callback a WebXR opaque texture is unbounded and detached from allWebGLShaderobjects. - A WebXR opaque texture behaves as though it was allocated with
texStorage2DortexStorage3D, as appropriate, even when using a WebGL 1.0 context. - If a WebXR opaque texture calls
WebGLRenderingContext.deleteTexture(), anINVALID_OPERATIONerror is thrown. - Changes to the dimension or format of a WebXR opaque texture are not allowed. GL functions may only alter the texel values and texture parameters.
Examples
>Creating a texture
const canvas = document.getElementById("canvas");const gl = canvas.getContext("webgl");const texture = gl.createTexture();Specifications
| Specification |
|---|
| WebGL Specification> # 5.9> |
Browser compatibility
See also
WebGLRenderingContext.bindTexture()WebGLRenderingContext.createTexture()WebGLRenderingContext.deleteTexture()WebGLRenderingContext.isTexture()WebGLRenderingContext.compressedTexImage2D()WebGLRenderingContext.compressedTexSubImage2D()WebGLRenderingContext.copyTexImage2D()WebGLRenderingContext.copyTexSubImage2D()WebGLRenderingContext.generateMipmap()WebGLRenderingContext.getTexParameter()WebGLRenderingContext.texImage2D()WebGLRenderingContext.texSubImage2D()WebGLRenderingContext.texParameterf()WebGLRenderingContext.texParameteri()