WebGLRenderingContext

この記事はまだ日本語に翻訳されていません。MDN の翻訳はボランティアによって行われています。是非 MDN に登録し、私たちの力になって下さい。

Draft
This page is not complete.

The WebGLRenderingContext interface provides the OpenGL ES 2.0 rendering context for the drawing surface of an HTML <canvas> element.

To get an object of this interface, call getContext() on a <canvas> element, supplying "webgl" as the argument:

var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

Once you have the WebGL rendering context for a canvas, you can render within it.

The WebGL tutorial has more information, examples, and resources on how to get started with WebGL.

Constants

See the constants page.

Context information

The following attributes and methods provide read-only information about the context:

WebGLRenderingContext.canvas
A read-only back-reference to the HTMLCanvasElement. Might be null if it is not associated with a <canvas> element.
WebGLRenderingContext.drawingBufferWidth
The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.
WebGLRenderingContext.drawingBufferHeight
The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.
WebGLRenderingContext.getContextAttributes()
Returns a WebGLContextAttributes object that contains the actual context parameters. Might return null, if the context is lost.
WebGLRenderingContext.isContextLost()
Returns true if the context is lost, otherwise returns false.

Viewing and clipping

WebGLRenderingContext.scissor()
Defines the scissor box.
WebGLRenderingContext.viewport()
Sets the viewport.

State information

WebGLRenderingContext.activeTexture()
...
WebGLRenderingContext.blendColor()
...
WebGLRenderingContext.blendEquation()
...
WebGLRenderingContext.blendEquationSeparate()
...
WebGLRenderingContext.blendFunc()
...
WebGLRenderingContext.blendFuncSeparate()
...
WebGLRenderingContext.clearColor()
...
WebGLRenderingContext.clearDepth()
...
WebGLRenderingContext.clearStencil()
...
WebGLRenderingContext.colorMask()
...
WebGLRenderingContext.cullFace()
...
WebGLRenderingContext.depthFunc()
...
WebGLRenderingContext.depthMask()
...
WebGLRenderingContext.depthRange()
...
WebGLRenderingContext.disable()
...
WebGLRenderingContext.enable()
...
WebGLRenderingContext.frontFace()
...
WebGLRenderingContext.getParameter()
...
WebGLRenderingContext.getError()
...
WebGLRenderingContext.hint()
...
WebGLRenderingContext.isEnabled()
...
WebGLRenderingContext.lineWidth()
...
WebGLRenderingContext.pixelStorei()
...
WebGLRenderingContext.polygonOffset()
...
WebGLRenderingContext.sampleCoverage()
...
WebGLRenderingContext.stencilFunc()
...
WebGLRenderingContext.stencilFuncSeparate()
...
WebGLRenderingContext.stencilMask()
...
WebGLRenderingContext.stencilMaskSeparate()
...
WebGLRenderingContext.stencilOp()
...
WebGLRenderingContext.stencilOpSeparate()
...

Buffers

WebGLRenderingContext.bindBuffer()
Binds a WebGLBuffer object to a given target.
WebGLRenderingContext.bufferData()
Updates buffer data.
WebGLRenderingContext.bufferSubData()
Updates buffer data starting at a passed offset.
WebGLRenderingContext.createBuffer()
Creates a WebGLBuffer object.
WebGLRenderingContext.deleteBuffer()
Deletes a WebGLBuffer object.
WebGLRenderingContext.getBufferParameter()
Returns information about the buffer.
WebGLRenderingContext.isBuffer()
Returns a Boolean indicating if the passed buffer is valid.

Framebuffers

WebGLRenderingContext.bindFramebuffer()
Binds a WebGLFrameBuffer object to a given target.
WebGLRenderingContext.checkFramebufferStatus()
Returns the status of the framebuffer.
WebGLRenderingContext.createFramebuffer()
Creates a WebGLFrameBuffer object.
WebGLRenderingContext.deleteFramebuffer()
Deletes a WebGLFrameBuffer object.
WebGLRenderingContext.framebufferRenderbuffer()
Attaches a WebGLRenderingBuffer object to a WebGLFrameBuffer object.
WebGLRenderingContext.framebufferTexture2D()
Attaches a textures image to a WebGLFrameBuffer object.
WebGLRenderingContext.getFramebufferAttachmentParameter()
Returns information about the framebuffer.
WebGLRenderingContext.isFramebuffer()
Returns a Boolean indicating if the passed WebGLFrameBuffer object is valid.
WebGLRenderingContext.readPixels()
Reads a block of pixels from the WebGLFrameBuffer.

Renderbuffers

WebGLRenderingContext.bindRenderbuffer()
Binds a WebGLRenderBuffer object to a given target.
WebGLRenderingContext.createRenderbuffer()
Creates a WebGLRenderBuffer object.
WebGLRenderingContext.deleteRenderbuffer()
Deletes a WebGLRenderBuffer object.
WebGLRenderingContext.getRenderbufferParameter()
Returns information about the renderbuffer.
WebGLRenderingContext.isBuffer()
Returns a Boolean indicating if the passed WebGLRenderingBuffer is valid.
WebGLRenderingContext.renderbufferStorage()
Creates a renderbuffer data store.

