ZoomBlur.qml 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. /****************************************************************************
  2. **
  3. ** Copyright (C) 2017 The Qt Company Ltd.
  4. ** Contact: https://www.qt.io/licensing/
  5. **
  6. ** This file is part of the Qt Graphical Effects module.
  7. **
  8. ** $QT_BEGIN_LICENSE:LGPL$
  9. ** Commercial License Usage
  10. ** Licensees holding valid commercial Qt licenses may use this file in
  11. ** accordance with the commercial license agreement provided with the
  12. ** Software or, alternatively, in accordance with the terms contained in
  13. ** a written agreement between you and The Qt Company. For licensing terms
  14. ** and conditions see https://www.qt.io/terms-conditions. For further
  15. ** information use the contact form at https://www.qt.io/contact-us.
  16. **
  17. ** GNU Lesser General Public License Usage
  18. ** Alternatively, this file may be used under the terms of the GNU Lesser
  19. ** General Public License version 3 as published by the Free Software
  20. ** Foundation and appearing in the file LICENSE.LGPL3 included in the
  21. ** packaging of this file. Please review the following information to
  22. ** ensure the GNU Lesser General Public License version 3 requirements
  23. ** will be met: https://www.gnu.org/licenses/lgpl-3.0.html.
  24. **
  25. ** GNU General Public License Usage
  26. ** Alternatively, this file may be used under the terms of the GNU
  27. ** General Public License version 2.0 or (at your option) the GNU General
  28. ** Public license version 3 or any later version approved by the KDE Free
  29. ** Qt Foundation. The licenses are as published by the Free Software
  30. ** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3
  31. ** included in the packaging of this file. Please review the following
  32. ** information to ensure the GNU General Public License requirements will
  33. ** be met: https://www.gnu.org/licenses/gpl-2.0.html and
  34. ** https://www.gnu.org/licenses/gpl-3.0.html.
  35. **
  36. ** $QT_END_LICENSE$
  37. **
  38. ****************************************************************************/
  39. import QtQuick 2.12
  40. import QtGraphicalEffects.private 1.12
  41. /*!
  42. \qmltype ZoomBlur
  43. \inqmlmodule QtGraphicalEffects
  44. \since QtGraphicalEffects 1.0
  45. \inherits QtQuick2::Item
  46. \ingroup qtgraphicaleffects-motion-blur
  47. \brief Applies directional blur effect towards source items center point.
  48. Effect creates perceived impression that the source item appears to be
  49. moving towards the center point in Z-direction or that the camera appears
  50. to be zooming rapidly. Other available motion blur effects are
  51. \l{QtGraphicalEffects::DirectionalBlur}{DirectionalBlur}
  52. and \l{QtGraphicalEffects::RadialBlur}{RadialBlur}.
  53. \table
  54. \header
  55. \li Source
  56. \li Effect applied
  57. \row
  58. \li \image Original_bug.png
  59. \li \image ZoomBlur_bug.png
  60. \endtable
  61. \note This effect is available when running with OpenGL.
  62. \section1 Example
  63. The following example shows how to apply the effect.
  64. \snippet ZoomBlur-example.qml example
  65. */
  66. Item {
  67. id: rootItem
  68. /*!
  69. This property defines the source item that is going to be blurred.
  70. \note It is not supported to let the effect include itself, for
  71. instance by setting source to the effect's parent.
  72. */
  73. property variant source
  74. /*!
  75. This property defines the maximum perceived amount of movement for each
  76. pixel. The amount is smaller near the center and reaches the specified
  77. value at the edges.
  78. The quality of the blur depends on \l{ZoomBlur::samples}{samples}
  79. property. If length value is large, more samples are needed to keep the
  80. visual quality at high level.
  81. The value ranges from 0.0 to inf. By default the property is set to \c
  82. 0.0 (no blur).
  83. \table
  84. \header
  85. \li Output examples with different length values
  86. \li
  87. \li
  88. \row
  89. \li \image ZoomBlur_length1.png
  90. \li \image ZoomBlur_length2.png
  91. \li \image ZoomBlur_length3.png
  92. \row
  93. \li \b { length: 0.0 }
  94. \li \b { length: 32.0 }
  95. \li \b { length: 48.0 }
  96. \row
  97. \li \l samples: 24
  98. \li \l samples: 24
  99. \li \l samples: 24
  100. \row
  101. \li \l horizontalOffset: 0
  102. \li \l horizontalOffset: 0
  103. \li \l horizontalOffset: 0
  104. \row
  105. \li \l verticalOffset: 0
  106. \li \l verticalOffset: 0
  107. \li \l verticalOffset: 0
  108. \endtable
  109. */
  110. property real length: 0.0
  111. /*!
  112. This property defines how many samples are taken per pixel when blur
  113. calculation is done. Larger value produces better quality, but is slower
  114. to render.
  115. This property is not intended to be animated. Changing this property may
  116. cause the underlying OpenGL shaders to be recompiled.
  117. Allowed values are between 0 and inf (practical maximum depends on GPU).
  118. By default the property is set to \c 0 (no samples).
  119. */
  120. property int samples: 0
  121. /*!
  122. \qmlproperty real QtGraphicalEffects::ZoomBlur::horizontalOffset
  123. \qmlproperty real QtGraphicalEffects::ZoomBlur::verticalOffset
  124. These properties define an offset in pixels for the blur direction
  125. center point.
  126. The values range from -inf to inf. By default these properties are set
  127. to \c 0.
  128. \table
  129. \header
  130. \li Output examples with different horizontalOffset values
  131. \li
  132. \li
  133. \row
  134. \li \image ZoomBlur_horizontalOffset1.png
  135. \li \image ZoomBlur_horizontalOffset2.png
  136. \li \image ZoomBlur_horizontalOffset3.png
  137. \row
  138. \li \b { horizontalOffset: 100.0 }
  139. \li \b { horizontalOffset: 0.0 }
  140. \li \b { horizontalOffset: -100.0 }
  141. \row
  142. \li \l samples: 24
  143. \li \l samples: 24
  144. \li \l samples: 24
  145. \row
  146. \li \l length: 32
  147. \li \l length: 32
  148. \li \l length: 32
  149. \row
  150. \li \l verticalOffset: 0
  151. \li \l verticalOffset: 0
  152. \li \l verticalOffset: 0
  153. \endtable
  154. */
  155. property real horizontalOffset: 0.0
  156. property real verticalOffset: 0.0
  157. /*!
  158. This property defines the blur behavior near the edges of the item,
  159. where the pixel blurring is affected by the pixels outside the source
  160. edges.
  161. If the property is set to \c true, the pixels outside the source are
  162. interpreted to be transparent, which is similar to OpenGL
  163. clamp-to-border extension. The blur is expanded slightly outside the
  164. effect item area.
  165. If the property is set to \c false, the pixels outside the source are
  166. interpreted to contain the same color as the pixels at the edge of the
  167. item, which is similar to OpenGL clamp-to-edge behavior. The blur does
  168. not expand outside the effect item area.
  169. By default, the property is set to \c false.
  170. */
  171. property bool transparentBorder: false
  172. /*!
  173. This property allows the effect output pixels to be cached in order to
  174. improve the rendering performance.
  175. Every time the source or effect properties are changed, the pixels in
  176. the cache must be updated. Memory consumption is increased, because an
  177. extra buffer of memory is required for storing the effect output.
  178. It is recommended to disable the cache when the source or the effect
  179. properties are animated.
  180. By default, the property is set to \c false.
  181. */
  182. property bool cached: false
  183. SourceProxy {
  184. id: sourceProxy
  185. input: rootItem.source
  186. sourceRect: rootItem.transparentBorder ? Qt.rect(-1, -1, parent.width + 2.0, parent.height + 2.0) : Qt.rect(0, 0, 0, 0)
  187. }
  188. ShaderEffectSource {
  189. id: cacheItem
  190. anchors.fill: shaderItem
  191. visible: rootItem.cached
  192. smooth: true
  193. sourceItem: shaderItem
  194. live: true
  195. hideSource: visible
  196. }
  197. ShaderEffect {
  198. id: shaderItem
  199. property variant source: sourceProxy.output
  200. property variant center: Qt.point(0.5 + rootItem.horizontalOffset / width, 0.5 + rootItem.verticalOffset / height)
  201. property real len: rootItem.length
  202. property bool transparentBorder: rootItem.transparentBorder
  203. property real samples: rootItem.samples
  204. property real weight: 1.0 / Math.max(1.0, rootItem.samples)
  205. property variant expandPixels: transparentBorder ? Qt.size(rootItem.samples, rootItem.samples) : Qt.size(0,0)
  206. property variant expand: transparentBorder ? Qt.size(expandPixels.width / width, expandPixels.height / height) : Qt.size(0,0)
  207. property variant delta: Qt.size(1.0 / rootItem.width, 1.0 / rootItem.height)
  208. x: transparentBorder ? -expandPixels.width - 1 : 0
  209. y: transparentBorder ? -expandPixels.height - 1 : 0
  210. width: transparentBorder ? parent.width + 2.0 * expandPixels.width + 2 : parent.width
  211. height: transparentBorder ? parent.height + 2.0 * expandPixels.height + 2 : parent.height
  212. property string fragmentShaderSkeleton: "
  213. varying highp vec2 qt_TexCoord0;
  214. uniform highp float qt_Opacity;
  215. uniform lowp sampler2D source;
  216. uniform highp float len;
  217. uniform highp float weight;
  218. uniform highp float samples;
  219. uniform highp vec2 center;
  220. uniform highp vec2 expand;
  221. uniform highp vec2 delta;
  222. void main(void) {
  223. mediump vec2 texCoord = qt_TexCoord0;
  224. mediump vec2 centerCoord = center;
  225. PLACEHOLDER_EXPAND_STEPS
  226. highp vec2 dir = vec2(centerCoord.x - texCoord.s, centerCoord.y - texCoord.t);
  227. dir /= max(1.0, length(dir) * 2.0);
  228. highp vec2 shift = delta * len * dir * 2.0 / max(1.0, samples - 1.0);
  229. gl_FragColor = vec4(0.0);
  230. PLACEHOLDER_UNROLLED_LOOP
  231. gl_FragColor *= weight * qt_Opacity;
  232. }
  233. "
  234. function buildFragmentShader() {
  235. var shader = ""
  236. if (GraphicsInfo.profile == GraphicsInfo.OpenGLCoreProfile)
  237. shader += "#version 150 core\n#define varying in\n#define gl_FragColor fragColor\n#define texture2D texture\nout vec4 fragColor;\n"
  238. shader += fragmentShaderSkeleton
  239. var expandSteps = ""
  240. if (transparentBorder) {
  241. expandSteps += "centerCoord = (centerCoord - expand) / (1.0 - 2.0 * expand);"
  242. expandSteps += "texCoord = (texCoord - expand) / (1.0 - 2.0 * expand);"
  243. }
  244. var unrolledLoop = "gl_FragColor += texture2D(source, texCoord);\n"
  245. if (rootItem.samples > 1) {
  246. unrolledLoop = ""
  247. for (var i = 0; i < rootItem.samples; i++)
  248. unrolledLoop += "gl_FragColor += texture2D(source, texCoord); texCoord += shift;\n"
  249. }
  250. shader = shader.replace("PLACEHOLDER_EXPAND_STEPS", expandSteps)
  251. fragmentShader = shader.replace("PLACEHOLDER_UNROLLED_LOOP", unrolledLoop)
  252. }
  253. onFragmentShaderChanged: sourceChanged()
  254. onSamplesChanged: buildFragmentShader()
  255. onTransparentBorderChanged: buildFragmentShader()
  256. Component.onCompleted: buildFragmentShader()
  257. }
  258. }