Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
samien
/
three.js
-ын хуулбар https://github.com/mrdoob/three.js.git
1
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Мод: 5d233d98e5
Салаанууд Тагууд
three.js
/
docs
/
pages
/
SSGINode.html

SSGINode.html 15 KB
Түүх Анхны өгөгдөл

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307 
  1. <!DOCTYPE html>
    2. 

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

  3. <head>
    4. 

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

  5. 	<title>SSGINode - 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">SSGINode</h1>
    14. 

  14. 		<section>
    15. 

  15. 			<header>
    16. 

  16. 				<div class="class-description"><p>Post processing node for applying Screen Space Global Illumination (SSGI) to a scene.</p>
    17. 

  17. <p>References:</p>
    18. 

  18. <ul>
    19. 

  19. <li><a href="https://github.com/cdrinmatane/SSRT3" target="_blank" rel="noopener">https://github.com/cdrinmatane/SSRT3</a>.</li>
    20. 

  20. <li><a href="https://cdrinmatane.github.io/posts/ssaovb-code/" target="_blank" rel="noopener">https://cdrinmatane.github.io/posts/ssaovb-code/</a>.</li>
    21. 

  21. <li><a href="https://cdrinmatane.github.io/cgspotlight-slides/ssilvb_slides.pdf" target="_blank" rel="noopener">https://cdrinmatane.github.io/cgspotlight-slides/ssilvb_slides.pdf</a>.</li>
    22. 

  22. </ul>
    23. 

  23. <p>The quality and performance of the effect mainly depend on <code>sliceCount</code> and <code>stepCount</code>.
    24. 

  24. The total number of samples taken per pixel is <code>sliceCount</code> * <code>stepCount</code> * <code>2</code>. Here are some
    25. 

  25. recommended presets depending on whether temporal filtering is used or not.</p>
    26. 

  26. <p>With temporal filtering (recommended):</p>
    27. 

  27. <ul>
    28. 

  28. <li>Low: <code>sliceCount</code> of <code>1</code>, <code>stepCount</code> of <code>12</code>.</li>
    29. 

  29. <li>Medium: <code>sliceCount</code> of <code>2</code>, <code>stepCount</code> of <code>8</code>.</li>
    30. 

  30. <li>High: <code>sliceCount</code> of <code>3</code>, <code>stepCount</code> of <code>16</code>.</li>
    31. 

  31. </ul>
    32. 

  32. <p>Use for a higher slice count if you notice temporal instabilities like flickering. Reduce the sample
    33. 

  33. count then to mitigate the performance lost.</p>
    34. 

  34. <p>Without temporal filtering:</p>
    35. 

  35. <ul>
    36. 

  36. <li>Low: <code>sliceCount</code> of <code>2</code>, <code>stepCount</code> of <code>6</code>.</li>
    37. 

  37. <li>Medium: <code>sliceCount</code> of <code>3</code>, <code>stepCount</code> of <code>8</code>.</li>
    38. 

  38. <li>High: <code>sliceCount</code> of <code>4</code>, <code>stepCount</code> of <code>12</code>.</li>
    39. 

  39. </ul></div>
    40. 

  40. 			</header>
    41. 

  41. 			<article>
    42. 

  42. 				<h2 class="subsection-title">Import</h2>
    43. 

  43. 				<p><span translate="no">SSGINode</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>
    44. 

  44. 				<pre><code class="language-js">import { ssgi } from 'three/addons/tsl/display/SSGINode.js';</code></pre>
    45. 

  45. 				<div class="container-overview">
    46. 

  46. 					<h2>Constructor</h2>
    47. 

  47. 					<h3 class="name name-method" id="SSGINode" translate="no">new <a href="#SSGINode">SSGINode</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>, normalNode : <span class="param-type"><a href="TextureNode.html">TextureNode</a></span>, camera : <span class="param-type"><a href="PerspectiveCamera.html">PerspectiveCamera</a></span> )</span> </h3>
    48. 

  48. 					<div class="method">
    49. 

  49. 						<div class="description">
    50. 

  50. 							<p>Constructs a new SSGI node.</p>
    51. 

  51. 						</div>
    52. 

  52. 						<table class="params">
    53. 

  53. 							<tbody>
    54. 

  54. 								<tr>
    55. 

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

  56. 										<strong>beautyNode</strong>
    57. 

  57. 									</td>
    58. 

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

  59. 										<p>A texture node that represents the beauty or scene pass.</p>
    60. 

  60. 									</td>
    61. 

  61. 								</tr>
    62. 

  62. 								<tr>
    63. 

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

  64. 										<strong>depthNode</strong>
    65. 

  65. 									</td>
    66. 

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

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

  68. 									</td>
    69. 

  69. 								</tr>
    70. 

  70. 								<tr>
    71. 

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

  72. 										<strong>normalNode</strong>
    73. 

  73. 									</td>
    74. 

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

  75. 										<p>A texture node that represents the scene's normals.</p>
    76. 

  76. 									</td>
    77. 

  77. 								</tr>
    78. 

  78. 								<tr>
    79. 

  79. 									<td class="name">
    80. 

  80. 										<strong>camera</strong>
    81. 

  81. 									</td>
    82. 

  82. 									<td class="description last">
    83. 

  83. 										<p>The camera the scene is rendered with.</p>
    84. 

  84. 									</td>
    85. 

  85. 								</tr>
    86. 

  86. 							</tbody>
    87. 

  87. 						</table>
    88. 

  88. 					</div>
    89. 

  89. 				</div>
    90. 

  90. 				<h2 class="subsection-title">Properties</h2>
    91. 

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

  92. 					<h3 class="name" id="aoIntensity" translate="no">.<a href="#aoIntensity">aoIntensity</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;float></span> </h3>
    93. 

  93. 					<div class="description">
    94. 

  94. 						<p>Power function applied to AO to make it appear darker/lighter. Should be in the range <code>[0, 4]</code>.</p>
    95. 

  95. 						<p>Default is <code>1</code>.</p>
    96. 

  96. 					</div>
    97. 

  97. 				</div>
    98. 

  98. 				<div class="member">
    99. 

  99. 					<h3 class="name" id="backfaceLighting" translate="no">.<a href="#backfaceLighting">backfaceLighting</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;float></span> </h3>
    100. 

  100. 					<div class="description">
    101. 

  101. 						<p>How much light backface surfaces emit.
    102. 

  102. Should be in the range <code>[0, 1]</code>.</p>
    103. 

  103. 						<p>Default is <code>0</code>.</p>
    104. 

  104. 					</div>
    105. 

  105. 				</div>
    106. 

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

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

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

  109. 						<p>A texture node that represents the beauty or scene pass.</p>
    110. 

  110. 					</div>
    111. 

  111. 				</div>
    112. 

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

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

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

  115. 						<p>A node that represents the scene's depth.</p>
    116. 

  116. 					</div>
    117. 

  117. 				</div>
    118. 

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

  119. 					<h3 class="name" id="expFactor" translate="no">.<a href="#expFactor">expFactor</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;float></span> </h3>
    120. 

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

  121. 						<p>Controls samples distribution. It's an exponent applied at each step get increasing step size over the distance.
    122. 

  122. Should be in the range <code>[1, 3]</code>.</p>
    123. 

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

  124. 					</div>
    125. 

  125. 				</div>
    126. 

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

  127. 					<h3 class="name" id="giIntensity" translate="no">.<a href="#giIntensity">giIntensity</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;float></span> </h3>
    128. 

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

  129. 						<p>Intensity of the indirect diffuse light. Should be in the range <code>[0, 100]</code>.</p>
    130. 

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

  131. 					</div>
    132. 

  132. 				</div>
    133. 

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

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

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

  136. 						<p>A node that represents the scene's normals. If no normals are passed to the
    137. 

  137. constructor (because MRT is not available), normals can be automatically
    138. 

  138. reconstructed from depth values in the shader.</p>
    139. 

  139. 					</div>
    140. 

  140. 				</div>
    141. 

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

  142. 					<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>
    143. 

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

  144. 						<p>Effective sampling radius in world space. AO and GI can only have influence within that radius.
    145. 

  145. Should be in the range <code>[1, 25]</code>.</p>
    146. 

  146. 						<p>Default is <code>12</code>.</p>
    147. 

  147. 					</div>
    148. 

  148. 				</div>
    149. 

  149. 				<div class="member">
    150. 

  150. 					<h3 class="name" id="sliceCount" translate="no">.<a href="#sliceCount">sliceCount</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;uint></span> </h3>
    151. 

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

  152. 						<p>Number of per-pixel hemisphere slices. This has a big performance cost and should be kept as low as possible.
    153. 

  153. Should be in the range <code>[1, 4]</code>.</p>
    154. 

  154. 						<p>Default is <code>1</code>.</p>
    155. 

  155. 					</div>
    156. 

  156. 				</div>
    157. 

  157. 				<div class="member">
    158. 

  158. 					<h3 class="name" id="stepCount" translate="no">.<a href="#stepCount">stepCount</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;uint></span> </h3>
    159. 

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

  160. 						<p>Number of samples taken along one side of a given hemisphere slice. This has a big performance cost and should
    161. 

  161. be kept as low as possible.  Should be in the range <code>[1, 32]</code>.</p>
    162. 

  162. 						<p>Default is <code>12</code>.</p>
    163. 

  163. 					</div>
    164. 

  164. 				</div>
    165. 

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

  166. 					<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>
    167. 

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

  168. 						<p>Constant thickness value of objects on the screen in world units. Allows light to pass behind surfaces past that thickness value.
    169. 

  169. Should be in the range <code>[0.01, 10]</code>.</p>
    170. 

  170. 						<p>Default is <code>1</code>.</p>
    171. 

  171. 					</div>
    172. 

  172. 				</div>
    173. 

  173. 				<div class="member">
    174. 

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

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

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

  177. its effect once per frame in <code>updateBefore()</code>.</p>
    178. 

  178. 						<p>Default is <code>'frame'</code>.</p>
    179. 

  179. 					</div>
    180. 

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

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

  182. 						</dl>
    183. 

  183. 				</div>
    184. 

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

  185. 					<h3 class="name" id="useLinearThickness" translate="no">.<a href="#useLinearThickness">useLinearThickness</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;bool></span> </h3>
    186. 

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

  187. 						<p>Whether to increase thickness linearly over distance or not (avoid losing detail over the distance).</p>
    188. 

  188. 						<p>Default is <code>false</code>.</p>
    189. 

  189. 					</div>
    190. 

  190. 				</div>
    191. 

  191. 				<div class="member">
    192. 

  192. 					<h3 class="name" id="useScreenSpaceSampling" translate="no">.<a href="#useScreenSpaceSampling">useScreenSpaceSampling</a><span class="type-signature"> : <a href="UniformNode.html">UniformNode</a>.&lt;bool></span> </h3>
    193. 

  193. 					<div class="description">
    194. 

  194. 						<p>Makes the sample distance in screen space instead of world-space (helps having more detail up close).</p>
    195. 

  195. 						<p>Default is <code>false</code>.</p>
    196. 

  196. 					</div>
    197. 

  197. 				</div>
    198. 

  198. 				<div class="member">
    199. 

  199. 					<h3 class="name" id="useTemporalFiltering" translate="no">.<a href="#useTemporalFiltering">useTemporalFiltering</a><span class="type-signature"> : boolean</span> </h3>
    200. 

  200. 					<div class="description">
    201. 

  201. 						<p>Whether to use temporal filtering or not. Setting this property to
    202. 

  202. <code>true</code> requires the usage of <code>TRAANode</code>. This will help to reduce noise
    203. 

  203. although it introduces typical TAA artifacts like ghosting and temporal
    204. 

  204. instabilities.</p>
    205. 

  205. <p>If setting this property to <code>false</code>, a manual denoise via <code>DenoiseNode</code>
    206. 

  206. is required.</p>
    207. 

  207. 						<p>Default is <code>true</code>.</p>
    208. 

  208. 					</div>
    209. 

  209. 				</div>
    210. 

  210. 				<h2 class="subsection-title">Methods</h2>
    211. 

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

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

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

  214. 							<p>Frees internal resources. This method should be called
    215. 

  215. when the effect is no longer required.</p>
    216. 

  216. 						</div>
    217. 

  217. 						<dl class="details">
    218. 

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

  219. 						</dl>
    220. 

  220. 					</div>
    221. 

  221. 					<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>
    222. 

  222. 					<div class="method">
    223. 

  223. 						<div class="description">
    224. 

  224. 							<p>Returns the result of the effect as a texture node.</p>
    225. 

  225. 						</div>
    226. 

  226. 						<dl class="details">
    227. 

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

  228. 						</dl>
    229. 

  229. 					</div>
    230. 

  230. 					<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>
    231. 

  231. 					<div class="method">
    232. 

  232. 						<div class="description">
    233. 

  233. 							<p>Sets the size of the effect.</p>
    234. 

  234. 						</div>
    235. 

  235. 						<table class="params">
    236. 

  236. 							<tbody>
    237. 

  237. 								<tr>
    238. 

  238. 									<td class="name">
    239. 

  239. 										<strong>width</strong>
    240. 

  240. 									</td>
    241. 

  241. 									<td class="description last">
    242. 

  242. 										<p>The width of the effect.</p>
    243. 

  243. 									</td>
    244. 

  244. 								</tr>
    245. 

  245. 								<tr>
    246. 

  246. 									<td class="name">
    247. 

  247. 										<strong>height</strong>
    248. 

  248. 									</td>
    249. 

  249. 									<td class="description last">
    250. 

  250. 										<p>The height of the effect.</p>
    251. 

  251. 									</td>
    252. 

  252. 								</tr>
    253. 

  253. 							</tbody>
    254. 

  254. 						</table>
    255. 

  255. 					</div>
    256. 

  256. 					<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>
    257. 

  257. 					<div class="method">
    258. 

  258. 						<div class="description">
    259. 

  259. 							<p>This method is used to setup the effect's TSL code.</p>
    260. 

  260. 						</div>
    261. 

  261. 						<table class="params">
    262. 

  262. 							<tbody>
    263. 

  263. 								<tr>
    264. 

  264. 									<td class="name">
    265. 

  265. 										<strong>builder</strong>
    266. 

  266. 									</td>
    267. 

  267. 									<td class="description last">
    268. 

  268. 										<p>The current node builder.</p>
    269. 

  269. 									</td>
    270. 

  270. 								</tr>
    271. 

  271. 							</tbody>
    272. 

  272. 						</table>
    273. 

  273. 						<dl class="details">
    274. 

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

  275. 						</dl>
    276. 

  276. 					</div>
    277. 

  277. 					<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>
    278. 

  278. 					<div class="method">
    279. 

  279. 						<div class="description">
    280. 

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

  281. 						</div>
    282. 

  282. 						<table class="params">
    283. 

  283. 							<tbody>
    284. 

  284. 								<tr>
    285. 

  285. 									<td class="name">
    286. 

  286. 										<strong>frame</strong>
    287. 

  287. 									</td>
    288. 

  288. 									<td class="description last">
    289. 

  289. 										<p>The current node frame.</p>
    290. 

  290. 									</td>
    291. 

  291. 								</tr>
    292. 

  292. 							</tbody>
    293. 

  293. 						</table>
    294. 

  294. 						<dl class="details">
    295. 

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

  296. 						</dl>
    297. 

  297. 					</div>
    298. 

  298. 				<h2 class="subsection-title">Source</h2>
    299. 

  299. 				<p>
    300. 

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

  301. 				</p>
    302. 

  302. 			</article>
    303. 

  303. 		</section>
    304. 

  304. <script src="../scripts/linenumber.js"></script>
    305. 

  305. <script src="../scripts/page.js"></script>
    306. 

  306. </body>
    307. 

  307. </html>
    308.
粤ICP备19079148号