SlideShare a Scribd company logo
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

More Related Content

Efficient Graphics with Qt