WebGLRenderingContext.framebufferTexture2D()
The WebGLRenderingContext.framebufferTexture2D()
method of the WebGL API attaches a texture to a WebGLFramebuffer
.
Syntax
JavaScript
Copy Code
void <var>gl</var>.framebufferTexture2D(<var>target</var>, <var>attachment</var>, <var>textarget</var>, <var>texture</var>, <var>level</var>);
Parameters
- target
- A
GLenum
specifying the binding point (target). Possible values:gl.FRAMEBUFFER
: Collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.- When using a WebGL 2 context, the following values are available additionally:
gl.DRAW_FRAMEBUFFER
: Equivalent togl.FRAMEBUFFER
. Used as a destination for drawing, rendering, clearing, and writing operations.gl.READ_FRAMEBUFFER
: Used as a source for reading operations.
- attachment
- A
GLenum
specifying the attachment point for thetexture
. Possible values:gl.COLOR_ATTACHMENT0
: Attaches the texture to the framebuffer's color buffer.gl.DEPTH_ATTACHMENT
: Attaches the texture to the framebuffer's depth buffer.gl.STENCIL_ATTACHMENT
: Attaches the texture to the framebuffer's stencil buffer.- When using a WebGL 2 context, the following values are available additionally:
gl.DEPTH_STENCIL_ATTACHMENT
: depth and stencil buffer.- Copy Code
gl.COLOR_ATTACHMENT1<br> gl.COLOR_ATTACHMENT2<br> gl.COLOR_ATTACHMENT3<br> gl.COLOR_ATTACHMENT4<br> gl.COLOR_ATTACHMENT5<br> gl.COLOR_ATTACHMENT6<br> gl.COLOR_ATTACHMENT7<br> gl.COLOR_ATTACHMENT8<br> gl.COLOR_ATTACHMENT9<br> gl.COLOR_ATTACHMENT10<br> gl.COLOR_ATTACHMENT11<br> gl.COLOR_ATTACHMENT12<br> gl.COLOR_ATTACHMENT13<br> gl.COLOR_ATTACHMENT14<br> gl.COLOR_ATTACHMENT15
- When using the
WEBGL_draw_buffers
extension:ext.COLOR_ATTACHMENT0_WEBGL
(same asgl.COLOR_ATTACHMENT0
)
Copy Codeext.COLOR_ATTACHMENT1_WEBGL<br> ext.COLOR_ATTACHMENT2_WEBGL<br> ext.COLOR_ATTACHMENT3_WEBGL<br> ext.COLOR_ATTACHMENT4_WEBGL<br> ext.COLOR_ATTACHMENT5_WEBGL<br> ext.COLOR_ATTACHMENT6_WEBGL<br> ext.COLOR_ATTACHMENT7_WEBGL<br> ext.COLOR_ATTACHMENT8_WEBGL<br> ext.COLOR_ATTACHMENT9_WEBGL<br> ext.COLOR_ATTACHMENT10_WEBGL<br> ext.COLOR_ATTACHMENT11_WEBGL<br> ext.COLOR_ATTACHMENT12_WEBGL<br> ext.COLOR_ATTACHMENT13_WEBGL<br> ext.COLOR_ATTACHMENT14_WEBGL<br> ext.COLOR_ATTACHMENT15_WEBGL
- When using the
WEBGL_depth_texture
extension:ext.DEPTH_STENCIL_ATTACHMENT
: Depth and stencil buffer data storage.
- textarget
- A
GLenum
specifying the texture target. Possible values:gl.TEXTURE_2D
: A 2D image.gl.TEXTURE_CUBE_MAP_POSITIVE_X
: Image for the positive X face of the cube.gl.TEXTURE_CUBE_MAP_NEGATIVE_X
: Image for the negative X face of the cube.gl.TEXTURE_CUBE_MAP_POSITIVE_Y
: Image for the positive Y face of the cube.gl.TEXTURE_CUBE_MAP_NEGATIVE_Y
: Image for the negative Y face of the cube.gl.TEXTURE_CUBE_MAP_POSITIVE_Z
: Image for the positive Z face of the cube.gl.TEXTURE_CUBE_MAP_NEGATIVE_Z
: Image for the negative Z face of the cube.
- texture
- A
WebGLTexture
object whose image to attach. - level
- A
GLint
specifying the mipmap level of the texture image to be attached. Must be 0.
Return value
None.
Exceptions
- A
gl.INVALID_ENUM
error is thrown iftarget
is notgl.FRAMEBUFFER
.attachment
is not one of the accepted attachment points.textarget
is not one of the accepted texture targets.
- A
gl.INVALID_VALUE
error is thrown iflevel
is not 0. - A
gl.INVALID_OPERATION
error is thrown iftexture
isn't 0 or the name of an existing texture object.
Examples
JavaScript
Copy Code
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE2D, texture, 0);
Specifications
Specification | Status | Comment |
---|---|---|
WebGL 1.0 The definition of 'framebufferTexture2D' in that specification. |
Recommendation | Initial definition. |
OpenGL ES 2.0 The definition of 'glFramebufferTexture2D' in that specification. |
Standard | Man page of the (similar) OpenGL ES 2 API. |
OpenGL ES 3.0 The definition of 'glFramebufferTexture2D' in that specification. |
Standard | Man page of the (similar) OpenGL ES 3 API. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 9 | 12 | 4.0 (2.0) | 11 | 12 | 5.1 |
WebGL 2 | No support [2] | No support | Nightly build [1] | No support | No support | No support |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | ? | 25 | 4.0 (2.0) | 1.0 | ? | 12 | 8.0 |
WebGL 2 | No support | No support | No support | No support | No support | No support | No support |
[1] WebGL 2 is enabled by default in Firefox Nightly. To enable it in a release version of Firefox, set the preference webgl.enable-prototype-webgl2
to true
in about:config.
[2] 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
WebGLRenderingContext.createFramebuffer()
WebGLRenderingContext.deleteFramebuffer()
WebGLRenderingContext.isFramebuffer()
- Other buffers:
WebGLBuffer
,WebGLRenderbuffer
WEBGL_depth_texture
WEBGL_draw_buffers
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/webglrenderingcontext/framebuffertexture2d