WebGLRenderingContext

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

* Some parts of this feature may have varying levels of support.

Интерфейс WebGLRenderingContext обеспечивает доступ к контексту рендеринга OpenGL ES 2.0 (OpenGL for Embedded Systems — OpenGL для встраиваемых систем) для использования его с помощью HTML <canvas> элемента.

Чтобы получить объект с помощью этого интерфейса вызовите метод getContext() элемента <canvas> , используя "webgl" в качестве аргумента.

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

После того, как вы получили WebGL контекст, вы можете его использовать для рендеринга.

WebGL tutorial содержит больше информации, примеров, ссылок на ресурсы которые помогут начать использовать WebGL.

Константы

Смотрите на WebGL constants.

WebGL контекст

Ниже перечислены свойства и методы которые дают общую информацию и функциональность при работе с WebGL контекстом:

WebGLRenderingContext.canvas: Доступная только для чтения обратная ссылка на HTMLCanvasElement. Может быть null если будет применятся в контексте элемента иного типа чем <canvas>.
WebGLRenderingContext.commit() Экспериментальная возможность: Вставляет окна в первоначальный HTMLCanvasElement , если контекст не привязан к конкретному холсту.
WebGLRenderingContext.drawingBufferWidth: Доступная только для чтения ширина текущего буфера отрисовки. Должна совпадать с шириной холста связанного с данным контекстом.
WebGLRenderingContext.drawingBufferHeight: Доступная только для чтения высота текущего буфера отрисовки. Должна совпадать с высотой холста связанного с данным контекстом.
WebGLRenderingContext.getContextAttributes(): Возвращает `WebGLContextAttributes объект который содержит атрибуты текущего контекста. Может возвращать null если контекст утерян.
WebGLRenderingContext.isContextLost(): Возвращает true если контекст утерян, в противном случае возвращает false.

Просмотр и обрезка

WebGLRenderingContext.scissor(): Устанавливает обрезанный контейнер.
WebGLRenderingContext.viewport(): Устанавливает окно просмотра.

Информация о состоянии

WebGLRenderingContext.activeTexture(): Выбирает активную текстуру.
WebGLRenderingContext.blendColor(): Устанавливает параметры смешивания источника и назначения
WebGLRenderingContext.blendEquation(): Уравнение смешивания RGB и уравнение альфа-смешивания сводит к одному уравнению.
WebGLRenderingContext.blendEquationSeparate(): Устанавливает уравнение смешивания RGB и уравнение альфа-смешивания отдельно.
WebGLRenderingContext.blendFunc(): Определяет, какая арифметическая функция используется для смешивания пикселей.
WebGLRenderingContext.blendFuncSeparate(): Определяет, какая арифметическая функция используется для смешивания пикселей для RGB и альфа-компонентов по отдельности.
WebGLRenderingContext.clearColor(): Задаёт значения цвета, используемые при очистке цветовых буферов.
WebGLRenderingContext.clearDepth(): Задаёт значение глубины, используемый при очистке буфера глубины.
WebGLRenderingContext.clearStencil(): Задаёт значение шаблона, используемый при очистке буфера шаблона.
WebGLRenderingContext.colorMask(): Устанавливает какие цветовые компоненты для включены или выключены при отрисовке или рендеринге наWebGLFramebuffer.
WebGLRenderingContext.cullFace(): Определяет, будет видима или нет передняя- и / или обратная сторона многоугольника.
WebGLRenderingContext.depthFunc(): Определяет функцию, которая сравнивает входящую глубину пикселей к текущему значению глубины буфера.
WebGLRenderingContext.depthMask(): Включает или выключает запись в буфер глубины.
WebGLRenderingContext.depthRange(): Определяет диапазон отображения глубины согласно стандартных координат к координатам окна устройства.
WebGLRenderingContext.disable(): Отключает конкретные возможности WebGL.
WebGLRenderingContext.enable(): Включает конкретные возможности WebGL.
WebGLRenderingContext.frontFace(): Определяет видимость передней или задней стороны многоугольника, при его вращении.
WebGLRenderingContext.getParameter(): Возвращает значение переданного параметра по имени.
WebGLRenderingContext.getError(): Возвращает информацию об ошибках.
WebGLRenderingContext.hint(): Указывает подсказки для определённого поведения. Интерпретация этих подсказок зависит от реализации.
WebGLRenderingContext.isEnabled(): Проверяет, включена или нет конкретная способность WebG.
WebGLRenderingContext.lineWidth(): Устанавливает ширину растровой линии.
WebGLRenderingContext.pixelStorei(): Определяет режимы хранилища пикселей
WebGLRenderingContext.polygonOffset(): Определяет факторы масштабирования и единицы для расчёта значения глубины.
WebGLRenderingContext.sampleCoverage(): Определяет составные параметры для сглаживания эффектов.
WebGLRenderingContext.stencilFunc(): Sets the both front and back function and reference value for stencil testing.
WebGLRenderingContext.stencilFuncSeparate(): Sets the front and/or back function and reference value for stencil testing.
WebGLRenderingContext.stencilMask(): Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.
WebGLRenderingContext.stencilMaskSeparate(): Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.
WebGLRenderingContext.stencilOp(): Sets both the front and back-facing stencil test actions.
WebGLRenderingContext.stencilOpSeparate(): Sets the front and/or back-facing stencil test actions.

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.isRenderbuffer(): 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(): Binds a generic vertex index to a named attribute variable.
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(): Disables a vertex attribute array at a given position.
WebGLRenderingContext.enableVertexAttribArray(): Enables a vertex attribute array at a given position.
WebGLRenderingContext.getActiveAttrib(): Returns information about an active attribute variable.
WebGLRenderingContext.getActiveUniform(): Returns information about an active uniform variable.
WebGLRenderingContext.getAttribLocation(): Returns the location of an attribute variable.
WebGLRenderingContext.getUniform(): Returns the value of a uniform variable at a given location.
WebGLRenderingContext.getUniformLocation(): Returns the location of a uniform variable.
WebGLRenderingContext.getVertexAttrib(): Returns information about a vertex attribute at a given position.
WebGLRenderingContext.getVertexAttribOffset(): Returns the address of a given vertex attribute.
WebGLRenderingContext.uniform[1234][fi][v](): Specifies a value for a uniform variable.
WebGLRenderingContext.uniformMatrix[234]fv(): Specifies a matrix value for a uniform variable.
WebGLRenderingContext.vertexAttrib[1234]f[v](): Specifies a value for a generic vertex attribute.
WebGLRenderingContext.vertexAttribPointer(): Specifies the data formats and locations of vertex attributes in a vertex attributes array.

Drawing buffers

WebGLRenderingContext.clear(): Clears specified buffers to preset values.
WebGLRenderingContext.drawArrays(): Renders primitives from array data.
WebGLRenderingContext.drawElements(): Renders primitives from element array data.
WebGLRenderingContext.finish(): Blocks execution until all previously called commands are finished.
WebGLRenderingContext.flush(): Empties different buffer commands, causing all commands to be executed as quickly as possible.