Alternative renderingCanvas, WebGL, SVG

Why not DOM ?It is slow since is a quite complex model

CanvasSimple and sometimes fast

Display image: DOM vs Canvas

DOM Canvas

Display image: DOM vs Canvas

DOM ● Create IMG tag

Canvas

Display image: DOM vs Canvas

DOM ● Create IMG tag● Load file

Canvas

Display image: DOM vs Canvas

DOM ● Create IMG tag● Load file● Append IMG tag

Canvas

Display image: DOM vs Canvas

DOM ● Create IMG tag● Load file● Append IMG tag● Calc. styles

Canvas

Display image: DOM vs Canvas

DOM ● Create IMG tag● Load file● Append IMG tag● Calc. styles● Calc. position

Canvas

Display image: DOM vs Canvas

DOM ● Create IMG tag● Load file● Append IMG tag● Calc. styles● Calc. position● Display image

Canvas

Display image: DOM vs Canvas

DOM ● Create IMG tag● Load file● Append IMG tag● Calc. styles● Calc. position● Display image

Canvas● Load file

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

DOM is hardly predictable

< 100 msec100-300 msec300 - 1000 msec1+ sec10+ sec

Instant responseSmall delaySystem worksSwitching taskCancelling operation

When to use?

1. A lot of animated objects2. Dynamicly changing shapes3. Need highly consistent browser behaviour4. Solution should be easy to maintain and

widely compatible

Tricks

1. Smaller means faster (width, height)2. Rounded coordinates for drawing3. Draw from another canvas, not image4. Use RAF and decrease framerate if needed

(skip some frames)5. Use few canvases if have content partially

changing

WebGLFast, amazing and hard to use

WebGL: Good parts

1. You may utilize GPU in the best way2. After you sent shaders and buffers to GPU

you do not use JS anymore and it makes rendering incredibly fast

3. WebGL calls are inspectable with vast see of optimizations and workarounds possible

When to use?

1. A lot of animated objects2. Need highest performance possible3. Have high budget and modern hardware

Tricks

1. Debug WebGL calls with WebGL inspector2. Check your drivers, are they bottleneck?3. Use engines (Pixi, Cocos2d, Three)4. Move to declarative engine (HTML-GL)

WebGL: Bad parts

DOM<img src=”back.png”>

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

HTML-GL?

DOM<img src=”back.png”>

HTML-GL<html-gl>

<img src=”back.png”></html-gl>

htmlgl.com

SVGNo speed improvement, but some effects

When to use?

1. Need vector shapes animated and scalable interface elements

2. Do not care about FPS too much3. Have browsers supporting SVG

Trick

SVG layer is not hardware accelerated and causes repaints when something is moved, but you may wrap it with GPU accelerated element and apply transformations on that element instead of SVG