The document discusses the advantages of using WebGL for rendering HTML/CSS over traditional DOM methods, highlighting performance optimization and the limitations of the DOM model. It provides a brief overview of how to implement WebGL through the 'html-gl' tag, which allows developers to easily animate content without the complexity of DOM manipulation. The text emphasizes the potential of WebGL in enhancing web application performance and mentions its open-source resources.

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