Как анимировать тысячи объектов на карте и не...
TRANSCRIPT
Как анимировать тысячи объектовна карте и не подвесить браузер
Ахмедьзянов Данильян
ЭТТО
12-я конференция .NET разработчиков
15 мая 2016
dotnetconf.ru
2
Задача
● Сложное веб приложение, которое быуправляло уличными работами поремонту городской инфраструктуры.
● Нужна карта для отображенияактуальных данных
● Объектов для отображения на картеочень много (десятки тысяч) и нужно ихотобразить одновременно и сприемлемой скоростью
3
К сути
● Цель - сделать быстрый движок длярисования объектов на карте
● Рисовать все в браузере, разгрузитьсервер
● Зачем - собственное API, возможностьприменить с любыми другими картами,бесплатность.
4
Транспортные средства
5
Метки
6
Все уже придумано до нас?
● Это уже есть. Яндекс карты. Или Google.Или Bing.
● Крутой движок
● Отличное АПИ
● Отличная кроссплатформенность
● Баги не обнаружены.
● Слои, объекты, метки, GeoJSON… (Тайлы,тайлы повсюду)
7
Собственное API
● Нет ограничений - можно рисовать всечто угодно
● Все преимущества браузерныхграфических движков
● Благодаря другому движку 10 000обектов не предел
8
Фотки!
9
Фотки!
10
Почему мы НЕ используем APIяндекса● Платность
● Зависимость от АПИ яндекса.
● Низкое быстродействие если многообъектов
● Дорогие ресурсы сервера - рисование насервере невозможно
11
Грабли - SVG
Pros:
● Удобнейшее API (похоже на DOM-манипуляции)
● Хорошая поддержка браузерами
● Встроенная поддержка всех нужныхпримитивов и растров
Cons:
● Недопустимо низкая производительность ужепри тысяче объектов
12
Грабли - Canvas2d (FabricJS)
Pros:
● Достаточно удобное API, если использоватьс библиотеками вроде FabricJS
● Хорошая поддержка браузерами
● Аппаратное ускорение
Cons:
● Недопустимо низкая производительностьпри тысячах объектов
13
НАСТАЛО ВРЕМЯ ИННОВАЦИЙ
14
WebGL
15
ЭТО БЫСТРО*
*Быстрее чем я ожидал
Аппаратное ускорение в браузере
16
Ложка дегтя
● Меньшая кроссбраузерность /кроссплатформенность*
● Большее потребление ресурсов
17
18
Бочка меда
● Адаптированное под наши задачи API
● Возможность обрабатывать тысячиобъектов одновременно
19
PHASERJS
20
Почему Phaser?
● Отличная документация
● Огромное коммьюнити
● Динамично развивается
● Открытый исходный код
● Есть множество готовых проектов-примеров
● Хорошая производительность для Javascript
● Кроссбраузерность
● Canvas-mode*
21
Еще немного дегтя
● Производительность анимирования натысячах объектов не впечатляет
● Что делать с кроссбраузерностью /кроссплатформенностью?
22
Быстрее!
2 слоя - один для статических объектов,другой для анимаций. Статический слой неперерисовывается движком постоянно.
23
24
БЫСТРЕЕ!!!
Оптимизация микропередвижений карты -при небольшом перемещении движетсяэлемент, канвас не перерисовывается.
25
БЫСТРЕЕ!!!
26
Проблема масштабирования
● Смена масштаба
● Пересчет положений объектов
● Перерисовка
27
Вообще-то никакой проблемынет
28
БЫСТРЕЕ!!!!!!!!!!!!!!!!!!!!!!!!!!
Перерисовка слоя статики для каждой из Nмашин. Тормоза.
29
БЫСТРЕЕ!!!!!!!!!!!!!!!!!!!!!!!!!!
Перерисовка статического слоя стоитдорого, так как выполняется НЕ быстро
30
БЫСТРЕЕ!!!!!!!!!!!!!!!!!!!!!!!!!!
Перерисовка слоя статики для очереди изN машин. Быстрее чуть менее чем в N раз.
31
Копим анимации
● Очередь копится в среднем 4 секунды
● Нет цели показать секунда в секундуположение транспортного средства
● Актуализация положений раз в 4 секундадостаточна для кейса
32
Метки
33
Транспортные средства
34
Исходный код
Доступен по адресу
https://github.com/pokatomnik/layeredMap