<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- customparticle.qdoc -->
<title>Qt Quick Particles Examples - CustomParticle | Qt Quick 5.12.6</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.12</td><td ><a href="qtquick-index.html">Qt Quick</a></td><td >Qt Quick Particles Examples - CustomParticle</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtquick-index.html">Qt 5.12.6 Reference Documentation</a></td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Qt Quick Particles Examples - CustomParticle</h1>
<span class="subtitle"></span>
<!-- $$$particles/customparticle-brief -->
<p>This is a collection of examples using <a href="qml-qtquick-particles-customparticle.html">CustomParticle</a> in the QML particle system.</p>
<!-- @@@particles/customparticle -->
<!-- $$$particles/customparticle-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/qml-customparticle-example.png" alt="" /></p><p>This is a collection of small QML examples relating to using <a href="qml-qtquick-particles-customparticle.html">CustomParticle</a> in the particle system. Each example is a small QML file emphasizing a different way to use <a href="qml-qtquick-particles-customparticle.html">CustomParticle</a>.</p>
<p>Blur Particles adds a blur effect to the particles, which increases over the particle's life time. It uses a custom vertex shader:</p>
<pre class="qml">
vertexShader:"
uniform lowp float qt_Opacity;
varying lowp float fFade;
varying lowp float fBlur;
void main() {
defaultMain();
highp float t = (qt_Timestamp - qt_ParticleData.x) / qt_ParticleData.y;
highp float fadeIn = min(t * 10., 1.);
highp float fadeOut = 1. - max(0., min((t - 0.75) * 4., 1.));
fFade = fadeIn * fadeOut * qt_Opacity;
fBlur = max(0.2 * t, t * qt_ParticleR);
}
"
</pre>
<p>to propagate life time simulation to a custom fragment shader:</p>
<pre class="qml">
fragmentShader: "
uniform sampler2D source;
uniform sampler2D blurred;
varying highp vec2 qt_TexCoord0;
varying highp float fBlur;
varying highp float fFade;
void main() {
gl_FragColor = mix(texture2D(source, qt_TexCoord0), texture2D(blurred, qt_TexCoord0), min(1.0,fBlur*3.0)) * fFade;
}"
</pre>
<p>which has access to both the normal image sampler and a blurred sampler, the image plus a <a href="qml-qtquick-shadereffect.html">ShaderEffect</a>.</p>
<p>Fragment Shader just uses the particle system as a vertex delivery system.</p>
<pre class="qml">
fragmentShader: "
varying highp vec2 fPos;
varying lowp float fFade;
varying highp vec2 qt_TexCoord0;
void main() {//*2 because this generates dark colors mostly
highp vec2 circlePos = qt_TexCoord0*2.0 - vec2(1.0,1.0);
highp float dist = length(circlePos);
highp float circleFactor = max(min(1.0 - dist, 1.0), 0.0);
gl_FragColor = vec4(fPos.x*2.0 - fPos.y, fPos.y*2.0 - fPos.x, fPos.x*fPos.y*2.0, 0.0) * circleFactor * fFade;
}"
</pre>
<p>Image Colors uses <a href="qml-qtquick-particles-customparticle.html">CustomParticle</a> to assign colors to particles based on their location in a picture. The vertex shader,</p>
<pre class="qml">
vertexShader:"
uniform highp float maxWidth;
uniform highp float maxHeight;
varying highp vec2 fTex2;
varying lowp float fFade;
uniform lowp float qt_Opacity;
void main() {
fTex2 = vec2(qt_ParticlePos.x, qt_ParticlePos.y);
//Uncomment this next line for each particle to use full texture, instead of the solid color at the center of the particle.
//fTex2 = fTex2 + ((- qt_ParticleData.z / 2. + qt_ParticleData.z) * qt_ParticleTex); //Adjusts size so it's like a chunk of image.
fTex2 = fTex2 / vec2(maxWidth, maxHeight);
highp float t = (qt_Timestamp - qt_ParticleData.x) / qt_ParticleData.y;
fFade = min(t*4., (1.-t*t)*.75) * qt_Opacity;
defaultMain();
}
"
</pre>
<p>passes along the starting position for each vertex to the fragment shader,</p>
<pre class="qml">
fragmentShader: "
uniform sampler2D particleTexture;
uniform sampler2D pictureTexture;
varying highp vec2 qt_TexCoord0;
varying highp vec2 fTex2;
varying lowp float fFade;
void main() {
gl_FragColor = texture2D(pictureTexture, fTex2) * texture2D(particleTexture, qt_TexCoord0).w * fFade;
}"
</pre>
<p>which uses it to determine the color for that particle.</p>
<p>Files:</p>
<ul>
<li><a href="qtquick-particles-customparticle-content-blurparticles-qml.html">particles/customparticle/content/blurparticles.qml</a></li>
<li><a href="qtquick-particles-customparticle-content-fragmentshader-qml.html">particles/customparticle/content/fragmentshader.qml</a></li>
<li><a href="qtquick-particles-customparticle-content-imagecolors-qml.html">particles/customparticle/content/imagecolors.qml</a></li>
<li><a href="qtquick-particles-customparticle-customparticle-pro.html">particles/customparticle/customparticle.pro</a></li>
<li><a href="qtquick-particles-customparticle-customparticle-qml.html">particles/customparticle/customparticle.qml</a></li>
<li><a href="qtquick-particles-customparticle-customparticle-qmlproject.html">particles/customparticle/customparticle.qmlproject</a></li>
<li><a href="qtquick-particles-customparticle-customparticle-qrc.html">particles/customparticle/customparticle.qrc</a></li>
<li><a href="qtquick-particles-customparticle-main-cpp.html">particles/customparticle/main.cpp</a></li>
</ul>
</div>
<!-- @@@particles/customparticle -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 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>
distrib
>
Mageia
>
7
>
i586
>
media
>
core-updates
>
by-pkgid
>
6e2327ca1c896c6d674ae53117299f21
>
files
>
1534
