Startsida Utforska Hjälp
Registrera dig Logga in
samien
/
three.js
spegling av https://github.com/mrdoob/three.js.git
1
0
Fork 0
Filer Ärenden 0 Wiki
Träd: 08d34b63b7
Grenar Taggar
three.js
/
docs
/
pages
/
TAAUNode.html

TAAUNode.html 14 KB
Historik Rå

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4. 	<meta charset="utf-8">
    5. 

  5. 	<title>TAAUNode - Three.js Docs</title>
    6. 

  6. 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    7. 

  7. 	<script src="../scripts/highlight.min.js"></script>
    8. 

  8. 	<link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
    9. 

  9. 	<link type="text/css" rel="stylesheet" href="../styles/page.css">
    10. 

  10. </head>
    11. 

  11. <body>
    12. 

  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. 

  13. 	<h1 translate="no">TAAUNode</h1>
    14. 

  14. 		<section>
    15. 

  15. 			<header>
    16. 

  16. 				<div class="class-description"><p>A special node that performs Temporal Anti-Aliasing Upscaling (TAAU).</p>
    17. 

  17. <p>Like TRAA, the node accumulates jittered samples over multiple frames and
    18. 

  18. reprojects history with motion vectors. Unlike TRAA, the input buffers
    19. 

  19. (beauty, depth, velocity) are expected to be rendered at a lower resolution
    20. 

  20. than the renderer's drawing buffer — typically by lowering the upstream
    21. 

  21. pass's resolution via <a href="PassNode.html#setResolutionScale">PassNode#setResolutionScale</a> — and the resolve
    22. 

  22. pass reconstructs an output-resolution image using a 9-tap Blackman-Harris
    23. 

  23. filter (Gaussian approximation) over the jittered input samples. The result
    24. 

  24. is an alternative to FSR2/3 that does anti-aliasing and upscaling in a
    25. 

  25. single pass.</p>
    26. 

  26. <p>References:</p>
    27. 

  27. <ul>
    28. 

  28. <li>Karis, &quot;High Quality Temporal Supersampling&quot;, SIGGRAPH 2014, <a href="https://advances.realtimerendering.com/s2014/" target="_blank" rel="noopener">https://advances.realtimerendering.com/s2014/</a></li>
    29. 

  29. <li>Riley/Arcila, FidelityFX Super Resolution 2, GDC 2022, <a href="https://gpuopen.com/download/GDC_FidelityFX_Super_Resolution_2_0.pdf" target="_blank" rel="noopener">https://gpuopen.com/download/GDC_FidelityFX_Super_Resolution_2_0.pdf</a></li>
    30. 

  30. </ul>
    31. 

  31. <p>Note: MSAA must be disabled when TAAU is in use.</p></div>
    32. 

  32. 			</header>
    33. 

  33. 			<article>
    34. 

  34. 				<h2 class="subsection-title">Import</h2>
    35. 

  35. 				<p><span translate="no">TAAUNode</span> is an addon, and must be imported explicitly, see <a href="https://threejs.org/manual/#en/installation" target="_blank" rel="noopener">Installation#Addons</a>.</p>
    36. 

  36. 				<pre><code class="language-js">import { taau } from 'three/addons/tsl/display/TAAUNode.js';</code></pre>
    37. 

  37. 				<div class="container-overview">
    38. 

  38. 					<h2>Constructor</h2>
    39. 

  39. 					<h3 class="name name-method" id="TAAUNode" translate="no">new <a href="#TAAUNode">TAAUNode</a><span class="signature">( beautyNode : <span class="param-type"><a href="TextureNode.html">TextureNode</a></span>, depthNode : <span class="param-type"><a href="TextureNode.html">TextureNode</a></span>, velocityNode : <span class="param-type"><a href="TextureNode.html">TextureNode</a></span>, camera : <span class="param-type"><a href="Camera.html">Camera</a></span> )</span> </h3>
    40. 

  40. 					<div class="method">
    41. 

  41. 						<div class="description">
    42. 

  42. 							<p>Constructs a new TAAU node.</p>
    43. 

  43. 						</div>
    44. 

  44. 						<table class="params">
    45. 

  45. 							<tbody>
    46. 

  46. 								<tr>
    47. 

  47. 									<td class="name">
    48. 

  48. 										<strong translate="no">beautyNode</strong>
    49. 

  49. 									</td>
    50. 

  50. 									<td class="description last">
    51. 

  51. 										<p>The texture node that represents the input of the effect.</p>
    52. 

  52. 									</td>
    53. 

  53. 								</tr>
    54. 

  54. 								<tr>
    55. 

  55. 									<td class="name">
    56. 

  56. 										<strong translate="no">depthNode</strong>
    57. 

  57. 									</td>
    58. 

  58. 									<td class="description last">
    59. 

  59. 										<p>A node that represents the scene's depth.</p>
    60. 

  60. 									</td>
    61. 

  61. 								</tr>
    62. 

  62. 								<tr>
    63. 

  63. 									<td class="name">
    64. 

  64. 										<strong translate="no">velocityNode</strong>
    65. 

  65. 									</td>
    66. 

  66. 									<td class="description last">
    67. 

  67. 										<p>A node that represents the scene's velocity.</p>
    68. 

  68. 									</td>
    69. 

  69. 								</tr>
    70. 

  70. 								<tr>
    71. 

  71. 									<td class="name">
    72. 

  72. 										<strong translate="no">camera</strong>
    73. 

  73. 									</td>
    74. 

  74. 									<td class="description last">
    75. 

  75. 										<p>The camera the scene is rendered with.</p>
    76. 

  76. 									</td>
    77. 

  77. 								</tr>
    78. 

  78. 							</tbody>
    79. 

  79. 						</table>
    80. 

  80. 					</div>
    81. 

  81. 				</div>
    82. 

  82. 				<h2 class="subsection-title">Properties</h2>
    83. 

  83. 				<div class="member">
    84. 

  84. 					<h3 class="name" id="beautyNode" translate="no">.<a href="#beautyNode">beautyNode</a><span class="type-signature"> : <a href="TextureNode.html">TextureNode</a></span> </h3>
    85. 

  85. 					<div class="description">
    86. 

  86. 						<p>The texture node that represents the input of the effect.</p>
    87. 

  87. 					</div>
    88. 

  88. 				</div>
    89. 

  89. 				<div class="member">
    90. 

  90. 					<h3 class="name" id="camera" translate="no">.<a href="#camera">camera</a><span class="type-signature"> : <a href="Camera.html">Camera</a></span> </h3>
    91. 

  91. 					<div class="description">
    92. 

  92. 						<p>The camera the scene is rendered with.</p>
    93. 

  93. 					</div>
    94. 

  94. 				</div>
    95. 

  95. 				<div class="member">
    96. 

  96. 					<h3 class="name" id="currentFrameWeight" translate="no">.<a href="#currentFrameWeight">currentFrameWeight</a><span class="type-signature"> : number</span> </h3>
    97. 

  97. 					<div class="description">
    98. 

  98. 						<p>Baseline weight applied to the current frame in the resolve. Lower
    99. 

  99. values produce smoother results with longer accumulation but slower
    100. 

  100. convergence on disoccluded regions; the motion factor is added on
    101. 

  101. top, so fast-moving pixels still respond quickly.</p>
    102. 

  102. 						<p>Default is <code>0.025</code>.</p>
    103. 

  103. 					</div>
    104. 

  104. 				</div>
    105. 

  105. 				<div class="member">
    106. 

  106. 					<h3 class="name" id="depthNode" translate="no">.<a href="#depthNode">depthNode</a><span class="type-signature"> : <a href="TextureNode.html">TextureNode</a></span> </h3>
    107. 

  107. 					<div class="description">
    108. 

  108. 						<p>A node that represents the scene's depth.</p>
    109. 

  109. 					</div>
    110. 

  110. 				</div>
    111. 

  111. 				<div class="member">
    112. 

  112. 					<h3 class="name" id="depthThreshold" translate="no">.<a href="#depthThreshold">depthThreshold</a><span class="type-signature"> : number</span> </h3>
    113. 

  113. 					<div class="description">
    114. 

  114. 						<p>When the difference between the current and previous depth goes above this threshold,
    115. 

  115. the history is considered invalid.</p>
    116. 

  116. 						<p>Default is <code>0.0005</code>.</p>
    117. 

  117. 					</div>
    118. 

  118. 				</div>
    119. 

  119. 				<div class="member">
    120. 

  120. 					<h3 class="name" id="edgeDepthDiff" translate="no">.<a href="#edgeDepthDiff">edgeDepthDiff</a><span class="type-signature"> : number</span> </h3>
    121. 

  121. 					<div class="description">
    122. 

  122. 						<p>The depth difference within the 3×3 neighborhood to consider a pixel as an edge.</p>
    123. 

  123. 						<p>Default is <code>0.001</code>.</p>
    124. 

  124. 					</div>
    125. 

  125. 				</div>
    126. 

  126. 				<div class="member">
    127. 

  127. 					<h3 class="name" id="isTAAUNode" translate="no">.<a href="#isTAAUNode">isTAAUNode</a><span class="type-signature"> : boolean</span> <span class="type-signature">(readonly) </span></h3>
    128. 

  128. 					<div class="description">
    129. 

  129. 						<p>This flag can be used for type testing.</p>
    130. 

  130. 						<p>Default is <code>true</code>.</p>
    131. 

  131. 					</div>
    132. 

  132. 				</div>
    133. 

  133. 				<div class="member">
    134. 

  134. 					<h3 class="name" id="maxVelocityLength" translate="no">.<a href="#maxVelocityLength">maxVelocityLength</a><span class="type-signature"> : number</span> </h3>
    135. 

  135. 					<div class="description">
    136. 

  136. 						<p>The history becomes invalid as the pixel length of the velocity approaches this value.</p>
    137. 

  137. 						<p>Default is <code>128</code>.</p>
    138. 

  138. 					</div>
    139. 

  139. 				</div>
    140. 

  140. 				<div class="member">
    141. 

  141. 					<h3 class="name" id="updateBeforeType" translate="no">.<a href="#updateBeforeType">updateBeforeType</a><span class="type-signature"> : string</span> </h3>
    142. 

  142. 					<div class="description">
    143. 

  143. 						<p>The <code>updateBeforeType</code> is set to <code>NodeUpdateType.FRAME</code> since the node renders
    144. 

  144. its effect once per frame in <code>updateBefore()</code>.</p>
    145. 

  145. 						<p>Default is <code>'frame'</code>.</p>
    146. 

  146. 					</div>
    147. 

  147. 						<dl class="details">
    148. 

  148. 							<dt class="tag-overrides"><strong>Overrides:</strong> <a href="TempNode.html#updateBeforeType">TempNode#updateBeforeType</a></dt>
    149. 

  149. 						</dl>
    150. 

  150. 				</div>
    151. 

  151. 				<div class="member">
    152. 

  152. 					<h3 class="name" id="velocityNode" translate="no">.<a href="#velocityNode">velocityNode</a><span class="type-signature"> : <a href="TextureNode.html">TextureNode</a></span> </h3>
    153. 

  153. 					<div class="description">
    154. 

  154. 						<p>A node that represents the scene's velocity.</p>
    155. 

  155. 					</div>
    156. 

  156. 				</div>
    157. 

  157. 				<h2 class="subsection-title">Methods</h2>
    158. 

  158. 					<h3 class="name name-method" id="clearViewOffset" translate="no">.<a href="#clearViewOffset">clearViewOffset</a><span class="signature">()</span> </h3>
    159. 

  159. 					<div class="method">
    160. 

  160. 						<div class="description">
    161. 

  161. 							<p>Clears the view offset from the scene's camera.</p>
    162. 

  162. 						</div>
    163. 

  163. 					</div>
    164. 

  164. 					<h3 class="name name-method" id="dispose" translate="no">.<a href="#dispose">dispose</a><span class="signature">()</span> </h3>
    165. 

  165. 					<div class="method">
    166. 

  166. 						<div class="description">
    167. 

  167. 							<p>Frees internal resources. This method should be called
    168. 

  168. when the effect is no longer required.</p>
    169. 

  169. 						</div>
    170. 

  170. 						<dl class="details">
    171. 

  171. 							<dt class="tag-overrides"><strong>Overrides:</strong> <a href="TempNode.html#dispose">TempNode#dispose</a></dt>
    172. 

  172. 						</dl>
    173. 

  173. 					</div>
    174. 

  174. 					<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>
    175. 

  175. 					<div class="method">
    176. 

  176. 						<div class="description">
    177. 

  177. 							<p>Returns the result of the effect as a texture node.</p>
    178. 

  178. 						</div>
    179. 

  179. 						<dl class="details">
    180. 

  180. 							<dt class="tag-returns"><strong>Returns:</strong> A texture node that represents the result of the effect.</dt>
    181. 

  181. 						</dl>
    182. 

  182. 					</div>
    183. 

  183. 					<h3 class="name name-method" id="setSize" translate="no">.<a href="#setSize">setSize</a><span class="signature">( outputWidth : <span class="param-type">number</span>, outputHeight : <span class="param-type">number</span> )</span> </h3>
    184. 

  184. 					<div class="method">
    185. 

  185. 						<div class="description">
    186. 

  186. 							<p>Sets the output size of the effect (history and resolve targets). The
    187. 

  187. previous-depth texture is sized independently in <code>updateBefore()</code> to
    188. 

  188. track the scene's current depth texture.</p>
    189. 

  189. 						</div>
    190. 

  190. 						<table class="params">
    191. 

  191. 							<tbody>
    192. 

  192. 								<tr>
    193. 

  193. 									<td class="name">
    194. 

  194. 										<strong translate="no">outputWidth</strong>
    195. 

  195. 									</td>
    196. 

  196. 									<td class="description last">
    197. 

  197. 										<p>The output width (drawing buffer width).</p>
    198. 

  198. 									</td>
    199. 

  199. 								</tr>
    200. 

  200. 								<tr>
    201. 

  201. 									<td class="name">
    202. 

  202. 										<strong translate="no">outputHeight</strong>
    203. 

  203. 									</td>
    204. 

  204. 									<td class="description last">
    205. 

  205. 										<p>The output height (drawing buffer height).</p>
    206. 

  206. 									</td>
    207. 

  207. 								</tr>
    208. 

  208. 							</tbody>
    209. 

  209. 						</table>
    210. 

  210. 					</div>
    211. 

  211. 					<h3 class="name name-method" id="setViewOffset" translate="no">.<a href="#setViewOffset">setViewOffset</a><span class="signature">( inputWidth : <span class="param-type">number</span>, inputHeight : <span class="param-type">number</span> )</span> </h3>
    212. 

  212. 					<div class="method">
    213. 

  213. 						<div class="description">
    214. 

  214. 							<p>Defines the TAAU's current jitter as a view offset to the scene's
    215. 

  215. camera. The jitter is shrunk to one <em>output</em> pixel (rather than one
    216. 

  216. input pixel) so that the halton sequence gradually fills the output
    217. 

  217. sub-pixel grid over multiple frames.</p>
    218. 

  218. 						</div>
    219. 

  219. 						<table class="params">
    220. 

  220. 							<tbody>
    221. 

  221. 								<tr>
    222. 

  222. 									<td class="name">
    223. 

  223. 										<strong translate="no">inputWidth</strong>
    224. 

  224. 									</td>
    225. 

  225. 									<td class="description last">
    226. 

  226. 										<p>The width of the input buffers the camera renders into.</p>
    227. 

  227. 									</td>
    228. 

  228. 								</tr>
    229. 

  229. 								<tr>
    230. 

  230. 									<td class="name">
    231. 

  231. 										<strong translate="no">inputHeight</strong>
    232. 

  232. 									</td>
    233. 

  233. 									<td class="description last">
    234. 

  234. 										<p>The height of the input buffers the camera renders into.</p>
    235. 

  235. 									</td>
    236. 

  236. 								</tr>
    237. 

  237. 							</tbody>
    238. 

  238. 						</table>
    239. 

  239. 					</div>
    240. 

  240. 					<h3 class="name name-method" id="setup" translate="no">.<a href="#setup">setup</a><span class="signature">( builder : <span class="param-type"><a href="NodeBuilder.html">NodeBuilder</a></span> )</span><span class="type-signature"> : <a href="PassTextureNode.html">PassTextureNode</a></span> </h3>
    241. 

  241. 					<div class="method">
    242. 

  242. 						<div class="description">
    243. 

  243. 							<p>This method is used to setup the effect's render targets and TSL code.</p>
    244. 

  244. 						</div>
    245. 

  245. 						<table class="params">
    246. 

  246. 							<tbody>
    247. 

  247. 								<tr>
    248. 

  248. 									<td class="name">
    249. 

  249. 										<strong translate="no">builder</strong>
    250. 

  250. 									</td>
    251. 

  251. 									<td class="description last">
    252. 

  252. 										<p>The current node builder.</p>
    253. 

  253. 									</td>
    254. 

  254. 								</tr>
    255. 

  255. 							</tbody>
    256. 

  256. 						</table>
    257. 

  257. 						<dl class="details">
    258. 

  258. 							<dt class="tag-overrides"><strong>Overrides:</strong> <a href="TempNode.html#setup">TempNode#setup</a></dt>
    259. 

  259. 						</dl>
    260. 

  260. 					</div>
    261. 

  261. 					<h3 class="name name-method" id="updateBefore" translate="no">.<a href="#updateBefore">updateBefore</a><span class="signature">( frame : <span class="param-type"><a href="NodeFrame.html">NodeFrame</a></span> )</span> </h3>
    262. 

  262. 					<div class="method">
    263. 

  263. 						<div class="description">
    264. 

  264. 							<p>This method is used to render the effect once per frame.</p>
    265. 

  265. 						</div>
    266. 

  266. 						<table class="params">
    267. 

  267. 							<tbody>
    268. 

  268. 								<tr>
    269. 

  269. 									<td class="name">
    270. 

  270. 										<strong translate="no">frame</strong>
    271. 

  271. 									</td>
    272. 

  272. 									<td class="description last">
    273. 

  273. 										<p>The current node frame.</p>
    274. 

  274. 									</td>
    275. 

  275. 								</tr>
    276. 

  276. 							</tbody>
    277. 

  277. 						</table>
    278. 

  278. 						<dl class="details">
    279. 

  279. 							<dt class="tag-overrides"><strong>Overrides:</strong> <a href="TempNode.html#updateBefore">TempNode#updateBefore</a></dt>
    280. 

  280. 						</dl>
    281. 

  281. 					</div>
    282. 

  282. 				<h2 class="subsection-title">Source</h2>
    283. 

  283. 				<p>
    284. 

  284. 					<a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/tsl/display/TAAUNode.js" translate="no" target="_blank" rel="noopener">examples/jsm/tsl/display/TAAUNode.js</a>
    285. 

  285. 				</p>
    286. 

  286. 			</article>
    287. 

  287. 		</section>
    288. 

  288. <script src="../scripts/linenumber.js"></script>
    289. 

  289. <script src="../scripts/page.js"></script>
    290. 

  290. </body>
    291. 

  291. </html>
    292.
粤ICP备19079148号