E!cient Graphics with Qt

ARIYA HIDAYATENGINEERING DIRECTOR, SENCHA

1

whoami

2

?

3

about...Patterns on beauty

2-D low-level QPainter

Graphics View

Widget tricks

4

and NOT aboutQt Quick (QML)

Scene Graph

5

ObjectivesIdeas & tricks to beautify

your Qt & KDE apps

6

7

8

9

Graphics PerformanceGunnar 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.com19

Flow E"ect

http://pictureflow.googlecode.com20

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 Accessbits()

scanLine(y)

25

Careful with Implicit Sharinguchar * 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

ARGB32A: 128R: 175G: 212B: 240

ARGB32_PremultipliedA: 128R: 088G: 106B: 120

29

Faster Alpha Blending

R = Rs As + Rd Ad

R = Rs + Rd Ad

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.html41

Genie

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

Morphing

http://ariya.blogspot.com/2010/03/morphing-clock.html43

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.html49

Minimize Path Operations

collision detection

50

Approximation

Qt::IntersectItemShape Qt::IntersectBoundingRect

51

Widgets & Applications

52

Graphics System

yourapp -graphicssystem raster

native Automaticraster Pure software rasterizerx11 Use X11 + its extensions

opengl Use OpenGL (ES) 2

53

Widget Attributes

Qt::WA_StaticContentspaint events only for the newly visible part

Qt::WA_OpaquePaintEventpaints all its pixels when it receives a paint event

Qt::WA_NoSystemBackgroundthe background is not automatically repainted

54

More Widget Attributes

Qt::WA_PaintOnScreendraw directly onto the screenmight cause flickering!!

Qt::WA_NativeWindow this widget is native (to the window system)

Qt::WA_DontCreateNativeAncestorsthe 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 BeautyTranformations

Special E!ects

Pixel manipulations

Physics

62

THANK YOU!

ariya @ kde.org

ariyahidayat

ariya.blogspot.com

63