45
Render HTML/CSS in WebGL

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

Embed Size (px)

Citation preview

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

Render HTML/CSS in WebGL

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

@PixelsCommander

[email protected]

Page 3: HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
Page 4: HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic
Page 5: HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framework agnostic

I do not do embedded JavaScript. Why should I care?

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

Performance optimization is not only about making your app faster. It allows to implement things you were not able to do before.

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

DOM is slowSince it is a quite complex model

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

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

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

Even GPU DOM is slowIt changes the last step only

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

DOM is hardly predictable

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

HTML GL means No DOMBut only when animating

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

And is still inspectable when not

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

Also

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

Recoginze?

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

CPU GPU

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

Modern GPU can handle 100 000 000

of textured surfacesMay treat this as

“100 000 000 of HTML elements”

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

Why so many?For some things it is still not

enough of details

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

What OpenGL can do

Games are much heavier and much

impressive

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

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

remember that)

And simple DOM slider janks???

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

Let`s release bunnies!

OpenGL is also available in Web

via WebGL

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

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

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

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);

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

Renders HTML/CSS in WebGL

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

<img src=”back.png”>

HTML GL

<html-gl>

<img src=”back.png”>

</html-gl>

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

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

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

How it works?

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

The flow

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

Relies on:DOM Mutation Observers,

html2canvas, PixiJS

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

Relies on:DOM Mutation Observers,

html2canvas, PixiJS

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

pixelscommander.com

Native,fast,reliable Rasterization API

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

HTML GL / Sorry you can not do this with DOM

Some GL

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

HTML GL / Sorry you can not do this with DOM

Some goodies for PhoneGap

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

No new conceptions You do HTML/CSS

Just add <html-gl>

The best thing

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

Effect as a plugin, add your one

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

Framework agnostic, but expecting React-GL

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

github.com/PixelsCommander/HTML-GL

Open source

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

ChallengingNative.comFast web applications development, profiling and optimization

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

Questions?

github.com/PixelsCommander/HTML-GL

@PixelsCommander