1 Canvas 2D API
<canvas> пиксельный буфер
контекст getContext('2d')
линии кривые растры

2 WebGL
getContext('webgl') webgl2
GPU шейдеры
треугольники буферы текстуры

3 WebGPU
новая GPU система
низкоуровневый доступ к видеокарте
рендер и compute

4 SVG
векторная сцена DOM
<svg> <path> <circle>
скрипт меняет атрибуты

5 CSS painting
рисование через CSS
gradients filters masks
анимация transform

6 DOM элементы
div span
позиционирование
скрипт меняет left top transform

7 CSS Houdini Paint API
кастомный painter
paintWorklet
рисует в CSS background

8 WebGL через OffscreenCanvas
канвас в worker
рендер вне main thread

9 ImageData / pixel buffer
прямое изменение массива пикселей
putImageData

10 Video + WebCodecs
кадры генерируются скриптом
вывод как видео поток

11 WebXR rendering
рендер сцены для VR AR

12 WebAssembly + Canvas/WebGL
рендер код на C C++ Rust
вывод через canvas или webgl

13 CSS clip path / mask генерация
скрипт генерирует форму
CSS её рисует

14 HTML5 <video> как framebuffer
кадры рисуются в canvas
передаются в video

15 Three.js Babylon.js
библиотеки над WebGL WebGPU

📊 Фактически движки рендера браузера

1 raster engine → Canvas
2 vector engine → SVG
3 GPU pipeline → WebGL WebGPU
4 layout engine → DOM CSS

15-03-2026 23:27:51

UNIX:1773581271