Графические API — OpenGL, DirectX, Vulkan, шейдеры
Графический API — контракт между программой и драйвером GPU. Вы описываете геометрию и шейдеры; драйвер планирует работу тысяч ядер видеокарты.
Уровни API
| Уровень | Примеры | Кто управляет памятью |
|---|---|---|
| High | Unity, Three.js | движок |
| Mid | OpenGL, WebGL, D3D11 | частично драйвер |
| Low | Vulkan, D3D12, Metal | программист |
Только треугольники
GPU растеризует треугольники. Круг на экране — mesh из треугольников (fan или strip).
| Фигура | Треугольники |
|---|---|
| Квадрат | 2 |
| Прямоугольник со скруглением | много |
| 3D персонаж | тысячи–миллионы |
IBO (index buffer) — переиспользование вершин: indices = [0,1,2, 0,2,3].
VBO (vertex buffer) — Float32Array в VRAM: [x,y,z, u,v, nx,ny,nz, ...].
Графический конвейер
Play ITЗагрузка интерактивного демо…
| Этап | Функция |
|---|---|
| Input Assembler | читает вершины из VBO |
| Vertex Shader | MVP, позиция в clip space |
| Primitive Assembly | собирает треугольники |
| Rasterization | покрытие пикселей (fixed function) |
| Fragment Shader | цвет пикселя — текстура, свет |
| Depth test | Z-buffer |
| Blending | прозрачность |
| Frame buffer | итоговый кадр в VRAM |
Шейдеры (GLSL и HLSL)
Шейдер — маленькая программа на GPU. GLSL — язык OpenGL и WebGL. HLSL — язык DirectX.
Пример vertex (упрощённо):
#version 300 es
in vec2 aPos;
uniform mat4 uMVP;
void main() {
gl_Position = uMVP * vec4(aPos, 0.0, 1.0);
}
Пример fragment:
precision mediump float;
out vec4 fragColor;
uniform vec4 uColor;
void main() {
fragColor = uColor;
}
Ошибка компиляции → чёрный экран; смотрите getShaderInfoLog.
Fragment shader запускается параллельно на фрагменты (пиксели) — см. warp в главе 12.
State Machine (OpenGL-стиль)
Классический OpenGL — глобальные тумблеры:
gl.enable(gl.DEPTH_TEST);
gl.useProgram(program);
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.drawArrays(gl.TRIANGLES, 0, 3);
Забытый enable(BLEND) даёт артефакты прозрачности на следующих объектах.
Vulkan и D3D12 используют Pipeline State Object — заранее собранный пакет состояний; меньше runtime toggle, больше кода инициализации.
OpenGL и OpenGL ES
- классический стандарт с обширной документацией (Learn OpenGL)
- Core profile — VBO + shaders
- OpenGL ES — подмножество для mobile и WebGL
- Desktop OpenGL уступает Vulkan и D3D12 в новых AAA, но жив в инструментах и WebGL
DirectX 11 и 12
| D3D11 | D3D12 | |
|---|---|---|
| Платформы | Windows, Xbox | Windows, Xbox |
| Память | драйвер помогает | explicit heaps |
| Потоки | ограничено | command lists на ядрах CPU |
| Экосистема | WPF, старые игры | современные AAA |
Vulkan и Metal
Vulkan (Khronos) — Win, Linux, Android. Программист:
- выделяет память (
vkAllocateMemory) - записывает command buffers
- синхронизирует fences и semaphores между CPU и GPU
Metal — Apple. Та же философия низкого уровня.
Порог входа высокий — путь graphics engineer и автор движка.
WebGL в этой картине
WebGL 1/2 ≈ OpenGL ES. Тот же GLSL, те же треугольники. В Chrome — ANGLE → D3D/Metal (глава 10).
Draw calls и batching
Один draw call — один пакет геометрии на GPU. 5 000 мелких draw calls → узкое место на CPU.
Техники:
- texture atlas — одна текстура, много спрайтов
- instancing — один mesh, много позиций
- static batching в Unity — объединение mesh
С чего начать
- Canvas 2D и глава 7
- WebGL tutorial — цветной треугольник (MDN WebGL)
- Three.js — сцена без ручного GL
- RenderDoc — посмотреть кадр игры