E cient Graphics with Qt            ARIYA HIDAYAT     ENGINEERING DIRECTOR, SENCHA                                    1
whoami         2
?    3
about... Patterns on beauty2-D low-level QPainter    Graphics View    Widget tricks                         4
and NOT about   Qt Quick (QML)    Scene Graph                    5
ObjectivesIdeas & tricks to beautify  your Qt & KDE apps                             6
7
8
9
Graphics Performance     Gunnar Sletta’s blog posts on Qt Labshttp://labs.qt.nokia.com/author/gunnar/                     ...
Premature Optimization...                            11
Blazing Fast. How?                     12
Avoid Slow Operations                        13
Don’t Assume. Measure! Valgrind       Shark                         14
Transformation                 15
QTransform             16
Flipping Clockhttp://labs.qt.nokia.com/2009/07/15/digital-clock-in-a-phone/                                               ...
Composing Screenshots                        18
Fancy!         http://screenie.googlecode.com                                          19
Flow E ect     http://pictureflow.googlecode.com                                        20
Ray Castinghttp://labs.qt.nokia.com/2009/08/09/ray-casting-on-qts60/                                                      ...
WolfenQthttp://labs.qt.nokia.com/2008/12/02/widgets-enter-the-third-dimension-wolfenqt/                                   ...
Pixel Manipulation                     23
Accessing Pixels in QImage          QRgb QImage::pixel (int x, int y)    void QImage::setPixel (int x, int y, uint rgb )  ...
Faster Pixel Access     bits()   scanLine(y)                      25
Careful with Implicit Sharing                         uchar * QImage::bits ()         const uchar * QImage::bits ()       ...
Pixel Shifting http://labs.qt.nokia.com/2008/07/13/underwater-e ect/                                                      ...
Blurhttp://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       ...
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 / Colorizehttp://labs.qt.nokia.com/2008/11/10/colorize-an-image-via-painter-composition/                             ...
RGB, HSL, HSV                38
Bloom http://labs.qt.nokia.com/2008/06/29/bloom-e ect/                                                    39
Night Modehttp://labs.qt.nokia.com/2009/06/09/night-mode-in-qwebview/                                                     ...
Shadow Blurhttp://ariya.blogspot.com/2010/09/art-of-blurring-shadow.html                                                  ...
Genie   http://labs.qt.nokia.com/2008/12/15/genie-fx/                                                   42
Morphinghttp://ariya.blogspot.com/2010/03/morphing-clock.html                                                        43
Physics          44
Easinghttp://labs.qt.nokia.com/2009/03/03/qtimeline-made-easy/                                                           45
Parallax Sliding http://labs.qt.nokia.com/2008/11/03/parallax-sliding/                                                    ...
Magnifying Glass http://labs.qt.nokia.com/2009/10/07/magnifying-glass/                                                    ...
Kinetic Scrollinghttp://labs.qt.nokia.com/2009/07/19/kinetic-scrolling-on-any-widgets/                                    ...
Physics Enginehttp://ariya.blogspot.com/2010/08/box-of-marbles-redux.html                                                 ...
Minimize Path Operations    collision detection                           50
ApproximationQt::IntersectItemShape   Qt::IntersectBoundingRect                                                 51
Widgets & Applications                         52
Graphics System   yourapp -graphicssystem raster    native   Automatic    raster   Pure software rasterizer      x11    Us...
Widget Attributes Qt::WA_StaticContents      paint events only for the newly visible part Qt::WA_OpaquePaintEvent      pai...
More Widget Attributes  Qt::WA_PaintOnScreen       draw directly onto the screen       might cause flickering!!  Qt::WA_Nat...
Antialiasing               56
Thumbnail Preview                    57
Faster Downscalinghttp://labs.qt.nokia.com/2009/01/26/creating-thumbnail-preview/                                         ...
Fast vs Smooth                 59
Smooth vs Cheat                  60
Conclusions              61
Patterns of Beauty      Tranformations      Special E ects    Pixel manipulations         Physics                         ...
THANK YOU!       ariya @ kde.org       ariya.blogspot.com       ariyahidayat                            63
Upcoming SlideShare
Loading in...5
×

Efficient Graphics with Qt

