Как анимировать тысячи объектовна карте и не подвесить браузер

Ахмедьзянов Данильян

ЭТТО

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

35

Спасибо за внимание

Ахмедьзянов Данильян

ЭТТО

hugefast@gmail.com

github.com/pokatomnik