WebGLRenderingContext

Интерфейс WebGLRenderingContext предоставляет интерфейс к графическому контексту рендеринга OpenGL ES 2.0 для области рисования HTML-элемента <canvas>.

Для получения доступа к контексту WebGL для рендеринга 2D и/или 3D графики, вызовите getContext() для элемента <canvas>, передав "webgl" в качестве аргумента:

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

После получения контекста WebGL для холста, вы можете выполнять в нём рендеринг. Более подробная информация, примеры и ресурсы по началу работы с WebGL содержатся в учебнике по WebGL.

Если вам нужен контекст WebGL 2.0, см. WebGL2RenderingContext; это предоставляет доступ к реализации графики OpenGL ES 3.0.

См. страницу констант WebGL.

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

WebGLRenderingContext.canvas

Только для чтения ссылка на HTMLCanvasElement. Может быть null, если он не связан с элементом <canvas>.

WebGLRenderingContext.drawingBufferWidth

Только для чтения ширина текущего буфера рисования. Должна совпадать с шириной элемента холста, связанного с этим контекстом.

WebGLRenderingContext.drawingBufferHeight

Только для чтения высота текущего буфера рисования. Должна совпадать с высотой элемента холста, связанного с этим контекстом.

WebGLRenderingContext.getContextAttributes()

Возвращает объект WebGLContextAttributes, содержащий фактические параметры контекста. Может вернуть null, если контекст утерян.

WebGLRenderingContext.isContextLost()

Возвращает true, если контекст утерян, в противном случае возвращает false.

WebGLRenderingContext.makeXRCompatible()

Обеспечивает совместимость контекста с XR-оборудованием пользователя, пересоздавая контекст при необходимости с новой конфигурацией для этого. Это можно использовать для запуска приложения с обычной 2D презентацией, а затем перейти к использованию режима VR или AR позже.

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()

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

WebGLRenderingContext.lineWidth()

Устанавливает ширину линий при растрировании.

WebGLRenderingContext.pixelStorei()

Устанавливает режимы хранения пикселей

WebGLRenderingContext.polygonOffset()

Устанавливает коэффициенты масштабирования и единицы для вычисления значений глубины.

WebGLRenderingContext.sampleCoverage()

Устанавливает параметры многообразной выборки для эффектов сглаживания.

WebGLRenderingContext.stencilFunc()

Устанавливает функции и эталонное значение для проверки маски передней и задней сторон.

WebGLRenderingContext.stencilFuncSeparate()

Устанавливает функции и эталонное значение для проверки маски передней и/или задней сторон.

WebGLRenderingContext.stencilMask()

Управляет включением и выключением записи отдельных битов в плоскостях маски передней и задней сторон.

WebGLRenderingContext.stencilMaskSeparate()

Управляет включением и выключением записи отдельных битов в плоскостях маски передней и/или задней сторон.

WebGLRenderingContext.stencilOp()

Устанавливает действия проверки маски передней и задней сторон.

WebGLRenderingContext.stencilOpSeparate()

Устанавливает действия проверки маски передней и/или задней сторон.

WebGLRenderingContext.bindBuffer()

Связывает объект WebGLBuffer с заданным целевым объектом.

WebGLRenderingContext.bufferData()

Обновляет данные буфера.

WebGLRenderingContext.bufferSubData()

Обновляет данные буфера, начиная с заданного смещения.

WebGLRenderingContext.createBuffer()

Создаёт объект WebGLBuffer.

WebGLRenderingContext.deleteBuffer()

Удаляет объект WebGLBuffer.

WebGLRenderingContext.getBufferParameter()

Возвращает информацию о буфере.

WebGLRenderingContext.isBuffer()

Возвращает логическое значение, указывающее, является ли переданный буфер допустимым.

WebGLRenderingContext.bindFramebuffer()

Связывает объект WebGLFrameBuffer с заданным целевым объектом.

WebGLRenderingContext.checkFramebufferStatus()

Возвращает состояние фреймбуфера.

WebGLRenderingContext.createFramebuffer()

Создаёт объект WebGLFrameBuffer.

WebGLRenderingContext.deleteFramebuffer()

Удаляет объект WebGLFrameBuffer.

WebGLRenderingContext.framebufferRenderbuffer()

Присоединяет объект WebGLRenderingBuffer к объекту WebGLFrameBuffer.

WebGLRenderingContext.framebufferTexture2D()

Присоединяет изображение текстуры к объекту WebGLFrameBuffer.

WebGLRenderingContext.getFramebufferAttachmentParameter()

Возвращает информацию о фреймбуфере.

WebGLRenderingContext.isFramebuffer()

Возвращает логическое значение, указывающее, является ли переданный объект WebGLFrameBuffer допустимым.

WebGLRenderingContext.readPixels()

Читает блок пикселей из WebGLFrameBuffer.

WebGLRenderingContext.bindRenderbuffer()

Связывает объект WebGLRenderBuffer с заданным целевым объектом.

WebGLRenderingContext.createRenderbuffer()

Создаёт объект WebGLRenderBuffer.

WebGLRenderingContext.deleteRenderbuffer()

Удаляет объект WebGLRenderBuffer.

WebGLRenderingContext.getRenderbufferParameter()

Возвращает информацию о рендербуфере.

WebGLRenderingContext.isRenderbuffer()

Возвращает логическое значение, указывающее, является ли переданный объект WebGLRenderingBuffer допустимым.

WebGLRenderingContext.renderbufferStorage()

Создаёт хранилище данных рендербуфера.

WebGLRenderingContext.bindTexture()

Связывает объект WebGLTexture с заданным целевым объектом.

WebGLRenderingContext.compressedTexImage2D()

Задаёт изображение 2D-текстуры в сжатом формате.