Textures

WebGLRenderingContext.bindTexture()
Binds a WebGLTexture object to a given target.
WebGLRenderingContext.compressedTexImage2D()
Specifies a 2D texture image in a compressed format.
WebGLRenderingContext.compressedTexSubImage2D()
Specifies a 2D texture sub-image in a compressed format.
WebGLRenderingContext.copyTexImage2D()
Copies a 2D texture image.
WebGLRenderingContext.copyTexSubImage2D()
Copies a 2D texture sub-image.
WebGLRenderingContext.createTexture()
Creates a WebGLTexture object.
WebGLRenderingContext.deleteTexture()
Deletes a WebGLTexture object.
WebGLRenderingContext.generateMipmap()
Generates a set of mipmaps for a WebGLTexture object.
WebGLRenderingContext.getTexParameter()
Returns information about the texture.
WebGLRenderingContext.isTexture()
Returns a Boolean indicating if the passed WebGLTexture is valid.
WebGLRenderingContext.texImage2D()
Specifies a 2D texture image.
WebGLRenderingContext.texSubImage2D()
Updates a sub-rectangle of the current WebGLTexture.
WebGLRenderingContext.texParameterf()
Sets texture parameters.
WebGLRenderingContext.texParameteri()
Sets texture parameters.

Programs and shaders

WebGLRenderingContext.attachShader()
Attaches a WebGLShader to a WebGLProgram.
WebGLRenderingContext.bindAttribLocation()
...
WebGLRenderingContext.compileShader()
Compiles a WebGLShader.
WebGLRenderingContext.createProgram()
Creates a WebGLProgram.
WebGLRenderingContext.createShader()
Creates a WebGLShader.
WebGLRenderingContext.deleteProgram()
Deletes a WebGLProgram.
WebGLRenderingContext.deleteShader()
Deletes a WebGLShader.
WebGLRenderingContext.detachShader()
Detaches a WebGLShader.
WebGLRenderingContext.getAttachedShaders()
Returns a list of WebGLShader objects attached to a WebGLProgram.
WebGLRenderingContext.getProgramParameter()
Returns information about the program.
WebGLRenderingContext.getProgramInfoLog()
Returns the information log for a WebGLProgram object.
WebGLRenderingContext.getShaderParameter()
Returns information about the shader.
WebGLRenderingContext.getShaderPrecisionFormat()
Returns a WebGLShaderPrecisionFormat object describing the precision for the numeric format of the shader.
WebGLRenderingContext.getShaderInfoLog()
Returns the information log for a WebGLShader object.
WebGLRenderingContext.getShaderSource()
Returns the source code of a WebGLShader as a string.
WebGLRenderingContext.isProgram()
Returns a Boolean indicating if the passed WebGLProgram is valid.
WebGLRenderingContext.isShader()
Returns a Boolean indicating if the passed WebGLShader is valid.
WebGLRenderingContext.linkProgram()
Links the passed WebGLProgram object.
WebGLRenderingContext.shaderSource()
Sets the source code in a WebGLShader.
WebGLRenderingContext.useProgram()
Uses the specified WebGLProgram as part the current rendering state.
WebGLRenderingContext.validateProgram()
Validates a WebGLProgram.

Uniforms and attributes

WebGLRenderingContext.disableVertexAttribArray()
...
WebGLRenderingContext.enableVertexAttribArray()
...
WebGLRenderingContext.getActiveAttrib()
...
WebGLRenderingContext.getActiveUniform()
...
WebGLRenderingContext.getAttribLocation()
...
WebGLRenderingContext.getUniform()
...
WebGLRenderingContext.getVertexAttrib()
...
WebGLRenderingContext.getVertexAttribOffset()
...
WebGLRenderingContext.disableVertexAttribArray()
...
WebGLRenderingContext.uniform[1234][fi][v]()
...
WebGLRenderingContext.uniformMatrix[1234][fv]()
...
WebGLRenderingContext.vertexAttrib[1234][fi][v]()
...
WebGLRenderingContext.vertexAttribPointer()
...

Drawing buffers

WebGLRenderingContext.clear()
...
WebGLRenderingContext.drawArrays()
...
WebGLRenderingContext.drawElements()
...
WebGLRenderingContext.finish()
...
WebGLRenderingContext.flush()
...

Working with extensions

These methods manage WebGL extensions:

WebGLRenderingContext.getSupportedExtensions()
Returns an Array of DOMString elements with all the supported WebGL extensions.
WebGLRenderingContext.getExtension()
Returns an extension object.

Specifications

Specification Status Comment
WebGL 1.0
The definition of 'WebGLRenderingContext' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 9 4.0 (2.0) 11 12 5.1
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 25 (Yes) ? 12 8.1

See also

ドキュメントのタグと貢献者

最終更新者: teoli,