Render HTML/CSS in WebGL

ChallengingNative.comFast web applications development, profiling and optimization

@PixelsCommander

denis.radin@gmail.com

DOM is slowSince it is a quite complex model

Display image: DOM vs Canvas

Create IMG tagLoad fileAppend IMG tagCalc. stylesCalc. positionDisplay image

Load filecanvas.drawImage

Even GPU DOM is slowIt changes the last step only

DOM is hardly predictable

HTML GL means No DOMBut only when animating

Also

Recoginze?

http://www.youtube.com/watch?v=-P28LKWTzrI

Modern GPU can handle millions of textured surfaces

May treat this as“millions of HTML elements”

Why so many?For some things it is still not

enough

What OpenGL can do

Games are much heavier and much

impressive

http://www.youtube.com/watch?v=r66PFe_BeGs

Because GPU is not involved and DOM is complex (ok, ok, we remember that)

HTML image slides janky in meanwhile

???

Let`s release bunnies!

OpenGL is also available in WEB via

WebGL

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

<img src=”back.png”>

WebGL: The bad partsvar 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

<htmlgl>

<img src=”back.png”>

</htmlgl>

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, Pixie.js

HTML GL / DOM

Simple example

HTML GL / DOM

Nested content and events

HTML GL / Sorry you can not do this in DOM

Some GL

Filter as a plugin, add your one!

Framework agnostic, but expecting React-GL

No new conceptions. You do HTML/CS.

Just add <html-gl>

The best thing

github.com/PixelsCommander/HTML-GL

@PixelsCommander

denis.radin@gmail.com