WebGLRenderingContext.compressedTexSubImage2D()

Задаёт подизображение 2D-текстуры в сжатом формате.

WebGLRenderingContext.copyTexImage2D()

Копирует изображение 2D-текстуры.

WebGLRenderingContext.copyTexSubImage2D()

Копирует подизображение 2D-текстуры.

WebGLRenderingContext.createTexture()

Создаёт объект WebGLTexture.

WebGLRenderingContext.deleteTexture()

Удаляет объект WebGLTexture.

WebGLRenderingContext.generateMipmap()

Генерирует набор MIP-уровней для объекта WebGLTexture.

WebGLRenderingContext.getTexParameter()

Возвращает информацию о текстуре.

WebGLRenderingContext.isTexture()

Возвращает логическое значение, указывающее, является ли переданная WebGLTexture допустимой.

WebGLRenderingContext.texImage2D()

Задаёт изображение 2D-текстуры.

WebGLRenderingContext.texSubImage2D()

Обновляет подпрямоугольник текущей WebGLTexture.

WebGLRenderingContext.texParameterf()

Устанавливает параметры текстуры.

WebGLRenderingContext.texParameteri()

Устанавливает параметры текстуры.

WebGLRenderingContext.attachShader()

Присоединяет WebGLShader к WebGLProgram.

WebGLRenderingContext.bindAttribLocation()

Связывает индекс вершинного атрибута с именованной переменной атрибута.

WebGLRenderingContext.compileShader()

Компилирует WebGLShader.

WebGLRenderingContext.createProgram()

Создаёт WebGLProgram.

WebGLRenderingContext.createShader()

Создаёт WebGLShader.

WebGLRenderingContext.deleteProgram()

Удаляет WebGLProgram.

WebGLRenderingContext.deleteShader()

Удаляет WebGLShader.

WebGLRenderingContext.detachShader()

Отсоединяет WebGLShader.

WebGLRenderingContext.getAttachedShaders()

Возвращает список объектов WebGLShader объектов, присоединённых к WebGLProgram.

WebGLRenderingContext.getProgramParameter()

Возвращает информацию о программе.

WebGLRenderingContext.getProgramInfoLog()

Возвращает журнал информации для объекта WebGLProgram.

WebGLRenderingContext.getShaderParameter()

Возвращает информацию о шейдере.

WebGLRenderingContext.getShaderPrecisionFormat()

Возвращает объект WebGLShaderPrecisionFormat описывающий точность для числового формата шейдера.

WebGLRenderingContext.getShaderInfoLog()

Возвращает журнал информации для объекта WebGLShader.

WebGLRenderingContext.getShaderSource()

Возвращает исходный код WebGLShader в виде строки.

WebGLRenderingContext.isProgram()

Возвращает логическое значение, указывающее, является ли переданный WebGLProgram допустимым.

WebGLRenderingContext.isShader()

Возвращает логическое значение, указывающее, является ли переданный WebGLShader допустимым.

WebGLRenderingContext.linkProgram()

Связывает переданный объект WebGLProgram.

WebGLRenderingContext.shaderSource()

Устанавливает исходный код в WebGLShader.

WebGLRenderingContext.useProgram()

Использует указанную WebGLProgram как часть текущего состояния отрисовки.

WebGLRenderingContext.validateProgram()

Проверяет WebGLProgram.

WebGLRenderingContext.disableVertexAttribArray()

Отключает массив атрибутов вершин в заданной позиции.

WebGLRenderingContext.enableVertexAttribArray()

Включает массив атрибутов вершин в заданной позиции.

WebGLRenderingContext.getActiveAttrib()

Возвращает информацию об активной переменной атрибута.

WebGLRenderingContext.getActiveUniform()

Возвращает информацию об активной униформенной переменной.

WebGLRenderingContext.getAttribLocation()

Возвращает расположение переменной атрибута.

WebGLRenderingContext.getUniform()

Возвращает значение униформенной переменной в заданном расположении.

WebGLRenderingContext.getUniformLocation()

Возвращает расположение униформенной переменной.

WebGLRenderingContext.getVertexAttrib()

Возвращает информацию об атрибуте вершины в заданной позиции.

WebGLRenderingContext.getVertexAttribOffset()

Возвращает адрес заданного атрибута вершины.

WebGLRenderingContext.uniform[1234][fi][v]()

Устанавливает значение униформенной переменной.

WebGLRenderingContext.uniformMatrix[234]fv()

Устанавливает матричное значение для униформенной переменной.

WebGLRenderingContext.vertexAttrib[1234]f[v]()

Устанавливает значение для универсального атрибута вершины.

WebGLRenderingContext.vertexAttribPointer()

Определяет форматы данных и расположения атрибутов вершин в массиве атрибутов вершин.

WebGLRenderingContext.clear()

Очищает указанные буферы до предопределенных значений.

WebGLRenderingContext.drawArrays()

Отображает примитивы из данных массива.

WebGLRenderingContext.drawElements()

Отображает примитивы из данных массива элементов.

WebGLRenderingContext.finish()

Заблокировать выполнение, пока не будут завершены все ранее вызванные команды.

WebGLRenderingContext.flush()

Очищает различные команды буфера, заставляя все команды выполняться как можно быстрее.

WebGLRenderingContext.drawingBufferColorSpace

Определяет цветовое пространство буфера рисования WebGL.

WebGLRenderingContext.unpackColorSpace

Определяет цветовое пространство для преобразования при импорте текстур.

Эти методы управляют расширениями WebGL:

WebGLRenderingContext.getSupportedExtensions()

Возвращает Array строк, содержащих все поддерживаемые расширения WebGL.

WebGLRenderingContext.getExtension()

Возвращает объект расширения.

• HTMLCanvasElement