HTML 5 Canvas

Transcript

1. Визуализация Big Data. Как это делаем мы Marchenkov Danila MARCH 15, 2017
2. CONFIDENTIAL 2 Agenda Overview 1 5 4 3 Image Visualisation Data Visualisation Scatter Plot 6 WebGL Canvas 2
3. CONFIDENTIAL 3 EMPRESS?
4. CONFIDENTIAL 4 • Инструмент фотографирования, анализа и визуализации полученных результатов. • 20 человек в команде • SCRUM • feature-branch git flow • Jenkins CI EMPRESS!
5. CONFIDENTIAL 5 IMAGE VISUALISATION
6. CONFIDENTIAL 6 IMAGE VISUALISATION • Каждый канал - битная карта интенсивности цвета • Изменяемые цвета каналов • Пирамида изображений • Слой пирамиды разрезан на прямоугольные тайлы • Дополнительный вычисляемый слой контуров клеток • Плавность увеличения • Скорость загрузки
7. CONFIDENTIAL 7 IMAGE VISUALISATION
8. CONFIDENTIAL 8 DATA VISUALISATION
9. CONFIDENTIAL 9 WELL PREVIEW HEATMAP STACKED BAR DATA VIEW
10. CONFIDENTIAL 10 CANVAS?!
11. CONFIDENTIAL 11 Can I use HTML5 Canvas?
12. CONFIDENTIAL 12 Canvas! CANVAS • Загрузить изображение • ctx.drawImage DOM • Создать img тэг • Загрузить файл • Добавить тэг на страницу • Просчитать стили • Просчитать положение • Показать изображение
13. CONFIDENTIAL 13 Canvas! PROS CONS • Отличная скорость • Предсказуемость поведения • Гибкость • Сложность разработки • Сложность поддержки • Сложность тестирования • Поддержка событий только на уровне элемента
14. CONFIDENTIAL 14 SCATTER PLOT
15. CONFIDENTIAL 15 Scatter Plot ~30 MS НА ФРЕЙМ 10000 ОБЬЕКТОВ
16. CONFIDENTIAL 16 • Двойная буферизация • Нормирование данных перед отрисовкой • Кластеризация по цвету • Кластеризация по расстоянию • Кэширование отрисованных ранее примитивов • Отрисовка только разниц между кадрами • Игнорирование объектов, не попадающих во viewport Scatter Plot • Поддержка экранов с высокой плотностью пикселей (Retina) • Допустимое количество клеток не ограничено
17. CONFIDENTIAL 17 ПОТЕСТИРУЕМ?
18. CONFIDENTIAL 18 Scatter Plot • Canvas 4500x1800px (sic!) • 500x200 кружочков • Заливка • Обводка • Минимальное количество строк кода
19. CONFIDENTIAL 19 TIME TO FIRST FRAME <canvas id=‘canvas'></cavnas> <script> (() => { let canvas = document.getElementById("canvas"), ctx = canvas.getContext('2d'), xIterations = 500, yIterations = 200, circleRadius = 9; canvas.width = 4500; canvas.height = 1800; for (let i = 0; i < yIterations; i++) { for (let j = 0; j < xIterations; j++) { ctx.beginPath(); ctx.fillStyle = 'lightgreen'; ctx.strokeStyle = 'black'; ctx.moveTo(circleRadius + j * 2 * circleRadius + 1, circleRadius + i * 2 * circleRadius + 1); ctx.arc(circleRadius + j * 2 * circleRadius + 1, circleRadius + i * 2 * circleRadius + 1, circleRadius, 0, 2 * Math.PI); ctx.stroke(); ctx.fill(); } } })(); </script>
20. CONFIDENTIAL <canvas id='canvas'></canvas> <script> (() => { let canvas = document.getElementById("canvas"), offscreenCanvas = document.createElement("canvas"); offscreenCtx = offscreenCanvas.getContext('2d'); ctx = canvas.getContext('2d'), xIterations = 500, yIterations = 200, circleRadius = 9; canvas.width = 4500; canvas.height = 1800; offscreenCanvas.width = offscreenCanvas.height = circleRadius * 2 + 2; offscreenCtx.arc(circleRadius, circleRadius, circleRadius, 0, 2 * Math.PI); offscreenCtx.fillStyle = 'lightgreen'; offscreenCtx.strokeStyle = 'black'; offscreenCtx.stroke(); offscreenCtx.fill(); for (let i = 0; i < yIterations; i++) { for (let j = 0; j < xIterations; j++) { ctx.drawImage(offscreenCanvas, j * 2 * circleRadius + 1, i * 2 * circleRadius + 1); } } })(); </script> 20 TIME TO FIRST FRAME
21. CONFIDENTIAL TIME TO FIRST FRAME 0ms 1750ms 3500ms 5250ms 7000ms HTML SVG CANVAS Loading Scripting Rendering Painting Other 21 0ms 1000ms 2000ms 3000ms 4000ms HTML SVG CANVAS Loading Scripting Rendering Painting Other
22. CONFIDENTIAL 22 WEBGL
23. CONFIDENTIAL 23 Can I use WebGL?
24. CONFIDENTIAL 24 WebGL! • САМАЯ лучшая производительность • ОТЛИЧНАЯ кроссбраузерная поддержка • САМЫЕ безумные хаки • САМАЯ чистая магия • ОЧЕНЬ высокий порог вхождения • ОГРОМНОЕ количество кода • GLSL
25. CONFIDENTIAL 25 WEBGL PARTICLES
26. CONFIDENTIAL 26 ВОПРОСЫ? DANILA_MARCHENKOV@EPAM.COM SPRIT3DAN