GTAONode.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>GTAONode - Three.js Docs</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <script src="../scripts/highlight.min.js"></script>
  8. <link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
  9. <link type="text/css" rel="stylesheet" href="../styles/page.css">
  10. </head>
  11. <body>
  12. <p class="inheritance" translate="no"><a href="EventDispatcher.html">EventDispatcher</a> → <a href="Node.html">Node</a> → <a href="TempNode.html">TempNode</a> → </p>
  13. <h1 translate="no">GTAONode</h1>
  14. <section>
  15. <header>
  16. <div class="class-description"><p>Post processing node for applying Ground Truth Ambient Occlusion (GTAO) to a scene.</p>
  17. <p>Reference: <a href="https://www.activision.com/cdn/research/Practical_Real_Time_Strategies_for_Accurate_Indirect_Occlusion_NEW%2520VERSION_COLOR.pdf">https://www.activision.com/cdn/research/Practical_Real_Time_Strategies_for_Accurate_Indirect_Occlusion_NEW%20VERSION_COLOR.pdf</a>.</p></div>
  18. <h2>Code Example</h2>
  19. <div translate="no"><pre><code class="language-js">const postProcessing = new THREE.PostProcessing( renderer );
  20. const scenePass = pass( scene, camera );
  21. scenePass.setMRT( mrt( {
  22. output: output,
  23. normal: normalView
  24. } ) );
  25. const scenePassColor = scenePass.getTextureNode( 'output' );
  26. const scenePassNormal = scenePass.getTextureNode( 'normal' );
  27. const scenePassDepth = scenePass.getTextureNode( 'depth' );
  28. const aoPass = ao( scenePassDepth, scenePassNormal, camera );
  29. postProcessing.outputNod = aoPass.getTextureNode().mul( scenePassColor );
  30. </code></pre></div>
  31. </header>
  32. <article>
  33. <h2 class="subsection-title">Import</h2>
  34. <p><span translate="no">GTAONode</span> is an addon, and must be imported explicitly, see <a href="https://threejs.org/manual/#en/installation" target="_blank">Installation#Addons</a>.</p>
  35. <pre><code class="language-js">import { ao } from 'three/addons/tsl/display/GTAONode.js';</code></pre>
  36. <div class="container-overview">
  37. <h2>Constructor</h2>
  38. <h3 class="name name-method" id="GTAONode" translate="no">new <a href="#GTAONode">GTAONode</a><span class="signature">( depthNode : <span class="param-type">Node.&lt;float></span>, normalNode : <span class="param-type">Node.&lt;vec3></span>, camera : <span class="param-type">Camera</span> )</span> </h3>
  39. <div class="method">
  40. <div class="description">
  41. <p>Constructs a new GTAO node.</p>
  42. </div>
  43. <table class="params">
  44. <tbody>
  45. <tr>
  46. <td class="name"><code>depthNode</code></td>
  47. <td class="description last"><p>A node that represents the scene's depth.</p></td>
  48. </tr>
  49. <tr>
  50. <td class="name"><code>normalNode</code></td>
  51. <td class="description last"><p>A node that represents the scene's normals.</p></td>
  52. </tr>
  53. <tr>
  54. <td class="name"><code>camera</code></td>
  55. <td class="description last"><p>The camera the scene is rendered with.</p></td>
  56. </tr>
  57. </tbody>
  58. </table>
  59. </div>
  60. </div>
  61. <h2 class="subsection-title">Properties</h2>
  62. <div class="member">
  63. <h3 class="name" id="_temporalDirection" translate="no">.<a href="#_temporalDirection">_temporalDirection</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;float></span> </h3>
  64. <div class="description">
  65. <p>Temporal direction that influences the rotation angle for each slice.</p>
  66. </div>
  67. </div>
  68. <div class="member">
  69. <h3 class="name" id="depthNode" translate="no">.<a href="#depthNode">depthNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;float></span> </h3>
  70. <div class="description">
  71. <p>A node that represents the scene's depth.</p>
  72. </div>
  73. </div>
  74. <div class="member">
  75. <h3 class="name" id="distanceExponent" translate="no">.<a href="#distanceExponent">distanceExponent</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;float></span> </h3>
  76. <div class="description">
  77. <p>Another option to tweak the occlusion. The recommended range is
  78. <code>[1,2]</code> for attenuating the AO.</p>
  79. </div>
  80. </div>
  81. <div class="member">
  82. <h3 class="name" id="distanceFallOff" translate="no">.<a href="#distanceFallOff">distanceFallOff</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;float></span> </h3>
  83. <div class="description">
  84. <p>The distance fall off value of the ambient occlusion.
  85. A lower value leads to a larger AO effect. The value
  86. should lie in the range <code>[0,1]</code>.</p>
  87. </div>
  88. </div>
  89. <div class="member">
  90. <h3 class="name" id="normalNode" translate="no">.<a href="#normalNode">normalNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec3></span> </h3>
  91. <div class="description">
  92. <p>A node that represents the scene's normals. If no normals are passed to the
  93. constructor (because MRT is not available), normals can be automatically
  94. reconstructed from depth values in the shader.</p>
  95. </div>
  96. </div>
  97. <div class="member">
  98. <h3 class="name" id="radius" translate="no">.<a href="#radius">radius</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;float></span> </h3>
  99. <div class="description">
  100. <p>The radius of the ambient occlusion.</p>
  101. </div>
  102. </div>
  103. <div class="member">
  104. <h3 class="name" id="resolution" translate="no">.<a href="#resolution">resolution</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;vec2></span> </h3>
  105. <div class="description">
  106. <p>The resolution of the effect. Can be scaled via
  107. <code>resolutionScale</code>.</p>
  108. </div>
  109. </div>
  110. <div class="member">
  111. <h3 class="name" id="resolutionScale" translate="no">.<a href="#resolutionScale">resolutionScale</a><span class="type-signature"> : number</span> </h3>
  112. <div class="description">
  113. <p>The resolution scale. By default the effect is rendered in full resolution
  114. for best quality but a value of <code>0.5</code> should be sufficient for most scenes.<br/>Default is <code>1</code>.</p>
  115. </div>
  116. </div>
  117. <div class="member">
  118. <h3 class="name" id="samples" translate="no">.<a href="#samples">samples</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;float></span> </h3>
  119. <div class="description">
  120. <p>How many samples are used to compute the AO.
  121. A higher value results in better quality but also
  122. in a more expensive runtime behavior.</p>
  123. </div>
  124. </div>
  125. <div class="member">
  126. <h3 class="name" id="scale" translate="no">.<a href="#scale">scale</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;float></span> </h3>
  127. <div class="description">
  128. <p>The scale of the ambient occlusion.</p>
  129. </div>
  130. </div>
  131. <div class="member">
  132. <h3 class="name" id="thickness" translate="no">.<a href="#thickness">thickness</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;float></span> </h3>
  133. <div class="description">
  134. <p>The thickness of the ambient occlusion.</p>
  135. </div>
  136. </div>
  137. <div class="member">
  138. <h3 class="name" id="updateBeforeType" translate="no">.<a href="#updateBeforeType">updateBeforeType</a><span class="type-signature"> : string</span> </h3>
  139. <div class="description">
  140. <p>The <code>updateBeforeType</code> is set to <code>NodeUpdateType.FRAME</code> since the node renders
  141. its effect once per frame in <code>updateBefore()</code>.<br/>Default is <code>'frame'</code>.</p>
  142. </div>
  143. <dl class="details">
  144. <dt class="tag-overrides"><strong>Overrides:</strong> <a href="TempNode.html#updateBeforeType">TempNode#updateBeforeType</a></dt>
  145. </dl>
  146. </div>
  147. <div class="member">
  148. <h3 class="name" id="useTemporalFiltering" translate="no">.<a href="#useTemporalFiltering">useTemporalFiltering</a><span class="type-signature"> : boolean</span> </h3>
  149. <div class="description">
  150. <p>Whether to use temporal filtering or not. Setting this property to
  151. <code>true</code> requires the usage of <code>TRAANode</code>. This will help to reduce noise
  152. although it introduces typical TAA artifacts like ghosting and temporal
  153. instabilities.</p>
  154. <p>If setting this property to <code>false</code>, a manual denoise via <code>DenoiseNode</code>
  155. might be required.<br/>Default is <code>false</code>.</p>
  156. </div>
  157. </div>
  158. <h2 class="subsection-title">Methods</h2>
  159. <h3 class="name name-method" id="dispose" translate="no">.<a href="#dispose">dispose</a><span class="signature">()</span> </h3>
  160. <div class="method">
  161. <div class="description">
  162. <p>Frees internal resources. This method should be called
  163. when the effect is no longer required.</p>
  164. </div>
  165. <dl class="details">
  166. <dt class="tag-overrides"><strong>Overrides:</strong> <a href="TempNode.html#dispose">TempNode#dispose</a></dt>
  167. </dl>
  168. </div>
  169. <h3 class="name name-method" id="getTextureNode" translate="no">.<a href="#getTextureNode">getTextureNode</a><span class="signature">()</span><span class="type-signature"> : <a href="PassTextureNode.html">PassTextureNode</a></span> </h3>
  170. <div class="method">
  171. <div class="description">
  172. <p>Returns the result of the effect as a texture node.</p>
  173. </div>
  174. <dl class="details">
  175. <dt class="tag-returns"><strong>Returns:</strong> A texture node that represents the result of the effect.</dt>
  176. </dl>
  177. </div>
  178. <h3 class="name name-method" id="setSize" translate="no">.<a href="#setSize">setSize</a><span class="signature">( width : <span class="param-type">number</span>, height : <span class="param-type">number</span> )</span> </h3>
  179. <div class="method">
  180. <div class="description">
  181. <p>Sets the size of the effect.</p>
  182. </div>
  183. <table class="params">
  184. <tbody>
  185. <tr>
  186. <td class="name"><code>width</code></td>
  187. <td class="description last"><p>The width of the effect.</p></td>
  188. </tr>
  189. <tr>
  190. <td class="name"><code>height</code></td>
  191. <td class="description last"><p>The height of the effect.</p></td>
  192. </tr>
  193. </tbody>
  194. </table>
  195. </div>
  196. <h3 class="name name-method" id="setup" translate="no">.<a href="#setup">setup</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span><span class="type-signature"> : <a href="PassTextureNode.html">PassTextureNode</a></span> </h3>
  197. <div class="method">
  198. <div class="description">
  199. <p>This method is used to setup the effect's TSL code.</p>
  200. </div>
  201. <table class="params">
  202. <tbody>
  203. <tr>
  204. <td class="name"><code>builder</code></td>
  205. <td class="description last"><p>The current node builder.</p></td>
  206. </tr>
  207. </tbody>
  208. </table>
  209. <dl class="details">
  210. <dt class="tag-overrides"><strong>Overrides:</strong> <a href="TempNode.html#setup">TempNode#setup</a></dt>
  211. </dl>
  212. <dl class="details">
  213. <dt class="tag-returns"><strong>Returns:</strong> </dt>
  214. </dl>
  215. </div>
  216. <h3 class="name name-method" id="updateBefore" translate="no">.<a href="#updateBefore">updateBefore</a><span class="signature">( frame : <span class="param-type">NodeFrame</span> )</span> </h3>
  217. <div class="method">
  218. <div class="description">
  219. <p>This method is used to render the effect once per frame.</p>
  220. </div>
  221. <table class="params">
  222. <tbody>
  223. <tr>
  224. <td class="name"><code>frame</code></td>
  225. <td class="description last"><p>The current node frame.</p></td>
  226. </tr>
  227. </tbody>
  228. </table>
  229. <dl class="details">
  230. <dt class="tag-overrides"><strong>Overrides:</strong> <a href="TempNode.html#updateBefore">TempNode#updateBefore</a></dt>
  231. </dl>
  232. </div>
  233. <h2 class="subsection-title">Source</h2>
  234. <p>
  235. <a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/tsl/display/GTAONode.js" target="_blank" rel="noopener" translate="no">examples/jsm/tsl/display/GTAONode.js</a>
  236. </p>
  237. </article>
  238. </section>
  239. <script src="../scripts/linenumber.js"></script>
  240. <script src="../scripts/page.js"></script>
  241. </body>
  242. </html>
粤ICP备19079148号