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

whoami
2

?
3

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

and NOT about
Qt Quick (QML)
Scene Graph
5

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

7

8

9

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

Premature Optimization...
11

Blazing Fast. How?
12

Avoid Slow Operations
13

Don’t Assume. Measure!
Valgrind Shark
14

Transformation
15

QTransform
16

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

Composing Screenshots
18

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

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

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

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

Pixel Manipulation
23

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

Faster Pixel Access
bits()
scanLine(y)
25

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

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

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

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

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

Cache Friendly
31

Let There Be Colors
32-bit 16-bit
32

Special F/X
33

With great power must come great responsibility.
34

Grayscale
35

Composition Modes
36

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

RGB, HSL, HSV
38

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

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

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

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

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

Physics
44

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

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

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

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

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

Minimize Path Operations
collision detection
50

Approximation
Qt::IntersectItemShape Qt::IntersectBoundingRect
51

Widgets & Applications
52

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

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

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

Antialiasing
56

Thumbnail Preview
57

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

Fast vs Smooth
59

Smooth vs Cheat
60

Conclusions
61

Patterns of Beauty
Tranformations
Special E ects
Pixel manipulations
Physics
62

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