Альтернативные технологии рендеринга контента: SVG,...
-
Upload
ontico -
Category
Engineering
-
view
133 -
download
0
Transcript of Альтернативные технологии рендеринга контента: SVG,...
![Page 1: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/1.jpg)
Alternative renderingCanvas, WebGL, SVG
![Page 2: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/2.jpg)
Why not DOM ?It is slow since is a quite complex model
![Page 3: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/3.jpg)
CanvasSimple and sometimes fast
![Page 4: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/4.jpg)
Display image: DOM vs Canvas
DOM Canvas
![Page 5: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/5.jpg)
Display image: DOM vs Canvas
DOM ● Create IMG tag
Canvas
![Page 6: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/6.jpg)
Display image: DOM vs Canvas
DOM ● Create IMG tag● Load file
Canvas
![Page 7: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/7.jpg)
Display image: DOM vs Canvas
DOM ● Create IMG tag● Load file● Append IMG tag
Canvas
![Page 8: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/8.jpg)
Display image: DOM vs Canvas
DOM ● Create IMG tag● Load file● Append IMG tag● Calc. styles
Canvas
![Page 9: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/9.jpg)
Display image: DOM vs Canvas
DOM ● Create IMG tag● Load file● Append IMG tag● Calc. styles● Calc. position
Canvas
![Page 10: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/10.jpg)
Display image: DOM vs Canvas
DOM ● Create IMG tag● Load file● Append IMG tag● Calc. styles● Calc. position● Display image
Canvas
![Page 11: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/11.jpg)
Display image: DOM vs Canvas
DOM ● Create IMG tag● Load file● Append IMG tag● Calc. styles● Calc. position● Display image
Canvas● Load file
![Page 12: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/12.jpg)
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 13: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/13.jpg)
DOM is hardly predictable
< 100 msec100-300 msec300 - 1000 msec1+ sec10+ sec
Instant responseSmall delaySystem worksSwitching taskCancelling operation
![Page 14: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/14.jpg)
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
![Page 15: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/15.jpg)
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
![Page 16: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/16.jpg)
WebGLFast, amazing and hard to use
![Page 17: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/17.jpg)
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
![Page 18: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/18.jpg)
When to use?
1. A lot of animated objects2. Need highest performance possible3. Have high budget and modern hardware
![Page 19: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/19.jpg)
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)
![Page 20: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/20.jpg)
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);
![Page 21: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/21.jpg)
HTML-GL?
DOM<img src=”back.png”>
HTML-GL<html-gl>
<img src=”back.png”></html-gl>
![Page 23: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/23.jpg)
SVGNo speed improvement, but some effects
![Page 24: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/24.jpg)
When to use?
1. Need vector shapes animated and scalable interface elements
2. Do not care about FPS too much3. Have browsers supporting SVG
![Page 25: Альтернативные технологии рендеринга контента: SVG, Canvas, WebGL / Денис Радин (Liberty Global)](https://reader030.fdocuments.in/reader030/viewer/2022033102/586f909a1a28ab54768b7a09/html5/thumbnails/25.jpg)
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