/usr/share/qt5/doc/qtquick/qtquick-shadereffects-example.html is in qtdeclarative5-doc-html 5.5.1-2ubuntu6.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- shadereffects.qdoc -->
<title>Qt Quick Examples - Shader Effects | Qt Quick 5.5</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<ul>
<li>Qt 5.5</li>
<li><a href="qtquick-index.html">Qt Quick</a></li>
<li>Qt Quick Examples - Shader Effects</li>
<li id="buildversion">Qt 5.5.1 Reference Documentation</li>
</ul>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#running-the-example">Running the Example</a></li>
<li class="level1"><a href="#using-shadereffect">Using ShaderEffect</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Qt Quick Examples - Shader Effects</h1>
<span class="subtitle"></span>
<!-- $$$shadereffects-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/qml-shadereffects-example.png" alt="" /></p><p>This example demonstrates a couple of visual effects that you can perform with shaders in Qt Quick. It applies five different effects on a text and a couple of images. For more information, visit <a href="qtquick-effects-topic.html">Important Concepts In Qt Quick - Graphical Effects</a></p>
<a name="running-the-example"></a>
<h2 id="running-the-example">Running the Example</h2>
<p>To run the example from Qt Creator, open the <b>Welcome</b> mode and select the example from <b>Examples</b>. For more information, visit Building and Running an Example.</p>
<a name="using-shadereffect"></a>
<h2 id="using-shadereffect">Using ShaderEffect</h2>
<p>The <a href="qml-qtquick-shadereffect.html">ShaderEffect</a> type typically operates on other types, using a <a href="qml-qtquick-shadereffectsource.html">ShaderEffectSource</a>:</p>
<pre class="qml"><span class="type"><a href="qml-qtquick-shadereffectsource.html">ShaderEffectSource</a></span> {
<span class="name">id</span>: <span class="name">theSource</span>
<span class="name">sourceItem</span>: <span class="name">theItem</span>
}</pre>
<p>In the above snippet, <code>theItem</code> is the ID of a complex QML object in the file.</p>
<p>ShaderEffects can use this <a href="qml-qtquick-shadereffectsource.html">ShaderEffectSource</a> as a texture in their fragment shader:</p>
<pre class="qml"><span class="name">fragmentShader</span>:
<span class="string">"uniform lowp float qt_Opacity;"</span> <span class="operator">+</span>
<span class="string">"uniform highp float amplitude;"</span> <span class="operator">+</span>
<span class="string">"uniform highp float frequency;"</span> <span class="operator">+</span>
<span class="string">"uniform highp float time;"</span> <span class="operator">+</span>
<span class="string">"uniform sampler2D source;"</span> <span class="operator">+</span>
<span class="string">"varying highp vec2 qt_TexCoord0;"</span> <span class="operator">+</span>
<span class="string">"void main() {"</span> <span class="operator">+</span>
<span class="string">" highp vec2 p = sin(time + frequency * qt_TexCoord0);"</span> <span class="operator">+</span>
<span class="string">" gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x)) * qt_Opacity;"</span> <span class="operator">+</span>
<span class="string">"}"</span></pre>
<p>You can use any custom property on the <a href="qml-qtquick-shadereffect.html">ShaderEffect</a> in your shader. This makes animated shader code very easy:</p>
<pre class="qml">property <span class="type">variant</span> <span class="name">source</span>: <span class="name">theSource</span>
property <span class="type">real</span> <span class="name">bend</span>: <span class="number">0</span>
property <span class="type">real</span> <span class="name">minimize</span>: <span class="number">0</span>
property <span class="type">real</span> <span class="name">side</span>: <span class="name">genieSlider</span>.<span class="name">value</span>
SequentialAnimation on <span class="name">bend</span> {
<span class="name">loops</span>: <span class="name">Animation</span>.<span class="name">Infinite</span>
<span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">to</span>: <span class="number">1</span>; <span class="name">duration</span>: <span class="number">700</span>; <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">InOutSine</span> }
<span class="type"><a href="qml-qtquick-pauseanimation.html">PauseAnimation</a></span> { <span class="name">duration</span>: <span class="number">1600</span> }
<span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">to</span>: <span class="number">0</span>; <span class="name">duration</span>: <span class="number">700</span>; <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">InOutSine</span> }
<span class="type"><a href="qml-qtquick-pauseanimation.html">PauseAnimation</a></span> { <span class="name">duration</span>: <span class="number">1000</span> }
}
SequentialAnimation on <span class="name">minimize</span> {
<span class="name">loops</span>: <span class="name">Animation</span>.<span class="name">Infinite</span>
<span class="type"><a href="qml-qtquick-pauseanimation.html">PauseAnimation</a></span> { <span class="name">duration</span>: <span class="number">300</span> }
<span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">to</span>: <span class="number">1</span>; <span class="name">duration</span>: <span class="number">700</span>; <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">InOutSine</span> }
<span class="type"><a href="qml-qtquick-pauseanimation.html">PauseAnimation</a></span> { <span class="name">duration</span>: <span class="number">1000</span> }
<span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">to</span>: <span class="number">0</span>; <span class="name">duration</span>: <span class="number">700</span>; <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">InOutSine</span> }
<span class="type"><a href="qml-qtquick-pauseanimation.html">PauseAnimation</a></span> { <span class="name">duration</span>: <span class="number">1300</span> }
}</pre>
<p>ShaderEffects can also have a custom vertext shader. Setting the mesh property on <a href="qml-qtquick-shadereffect.html">ShaderEffect</a> provides more vertices for you to manipulate, enabling more effects.</p>
<pre class="qml"><span class="name">mesh</span>: <span class="name">Qt</span>.<span class="name">size</span>(<span class="number">10</span>, <span class="number">10</span>)
<span class="name">vertexShader</span>: <span class="string">"
uniform highp mat4 qt_Matrix;
uniform highp float bend;
uniform highp float minimize;
uniform highp float side;
uniform highp float width;
uniform highp float height;
attribute highp vec4 qt_Vertex;
attribute highp vec2 qt_MultiTexCoord0;
varying highp vec2 qt_TexCoord0;
void main() {
qt_TexCoord0 = qt_MultiTexCoord0;
highp vec4 pos = qt_Vertex;
pos.y = mix(qt_Vertex.y, height, minimize);
highp float t = pos.y / height;
t = (3. - 2. * t) * t * t;
pos.x = mix(qt_Vertex.x, side * width, t * bend);
gl_Position = qt_Matrix * pos;
}"</span></pre>
<p>Files:</p>
<ul>
<li><a href="qtquick-shadereffects-shadereffects-qml.html">shadereffects/shadereffects.qml</a></li>
<li><a href="qtquick-shadereffects-content-slider-qml.html">shadereffects/content/Slider.qml</a></li>
<li><a href="qtquick-shadereffects-main-cpp.html">shadereffects/main.cpp</a></li>
<li><a href="qtquick-shadereffects-shadereffects-pro.html">shadereffects/shadereffects.pro</a></li>
<li><a href="qtquick-shadereffects-shadereffects-qmlproject.html">shadereffects/shadereffects.qmlproject</a></li>
<li><a href="qtquick-shadereffects-shadereffects-qrc.html">shadereffects/shadereffects.qrc</a></li>
</ul>
</div>
<!-- @@@shadereffects -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
|