HTML GL solves "the slow DOM problem" by creating WebGL representations of DOM elements and hiding actual DOM after. This speeds up HTML/CSS animations and transformations by using 3D hardware acceleration and allows to apply OpenGL effects as modern 3D games have. Using HTML GL you still work with HTML/CSS as you are common to, but DOM elements are just facades to their WebGL represenations. These GPU accelerated textures are very effective from resources consuming perspective and are very cheap to transform or animate.

1. Render HTML/CSS in WebGL

2. @PixelsCommander
denis.radin@gmail.com

5. I do not do embedded JavaScript.
Why should I care?

7. Performance optimization is not
only about making your app
faster. It allows to implement
things you were not able to do
before.

8. DOM is slow
Since it is a quite complex model

9. Display image: DOM vs Canvas
DOM
● Create IMG tag
● Load file
● Append IMG tag
● Calc. styles
● Calc. position
● Display image
Canvas
● Load file
● ctx.drawImage

10. Even GPU DOM is slow
It changes the last step only

11. DOM is hardly predictable

12. HTML GL means No DOM
But only when animating

13. And is still inspectable when not

14. Also

15. Recoginze?

17. CPU GPU

19. Modern GPU can
handle 100 000 000
of textured surfaces
May treat this as
“100 000 000 of HTML elements”

20. Why so many?
For some things it is still not
enough of details

21. What OpenGL can do
Games are much
heavier and much
impressive

23. Because GPU is not involved and
DOM is complex (ok, ok, we
remember that)
And simple DOM
slider janks???

24. Let`s release bunnies!
OpenGL is also
available in Web
via WebGL

25. Why do not we use
WebGL for content?
Imperative, verbose, no layout

26. HTML
<img src=”back.png”>
WebGL: Bad parts
WebGL (three.js)
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.
innerHeight);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
var scene = new THREE.Scene();
var material = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('http://www.
html5canvastutorials.com/demos/assets/crate.
jpg')});
var plain = new THREE.Mesh(new THREE.Plain(200,
200), material);
scene.add(plain);

28. Renders HTML/CSS in WebGL

29. <img src=”back.png”>
HTML GL
<html-gl>
<img src=”back.png”>
</html-gl>

30. Easy to use
Just wrap content you want to
animate with <html-gl> tag or
execute $(myNode).htmlgl()

31. How it works?

32. The flow

33. Relies on:
DOM Mutation Observers,
html2canvas, PixiJS

34. Relies on:
DOM Mutation Observers,
html2canvas, PixiJS

35. pixelscommander.com
Native,fast,reliable
Rasterization API

36. HTML GL / DOM
Simple example

37. HTML GL / DOM
Nested content
and events

38. HTML GL / Sorry you can not do
this with DOM
Some GL

39. HTML GL / Sorry you can not do
this with DOM
Some goodies for
PhoneGap

40. No new conceptions
You do HTML/CSS
Just add <html-gl>
The best thing

41. Effect as a plugin, add your one

42. Framework agnostic,
but expecting React-GL

43. github.com/PixelsCommander/HTML-GL
Open source

44. ChallengingNative.com
Fast web applications development, profiling and optimization

45. Questions?
github.com/PixelsCommander/HTML-GL
@PixelsCommander