"Howto: интерактивная визуализация на сотни тысяч элементов внутри браузера"

Иван Затравкин, Chief Software Engineer

"В этом докладе мы рассмотрим комплексный подход к решению проблемы взаимодействия в режиме реального времени с датасетами в сотни тысяч элементов. Обязательно поговорим о технологиях браузера, которые можно использованы в подобных сценариях: WebAssembly, WebWorkers, WebGL (спойлер: не все из них пригодились и принесли ожидаемые результаты). Не избежать и разговора о будущем: заглянем вперед и посмотрим, как подобное будет решаться в браузере через несколько лет."

Transcript

1. How to: Высокопроизводительная визуализация
2. quantori.com 2 О авторе Chief Software Engineer в Quantori, стартапер, спикер
3. quantori.com 3 О проекте Y X
4. quantori.com 4 О проекте Y X
5. quantori.com 5 О проекте
6. quantori.com 6 Что нам удалось достичь - Увеличили допустимый размер датасета с 5000 до ~1,000,000 точек; - Увеличили допустимое количество фильтров с 8 до неограниченного; - Значительно расширили функционал.
7. quantori.com 7 Компоненты решения - Быстрая фильтрация - WebAssembly, алгоритмы - Быстрая интерактивность - Структуры данных - Быстрая визуализация - WebGL
8. Фильтрация
9. quantori.com 9 WebAssembly https://developer.mozilla.org/ru/docs/WebAssembly “WebAssembly – это новый открытый формат байт-кода, исполняемого современными браузерами.” “WebAssembly ... предоставляет способ исполнения кода ... со скоростью близкой к нативной, чего ранее невозможно было достичь.”
10. quantori.com 10 WebAssembly example #include <emscripten/bind.h> using namespace emscripten; float add(float a, float b) { return a + b; } EMSCRIPTEN_BINDINGS(my_module) { function("add", &add); }
11. quantori.com 11 WebAssembly: SQLite https://sql.js.org - In-memory база данных внутри WebAssembly - Возможность писать обычный SQL для фильтрации данных
12. quantori.com 12 Почему SQLite не подошел - Недостаточно быстро - Требует ослабления CSP
13. quantori.com 13 Почему WebAssembly медленно - WebAssembly - виртуальная машина - WebAssembly работает параллельно с JS (registry pressure) - Медленный обмен данными с JS https://www.usenix.org/system/files/atc19-jangda.pdf
14. quantori.com 14 JavaScript - быстрый function h(k) { return k * (k + 3) % 7919; } function benchmark() { let k = 12; for (let i = 0; i < 100000000; i++) { k = h(k); } return k; } native -O3 389ms JS 384ms WASM 483ms https://www.reddit.com/r/WebAssembly/comments/kk9vuv/webassembly_much_slower_than_js_in_this_benchmark/ [benchmark source]
15. quantori.com 15 JS solution - Фильтрация происходит мышкой -> маленькие изменения - Можно пересчитывать только границы - Первичная фильтрация предикатом - В 10 раз быстрее SQL и 100+ раз быстрее начальной версии
16. Интерактивность
17. quantori.com 17 Какие проблемы у интерактивности
18. quantori.com 18 DOM
19. quantori.com 19 DOM
20. quantori.com 20 PixiJS https://pixijs.com/
21. quantori.com 21 PixiJS https://github.com/pixijs/pixijs/blob/a0a1b668194e6f6de2399fae1fd ef8fa63efda70/packages/interaction/src/TreeSearch.ts#L13 const children = (displayObject as Container).children; for (let i = children.length - 1; i >= 0; i--) { const child = children[i]; // time to get recursive.. if this function will return if something is hit.. const childHit = this.recursiveFindHit(interactionEvent, child, func, hitTest, interactiveParent); ...
22. quantori.com 22 Spatial Data Structures https://observablehq.com/@2talltim/spatial-data-structures-octrees-bsp-and-k-d-trees
23. quantori.com 23 Древовидные структуры: BVH https://en.wikipedia.org/wiki/Bounding_volume_hierarchy#/media/File:Example_of_bounding_volume_hierarchy.svg
24. quantori.com 24 Сетка O(N) -> O(1) в реальных сценариях Pixi events: 25-30fps, 100% CPU Grid: 60 fps, 1% CPU
25. quantori.com 25 Где может использоваться - Отображение информации на картах - Подгрузка уровней в играх - Оптимизация алгоритмов: поиск пути, пересечения и тд - Расчет освещения - Многое другое, где данные связаны с пространством
26. Визуализация
27. quantori.com 27 Почему не SVG/DOM? Медленно SVG DEMO CANVAS DEMO MORE INFO
28. quantori.com 28 PixiJS PixiJS - библиотека в первую очередь для игр. Ни одна из предоставляемых возможностей не используется. Значительный overhead на использование абстракций Pixi.
29. quantori.com 29 WebGL
30. quantori.com 30 WebGL - pipeline https://opentechschool-brussels.github.io/intro-to-webGL-and-shaders/log1_graphic-pipeline
31. quantori.com 31 WebGL - shaders //переменные передающиеся между стадиями varying vec4 color; //переменные уникальные для каждой вершины attribute vec2 a_position; //переменные общие для всех вершин uniform vec2 u_resolution; //координата вершины gl_Position = vec3(1.,1.,1.); //итоговый цвет пикселя gl_FragColor = vec4(1.,1.,1.,1.);
32. quantori.com 32 WebGL - результат Потребление памяти одного графика на 60k точек: 280mb -> 60mb Время добавления одного графика на 60k точек: 1800ms -> 400ms
33. Что нас ждет дальше?
34. quantori.com 34 WebGPU Новый API, написанный более близко к современному железу.
35. quantori.com 35 Обновления WebAssembly - SIMD инструкции, Flexible Vectors - Threads - Reference Types
36. quantori.com 36 FileSystem API
37. Итоги