html gl - 60 fps and amazing effects by rendering html/css in webgl, framework agnostic
TRANSCRIPT
Render HTML/CSS in WebGL
@PixelsCommander
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 before.
DOM is slowSince 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 image
Canvas● Load file● ctx.drawImage
Even GPU DOM is slowIt changes the last step only
DOM is hardly predictable
HTML GL means No DOMBut only when animating
And is still inspectable when not
Also
Recoginze?
CPU GPU
Modern GPU can handle 100 000 000
of textured surfacesMay 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(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);
Renders HTML/CSS in WebGL
<img src=”back.png”>
HTML GL
<html-gl>
<img src=”back.png”>
</html-gl>
Easy to useJust 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 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.comFast web applications development, profiling and optimization
Questions?
github.com/PixelsCommander/HTML-GL
@PixelsCommander