Successfully reported this slideshow.

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

9

Share

1 of 45
1 of 45

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

9

Share

Download to read offline

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.

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.

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

×