--- title: WebGLRenderingContext slug: Web/API/WebGLRenderingContext translation_of: Web/API/WebGLRenderingContext --- <div>{{APIRef("WebGL")}}</div> <p>Интерфейс <strong>WebGLRenderingContext </strong>обеспечивает доступ к контексту рендеринга OpenGL ES 2.0 (<strong>OpenGL</strong> for <strong>E</strong>mbedded <strong>S</strong>ystems — OpenGL для встраиваемых систем) для использования его с помощью HTML {{HTMLElement("canvas")}} элемента.</p> <p>Чтобы получить объект с помощью этого интерфейса вызовите метод {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} элемента <canvas> , используя "webgl" в качестве аргумента.</p> <pre class="brush: js">var canvas = document.getElementById('myCanvas'); var gl = canvas.getContext('webgl'); </pre> <p>После того, как вы получили WebGL контекст, вы можете его использовать для рендеринга.</p> <p> <a href="/en-US/docs/Web/API/WebGL_API/Tutorial" title="WebGL tutorial">WebGL tutorial</a> содержит больше информации, примеров, ссылок на ресурсы которые помогут начать использовать WebGL.</p> <h2 id="Константы">Константы</h2> <p>Смотрите на <a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a>.</p> <h2 id="WebGL_контекст"> WebGL контекст</h2> <p>Ниже перечислены свойства и методы которые дают общую информацию и функциональность при работе с WebGL контекстом:</p> <dl> <dt>{{domxref("WebGLRenderingContext.canvas")}}</dt> <dd> Доступная только для чтения обратная ссылка на {{domxref("HTMLCanvasElement")}}. Может быть {{jsxref("null")}} если будет применятся в контексте элемента иного типа чем {{HTMLElement("canvas")}}.</dd> <dt>{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}</dt> <dd> <p>Вставляет окна в первоначальный {{domxref("HTMLCanvasElement")}} , если контекст не привязан к конкретному холсту.</p> </dd> <dt>{{domxref("WebGLRenderingContext.drawingBufferWidth")}}</dt> <dd>Доступная только для чтения ширина текущего буфера отрисовки. Должна совпадать с шириной холста связанного с данным контекстом.</dd> <dt>{{domxref("WebGLRenderingContext.drawingBufferHeight")}}</dt> <dd>Доступная только для чтения высота текущего буфера отрисовки. Должна совпадать с высотой холста связанного с данным контекстом.</dd> <dt>{{domxref("WebGLRenderingContext.getContextAttributes()")}}</dt> <dd>Возвращает <code>WebGLContextAttributes объект который содержит атрибуты текущего контекста. Может возвращать </code>{{jsxref("null")}} если контекст утерян.<code> </code></dd> <dt>{{domxref("WebGLRenderingContext.isContextLost()")}}</dt> <dd>Возвращает <code>true</code> если контекст утерян, в противном случае возвращает <code>false</code>.</dd> </dl> <h2 id="Просмотр_и_обрезка">Просмотр и обрезка</h2> <dl> <dt>{{domxref("WebGLRenderingContext.scissor()")}}</dt> <dd>Устанавливает обрезанный контейнер.</dd> <dt>{{domxref("WebGLRenderingContext.viewport()")}}</dt> <dd>Устанавливает окно просмотра.</dd> </dl> <h2 id="Информация_о_состоянии">Информация о состоянии</h2> <dl> <dt>{{domxref("WebGLRenderingContext.activeTexture()")}}</dt> <dd>Выбирает активную текстуру.</dd> <dt>{{domxref("WebGLRenderingContext.blendColor()")}}</dt> <dd>Устанавливает параметры смешивания источника и назначения</dd> <dt>{{domxref("WebGLRenderingContext.blendEquation()")}}</dt> <dd> Уравнение смешивания RGB и уравнение альфа-смешивания сводит к одному уравнению.</dd> </dl> <p><strong>{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}</strong> </p> <p>Устанавливает уравнение смешивания RGB и уравнение alpha смешивания отдельно.</p> <dl> <dt>{{domxref("WebGLRenderingContext.blendFunc()")}}</dt> <dd>Определяет, какая арифметическая функция используется для смешивания пикселей.</dd> <dt>{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}</dt> <dd>Определяет, какая арифметическая функция используется для смешивания пикселей для RGB и альфа-компонентов по отдельности.</dd> <dt>{{domxref("WebGLRenderingContext.clearColor()")}}</dt> <dd>Задаёт значения цвета, используемые при очистке цветовых буферов.</dd> <dt>{{domxref("WebGLRenderingContext.clearDepth()")}}</dt> <dd>Задаёт значение глубины, используемый при очистке буфера глубины.</dd> <dt>{{domxref("WebGLRenderingContext.clearStencil()")}}</dt> <dd>Задаёт значение шаблона, используемый при очистке буфера шаблона.</dd> <dt>{{domxref("WebGLRenderingContext.colorMask()")}}</dt> <dd>Устанавливает какие цветовые компоненты для включены или выключены при отрисовке или рендеринге на{{domxref("WebGLFramebuffer")}}.</dd> <dt>{{domxref("WebGLRenderingContext.cullFace()")}}</dt> <dd>Определяет, будет видима или нет передняя- и / или обратная сторона многоугольника.</dd> <dt>{{domxref("WebGLRenderingContext.depthFunc()")}}</dt> <dd>Определяет функцию, которая сравнивает входящую глубину пикселей к текущему значению глубины буфера.</dd> <dt>{{domxref("WebGLRenderingContext.depthMask()")}}</dt> <dd>Включает или выключает запись в буфер глубины.</dd> <dt>{{domxref("WebGLRenderingContext.depthRange()")}}</dt> <dd>Определяет диапазон отображения глубины согласно стандартных координат к координатам окна устройства.</dd> <dt>{{domxref("WebGLRenderingContext.disable()")}}</dt> <dd>Отключает конкретные возможности WebGL.</dd> <dt>{{domxref("WebGLRenderingContext.enable()")}}</dt> <dd>Включает конкретные возможности WebGL.</dd> <dt>{{domxref("WebGLRenderingContext.frontFace()")}}</dt> <dd>Определяет видимость передней или задней стороны многоугольника, при его вращении.</dd> <dt>{{domxref("WebGLRenderingContext.getParameter()")}}</dt> <dd>Возвращает значение переданного параметра по имени.</dd> <dt>{{domxref("WebGLRenderingContext.getError()")}}</dt> <dd>Возвращает информацию об ошибках.</dd> <dt>{{domxref("WebGLRenderingContext.hint()")}}</dt> <dd>Указывает подсказки для определённого поведения. Интерпретация этих подсказок зависит от реализации.</dd> <dt>{{domxref("WebGLRenderingContext.isEnabled()")}}</dt> <dd>Проверяет, включена или нет конкретная способность WebG.</dd> <dt>{{domxref("WebGLRenderingContext.lineWidth()")}}</dt> <dd>Устанавливает ширину растровой линии.</dd> <dt>{{domxref("WebGLRenderingContext.pixelStorei()")}}</dt> <dd>Определяет режимы хранилища пикселей</dd> <dt>{{domxref("WebGLRenderingContext.polygonOffset()")}}</dt> <dd>Определяет факторы масштабирования и единицы для расчёта значения глубины.</dd> <dt>{{domxref("WebGLRenderingContext.sampleCoverage()")}}</dt> <dd>Определяет составные параметры для сглаживания эффектов.</dd> <dt>{{domxref("WebGLRenderingContext.stencilFunc()")}}</dt> <dd>Sets the both front and back function and reference value for stencil testing.</dd> <dt>{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}</dt> <dd>Sets the front and/or back function and reference value for stencil testing.</dd> <dt>{{domxref("WebGLRenderingContext.stencilMask()")}}</dt> <dd>Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.</dd> <dt>{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}</dt> <dd>Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.</dd> <dt>{{domxref("WebGLRenderingContext.stencilOp()")}}</dt> <dd>Sets both the front and back-facing stencil test actions.</dd> <dt>{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}</dt> <dd>Sets the front and/or back-facing stencil test actions.</dd> </dl> <h2 id="Buffers">Buffers</h2> <dl> <dt>{{domxref("WebGLRenderingContext.bindBuffer()")}}</dt> <dd>Binds a <code>WebGLBuffer</code> object to a given target.</dd> <dt>{{domxref("WebGLRenderingContext.bufferData()")}}</dt> <dd>Updates buffer data.</dd> <dt>{{domxref("WebGLRenderingContext.bufferSubData()")}}</dt> <dd>Updates buffer data starting at a passed offset.</dd> <dt>{{domxref("WebGLRenderingContext.createBuffer()")}}</dt> <dd>Creates a <code>WebGLBuffer</code> object.</dd> <dt>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</dt> <dd>Deletes a <code>WebGLBuffer</code> object.</dd> <dt>{{domxref("WebGLRenderingContext.getBufferParameter()")}}</dt> <dd>Returns information about the buffer.</dd> <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt> <dd>Returns a Boolean indicating if the passed buffer is valid.</dd> </dl> <h2 id="Framebuffers">Framebuffers</h2> <dl> <dt>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</dt> <dd>Binds a <code>WebGLFrameBuffer</code> object to a given target.</dd> <dt>{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}</dt> <dd>Returns the status of the framebuffer.</dd> <dt>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</dt> <dd>Creates a <code>WebGLFrameBuffer</code> object.</dd> <dt>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</dt> <dd>Deletes a <code>WebGLFrameBuffer</code> object.</dd> <dt>{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}</dt> <dd>Attaches a <code>WebGLRenderingBuffer</code> object to a <code>WebGLFrameBuffer</code> object.</dd> <dt>{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}</dt> <dd>Attaches a textures image to a <code>WebGLFrameBuffer</code> object.</dd> <dt>{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}</dt> <dd>Returns information about the framebuffer.</dd> <dt>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</dt> <dd>Returns a Boolean indicating if the passed <code>WebGLFrameBuffer</code> object is valid.</dd> <dt>{{domxref("WebGLRenderingContext.readPixels()")}}</dt> <dd>Reads a block of pixels from the <code>WebGLFrameBuffer</code>.</dd> </dl> <h2 id="Renderbuffers">Renderbuffers</h2> <dl> <dt>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</dt> <dd>Binds a <code>WebGLRenderBuffer</code> object to a given target.</dd> <dt>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</dt> <dd>Creates a <code>WebGLRenderBuffer</code> object.</dd> <dt>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</dt> <dd>Deletes a <code>WebGLRenderBuffer</code> object.</dd> <dt>{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}</dt> <dd>Returns information about the renderbuffer.</dd> <dt>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</dt> <dd>Returns a Boolean indicating if the passed <code>WebGLRenderingBuffer</code> is valid.</dd> <dt>{{domxref("WebGLRenderingContext.renderbufferStorage()")}}</dt> <dd>Creates a renderbuffer data store.</dd> </dl> <h2 id="Textures">Textures</h2> <dl> <dt>{{domxref("WebGLRenderingContext.bindTexture()")}}</dt> <dd>Binds a <code>WebGLTexture</code> object to a given target.</dd> <dt>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</dt> <dd>Specifies a 2D texture image in a compressed format.</dd> <dt>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</dt> <dd>Specifies a 2D texture sub-image in a compressed format.</dd> <dt>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</dt> <dd>Copies a 2D texture image.</dd> <dt>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</dt> <dd>Copies a 2D texture sub-image.</dd> <dt>{{domxref("WebGLRenderingContext.createTexture()")}}</dt> <dd>Creates a <code>WebGLTexture</code> object.</dd> <dt>{{domxref("WebGLRenderingContext.deleteTexture()")}}</dt> <dd>Deletes a <code>WebGLTexture</code> object.</dd> <dt>{{domxref("WebGLRenderingContext.generateMipmap()")}}</dt> <dd>Generates a set of mipmaps for a <code>WebGLTexture</code> object.</dd> <dt>{{domxref("WebGLRenderingContext.getTexParameter()")}}</dt> <dd>Returns information about the texture.</dd> <dt>{{domxref("WebGLRenderingContext.isTexture()")}}</dt> <dd>Returns a Boolean indicating if the passed <code>WebGLTexture</code> is valid.</dd> <dt>{{domxref("WebGLRenderingContext.texImage2D()")}}</dt> <dd>Specifies a 2D texture image.</dd> <dt>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</dt> <dd>Updates a sub-rectangle of the current <code>WebGLTexture</code>.</dd> <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</dt> <dd>Sets texture parameters.</dd> <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</dt> <dd>Sets texture parameters.</dd> </dl> <h2 id="Programs_and_shaders">Programs and shaders</h2> <dl> <dt>{{domxref("WebGLRenderingContext.attachShader()")}}</dt> <dd>Attaches a <code>WebGLShader</code> to a <code>WebGLProgram</code>.</dd> <dt>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</dt> <dd>Binds a generic vertex index to a named attribute variable.</dd> <dt>{{domxref("WebGLRenderingContext.compileShader()")}}</dt> <dd>Compiles a <code>WebGLShader</code>.</dd> <dt>{{domxref("WebGLRenderingContext.createProgram()")}}</dt> <dd>Creates a <code>WebGLProgram</code>.</dd> <dt>{{domxref("WebGLRenderingContext.createShader()")}}</dt> <dd>Creates a <code>WebGLShader</code>.</dd> <dt>{{domxref("WebGLRenderingContext.deleteProgram()")}}</dt> <dd>Deletes a <code>WebGLProgram</code>.</dd> <dt>{{domxref("WebGLRenderingContext.deleteShader()")}}</dt> <dd>Deletes a <code>WebGLShader</code>.</dd> <dt>{{domxref("WebGLRenderingContext.detachShader()")}}</dt> <dd>Detaches a <code>WebGLShader</code>.</dd> <dt>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</dt> <dd>Returns a list of <code>WebGLShader</code> objects attached to a <code>WebGLProgram</code>.</dd> <dt>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</dt> <dd>Returns information about the program.</dd> <dt>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</dt> <dd>Returns the information log for a <code>WebGLProgram</code> object.</dd> <dt>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</dt> <dd>Returns information about the shader.</dd> <dt>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</dt> <dd>Returns a <code>WebGLShaderPrecisionFormat</code> object describing the precision for the numeric format of the shader.</dd> <dt>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</dt> <dd>Returns the information log for a <code>WebGLShader</code> object.</dd> <dt>{{domxref("WebGLRenderingContext.getShaderSource()")}}</dt> <dd>Returns the source code of a <code>WebGLShader</code> as a string.</dd> <dt>{{domxref("WebGLRenderingContext.isProgram()")}}</dt> <dd>Returns a Boolean indicating if the passed <code>WebGLProgram</code> is valid.</dd> <dt>{{domxref("WebGLRenderingContext.isShader()")}}</dt> <dd>Returns a Boolean indicating if the passed <code>WebGLShader</code> is valid.</dd> <dt>{{domxref("WebGLRenderingContext.linkProgram()")}}</dt> <dd>Links the passed <code>WebGLProgram</code> object.</dd> <dt>{{domxref("WebGLRenderingContext.shaderSource()")}}</dt> <dd>Sets the source code in a <code>WebGLShader</code>.</dd> <dt>{{domxref("WebGLRenderingContext.useProgram()")}}</dt> <dd>Uses the specified <code>WebGLProgram</code> as part the current rendering state.</dd> <dt>{{domxref("WebGLRenderingContext.validateProgram()")}}</dt> <dd>Validates a <code>WebGLProgram</code>.</dd> </dl> <h2 id="Uniforms_and_attributes">Uniforms and attributes</h2> <dl> <dt>{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}</dt> <dd>Disables a vertex attribute array at a given position.</dd> <dt>{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}</dt> <dd>Enables a vertex attribute array at a given position.</dd> <dt>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</dt> <dd>Returns information about an active attribute variable.</dd> <dt>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</dt> <dd>Returns information about an active uniform variable.</dd> <dt>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</dt> <dd>Returns the location of an attribute variable.</dd> <dt>{{domxref("WebGLRenderingContext.getUniform()")}}</dt> <dd>Returns the value of a uniform variable at a given location.</dd> <dt>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</dt> <dd>Returns the location of a uniform variable.</dd> <dt>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</dt> <dd>Returns information about a vertex attribute at a given position.</dd> <dt>{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}</dt> <dd>Returns the address of a given vertex attribute.</dd> <dt>{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}</dt> <dd>Specifies a value for a uniform variable.</dd> <dt>{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}</dt> <dd>Specifies a matrix value for a uniform variable.</dd> <dt>{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}</dt> <dd>Specifies a value for a generic vertex attribute.</dd> <dt>{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}</dt> <dd>Specifies the data formats and locations of vertex attributes in a vertex attributes array.</dd> </dl> <h2 id="Drawing_buffers">Drawing buffers</h2> <dl> <dt>{{domxref("WebGLRenderingContext.clear()")}}</dt> <dd>Clears specified buffers to preset values.</dd> <dt>{{domxref("WebGLRenderingContext.drawArrays()")}}</dt> <dd>Renders primitives from array data.</dd> <dt>{{domxref("WebGLRenderingContext.drawElements()")}}</dt> <dd>Renders primitives from element array data.</dd> <dt>{{domxref("WebGLRenderingContext.finish()")}}</dt> <dd>Blocks execution until all previously called commands are finished.</dd> <dt>{{domxref("WebGLRenderingContext.flush()")}}</dt> <dd>Empties different buffer commands, causing all commands to be executed as quickly as possible.</dd> </dl> <h2 id="Working_with_extensions">Working with extensions</h2> <p>These methods manage WebGL extensions:</p> <dl> <dt>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</dt> <dd>Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.</dd> <dt>{{domxref("WebGLRenderingContext.getExtension()")}}</dt> <dd>Returns an extension object.</dd> </dl> <h2 id="Specifications">Specifications</h2> <table class="standard-table"> <tbody> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> <tr> <td>{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}</td> <td>{{Spec2('WebGL')}}</td> <td>Initial definition</td> </tr> </tbody> </table> <h2 id="Browser_compatibility">Browser compatibility</h2> <p>{{Compat}}</p> <h2 id="See_also">See also</h2> <ul> <li>{{domxref("HTMLCanvasElement")}}</li> </ul>