HTML/CSS rendering via WebGL for highest performance possible and unlimited animations abilities on the Web
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?
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.
- 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
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.