Альтернативные технологии рендеринга контента: SVG,...
25
Alternative rendering Canvas, WebGL, SVG
-
Upload
ontico -
Category
Engineering
-
view
135 -
download
0
Transcript of Альтернативные технологии рендеринга контента: SVG,...
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>
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
