qt3d-advancedcustommaterial-example.html 7.94 KB
Newer Older
xuebingbing's avatar
xuebingbing committed
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 129 130 131 132 133 134
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- advancedcustommaterial.qdoc -->
  <title>Qt 3D: Advanced Custom Material QML Example | Qt 3D 5.11</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 ><a href="../qtdoc/index.html">Qt 5.11</a></td><td ><a href="qt3d-index.html">Qt 3D</a></td><td >Qt 3D: Advanced Custom Material QML Example</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.11.2 Reference Documentation</td>
        </tr></table>
      </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="#description">Description</a></li>
<li class="level1"><a href="#controls">Controls</a></li>
<li class="level2"><a href="#texture-scale-slider">Texture scale slider</a></li>
<li class="level2"><a href="#texture-speed-slider">Texture speed slider</a></li>
<li class="level2"><a href="#specularity">Specularity</a></li>
<li class="level2"><a href="#distortion">Distortion</a></li>
<li class="level2"><a href="#normal-amount">Normal amount</a></li>
<li class="level2"><a href="#wave-speed">Wave speed</a></li>
<li class="level2"><a href="#wave-height">Wave height</a></li>
<li class="level2"><a href="#mesh-rotation">Mesh rotation</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Qt 3D: Advanced Custom Material QML Example</h1>
<span class="subtitle"></span>
<!-- $$$advancedcustommaterial-brief -->
<p>Demonstrates creating advanced materials in Qt3D.</p>
<!-- @@@advancedcustommaterial -->
<!-- $$$advancedcustommaterial-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/advanced-custom-material.jpg" alt="" /></p><p><i>This</i> example demonstrates creating advanced custom materials.</p>
<a name="running-the-example"></a>
<h2 id="running-the-example">Running the Example</h2>
<p>To run the example from <a href="http://doc.qt.io/qtcreator/index.html">Qt Creator</a>, open the <b>Welcome</b> mode and select the example from <b>Examples</b>. For more information, visit <a href="http://doc.qt.io/qtcreator/creator-build-example-application.html">Building and Running an Example</a>.</p>
<a name="description"></a>
<h2 id="description">Description</h2>
<p>Advanced custom material example shows more complex shaders, and demonstrates controlling your shader properties with <a href="../qtqml/qtquick-qmlmodule.html">QtQuick</a> user interface and Animation. Water is a 3D mesh, that is modeled and uv mapped inside Blender, and then brought into Scene 3D as an <code>.obj</code> file. Shader properties that user can control, are defined in <a href="qt3d-advancedcustommaterial-watermaterial-qml.html">WaterMaterial</a>.</p>
<a name="controls"></a>
<h2 id="controls">Controls</h2>
<a name="texture-scale-slider"></a>
<h3 >Texture scale slider</h3>
<p>Multiplies texture coordinates inside the vertex shader. Controls the size of the textures on water surface.</p>
<a name="texture-speed-slider"></a>
<h3 >Texture speed slider</h3>
<p>Offsets values for texture coordinates which are animated in <a href="qt3d-advancedcustommaterial-water-qml.html">Water.qml</a> and then passed to vertex shader. Creates the effect of textures scrolling over the surface.</p>
<a name="specularity"></a>
<h3 >Specularity</h3>
<p>Multiplies specular texture values inside fragment shader. Makes the water reflective.</p>
<a name="distortion"></a>
<h3 >Distortion</h3>
<p>Multiplies the offset in red and blue channels of wave texture in fragment shader. Makes the surface textures animate more randomly.</p>
<a name="normal-amount"></a>
<h3 >Normal amount</h3>
<p>Multiplies the normal map values inside fragment shader. Controls the visibility of smaller waves on the water surface.</p>
<a name="wave-speed"></a>
<h3 >Wave speed</h3>
<p>Modifies the frequency of the sine wave inside vertex shader. Controls the speed of the waves.</p>
<a name="wave-height"></a>
<h3 >Wave height</h3>
<p>Multiplies the vertex <code>Y</code> position inside vertex shader. Controls the height of the waves.</p>
<a name="mesh-rotation"></a>
<h3 >Mesh rotation</h3>
<p>Rotates the water mesh in <a href="qt3d-advancedcustommaterial-water-qml.html">Water.qml</a>.</p>
<p>Files:</p>
<ul>
<li><a href="qt3d-advancedcustommaterial-sceneroot-qml.html">advancedcustommaterial/SceneRoot.qml</a></li>
<li><a href="qt3d-advancedcustommaterial-water-qml.html">advancedcustommaterial/Water.qml</a></li>
<li><a href="qt3d-advancedcustommaterial-watermaterial-qml.html">advancedcustommaterial/WaterMaterial.qml</a></li>
<li><a href="qt3d-advancedcustommaterial-advancedcustommaterial-pro.html">advancedcustommaterial/advancedcustommaterial.pro</a></li>
<li><a href="qt3d-advancedcustommaterial-main-cpp.html">advancedcustommaterial/main.cpp</a></li>
<li><a href="qt3d-advancedcustommaterial-main-qml.html">advancedcustommaterial/main.qml</a></li>
<li><a href="qt3d-advancedcustommaterial-models-qrc.html">advancedcustommaterial/models.qrc</a></li>
<li><a href="qt3d-advancedcustommaterial-qml-qrc.html">advancedcustommaterial/qml.qrc</a></li>
<li><a href="qt3d-advancedcustommaterial-shaders-qrc.html">advancedcustommaterial/shaders.qrc</a></li>
<li><a href="qt3d-advancedcustommaterial-shaders-es2-water-vert.html">advancedcustommaterial/shaders/es2/water.vert</a></li>
<li><a href="qt3d-advancedcustommaterial-shaders-gl3-water-vert.html">advancedcustommaterial/shaders/gl3/water.vert</a></li>
<li><a href="qt3d-advancedcustommaterial-textures-qrc.html">advancedcustommaterial/textures.qrc</a></li>
</ul>
<p>Images:</p>
<ul>
<li><a href="images/used-in-examples/advancedcustommaterial/textures/WaterDiffuse.jpg">advancedcustommaterial/textures/WaterDiffuse.jpg</a></li>
<li><a href="images/used-in-examples/advancedcustommaterial/textures/WaterNormal.jpg">advancedcustommaterial/textures/WaterNormal.jpg</a></li>
<li><a href="images/used-in-examples/advancedcustommaterial/textures/WaterSpecular.jpg">advancedcustommaterial/textures/WaterSpecular.jpg</a></li>
<li><a href="images/used-in-examples/advancedcustommaterial/textures/Waterwave.jpg">advancedcustommaterial/textures/Waterwave.jpg</a></li>
<li><a href="images/used-in-examples/advancedcustommaterial/textures/foam.jpg">advancedcustommaterial/textures/foam.jpg</a></li>
<li><a href="images/used-in-examples/advancedcustommaterial/textures/sky.jpg">advancedcustommaterial/textures/sky.jpg</a></li>
</ul>
</div>
<!-- @@@advancedcustommaterial -->
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2018 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>