Контекст і можливості
| Метод / Константа | Опис |
|---|---|
| canvas.getContext('webgl2') |
Отримати контекст WebGL 2; для WebGL 1 відкочується до
'webgl'
|
| gl.getParameter(pname) |
Запит стану: MAX_TEXTURE_SIZE,
MAX_VERTEX_ATTRIBS,
MAX_TEXTURE_IMAGE_UNITS тощо.
|
| gl.getSupportedExtensions() | Масив доступних рядків розширень |
| gl.getExtension(name) | Увімкнути та повернути обʼєкт розширення або null |
| gl.viewport(x, y, w, h) | Задати область малювання в пікселях |
| gl.scissor(x, y, w, h) | Обмежити рендеринг прямокутником відсікання (увімкніть через gl.enable(gl.SCISSOR_TEST)) |
Шейдери та програми
| Метод | Опис |
|---|---|
| gl.createShader(type) |
type: gl.VERTEX_SHADER або
gl.FRAGMENT_SHADER
|
| gl.shaderSource(s, src) | Задати рядок коду GLSL на шейдер |
| gl.compileShader(s) |
Скомпілювати; перевірте через
gl.getShaderParameter(s, gl.COMPILE_STATUS)
|
| gl.getShaderInfoLog(s) | Повідомлення про помилки компіляції з номерами рядків |
| gl.createProgram() | Створити обʼєкт програми |
| gl.attachShader(prog, s) | Приєднати скомпільований вершинний або фрагментний шейдер |
| gl.transformFeedbackVaryings(prog, names, mode)GL2 |
Оголосити виходи TF перед лінкуванням. mode:
INTERLEAVED_ATTRIBS або
SEPARATE_ATTRIBS
|
| gl.linkProgram(prog) |
Злінкувати; перевірте
gl.getProgramParameter(prog, gl.LINK_STATUS)
|
| gl.useProgram(prog) | Активувати програму для наступних викликів відмалювання |
| gl.getUniformLocation(prog, name) | Отримати дескриптор юніформа |
| gl.uniform1f / 2f / 3f / 4f | Задати float-юніформи (варіанти: 1i, 2i, Matrix4fv тощо) |
| gl.getAttribLocation(prog, name) | Отримати індекс атрибута |
Обʼєкти буферів
| Метод | Опис |
|---|---|
| gl.createBuffer() | Створити обʼєкт буфера GPU |
| gl.bindBuffer(target, buf) |
Привʼязати. Цілі: ARRAY_BUFFER,
ELEMENT_ARRAY_BUFFER,
UNIFORM_BUFFERGL2,
TRANSFORM_FEEDBACK_BUFFERGL2
|
| gl.bufferData(target, data, usage) |
Завантажити. Підказки usage: STATIC_DRAW,
DYNAMIC_DRAW, DYNAMIC_COPYGL2,
STREAM_DRAW
|
| gl.bufferSubData(target, offset, data) | Часткове оновлення — швидше за повне перезавантаження |
| gl.vertexAttribPointer(idx, size, type, norm, stride, offset) | Описати розкладку атрибута в привʼязаному ARRAY_BUFFER |
| gl.enableVertexAttribArray(idx) | Увімкнути читання цього атрибута з буфера |
| gl.vertexAttribDivisor(idx, div)GL2 | div=0: на вершину; div=1: на екземпляр (інстансинг) |
| gl.createVertexArray()GL2 | VAO: інкапсулює весь стан атрибутів |
| gl.bindVertexArray(vao)GL2 | Активувати VAO — відновлює весь збережений у ньому стан атрибутів |
Текстури
| Метод / Константа | Опис |
|---|---|
| gl.createTexture() | Створити обʼєкт текстури |
| gl.bindTexture(target, tex) |
Цілі: TEXTURE_2D,
TEXTURE_CUBE_MAP, TEXTURE_3DGL2,
TEXTURE_2D_ARRAYGL2
|
| gl.texImage2D(target, level, internalFmt, w, h, 0, fmt, type, data) |
Завантажити 2D-текстуру. Варіанти internalFmt:
RGBA8,
RGBA16F, RGBA32F,
DEPTH24_STENCIL8
|
| gl.texParameteri(target, pname, value) |
Задати фільтрацію та повторення: TEXTURE_MIN_FILTER,
TEXTURE_MAG_FILTER,
TEXTURE_WRAP_S/T/R. Значення:
LINEAR, NEAREST,
CLAMP_TO_EDGE, REPEAT
|
| gl.generateMipmap(target) | Автоматично згенерувати повний ланцюг mipmap з рівня 0 |
| gl.activeTexture(gl.TEXTURE0 + n) | Вибрати текстурний блок перед привʼязкою |
| gl.uniform1i(loc, n) | Задати юніформ-семплер на текстурний блок n |
Фреймбуфери та рендербуфери
| Метод | Опис |
|---|---|
| gl.createFramebuffer() | Створити позаекранний фреймбуфер (FBO) |
| gl.bindFramebuffer(target, fb) |
target: FRAMEBUFFER,
READ_FRAMEBUFFERGL2,
DRAW_FRAMEBUFFERGL2
|
| gl.framebufferTexture2D(target, attach, texTarget, tex, level) |
Приєднати текстуру до FB. attach:
COLOR_ATTACHMENT0,
DEPTH_ATTACHMENT,
DEPTH_STENCIL_ATTACHMENT
|
| gl.drawBuffers(bufs)GL2 |
Кілька рендер-цілей. Наприклад,
[gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1]
|
| gl.checkFramebufferStatus(target) |
Повертає FRAMEBUFFER_COMPLETE, якщо FB придатний
для рендерингу
|
| gl.blitFramebuffer(…)GL2 | Копіювати пікселі з READ_FRAMEBUFFER у DRAW_FRAMEBUFFER (швидке розвʼязання AA) |
Виклики відмалювання
| Метод | Опис |
|---|---|
| gl.drawArrays(mode, first, count) |
Відмалювати примітиви з вершинних буферів. mode:
TRIANGLES, POINTS,
LINES, TRIANGLE_STRIP
|
| gl.drawElements(mode, count, type, offset) |
Індексоване відмалювання з привʼязаним ELEMENT_ARRAY_BUFFER.
type:
UNSIGNED_SHORT або UNSIGNED_INT
|
| gl.drawArraysInstanced(mode, first, count, instances)GL2 |
Інстансоване відмалювання — рендерить instances
копій з атрибутами на екземпляр
|
| gl.drawElementsInstanced(mode, count, type, offset, instances)GL2 | Індексоване + інстансоване відмалювання |
| gl.clear(mask) |
mask:
COLOR_BUFFER_BIT | DEPTH_BUFFER_BIT |
STENCIL_BUFFER_BIT
|
| gl.clearColor(r, g, b, a) | Задати колір, який використовує gl.clear(COLOR_BUFFER_BIT) |
Машина станів
| Стан | Увімкнення / Налаштування |
|---|---|
| Тест глибини |
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LESS);
gl.depthMask(true)
|
| Змішування |
gl.enable(gl.BLEND);
gl.blendFunc(src, dst). Поширені:
(SRC_ALPHA, ONE_MINUS_SRC_ALPHA) або
(SRC_ALPHA, ONE) для адитивного
|
| Відсікання граней |
gl.enable(gl.CULL_FACE);
gl.cullFace(gl.BACK) (усталено);
gl.frontFace(gl.CCW)
|
| Зміщення полігонів |
gl.enable(gl.POLYGON_OFFSET_FILL);
gl.polygonOffset(factor, units) — запобігає
z-fighting для декалей
|
| Трафаретний тест |
gl.enable(gl.STENCIL_TEST);
gl.stencilFunc(func, ref, mask);
gl.stencilOp(fail, zfail, zpass)
|
| Відкидання растеризатораGL2 |
gl.enable(gl.RASTERIZER_DISCARD) — пропустити
обробку фрагментів (використовується з transform feedback)
|
Стан WebGL глобальний для кожного контексту — зміна режиму
змішування, тесту глибини чи відсікання граней для одного виклику
відмалювання впливає на всі наступні виклики. Завжди відновлюйте
стан або явно перевстановлюйте його перед кожною групою викликів
відмалювання.