More Related Content
Similar to Understanding Hardware Acceleration on Mobile Browsers
Similar to Understanding Hardware Acceleration on Mobile Browsers (20)
More from Ariya Hidayat (7)
Understanding Hardware Acceleration on Mobile Browsers
- 6. Game
Text
Textured
objects
Animation
Transformation Physics
- 9. From Wave to Pixels
Network stack
Layout engine
JavaScript engine Graphics
User interface
- 10. WebKit Components
DOM CSS
WebCore SVG
HTML
rendering
JavaScriptCore
WebKit Library
- 32. Simple to Complex
ello!
H
Simple shape Curves
Solid color Gradient brush
Textured stroke
Blur shadow
Make it as an Serif text
image Rotated
- 45. Mechanics of Animation
“Hey, this is good stuff. Keep it around as texture #42.”
Initialization
“Apply [operation] to texture #42.”
Animation step
- 48. Immediate Mode
setInterval(function() {
box.draw(x, y);
x += 10;
}, 20);
every animation tick
- 49. Scene Graph
box.drawInto(layer);
setInterval(function() {
layer.translate(10, 0); Change transformation
matrix
}, 20);
- 53. Well-known Trick
forcing 3-D transform
-webkit-transform: translateZ(0)
Not needed for CSS animation!
- 54. Magical Advice
Use translate3d for hardware Misleading (at best)
acceleration
- 57. Avoid Texture Reupload
No reupload Upload
Opacity Everything else!
Position
Size
Animation
“Hardware accelerated CSS”
- 65. What Can We Learn?
Traditional graphics programming has been
always full of tricks.
It will always be.
- 67. Thank You
ariya.hidayat@gmail.com
ariya.ofilabs.com
@AriyaHidayat