This document discusses hardware acceleration on mobile browsers. It covers the challenges of rendering web pages on mobile devices due to their fundamental physical limitations of available memory, bus bandwidth, and speed differences between the CPU and GPU. It also discusses how graphics are optimized for games with fixed geometry, transformations, and textured triangles which allows for parallel processing that is challenging for web pages with unpredictable contents, mostly text and images. The document outlines how browsers use techniques like tiling, layering, compositing, and reusing textures to help optimize rendering and allow for hardware acceleration of CSS animations, scrolling, and other interactions.

1. Understanding Hardware Acceleration
Ariya Hidayat
on Mobile Browsers

3. whoami

4. Challenges

5. Game vs Web

6. Game
Text
Textured
objects
Animation
Transformation Physics

7. Large Area, but Still Bounded

8. Web Page
Images
Text

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

11. Platform Abstraction
Network Unicode Clipboard
Graphics Theme Events
Thread Geolocation Timer

12. Graphics Abstraction
GraphicsContext Mac Chromium Qt
Skia
CoreGraphics
QPainter
graphics stack

13. Mobile Device
Radio
Touch interface
CPU
Power
GPU

14. Graphics Processor
Divide and conquer
Very specific purpose

15. Relationship
CPU GPU

16. SoC = System-on-a-Chip

17. Fundamental Physical Limitations
1.Available memory
2.Bus bandwith
3.Speed difference

18. Optimized for Games
Fixed geometry
Transformation
Textured triangles
Parallelism

19. Challenges
Predictable contents (assets) ✔
Mostly text ✔
Mostly images ✔
Initial response immediate

20. http://www.trollquotes.org/619-super-spider-bat-troll-quote/

21. Primitive Drawing

22. Path is Everything
Triangle Rectangle
Path
Ellipse Polygon

23. Stroke = Outline
Solid Dashed Dotted Textured

24. Brush = Fill
None Solid Gradient Textured

25. Smooth via Antialiasing
Multiple levels of transparency
Perfect for parallelism

26. Path Approximation
Curves
Polygon

27. Gradient: Expensive
CPU: sequential, tedious
GPU: parallel, still a lot of work

28. Blur Shadow: Really Posh
Involved pixel “blending”
GPU: parallel, still tedious

29. Transformation
Scaling
Perspective
Rotation

30. Text Rasterization

31. Font Atlas
Buffer
Bye

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

33. Backing Store

34. Maps
Tile

35. Pinch to Zoom
when you pinch...

36. Responsive Interface
decoupled
Rendering
Processor
User interaction

37. Rendering vs Interaction
Screen
Backing Store
Rendering
Web Page User interaction

38. Checkerboard Pattern

39. Progressive Rendering
Fast but blurry
Crisp but slow

40. Tiling System
Texture upload
.... ....
CPU GPU

41. Tile Transformation
Panning = Translation Zooming = Scaling

42. Backing Store Support
Vector-based
Texture-based
Honeycomb and later

43. Y U NO
position:fixed

44. Layer & Compositing

45. Mechanics of Animation
“Hey, this is good stuff. Keep it around as texture #42.”
Initialization
“Apply [operation] to texture #42.”
Animation step

46. Elements = Layer

47. Typical Animation
opacity, movement, scaling, rotation, ...

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);

50. Logical 3-D

51. Keep the Textures

52. Compositing Support
Honeycomb and later

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

55. Debugging in Safari
defaults write com.apple.Safari IncludeInternalDebugMenu 1

56. Compositing Indicators
Texture (number = upload)
Composited layer
No texture
Container layer
Overflow

57. Avoid Texture Reupload
No reupload Upload
Opacity Everything else!
Position
Size
Animation
“Hardware accelerated CSS”

58. Examples

59. Avoid Overcapacity
GPU = Limited silicon space
Large layer ➔ broken into “tiles”

60. Prepare & Reuse
Hide the layer offscreen
Viewport

61. Alpha Blending
Color change

62. Alpha Blending: The Trick
Blended with

63. Wrap-up

64. Hardware Acceleration
Drawing Backing Layer &
primitives stores compositing

65. What Can We Learn?
Traditional graphics programming has been
always full of tricks.
It will always be.

66. There is No Silver Bullet

67. Thank You
ariya.hidayat@gmail.com
ariya.ofilabs.com
@AriyaHidayat