[:en]HTML/CSS rendering via WebGL for highest performance possible and unlimited animations abilities on the Web[:ru]Рендеринг HTML/CSS через WebGL для максимального быстродействия и безграничных возможностей анимации в Web[:]
[:en]In recent time Web development community had a big discussion on “DOM is slow” topic. This thesis is truthful. DOM is a quite complex model which starts a ripple of events or chain reaction over document on every modification. This impacts animations first of all. Since desktop browsers are mostly fine with handling animations at 60 FPS, mobile and embedded devices still provide bad, janky user experience.
Finding solution for this problem is a high priority issue for contemporary Web development. Active researches in this field are ongoing for a long time (got additional impulse in 2011 after Facebook refused hybrid approach), however first systematic solutions were developed just recently. These solutions could be divided into two subsets:
- Acceleration of classic DOM operations;
- Alternative content rendering technologies.
And if first branch have already reached the limit of contemporary browsers API abilities, alternative content rendering technologies approach still have a lot of untapped potential. One of the most significant achievements in the field of No DOM web development is React-Canvas. As we see from naming it uses Canvas API to render content allowing to build layouts by using specific React components: <Surface>, <Layer>, <Group>, <Text>, <Image>, <ListView>. This approach shows nice performance, but also have cons which are “incompatible with life”. Let`s imagine ideal solution using alternative rendering technology:
- Best solution will be framework agnostic and look more like a polyfill for smooth animations problem;
- It will not force developer to study new conceptions and keep him developing in common HTML/CSS environment;
- Game engines world passed Canvas vs WebGL fight few years ago. WebGL is treated as more performant so ideal 60FPS solution will use WebGL with Canvas fallback;
- Best solution will keep DOM tree since it allows more effective debugging and application state monitoring using Dev Tools.
Our research on “slow DOM problem” took theses listed above as an input. After two years of experiments we got HTML GL – library which allows to render HTML/CSS content in WebGL. It is easy to use, framework agnostic and does not require developer to study new concepts or technologies keeping him in common HTML/CSS/JS world.
How to use HTML GL?
GitHub repository
Include htmlgl.js into your project. Use tag name <html-gl> for elements you are going to animate. These elements will be rendered in WebGL and their CSS Transform property will be a facade for WebGL representation transformations. The DOM element itself will not be displayed or animated. All transforms happens on GPU and affect only WebGL textures representing element. This decreases resources consuming and allows better control over resources usage. What differentiate HTML GL from React-canvas or similar is that it keeps hidden but still actual DOM structure and is easier to debug.
Demos
- FX Demo WebGL is not only about performance, it breaks web interactivity limits
- Basic HTML GL demonstrates HTML GL based on simple content + smooth animations with Velocity.js and transformations via CSS Transform
- Basic DOM the same project with HTML GL disabled, so all animations run on CSS animations and DOM nodes. It is easy to see that on the peak of animations layer is being repainted, which means jank on mobile device. HTML GL version do not have this issue
- Advanced content HTML GL slider with nested structure, rendered via HTML GL and animated with Velocity.js
- Advanced content DOM
Under the hood
Main idea behind HTML GL is controllable HTML/CSS rasterization and uploading it to GPU as a texture. It is similar to hardware accelerated CSS, but have direct output to the screen and we have more control over.
- html-gl was created on the page
- Elements content is being rasterized
- Then displayed on fullscreen WebGL context as a 2d sprite, the DOM element itself hides
- style.transform mapped to it`s WebGL representation and modifies WebGL representation
- If content of html-gl node was chaged HTML GL update texture (based on DOM Mutation Observers / Events) and update WebGL texture
Conclusion
As you see the flow allows to mix classic DOM content and HTML GL in one application. HTML GL do not limit user in choosing a framework, do not force to study specific APIs. Just add <html-gl> to tweak performance and be able to add amazing effects.
Talk slides
[:ru]В последнее время в среде веб разработчиков активно развернулась дискуссия на тему «DOM — это медленно». Этот тезис действительно справедлив. Любое изменение DOM создает волну событий по всему документу и если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимациях и всячески расстраивает пользователей и разработчиков.
Самым болезненным моментом является анимирование слоев. Решение проблемы плавной анимации — одна из основных задач кросс-платформенной Web разаработки. Активные исследования в этой области идут уже давно ( получив дополнительное ускорение в 2011 году после отказа Facebook от разработки Web приложения), однако первые системные решения были получены совсем недавно. Все они в целом делятся на два направления:
- Ускорение классических DOM операций;
- Использование альтернативных способов рендеринга контента.
И если первая ветвь — ускорение DOM уже уперлась в теоретические возможности современных API, то альтернативные методы рендеринга еще обладают большим нераскрытым потенциалом. Одним из самых значительных достижений в области создания NO DOM приложений стал React-Canvas, использующий как понятно из названия Canvas API для отображения контента, при этом он позволяет по прежнему оперировать текстовым контентом и реализовывать сетки с помощью React компонентов <Surface>, <Layer>, <Group>, <Text>, <Image>, <ListView>. Этот подход показавший неплохие результаты с точки зрения быстродействия страдает врожденными пороками вероятно не совместимыми с жизнью:
- Лучшее решение будет независимо от конкретного фреймворка и будет обладать скорее свойствами полифила для проблемы быстродействия;
- Оно не будет предлагать разработчику новые концепции и компоненты, оставляя его работать в привычном HTML/CSS окружении;
- Мир игровых движков давно прошел этап соревнования 2d Canvas / WebGL. Уже несколько лет считается общепризнанным более высокое быстродействие последнего. Идеальное решение будет использовать WebGL с фоллбеком на Canvas;
- Хорошее решение не будет лишать разработчика DOM дерева, ведь дерево позволяет отслеживать состояние приложения, эффективно отлаживать и стилизовать контент через Dev Tools.
Исходя из этих тезисов мы начали работу над своим решением проблемы «медленного DOM». Результатом исследований стал HTML GL — библиотека позволяющая рендерить HTML/CSS через WebGL, не требующая от разработчиков изучения новой предметной области или привязки к конкретному фреймворку.
Как работать с HTML GL?
GitHub репозиторий
Подключите htmlgl.js к проекту. Используйте имя тега <html-gl> для элементов которые собираетесь анимировать. Эти элементы будут отображены в WebGL, а их CSS Transform свойство станет фасадом для трансформаций их WebGL представлений. Сам DOM элемент не будет отображен или анимирован. Все трансформации происходят на GPU и касаются лишь WebGL текстуры представляющей элемент, что значительно сокращает количество расходуемых ресурсов. Отличительной особенностью HTML GL является наличие пусть скрытого, но актуального DOM дерева которое часто бывает полезно при отладке приложения.
Примеры
- FX Demo WebGL — это не только скорость, но и безграничные возможности для эффектов
- Basic HTML GL демонстрация использования HTML GL на простом контенте, выполняется анимации элемента с помощью Velocity.js, а так же трансформации через CSS Transform
- Basic DOM тот же проект, однако HTML GL отключен и все операции выполняются над DOM узлами, можно заметить, что в пик анимации слой рисуется заново, что равносильно задержке на мобильном устройстве
- Advanced content HTML GL слайдер с несколькими уровнями вложенности содержимого, отображен через HTML Gl и анимирован Velocity.js
- Advanced content DOM
«Под капотом»
Основной идеей является управляемая растеризация HTML узла и отображение результата растеризации на полноэкранной WebGL поверхности.
- На странице создается элемент web-gl
- Его контент растеризуется
- Отображается на полноэкранном WebGL контексте в виде 2d спрайта, при этом сам DOM элемент скрыт
- style.transform элемента привязаны к его WebGL представлению и при изменении трансформируют WebGL представление
- При изменении контента или стилей компонента (DOM Mutation Observers / Events) он заново растеризуется и WebGL представление обновляется
Заключение
Как видите схема работы позволяет смешивать WebGL и классический DOM контент в пределах одного приложения, не ограничивает разработчика в выборе фреймворка, не навязывает изучение дополнительных API. Просто добавьте <html-gl>
Слайды доклада
[:]