Как мы ускоряли WebGL / Мстислав Живодков (2GIS)

•Als PPTX, PDF herunterladen•

0 gefällt mir•430 views

Если вы захотите сделать веб-приложение с использованием технологии WebGL, скорее всего, вы захотите также, чтобы это приложение было отзывчивым и быстро работало даже на медленных компьютерах. Но если вы простой фронтендер, занимаетесь js, html и css, то 3D-графика для вас покажется совершенно иным миром со своими законами. Так это случилось с нами во время разработки нашего продукта. Поэтому в докладе я хочу рассказать: 1. О новых проблемах, с которыми мы столкнулись по вине WebGL; 2. О различных методах оптимизации, которые мы успешно и не очень опробовали на проекте, а также наглядно показать их действие на рабочих примерах; 3. Приведу другие способы ускорения, до которых у нас пока ещё просто не добрались руки.

Ingenieurwesen

Было
300 геометрий
20 fps
Стало
1 геометрия
50 fps
Объединяем геометрии

Было
150-1000 элементов
50 fps
Стало
1 геометрия
60 fps

• object.addEventListener("click")
Интерактив

• Маркеры
github.com/mourner/rbush
Интерактив

[CELLRANG
E]
наш код
18%
[CELLRANG
E]
three.js
82%
Облегчаем зависимости
• Размер three.js 507kB

Облегчаем зависимости
• Размер three.js 507kB
• Размер 2gl 103kB
github.com/2gis/2gl [CELLRANG
E]
наш код
53%
[CELLRANG
E]
2gl
47%

Облегчаем данные
• Триангуляция
 Увеличивает количество данных
 Требует больших вычислений
 github.com/mapbox/earcut

Облегчаем данные
• Триангуляция
 Увеличивает количество данных
 Требует больших вычислений
 github.com/mapbox/earcut
• Бинарный формат
 github.com/google/protobuf

• TypedArray
• Параллельность
• Профилирование
Важные детали

Спасибо за
внимание!
@Trufid
github.com/Trufi

Empfohlen

Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)Ontico

Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)Ontico

Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)Ontico

base.network — пиринговый веб на JavaScript / Денис Глазков (Lazada Rus)Ontico

55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)Ontico

Изоморфный JavaScript — будущее уже здесьCodeFest

МРТ для данных, Frontend Conf 2016Anastasia Goryacheva

#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...JSib

Empfohlen

Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)Ontico

Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)Ontico

Стабильность WebGL приложений / Кирилл Дмитренко (Яндекс)Ontico

base.network — пиринговый веб на JavaScript / Денис Глазков (Lazada Rus)Ontico

55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)Ontico

Изоморфный JavaScript — будущее уже здесьCodeFest

МРТ для данных, Frontend Conf 2016Anastasia Goryacheva

#3 "Webpack и Vue.JS: Создание больших приложений и их расширение" Кирилл Кай...JSib

Рендеринг может больше: vue.js vs React, Андрей СолодовниковDevDay

Vue.js - реактивный фронтенд фреймворк для людейKonstantin Komelin

#11 "Отзывчивый UI без блокировки Event Loop" Денис РечкуновJSib

Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...Ontico

«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов2ГИС Технологии

Knockoutjs на примере 2ГИС-Онлайн2ГИС Технологии

#6 "Изоморфный фреймворк Catberry.js" Денис РечкуновJSib

#5 "React.js" Антон АртамоновJSib

«Изоморфные js приложения с использованием catberry.js», Денис РечкуновDevDay

"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17MoscowJS

#13 "Управление состоянием в Redux" Роман СальниковJSib

Внутреннее устройство и оптимизация бандла webpackAlexey Ivanov

CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScriptAlexey Ivanov

Инструменты разные нужны, инструменты разные важныCodeFest

Как Webpack сделал меня счастливееYaroslav Serhieiev

Суперсилы Chrome developer tools2ГИС Технологии

Webpack integrationIllia Zub

"VUE.JS как реакт с человеческим лицом" Дулецкий Вольдэмар, Evroneit-people

Современный фронтенд -- как не утонуть в море хайпа?Vladimir Malyk

Превышаем скоростные лимиты с Angular 2Oleksii Okhrymenko

React новая эра фронтенд разработки / Роберт Харитонов (Liberty Global)Ontico

Creating Applications with WebGL and Three.jsFuture Insights

Weitere ähnliche Inhalte

Was ist angesagt?

Рендеринг может больше: vue.js vs React, Андрей СолодовниковDevDay

Vue.js - реактивный фронтенд фреймворк для людейKonstantin Komelin

#11 "Отзывчивый UI без блокировки Event Loop" Денис РечкуновJSib

Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...Ontico

«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов2ГИС Технологии

Knockoutjs на примере 2ГИС-Онлайн2ГИС Технологии

#6 "Изоморфный фреймворк Catberry.js" Денис РечкуновJSib

#5 "React.js" Антон АртамоновJSib

«Изоморфные js приложения с использованием catberry.js», Денис РечкуновDevDay

"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17MoscowJS

#13 "Управление состоянием в Redux" Роман СальниковJSib

