WebGL Cookbook

Что такое WebGL?

• API для рендеринга графики в браузере
• Почти как OpenGL
• Не только 2D но и 3D
• Использует видеокарту

Это рендер треугольников

15 лет развития

Камень

WebGL

• version 1.0
• version 2.0
• WebGPU

Web Assembly

• asm.js
• wasm modules
• GC
• compilers
• webpack modules

API не из веба

            gl.activeTexture(gl.TEXTURE0)
            gl.bindTexture(gl.TEXTURE_2D, texture)
            gl.texImage2D(this.gl.TEXTURE_2D, ..., image)
            gl.uniform1i(gl.getUniformLocation('u_image'), 0);
        

Это глобальная стейт машина

            setState(arg1)
            setState(arg1, arg2)
            setState(arg1, ..., arg9)
            // но нельзя
            let state = getState()
        

Типичные случаи

• 3D/2D игры
• Когда нужны анимации
• Когда очень много элементов
• Figma/Miro/Графические редакторы

Где можно выучить?

• webglfundamentals.org
• developer.mozilla.org
• learnwebgl.brown37.net

Regl

github.com/regl-project/regl

• Минималистичный
• Быстрый
• Минимум абстракций

Regl

• Только для тех кто разобрался в WebGL
• ну, хоть немного

PixiJS

pixijs.com

• 749.9 kB
• Понятный API
• Максимум абстракций

PixiJS

• API вдохновлено Flash
• Похоже на DOM API
• Взял картинку
• Применил к ней фильтр

PixiJS + React

github.com/pixijs/pixi-react

Three.js

threejs.org

• 640.4 kB
• создано для 3D
• Максимум абстракций

Three.js + React

github.com/pmndrs/drei

Когда не стоит использовать WebGL?

• когда все в SVG
• анимации букв и текста
• когда можно обойтись CSS