На примерах PixiJS

От <div> к WebGL

1. Убираем <div>

​

2.

​

​

​

​

3. PROFIT!

​

Меня зовут Иван

Закончил МехМат МГУ, много участвовал в олимпиадах по программированию.

С 2015 года занимаюсь WebGL, PixiJS

В 2012—2013, ещё до agar.io сделал игру http://gameofbombs.com на canvas-2d, бомбер на 2000 человек на одной карте.

​

Еще о себе

Работаю некромантом в https://crazypanda.ru, делаю конвертер �Flash-графики на html5.

4 года помогаю на форумах и в чатах по разработке на Сanvas 2d/WebGL.

Знаю много чужих кейсов, консультирую проекты с тяжёлыми случаями.

​

Необходимый�минимум �знаний по WebGL

Минимальный WebGL в pixi

Для чего используют в продакшне

Это не конь!

Клуб 100k кроликов — это круто!

Разные элементы

• Кролики в игре
• Котировки на бирже
• Здания, точки на карте

Рецепт

• лоу-левел (Sprite/Graphics/Tilemap)
• хай-левел от кодера

Комбинаций много, решений много,

Можно делать доклад на каждой конфе.

😂

👍

🤦🏻‍♀️ WebGL не нужен 🤦🏻‍♀️

Кривые руки рисуют кривые

CSS/SVG и так многое умеет.

• https://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/ - на чистом CSS
• ThreeJS имеет SVGRenderer, частичная поддержка материалов.
• canvas-2d более ограничен: нет перспективы

​

</вступление>

Альфа-блендинг

Research #1

Берём свободного математика и просим его подобрать функцию

• в ряду стоят несколько светящихся объектов: светимость RGB, а прозрачность alpha (opacity)
• нужно превратить их в один такой объект (схлопнуть)
• если объект непрозрачный (alpha=1), то то что позади него ничего не значит
• если объект полностью прозрачный (alpha=0) то не влияет на результат
• частичная прозрачность наверное какая-то линейная

​

Research #2

Математик отвечает:

решений наверное много, но вот я что-то подобрал.

Можно складывать два соседних объекта по формуле

Result, Source, Destination: каждый имеет компоненты R*A, G*A , B*A , A

Ассоциативность: в каком порядке делать сложения - всё равно, главное чтобы не менять объекты их местами (левый с правым)

Кошмарный результат

Не понятно. Почему нельзя просто R, G, B, A

Premultiplied Alpha

Not Premultiplied Alpha

А где тут фон-то?

Blending в WebGL

Porter Duff

• выбор из набора коэффициентов F
• + , - , max , min
• отдельно для цветов, отдельно для альфы (separate)
• https://threejs.org/examples/webgl_materials_blending_custom

​

​

Alpha compositing CSS / SVG

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode - Огромный выбор режимов

https://www.w3.org/TR/compositing-1/#blending�Все формулы известны

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation�Они все есть в canvas 2d

Можно помножить картинку на цвет с помощью доп. canvas

Разные текстуры, разные режимы premultiplied

Всё OK

NPM как PMA

Прошлись второй раз

​

Advanced Blending