Внутреннее устройство и оптимизация бандла webpackAlexey Ivanov

CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScriptAlexey Ivanov

Инструменты разные нужны, инструменты разные важныCodeFest

Как Webpack сделал меня счастливееYaroslav Serhieiev

Суперсилы Chrome developer tools2ГИС Технологии

Webpack integrationIllia Zub

"VUE.JS как реакт с человеческим лицом" Дулецкий Вольдэмар, Evroneit-people

Современный фронтенд -- как не утонуть в море хайпа?Vladimir Malyk

Превышаем скоростные лимиты с Angular 2Oleksii Okhrymenko

Was ist angesagt? (20)

Рендеринг может больше: vue.js vs React, Андрей Солодовников

Vue.js - реактивный фронтенд фреймворк для людей

#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов

Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...

«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов

Knockoutjs на примере 2ГИС-Онлайн

#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов

#5 "React.js" Антон Артамонов

«Изоморфные js приложения с использованием catberry.js», Денис Речкунов

"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17

#13 "Управление состоянием в Redux" Роман Сальников

Внутреннее устройство и оптимизация бандла webpack

CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript

Инструменты разные нужны, инструменты разные важны

Как Webpack сделал меня счастливее

Суперсилы Chrome developer tools

Webpack integration

"VUE.JS как реакт с человеческим лицом" Дулецкий Вольдэмар, Evrone

Современный фронтенд -- как не утонуть в море хайпа?

Превышаем скоростные лимиты с Angular 2

Andere mochten auch

React новая эра фронтенд разработки / Роберт Харитонов (Liberty Global)Ontico

Creating Applications with WebGL and Three.jsFuture Insights

Классические архитектуры во фронтенде / Александра Шинкевич (LOVATA)Ontico

Что делать, когда костыли уже не помогают. Опыт tutu.ru / Роман Грунтович (tu...Ontico

Жизнь HTML в 2ГИС под iOS / Роман Янке (2гис)Ontico

Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScr...Ontico

Amazing threesome, rrr... React. Redux. Real world / Ростислав Галкин (Babo)Ontico

Конструктор / Денис Паясь (Яндекс)Ontico

Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...Ontico

Death By PowerPoint RusAlexei Kapterev

Как стать супергероем презентаций: дизайнAlexey Ivanov

Andere mochten auch (11)

React новая эра фронтенд разработки / Роберт Харитонов (Liberty Global)

Creating Applications with WebGL and Three.js

Классические архитектуры во фронтенде / Александра Шинкевич (LOVATA)

Что делать, когда костыли уже не помогают. Опыт tutu.ru / Роман Грунтович (tu...

Жизнь HTML в 2ГИС под iOS / Роман Янке (2гис)

Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScr...

Amazing threesome, rrr... React. Redux. Real world / Ростислав Галкин (Babo)

Конструктор / Денис Паясь (Яндекс)

Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...

Death By PowerPoint Rus

Как стать супергероем презентаций: дизайн

Ähnlich wie Как мы ускоряли WebGL / Мстислав Живодков (2GIS)

Grpahite&grafanaLevon Avakyan

"Хероковая жизнь" Юрий ЛитвиненкоFwdays

Олег Мохов "Драматическая история одной маленькой промостранички"Yandex

Изоморфные React-приложения: производительность и масштабированиеDenis Izmaylov

Igor Khotin - Domain Specific LanguagesIgor Khotin

Трудовые будни инженера производительностиVladimir Sitnikov

Heroku. Zen cloudAlexander Korotkikh

Алексей Андросов "Криокамера для статики"Yandex

Yandex.Frontend: complex services, complex solutionsYelena Jetpyspayeva

"Фронтенд в Яндексе: сложные сервисы, непростые решения". Елена Джетпыспаева,...Yandex

Андрей Фейгин. GTM Словами агентства.iProspect Russia

Изоморфные react-приложенияDenis Izmaylov

Mihail Korepanovyaevents

Михаил Корепанов "Скорость рендеринга страниц: исследования, замеры, автомати...Yandex

Доклады с прошедшей JiraMania: про обновления, зависимости и дедлокиGonchik Tsymzhitov

Нагрузочное тестирование web проектовSQALab

Изоморфные React-приложения производительность и масштабирование / Денис Изма...Ontico

Применение CQRS и EventSourcing в DDD-проектеIgor Lubenets

ObjectManager, или как работать с большим количеством объектов на карте, Мари...Ontico

Стабильны ли ваши приложения в облаках?Yandex

Ähnlich wie Как мы ускоряли WebGL / Мстислав Живодков (2GIS) (20)

Grpahite&grafana

"Хероковая жизнь" Юрий Литвиненко

Олег Мохов "Драматическая история одной маленькой промостранички"

Изоморфные React-приложения: производительность и масштабирование

Igor Khotin - Domain Specific Languages

Трудовые будни инженера производительности

Heroku. Zen cloud

Алексей Андросов "Криокамера для статики"

Yandex.Frontend: complex services, complex solutions

"Фронтенд в Яндексе: сложные сервисы, непростые решения". Елена Джетпыспаева,...

Андрей Фейгин. GTM Словами агентства.

Изоморфные react-приложения

Mihail Korepanov

Михаил Корепанов "Скорость рендеринга страниц: исследования, замеры, автомати...

Доклады с прошедшей JiraMania: про обновления, зависимости и дедлоки

Нагрузочное тестирование web проектов

Изоморфные React-приложения производительность и масштабирование / Денис Изма...

Применение CQRS и EventSourcing в DDD-проекте

ObjectManager, или как работать с большим количеством объектов на карте, Мари...

Стабильны ли ваши приложения в облаках?

Mehr von Ontico

One-cloud — система управления дата-центром в Одноклассниках / Олег Анастасье...Ontico

Масштабируя DNS / Артем Гавриченков (Qrator Labs)Ontico

Создание BigData-платформы для ФГУП Почта России / Андрей Бащенко (Luxoft)Ontico

Готовим тестовое окружение, или сколько тестовых инстансов вам нужно / Алекса...Ontico

Новые технологии репликации данных в PostgreSQL / Александр Алексеев (Postgre...Ontico

PostgreSQL Configuration for Humans / Alvaro Hernandez (OnGres)Ontico

Inexpensive Datamasking for MySQL with ProxySQL — Data Anonymization for Deve...Ontico

Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...Ontico

ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)Ontico

MySQL Replication — Advanced Features / Петр Зайцев (Percona)Ontico

Внутренний open-source. Как разрабатывать мобильное приложение большим количе...Ontico

Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...Ontico

Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...Ontico

Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)Ontico

И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)Ontico

Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)Ontico

Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)Ontico

