1. E cient Graphics with Qt
ARIYA HIDAYAT
ENGINEERING DIRECTOR, SENCHA
1

2. whoami
2

3. ?
3

4. about...
Patterns on beauty
2-D low-level QPainter
Graphics View
Widget tricks
4

5. and NOT about
Qt Quick (QML)
Scene Graph
5

6. Objectives
Ideas & tricks to beautify
your Qt & KDE apps
6

7. 7

8. 8

9. 9

10. Graphics Performance
Gunnar Sletta’s blog posts on Qt Labs
http://labs.qt.nokia.com/author/gunnar/
10

11. Premature Optimization...
11

12. Blazing Fast. How?
12

13. Avoid Slow Operations
13

14. Don’t Assume. Measure!
Valgrind Shark
14

15. Transformation
15

16. QTransform
16

17. Flipping Clock
http://labs.qt.nokia.com/2009/07/15/digital-clock-in-a-phone/
17

18. Composing Screenshots
18

19. Fancy!
http://screenie.googlecode.com
19

20. Flow E ect
http://pictureflow.googlecode.com
20

21. Ray Casting
http://labs.qt.nokia.com/2009/08/09/ray-casting-on-qts60/
21

22. WolfenQt
http://labs.qt.nokia.com/2008/12/02/widgets-enter-the-third-dimension-wolfenqt/
22

23. Pixel Manipulation
23

24. Accessing Pixels in QImage
QRgb QImage::pixel (int x, int y)
void QImage::setPixel (int x, int y, uint rgb )
24

25. Faster Pixel Access
bits()
scanLine(y)
25

26. Careful with Implicit Sharing
uchar * QImage::bits ()
const uchar * QImage::bits ()
26

27. Pixel Shifting
http://labs.qt.nokia.com/2008/07/13/underwater-e ect/
27

28. Blur
http://labs.qt.nokia.com/2008/07/05/let-there-be-color/
28

29. Image Formats
ARGB32 ARGB32_Premultiplied
A: 128 A: 128
R: 175 R: 088
G: 212 G: 106
B: 240 B: 120
29

30. Faster Alpha Blending
R=R A +R A
s s d d
R=R +R A
s d d
30

31. Cache Friendly
31

32. Let There Be Colors
32-bit 16-bit
32

33. Special F/X
33

34. With great power must come great responsibility.
34

35. Grayscale
35

36. Composition Modes
36

37. Tint / Colorize
http://labs.qt.nokia.com/2008/11/10/colorize-an-image-via-painter-composition/
37

38. RGB, HSL, HSV
38

39. Bloom
http://labs.qt.nokia.com/2008/06/29/bloom-e ect/
39

40. Night Mode
http://labs.qt.nokia.com/2009/06/09/night-mode-in-qwebview/
40

41. Shadow Blur
http://ariya.blogspot.com/2010/09/art-of-blurring-shadow.html
41

42. Genie
http://labs.qt.nokia.com/2008/12/15/genie-fx/
42

43. Morphing
http://ariya.blogspot.com/2010/03/morphing-clock.html
43

44. Physics
44

45. Easing
http://labs.qt.nokia.com/2009/03/03/qtimeline-made-easy/
45

46. Parallax Sliding
http://labs.qt.nokia.com/2008/11/03/parallax-sliding/
46

47. Magnifying Glass
http://labs.qt.nokia.com/2009/10/07/magnifying-glass/
47

48. Kinetic Scrolling
http://labs.qt.nokia.com/2009/07/19/kinetic-scrolling-on-any-widgets/
48

49. Physics Engine
http://ariya.blogspot.com/2010/08/box-of-marbles-redux.html
49

50. Minimize Path Operations
collision detection
50

51. Approximation
Qt::IntersectItemShape Qt::IntersectBoundingRect
51

52. Widgets & Applications
52

53. Graphics System
yourapp -graphicssystem raster
native Automatic
raster Pure software rasterizer
x11 Use X11 + its extensions
opengl Use OpenGL (ES) 2
53

54. Widget Attributes
Qt::WA_StaticContents
paint events only for the newly visible part
Qt::WA_OpaquePaintEvent
paints all its pixels when it receives a paint event
Qt::WA_NoSystemBackground
the background is not automatically repainted
54

55. More Widget Attributes
Qt::WA_PaintOnScreen
draw directly onto the screen
might cause flickering!!
Qt::WA_NativeWindow
this widget is native (to the window system)
Qt::WA_DontCreateNativeAncestors
the widget's ancestors are kept non-native
55

56. Antialiasing
56

57. Thumbnail Preview
57

58. Faster Downscaling
http://labs.qt.nokia.com/2009/01/26/creating-thumbnail-preview/
58

59. Fast vs Smooth
59

60. Smooth vs Cheat
60

61. Conclusions
61

62. Patterns of Beauty
Tranformations
Special E ects
Pixel manipulations
Physics
62

63. THANK YOU!
ariya @ kde.org
ariya.blogspot.com
ariyahidayat
63