Денис Радин, Liberty Global, Frontend-секция, CodeFest 2015

1. Render HTML/CSS in WebGL

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

3. @PixelsCommander
denis.radin@gmail.com

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

7. Display image: DOM vs Canvas
Create IMG tag
Load file
Append IMG tag
Calc. styles
Calc. position
Display image
Load file
canvas.drawImage

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

9. DOM is hardly predictable

10. HTML GL means No DOM
But only when animating

11. Also

12. Recoginze?

14. Modern GPU can
handle millions of
textured surfaces
May treat this as
“millions of HTML elements”

15. Why so many?
For some things it is still not
enough

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

18. Because GPU is not involved and DOM is
complex (ok, ok, we remember that)
HTML image slides
janky in meanwhile
???

19. Let`s release bunnies!
OpenGL is also
available in WEB via
WebGL

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

21. <img src=”back.png”>
WebGL: The bad parts
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);

22. Renders HTML/CSS in WebGL

23. <img src=”back.png”>
HTML GL
<htmlgl>
<img src=”back.png”>
</htmlgl>

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

25. How it works?

26. The flow

27. Relies on:
DOM Mutation Observers,
html2canvas, Pixie.js

28. HTML GL / DOM
Simple example

29. HTML GL / DOM
Nested content and
events

30. HTML GL / Sorry you can not do
this in DOM
Some GL

31. Filter as a plugin, add your one!

32. Framework agnostic,
but expecting React-GL

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

34. github.com/PixelsCommander/HTML-GL

35. @PixelsCommander
denis.radin@gmail.com