100500 способов кэширования в Oracle Database или как достичь максимальной ск...Ontico

Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...Ontico

Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...Ontico

Mehr von Ontico (20)

One-cloud — система управления дата-центром в Одноклассниках / Олег Анастасье...

Масштабируя DNS / Артем Гавриченков (Qrator Labs)

Создание BigData-платформы для ФГУП Почта России / Андрей Бащенко (Luxoft)

Готовим тестовое окружение, или сколько тестовых инстансов вам нужно / Алекса...

Новые технологии репликации данных в PostgreSQL / Александр Алексеев (Postgre...

PostgreSQL Configuration for Humans / Alvaro Hernandez (OnGres)

Inexpensive Datamasking for MySQL with ProxySQL — Data Anonymization for Deve...

Опыт разработки модуля межсетевого экранирования для MySQL / Олег Брославский...

ProxySQL Use Case Scenarios / Alkin Tezuysal (Percona)

MySQL Replication — Advanced Features / Петр Зайцев (Percona)

Внутренний open-source. Как разрабатывать мобильное приложение большим количе...

Подробно о том, как Causal Consistency реализовано в MongoDB / Михаил Тюленев...

Балансировка на скорости проводов. Без ASIC, без ограничений. Решения NFWare ...

Перехват трафика — мифы и реальность / Евгений Усков (Qrator Labs)

И тогда наверняка вдруг запляшут облака! / Алексей Сушков (ПЕТЕР-СЕРВИС)

Как мы заставили Druid работать в Одноклассниках / Юрий Невиницин (OK.RU)

Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)

100500 способов кэширования в Oracle Database или как достичь максимальной ск...

Apache Ignite Persistence: зачем Persistence для In-Memory, и как он работает...

Механизмы мониторинга баз данных: взгляд изнутри / Дмитрий Еманов (Firebird P...

Как мы ускоряли WebGL / Мстислав Живодков (2GIS)

1. Как мы ускоряли WebGL Мстислав Живодков

8. Наше приложение 20 fps

9. Объединяем геометрии

10. Было 300 геометрий 20 fps Стало 1 геометрия 50 fps Объединяем геометрии

11. Маркеры

12.

13.

14.

15.

16. Было 150-1000 элементов 50 fps Стало 1 геометрия 60 fps

17. • object.addEventListener("click") Интерактив

18. Интерактив • Raycaster из three.js

19. • Маркеры github.com/mourner/rbush Интерактив

20. Интерактив

21. Облегчаем приложение

22. [CELLRANG E] наш код 18% [CELLRANG E] three.js 82% Облегчаем зависимости • Размер three.js 507kB

23. Облегчаем зависимости • Размер three.js 507kB • Размер 2gl 103kB github.com/2gis/2gl [CELLRANG E] наш код 53% [CELLRANG E] 2gl 47%

24. Облегчаем данные

25. Облегчаем данные • Триангуляция

26. Облегчаем данные • Триангуляция  Увеличивает количество данных  Требует больших вычислений  github.com/mapbox/earcut

27. Облегчаем данные • Триангуляция  Увеличивает количество данных  Требует больших вычислений  github.com/mapbox/earcut • Бинарный формат  github.com/google/protobuf

28. Сглаживание

29. Сглаживание

30. • TypedArray • Параллельность • Профилирование Важные детали

31. Незнакомые проблемы

32. Z-fighting

33. C WebGL нужно по-другому думать

34. Что было

35. Спасибо за внимание! @Trufid github.com/Trufi