codefest 2013. Агафонкин В. — Высокопроизводительные...
DESCRIPTION
TRANSCRIPT
![Page 1: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/1.jpg)
Владимир Агафонкин
высокопроизводительные визуализации данных
в браузере
март 2013
![Page 2: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/2.jpg)
agafonkin.com
/mourner
![Page 3: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/3.jpg)
rain.in.ua
![Page 4: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/4.jpg)
визуализации данных
![Page 5: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/5.jpg)
![Page 6: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/6.jpg)
![Page 7: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/7.jpg)
![Page 8: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/8.jpg)
![Page 9: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/9.jpg)
![Page 10: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/10.jpg)
![Page 11: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/11.jpg)
интерактивность
![Page 12: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/12.jpg)
•реагирование на действия пользователя
интерактивность
![Page 13: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/13.jpg)
•реагирование на действия пользователя
•навигация по данным
интерактивность
![Page 14: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/14.jpg)
•реагирование на действия пользователя
•навигация по данным
•фильтрация данных
интерактивность
![Page 15: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/15.jpg)
![Page 16: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/16.jpg)
![Page 17: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/17.jpg)
![Page 18: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/18.jpg)
![Page 19: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/19.jpg)
![Page 20: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/20.jpg)
потребность в интерактивности увеличивается
![Page 21: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/21.jpg)
ответственность за обработку данных всё больше смещается
от сервера к клиенту
![Page 22: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/22.jpg)
чистый JS — быстро
рендеринг, DOM — медленно
![Page 23: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/23.jpg)
правило №1чем меньше всего
отображаем, тем быстрее
![Page 24: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/24.jpg)
обработка данных рендеринг
![Page 25: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/25.jpg)
обработка данных рендеринг
![Page 26: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/26.jpg)
•фильтрация объектовуменьшение данных
![Page 27: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/27.jpg)
•фильтрация объектов•геометрическое отсечение
уменьшение данных
![Page 28: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/28.jpg)
•фильтрация объектов•геометрическое отсечение•геометрическое упрощение
уменьшение данных
![Page 29: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/29.jpg)
•фильтрация объектов•геометрическое отсечение•геометрическое упрощение•кластеризация (группировка)
уменьшение данных
![Page 30: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/30.jpg)
фильтрация
![Page 31: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/31.jpg)
поиск 2D-объектов
•поиск объектов в текущей прямоугольной видимой области
![Page 32: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/32.jpg)
поиск 2D-объектов
•поиск объектов в текущей прямоугольной видимой области
•поиск объектов в точке (под курсором)
![Page 33: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/33.jpg)
загрузка данных — 1 раз
поиск/фильтрация — много раз
![Page 34: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/34.jpg)
сетка
![Page 35: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/35.jpg)
![Page 36: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/36.jpg)
древовидные структуры данных
•binary heap
•binary search tree
•range tree
•k-d tree
•quadtree
•R-tree
![Page 37: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/37.jpg)
точки в quadtree
![Page 38: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/38.jpg)
прямоугольники в R-tree
![Page 39: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/39.jpg)
var tree = new RTree();
tree.insert( {x: 5, y: 10, w: 10, h: 15}, obj);
...
tree.search( {x: 7, y: 7, w: 5, h: 5});
github.com/imbcmdth/RTree
![Page 40: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/40.jpg)
kothic.org/js
![Page 41: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/41.jpg)
определение коллизий
![Page 42: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/42.jpg)
Crossfilter (для многих измерений)
![Page 43: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/43.jpg)
отсечение ломаных линийалгоритм Коэна-Сазерленда
![Page 44: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/44.jpg)
отсечение полигоновалгоритм Сазерленда-Ходжмана
![Page 45: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/45.jpg)
упрощение ломаных линий
![Page 46: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/46.jpg)
упрощение по расстоянию
![Page 47: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/47.jpg)
алгоритм Дугласа-Пекера
![Page 48: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/48.jpg)
mourner.github.com/simplify-js
![Page 49: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/49.jpg)
кластеризациягруппировка похожих объектов
![Page 50: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/50.jpg)
![Page 51: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/51.jpg)
![Page 52: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/52.jpg)
иерархическая кластеризация
1 раз для всех масштабов
![Page 53: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/53.jpg)
загрузка и обработка данных
![Page 54: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/54.jpg)
UI JS UI
![Page 55: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/55.jpg)
UI JS
браузер залипаетна объемных вычислениях
UI
![Page 56: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/56.jpg)
Web Workers
![Page 57: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/57.jpg)
<script src='data.js'></script>
<script>...worker.postMessage(HUGE_DATA_ARRAY);...</script>
загрузка и пересылка в Worker
![Page 58: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/58.jpg)
UI
Worker JS
загрузка данных UI
![Page 59: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/59.jpg)
UI
Worker JS
браузер залипает на загрузке и пересылке данных
загрузка данных UI
![Page 60: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/60.jpg)
importScripts('data.js');
...
onmessage = function (e) { var result = searchData(e.data.query);
postMessage(result);}
загрузка в Worker
![Page 61: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/61.jpg)
UI
Worker JSзагрузка данных
UIUI
![Page 62: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/62.jpg)
UI
Worker JS
браузер залипает на получении данных
загрузка данных
UIUI
![Page 63: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/63.jpg)
var array = new Float16Array(len);...
var buffer = array.buffer;
postMessage(buffer, [buffer]);
// с этого момента buffer недоступен
transferable objects(Chrome, Firefox)
![Page 64: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/64.jpg)
UI
Worker JSзагрузка данных
UIUI
![Page 65: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/65.jpg)
UI
Worker JS
браузер не залипает, данные пересылаются как ArrayBuffer
загрузка данных
UIUI
![Page 66: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/66.jpg)
function addNumbers(a, b) { 'use asm';
a = a | 0; // int b = +b; // double
return +(a + b); // double}
светлое будущее — asm.js
![Page 67: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/67.jpg)
светлое будущее — asm.js
•оптимизация узких мест вычислений
![Page 68: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/68.jpg)
светлое будущее — asm.js
•оптимизация узких мест вычислений
•пока только в FF Nightly
![Page 69: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/69.jpg)
светлое будущее — asm.js
•оптимизация узких мест вычислений
•пока только в FF Nightly
•обратная совместимость!
![Page 70: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/70.jpg)
технологии рендерингаSVG, Canvas, HTML, WebGL
![Page 71: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/71.jpg)
SVG
•быстрые нативные события для интерактивности
![Page 72: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/72.jpg)
SVG
•быстрые нативные события для интерактивности
•легко обновлять отдельные объекты
![Page 73: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/73.jpg)
SVG
•быстрые нативные события для интерактивности
•легко обновлять отдельные объекты
•тормозит страницу (при большом кол-ве объектов)
![Page 74: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/74.jpg)
Canvas
•после отрисовки не влияет на отзывчивость страницы
![Page 75: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/75.jpg)
Canvas
•после отрисовки не влияет на отзывчивость страницы
•повторяющиеся части можно отрисовать один раз и раскопировать
![Page 76: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/76.jpg)
Canvas
•после отрисовки не влияет на отзывчивость страницы
•повторяющиеся части можно отрисовать один раз и раскопировать
•можно попиксельно рисовать/обрабатывать в Worker
![Page 77: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/77.jpg)
Canvas
•дорого перерисовывать при каждом обновлении
![Page 78: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/78.jpg)
Canvas
•дорого перерисовывать при каждом обновлении
•очень сложно с реализацией интерактивности
![Page 79: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/79.jpg)
WebGL
•основной способ для 3D-визуализаций
![Page 80: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/80.jpg)
WebGL
•основной способ для 3D-визуализаций
•очень быстро в 2D, если нужно отрисовать много спрайтов
![Page 81: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/81.jpg)
WebGL
•основной способ для 3D-визуализаций
•очень быстро в 2D, если нужно отрисовать много спрайтов
•в остальных случаях преимущество в скорости перед Canvas-2D спорно
![Page 82: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/82.jpg)
WebGL
•основной способ для 3D-визуализаций
•очень быстро в 2D, если нужно отрисовать много спрайтов
•в остальных случаях преимущество в скорости перед Canvas-2D спорно
•API намного сложнее и неудобнее
![Page 83: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/83.jpg)
WebGL
•основной способ для 3D-визуализаций
•очень быстро в 2D, если нужно отрисовать много спрайтов
•в остальных случаях преимущество в скорости перед Canvas-2D спорно
•API намного сложнее и неудобнее
•поддержки в IE и iOS не ожидается
![Page 84: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/84.jpg)
HTML
•удобно использовать для текста и элементов интерфейса
![Page 85: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/85.jpg)
HTML
•удобно использовать для текста и элементов интерфейса
•очень удобно анимировать с помощью CSS Transitions
![Page 86: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/86.jpg)
HTML
•удобно использовать для текста и элементов интерфейса
•очень удобно анимировать с помощью CSS Transitions
•тормозит страницу при большом кол-ве объектов
![Page 87: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/87.jpg)
производительность Canvas
![Page 88: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/88.jpg)
частичная перерисовка
![Page 89: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/89.jpg)
частичная перерисовка
![Page 90: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/90.jpg)
частичная перерисовка
![Page 91: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/91.jpg)
function drawStar(x, y) { ... // нарисовать звезду в x, y}
drawStar(10, 20);drawStar(50, 70);...
![Page 92: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/92.jpg)
function drawStar() { var canvas = document.createElement('canvas'); ... // нарисовать звезду return canvas;}
var star = drawStar();
ctx.drawImage(star, 10, 20);ctx.drawImage(star, 50, 70);...
копирование
![Page 93: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/93.jpg)
группируйте отрисовку по стилям, минимизируйте stroke/fill
![Page 94: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/94.jpg)
function drawLine(x1, x2, y1, y2) { ctx.strokeStyle = 'red'; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();}
drawLine(10, 20, 30, 40);drawLine(200, 10, 0, 50);drawLine(30, 40, 70, 0);
![Page 95: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/95.jpg)
function drawLine(x1, x2, y1, y2) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2);}
ctx.strokeStyle = 'red';
drawLine(10, 20, 30, 40);drawLine(200, 10, 0, 50);drawLine(30, 40, 70, 0);
ctx.stroke();
![Page 96: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/96.jpg)
var data = ctx.getImageData(0, 0, width, height).data;
worker.postMessage(data, [data]);
...
worker.onmessage = function (e) { var imageData = ctx.createImageData(width, height);
imageData.data.set(e.data);
ctx.putImageData(imageData, 0, 0);}
Canvas + Worker
![Page 97: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/97.jpg)
var pixels = new Uint8ClampedArray( width * height);
function drawPixel(x, y, r, g, b, a) { var i = 4 * (256 * y + x);
pixels[i] = r; pixels[i + 1] = g; pixels[i + 2] = b; pixels[i + 3] = a;}
...
postMessage(pixels.buffer, [pixels.buffer]);
рисование пикселей в Worker
![Page 98: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/98.jpg)
var pixels = new Uint8ClampedArray(data);
for (var x = 0; x < width; x++) { for (var y = 0; y < height; y++) { var i = 4 * (256 * y + x);
pixels[i] = 2 * pixels[i]; pixels[i + 1] = 2 * pixels[i + 1]; pixels[i + 2] = 2 * pixels[i + 2]; }}
...
postMessage(pixels.buffer, [pixels.buffer]);
обработка пикселей в Worker
![Page 99: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/99.jpg)
UTFGrid
![Page 100: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/100.jpg)
UTFGrid
•65535 разных символов
![Page 101: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/101.jpg)
UTFGrid
•65535 разных символов
•каждый символ — 4х4 пикселя
![Page 102: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/102.jpg)
UTFGrid
•65535 разных символов
•каждый символ — 4х4 пикселя
•сетка + маппинг
![Page 103: CodeFest 2013. Агафонкин В. — Высокопроизводительные визуализации данных в браузере](https://reader033.vdocument.in/reader033/viewer/2022051012/5465671caf795907578b5e62/html5/thumbnails/103.jpg)
UTFGrid
•65535 разных символов
•каждый символ — 4х4 пикселя
•сетка + маппинг
•в среднем 1-3 КБ на тайл 256х256