Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Render HTML/CSS in WebGL
@PixelsCommander
denis.radin@gmail.com
I do not do embedded JavaScript.
Why should I care?
Performance optimization is not
only about making your app
faster. It allows to implement
things you were not able to do
b...
DOM is slow
Since it is a quite complex model
Display image: DOM vs Canvas
DOM
● Create IMG tag
● Load file
● Append IMG tag
● Calc. styles
● Calc. position
● Display i...
Even GPU DOM is slow
It changes the last step only
DOM is hardly predictable
HTML GL means No DOM
But only when animating
And is still inspectable when not
Also
Recoginze?
CPU GPU
Modern GPU can
handle 100 000 000
of textured surfaces
May treat this as
“100 000 000 of HTML elements”
Why so many?
For some things it is still not
enough of details
What OpenGL can do
Games are much
heavier and much
impressive
Because GPU is not involved and
DOM is complex (ok, ok, we
remember that)
And simple DOM
slider janks???
Let`s release bunnies!
OpenGL is also
available in Web
via WebGL
Why do not we use
WebGL for content?
Imperative, verbose, no layout
HTML
<img src=”back.png”>
WebGL: Bad parts
WebGL (three.js)
var renderer = new THREE.WebGLRenderer();
renderer.setSize(win...
Renders HTML/CSS in WebGL
<img src=”back.png”>
HTML GL
<html-gl>
<img src=”back.png”>
</html-gl>
Easy to use
Just wrap content you want to
animate with <html-gl> tag or
execute $(myNode).htmlgl()
How it works?
The flow
Relies on:
DOM Mutation Observers,
html2canvas, PixiJS
Relies on:
DOM Mutation Observers,
html2canvas, PixiJS
pixelscommander.com
Native,fast,reliable
Rasterization API
HTML GL / DOM
Simple example
HTML GL / DOM
Nested content
and events
HTML GL / Sorry you can not do
this with DOM
Some GL
HTML GL / Sorry you can not do
this with DOM
Some goodies for
PhoneGap
No new conceptions
You do HTML/CSS
Just add <html-gl>
The best thing
Effect as a plugin, add your one
Framework agnostic,
but expecting React-GL
github.com/PixelsCommander/HTML-GL
Open source
ChallengingNative.com
Fast web applications development, profiling and optimization
Questions?
github.com/PixelsCommander/HTML-GL
@PixelsCommander
HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
Upcoming SlideShare
Loading in …5
×

HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic

4,054 views

Published on

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.

  • Be the first to comment

HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic

  1. 1. Render HTML/CSS in WebGL
  2. 2. @PixelsCommander denis.radin@gmail.com
  3. 3. I do not do embedded JavaScript. Why should I care?
  4. 4. Performance optimization is not only about making your app faster. It allows to implement things you were not able to do before.
  5. 5. DOM is slow Since it is a quite complex model
  6. 6. 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
  7. 7. Even GPU DOM is slow It changes the last step only
  8. 8. DOM is hardly predictable
  9. 9. HTML GL means No DOM But only when animating
  10. 10. And is still inspectable when not
  11. 11. Also
  12. 12. Recoginze?
  13. 13. CPU GPU
  14. 14. Modern GPU can handle 100 000 000 of textured surfaces May treat this as “100 000 000 of HTML elements”
  15. 15. Why so many? For some things it is still not enough of details
  16. 16. What OpenGL can do Games are much heavier and much impressive
  17. 17. Because GPU is not involved and DOM is complex (ok, ok, we remember that) And simple DOM slider janks???
  18. 18. Let`s release bunnies! OpenGL is also available in Web via WebGL
  19. 19. Why do not we use WebGL for content? Imperative, verbose, no layout
  20. 20. 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);
  21. 21. Renders HTML/CSS in WebGL
  22. 22. <img src=”back.png”> HTML GL <html-gl> <img src=”back.png”> </html-gl>
  23. 23. Easy to use Just wrap content you want to animate with <html-gl> tag or execute $(myNode).htmlgl()
  24. 24. How it works?
  25. 25. The flow
  26. 26. Relies on: DOM Mutation Observers, html2canvas, PixiJS
  27. 27. Relies on: DOM Mutation Observers, html2canvas, PixiJS
  28. 28. pixelscommander.com Native,fast,reliable Rasterization API
  29. 29. HTML GL / DOM Simple example
  30. 30. HTML GL / DOM Nested content and events
  31. 31. HTML GL / Sorry you can not do this with DOM Some GL
  32. 32. HTML GL / Sorry you can not do this with DOM Some goodies for PhoneGap
  33. 33. No new conceptions You do HTML/CSS Just add <html-gl> The best thing
  34. 34. Effect as a plugin, add your one
  35. 35. Framework agnostic, but expecting React-GL
  36. 36. github.com/PixelsCommander/HTML-GL Open source
  37. 37. ChallengingNative.com Fast web applications development, profiling and optimization
  38. 38. Questions? github.com/PixelsCommander/HTML-GL @PixelsCommander

×