More Related Content
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