• По двум RGB выдать результат
• Альфу учесть в конце:
• 0 - не меняем фон,
• 1 - берем результат.
• WebGL только на шейдере :(

</alpha-compositing>

Advanced Blend in WebGL

Сглаживание

АА и smoothing: люди путают

АА и smoothing: люди путают

​

​

Антиалиасинг

• Геометрия
• PER CANVAS
• Затратно

2Д-терминология

Текстурная фильтрация

• Внутри
• PER TEXTURE
• Почти ничего не стоит
• Обычно это и есть smoothing

Фильтрация в CSS/SVG

Фильтрация в CSS/SVG

• Она либо есть, либо её нет. ON/OFF
• Думать не надо
• Можно применять к canvas: crisp-edges / pixelate

Наивный подход: Поворот не туда 😱

1. Для каждого пикселя текстуры рассчитаем куда он попадёт
2. Получается надо “накапливать” цвет в пикселе
3. Доп. память для хорошей точности - не вариант!

Подозрительная texture2D в шейдере

Вопросы к texture2D

1. что если мы попали между пикселями текстуры
2. 🚜 уехали за границу?
3. как оно определяет сжатие/растяжение
4. сколько раз мы можем это делать для одного пикселя экрана

Mipmap: downscale по степеням двойки

• WebGL1 даёт это сделать только для power-of-two текстур:

256х256�512х1024�...

• WebGL2 — для всех ✊

Mipmap exploration

• Уровень считается по ddx, ddy
• ddx, ddy считается по тому что запросил

шейдер в соседних пикселях

• формулы разные на разных устройствах

​

​

https://github.com/Busyrev/mipExploration

​

Cursed GPU

isotropy must die

Ideal

https://pikabu.ru/story/v_firefox_58_poyavitsya_zashchita_ot_skryitoy_identifikatsii_polzovateley_pri_pomoshchi_canvas_5449626

Ответы про texture2D

• Есть NEAREST - ближайший и LINEAR - по четырём соседним
• CLAMP (default) / REPEAT (опять pow2)
• Скейл определяется по координатам которые запросил шейдер в соседних пикселях. Какие mip-уровни берутся зависит от девайса.
• Кол-во вызовов зависит от девайса и системы. В Windows XP/7 ещё и ограничение на то как использовать его с условным оператором!
• Это не функция, это элемент многопоточности

LINEAR filtering: premultiplied alpha strikes again!

Почему лучше делать premultiply.

http://www.adriancourreges.com/blog/2017/05/09/beware-of-transparent-pixels/

​

Make it bleed! (extrude)

Google Fail at downscale 🤦🏻‍♀️

• https://skia.org/user/modules/pathkit�WebASM version of Skia PathKit
• Пытаемся нарисовать логотип Google на webgl-1
• mipmap работает только на pow2
• Так не доставайся же ты никому!
• А WebGL 2 там пока не работает...

3D: anisotropic filtering

</texture-filtering>

Антиалиасинг

Откуда берется лесенка?

Типы АА в браузере

Analytical AA

Multi-Sampling AA

делается на CPU

жрет доп память

дорого но не как скейл

Conflation (слияние) соседних фигур

Google Doodle

Memorial Day 2018

CreateJS shapes

https://www.google.com/doodles/veterans-day-2018

Решение с SVG�

Решение с PixiJS если в текстуре conflation

Проблемы с MSAA в WebGL

• На WebGL1 (~50% устройств) только главный фреймбуффер
• Не все рендереры умеют использовать MSAA в WebGL2, архитектурные проблемы

Параметр при создании контекста { antialias: true}

Ретиновый макбук взлетает

</antialiasing>

😍 WebGL нужен 😍

Композитные фильтры

Фильтры в SVG/CSS

• box-shadow на самом деле комбинация фильтров, кешируется
• https://yoksel.github.io/svg-filters-02-2018/ - удобный редактор композитных фильтров, можно разобрать тень на части
• Все умеют работать в sRGB и linear RGB : разные градиенты, преобразования цвета
• Тормоза. Изменение свойств => перерисовка слоя, анимациям тяжело
• Canvas 2d умеет использовать SVG фильтры
• Набор заданных компонент, новые сделать нельзя

Фильтры в PixiJS

• Только в WebGL-режиме. На canvas-2d ищем героя!�https://github.com/pixijs/pixi-filters отдельный репозиторий для коллекции
• https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters описание сложностей с написанием шейдера
• Нет редактора, но JS-код понятный
• Не тормоз, но и не газ: штук 20 на экране, или несколько полноэкранных выдержит.
• Нет разницы между анимацией и статикой, хотите кешировать - делайте это сами, PixiJS не следит за изменениями параметров

​

Фильтры в PixiJS, dropShadow

Код Javascript

Код

Код шейдера

Код

Слои и композитная демка

Простая сцена со светом

Опять кролики!

• Цветные круги добавляются в контейнер кролика
• Помечаются что должны быть нарисованы в другом контейнере
• На другом контейнере фильтр!
• Воспроизводимо на SVG и canvas 2d

​

SpectorJS (расширение в chrome store)

• Даёт список WebGL команд одного фрейма
• Показывает промежуточный результат
• Можно сохранить отчёт
• Спасибо BabylonJS!

Конклюжн

+/- WebGL ✊

• Можно такое “ВАУ” которое не сделаешь на CSS/SVG, ну или сделаешь но через странные места
• Чтобы получить схожую картинку придётся много учить, опыт важен
• Можно использовать коллективный опыт WebGL-сообщества который с каждым годом растёт (айда к нам в чатики!)
• За GLSL придётся продать душу
• Ограничение на количество <canvas> на экране
• Получающуюся картинку можно отскейлить браузером через CSS

PixiJS 😍

• 100.000 кроликов!
• Мы уже почти всё починили
• Простая абстракция от WebGL, который изначально сложный
• Мощная система работы с фильтрами, но без кеша
• Частичная поддержка вектора и интеграция с SVG (pixi5-svg)
• Сцена а-ля Flash , без layout
• Можно написать шейдера
• Даёт измазаться в генерации текстур
• Можно врубить MSAA и убрать швы

​

CSS & SVG 😺

• Layout!
• Почти идеальный вектор. Идеальный на Nvidia 10xx
• Лучшие средства инспекции в браузере
• Покрывает почти все потребности эффектов на современных сайтах
• Встроенные фильтры, тени кешируются и не тормозят

Canvas 2D 🦊

• То ускорен на GPU, то — нет
• Рендерит SVG
• Простое API для рисования, возможности от SVG Path
• Фиг отрубишь антиалиасинг
• Есть уже везде!
• Всегда хороший скейл
• Держит тыщи кроликов
• Фильтры от SVG без кеша с тормозами (но есть!)

Ссылки ссылки ссылки

https://github.com/pixijs/pixi.js�PixiJS репозиторий, wiki (важно!) со ссылками

https://www.html5gamedevs.com/forum/15-pixijs/�PixiJS подфорум на html5gamedevs

https://t.me/gamedevforweb , https://t.me/threejs_ru�Русскоязычные telegram чаты о WebGL

https://beatflyer.com/�приложение использующее множество фильтров

​

Добивание

https://www.researchgate.net/publication/262357352_GPU-accelerated_Path_Rendering nvidia пытается в векторную графику (2012)

https://docs.google.com/document/d/1bs27MuOGB6OQrlQ2yNbStUwQFWI3MvxtIELIlMyIVgA/edit�Analytical Anti-Aliasing in Skia, на самом деле есть в сорцах самой Skia

https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch25.html�Rendering Vector Art on the GPU

https://habr.com/ru/post/141910/�Первый понитред на хабре, про canvas-2d и турбо-паскаль.

Добавки!!!

http://www.adriancourreges.com/blog/2017/05/09/beware-of-transparent-pixels/ статья по premultiplied alpha

https://github.com/Busyrev/mipExploration�тест на особенности выбора уровня mip

https://ciechanow.ski/alpha-compositing/�хорошая статья по alpha compositing

https://codepen.io/stefanweck/pen/Vbgeax�фильтр с дождиком

Про себя

https://twitter.com/ivanpopelyshev

https://github.com/ivanpopelyshev/

https://www.youtube.com/channel/UCaHarZvr6y1Og4dMLE_nbWQ

Анимация!

https://www.youtube.com/channel/UCZfYlIsllUFyfmLodIpzU0g

Ссылка на слайды

https://bit.ly/2Nt7L1h