6,533

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,533
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
72
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Efficient Graphics with Qt

  1. 1. E cient Graphics with Qt ARIYA HIDAYAT ENGINEERING DIRECTOR, SENCHA 1
  2. 2. whoami 2
  3. 3. ? 3
  4. 4. about... Patterns on beauty2-D low-level QPainter Graphics View Widget tricks 4
  5. 5. and NOT about Qt Quick (QML) Scene Graph 5
  6. 6. ObjectivesIdeas & tricks to beautify your Qt & KDE apps 6
  7. 7. 7
  8. 8. 8
  9. 9. 9
  10. 10. Graphics Performance Gunnar Sletta’s blog posts on Qt Labshttp://labs.qt.nokia.com/author/gunnar/ 10
  11. 11. Premature Optimization... 11
  12. 12. Blazing Fast. How? 12
  13. 13. Avoid Slow Operations 13
  14. 14. Don’t Assume. Measure! Valgrind Shark 14
  15. 15. Transformation 15
  16. 16. QTransform 16
  17. 17. Flipping Clockhttp://labs.qt.nokia.com/2009/07/15/digital-clock-in-a-phone/ 17
  18. 18. Composing Screenshots 18
  19. 19. Fancy! http://screenie.googlecode.com 19
  20. 20. Flow E ect http://pictureflow.googlecode.com 20
  21. 21. Ray Castinghttp://labs.qt.nokia.com/2009/08/09/ray-casting-on-qts60/ 21
  22. 22. WolfenQthttp://labs.qt.nokia.com/2008/12/02/widgets-enter-the-third-dimension-wolfenqt/ 22
  23. 23. Pixel Manipulation 23
  24. 24. Accessing Pixels in QImage QRgb QImage::pixel (int x, int y) void QImage::setPixel (int x, int y, uint rgb ) 24
  25. 25. Faster Pixel Access bits() scanLine(y) 25
  26. 26. Careful with Implicit Sharing uchar * QImage::bits () const uchar * QImage::bits () 26
  27. 27. Pixel Shifting http://labs.qt.nokia.com/2008/07/13/underwater-e ect/ 27
  28. 28. Blurhttp://labs.qt.nokia.com/2008/07/05/let-there-be-color/ 28
  29. 29. Image Formats ARGB32 ARGB32_Premultiplied A: 128 A: 128 R: 175 R: 088 G: 212 G: 106 B: 240 B: 120 29
  30. 30. Faster Alpha Blending R=R A +R A s s d d R=R +R A s d d 30
  31. 31. Cache Friendly 31
  32. 32. Let There Be Colors 32-bit 16-bit 32
  33. 33. Special F/X 33
  34. 34. With great power must come great responsibility. 34
  35. 35. Grayscale 35
  36. 36. Composition Modes 36
  37. 37. Tint / Colorizehttp://labs.qt.nokia.com/2008/11/10/colorize-an-image-via-painter-composition/ 37
  38. 38. RGB, HSL, HSV 38
  39. 39. Bloom http://labs.qt.nokia.com/2008/06/29/bloom-e ect/ 39
  40. 40. Night Modehttp://labs.qt.nokia.com/2009/06/09/night-mode-in-qwebview/ 40
  41. 41. Shadow Blurhttp://ariya.blogspot.com/2010/09/art-of-blurring-shadow.html 41
  42. 42. Genie http://labs.qt.nokia.com/2008/12/15/genie-fx/ 42
  43. 43. Morphinghttp://ariya.blogspot.com/2010/03/morphing-clock.html 43
  44. 44. Physics 44
  45. 45. Easinghttp://labs.qt.nokia.com/2009/03/03/qtimeline-made-easy/ 45
  46. 46. Parallax Sliding http://labs.qt.nokia.com/2008/11/03/parallax-sliding/ 46
  47. 47. Magnifying Glass http://labs.qt.nokia.com/2009/10/07/magnifying-glass/ 47
  48. 48. Kinetic Scrollinghttp://labs.qt.nokia.com/2009/07/19/kinetic-scrolling-on-any-widgets/ 48
  49. 49. Physics Enginehttp://ariya.blogspot.com/2010/08/box-of-marbles-redux.html 49
  50. 50. Minimize Path Operations collision detection 50
  51. 51. ApproximationQt::IntersectItemShape Qt::IntersectBoundingRect 51
  52. 52. Widgets & Applications 52
  53. 53. Graphics System yourapp -graphicssystem raster native Automatic raster Pure software rasterizer x11 Use X11 + its extensions opengl Use OpenGL (ES) 2 53
  54. 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. 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 widgets ancestors are kept non-native 55
  56. 56. Antialiasing 56
  57. 57. Thumbnail Preview 57
  58. 58. Faster Downscalinghttp://labs.qt.nokia.com/2009/01/26/creating-thumbnail-preview/ 58
  59. 59. Fast vs Smooth 59
  60. 60. Smooth vs Cheat 60
  61. 61. Conclusions 61
  62. 62. Patterns of Beauty Tranformations Special E ects Pixel manipulations Physics 62
  63. 63. THANK YOU! ariya @ kde.org ariya.blogspot.com ariyahidayat 63
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×