3. So for good rendering quality: vectors redrawn at each frame
while interacting and animating at 60 fps!
4. Performance challenge!
5. Now let's look at the techniques we use in the library
6. #1 batching Minimize data processing and manipulation: style
calculations geometry simplifications R-tree lookups object
creations replay batch during animations/interactions
7. #2 geometry simplification Douglas Peuker (lines)
Quantization to maintain topology (polygons) also allows for better
rendering qualtity
8. #3 over-simplification Over-simplification and clipping for
the parts that are outside the viewport.
9. (complex and large features)
10. #4 No intermediate canvas for vectors Vector geometries are
draw to the output canvas directly. avoid composing transparent
pixels save memory Consequence: vector layers are very cheap!
11. Feature Hit Detection
12. (hit detection)
13. Hit Detection Canvas doesn't natively support hit
detection. Technique used: redraw the entire "scene" in a 1x1 px
canvas, and test if there is a color. Advantages: features under
others are detectable pixel-perfect detection tolerance for line
detection on touch devices
14. WebGL
15. WebGL WebGL is now everywhere even in iOS! (iOS 8) allow to
do thing otherwise not possible