NodeMaterial.html 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>NodeMaterial - 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="Material.html">Material</a> → </p>
  13. <h1 translate="no">NodeMaterial</h1>
  14. <section>
  15. <header>
  16. <div class="class-description"><p>Base class for all node materials.</p></div>
  17. </header>
  18. <article>
  19. <div class="container-overview">
  20. <h2>Constructor</h2>
  21. <h3 class="name name-method" id="NodeMaterial" translate="no">new <a href="#NodeMaterial">NodeMaterial</a><span class="signature">()</span> </h3>
  22. <div class="method">
  23. <div class="description">
  24. <p>Constructs a new node material.</p>
  25. </div>
  26. </div>
  27. </div>
  28. <h2 class="subsection-title">Properties</h2>
  29. <div class="member">
  30. <h3 class="name" id="alphaTestNode" translate="no">.<a href="#alphaTestNode">alphaTestNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;float></span> </h3>
  31. <div class="description">
  32. <p>The alpha test of node materials is by default inferred from the <code>alphaTest</code>
  33. property. This node property allows to overwrite the default and define the
  34. alpha test with a node instead.</p>
  35. <p>If you don't want to overwrite the alpha test but modify the existing
  36. value instead, use <a href="TSL.html#materialAlphaTest">materialAlphaTest</a>.<br/>Default is <code>null</code>.</p>
  37. </div>
  38. </div>
  39. <div class="member">
  40. <h3 class="name" id="aoNode" translate="no">.<a href="#aoNode">aoNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;float></span> </h3>
  41. <div class="description">
  42. <p>The lighting of node materials might be influenced by ambient occlusion.
  43. The default AO is inferred from an ambient occlusion map assigned to <code>aoMap</code>
  44. and the respective <code>aoMapIntensity</code>. This node property allows to overwrite
  45. the default and define the ambient occlusion with a custom node instead.</p>
  46. <p>If you don't want to overwrite the diffuse color but modify the existing
  47. values instead, use <a href="TSL.html#materialAO">materialAO</a>.<br/>Default is <code>null</code>.</p>
  48. </div>
  49. </div>
  50. <div class="member">
  51. <h3 class="name" id="backdropAlphaNode" translate="no">.<a href="#backdropAlphaNode">backdropAlphaNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;float></span> </h3>
  52. <div class="description">
  53. <p>This node allows to modulate the influence of <code>backdropNode</code> to the outgoing light.<br/>Default is <code>null</code>.</p>
  54. </div>
  55. </div>
  56. <div class="member">
  57. <h3 class="name" id="backdropNode" translate="no">.<a href="#backdropNode">backdropNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec3></span> </h3>
  58. <div class="description">
  59. <p>This node can be used to implement a variety of filter-like effects. The idea is
  60. to store the current rendering into a texture e.g. via <code>viewportSharedTexture()</code>, use it
  61. to create an arbitrary effect and then assign the node composition to this property.
  62. Everything behind the object using this material will now be affected by a filter.</p>
  63. <pre><code class="language-js">const material = new NodeMaterial()
  64. material.transparent = true;
  65. // everything behind the object will be monochromatic
  66. material.backdropNode = saturation( viewportSharedTexture().rgb, 0 );
  67. </code></pre>
  68. <p>Backdrop computations are part of the lighting so only lit materials can use this property.<br/>Default is <code>null</code>.</p>
  69. </div>
  70. </div>
  71. <div class="member">
  72. <h3 class="name" id="castShadowNode" translate="no">.<a href="#castShadowNode">castShadowNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec4></span> </h3>
  73. <div class="description">
  74. <p>This node can be used to influence how an object using this node material
  75. casts shadows. To apply a color to shadows, you can simply do:</p>
  76. <pre><code class="language-js">material.castShadowNode = vec4( 1, 0, 0, 1 );
  77. </code></pre>
  78. <p>Which can be nice to fake colored shadows of semi-transparent objects. It
  79. is also common to use the property with <code>Fn</code> function so checks are performed
  80. per fragment.</p>
  81. <pre><code class="language-js">materialCustomShadow.castShadowNode = Fn( () => {
  82. hash( vertexIndex ).greaterThan( 0.5 ).discard();
  83. return materialColor;
  84. } )();
  85. </code></pre><br/>Default is <code>null</code>.
  86. </div>
  87. </div>
  88. <div class="member">
  89. <h3 class="name" id="castShadowPositionNode" translate="no">.<a href="#castShadowPositionNode">castShadowPositionNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;float></span> </h3>
  90. <div class="description">
  91. <p>Allows to overwrite the geometry position used for shadow map projection which
  92. is by default <a href="TSL.html#positionLocal">positionLocal</a>, the vertex position in local space.<br/>Default is <code>null</code>.</p>
  93. </div>
  94. </div>
  95. <div class="member">
  96. <h3 class="name" id="colorNode" translate="no">.<a href="#colorNode">colorNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec3></span> </h3>
  97. <div class="description">
  98. <p>The diffuse color of node materials is by default inferred from the
  99. <code>color</code> and <code>map</code> properties. This node property allows to overwrite the default
  100. and define the diffuse color with a node instead.</p>
  101. <pre><code class="language-js">material.colorNode = color( 0xff0000 ); // define red color
  102. </code></pre>
  103. <p>If you don't want to overwrite the diffuse color but modify the existing
  104. values instead, use <a href="TSL.html#materialColor">materialColor</a>.</p>
  105. <pre><code class="language-js">material.colorNode = materialColor.mul( color( 0xff0000 ) ); // give diffuse colors a red tint
  106. </code></pre><br/>Default is <code>null</code>.
  107. </div>
  108. </div>
  109. <div class="member">
  110. <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>
  111. <div class="description">
  112. <p>Allows to overwrite depth values in the fragment shader.<br/>Default is <code>null</code>.</p>
  113. </div>
  114. </div>
  115. <div class="member">
  116. <h3 class="name" id="envNode" translate="no">.<a href="#envNode">envNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec3></span> </h3>
  117. <div class="description">
  118. <p>The environment of node materials can be defined by an environment
  119. map assigned to the <code>envMap</code> property or by <code>Scene.environment</code>
  120. if the node material is a PBR material. This node property allows to overwrite
  121. the default behavior and define the environment with a custom node.</p>
  122. <pre><code class="language-js">material.envNode = pmremTexture( renderTarget.texture );
  123. </code></pre><br/>Default is <code>null</code>.
  124. </div>
  125. </div>
  126. <div class="member">
  127. <h3 class="name" id="fog" translate="no">.<a href="#fog">fog</a><span class="type-signature"> : boolean</span> </h3>
  128. <div class="description">
  129. <p>Whether this material is affected by fog or not.<br/>Default is <code>true</code>.</p>
  130. </div>
  131. </div>
  132. <div class="member">
  133. <h3 class="name" id="fragmentNode" translate="no">.<a href="#fragmentNode">fragmentNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec4></span> </h3>
  134. <div class="description">
  135. <p>This node property can be used if you need complete freedom in implementing
  136. the fragment shader. Assigning a node will replace the built-in material
  137. logic used in the fragment stage.<br/>Default is <code>null</code>.</p>
  138. </div>
  139. </div>
  140. <div class="member">
  141. <h3 class="name" id="geometryNode" translate="no">.<a href="#geometryNode">geometryNode</a><span class="type-signature"> : function</span> </h3>
  142. <div class="description">
  143. <p>This node property is intended for logic which modifies geometry data once or per animation step.
  144. Apps usually place such logic randomly in initialization routines or in the animation loop.
  145. <code>geometryNode</code> is intended as a dedicated API so there is an intended spot where geometry modifications
  146. can be implemented.</p>
  147. <p>The idea is to assign a <code>Fn</code> definition that holds the geometry modification logic. A typical example
  148. would be a GPU based particle system that provides a node material for usage on app level. The particle
  149. simulation would be implemented as compute shaders and managed inside a <code>Fn</code> function. This function is
  150. eventually assigned to <code>geometryNode</code>.<br/>Default is <code>null</code>.</p>
  151. </div>
  152. </div>
  153. <div class="member">
  154. <h3 class="name" id="hardwareClipping" translate="no">.<a href="#hardwareClipping">hardwareClipping</a><span class="type-signature"> : boolean</span> </h3>
  155. <div class="description">
  156. <p>Whether this material uses hardware clipping or not.
  157. This property is managed by the engine and should not be
  158. modified by apps.<br/>Default is <code>false</code>.</p>
  159. </div>
  160. </div>
  161. <div class="member">
  162. <h3 class="name" id="isNodeMaterial" translate="no">.<a href="#isNodeMaterial">isNodeMaterial</a><span class="type-signature"> : boolean</span> <span class="type-signature">(readonly) </span></h3>
  163. <div class="description">
  164. <p>This flag can be used for type testing.<br/>Default is <code>true</code>.</p>
  165. </div>
  166. </div>
  167. <div class="member">
  168. <h3 class="name" id="lights" translate="no">.<a href="#lights">lights</a><span class="type-signature"> : boolean</span> </h3>
  169. <div class="description">
  170. <p>Whether this material is affected by lights or not.<br/>Default is <code>false</code>.</p>
  171. </div>
  172. </div>
  173. <div class="member">
  174. <h3 class="name" id="lightsNode" translate="no">.<a href="#lightsNode">lightsNode</a><span class="type-signature"> : <a href="LightsNode.html">LightsNode</a></span> </h3>
  175. <div class="description">
  176. <p>Node materials which set their <code>lights</code> property to <code>true</code>
  177. are affected by all lights of the scene. Sometimes selective
  178. lighting is wanted which means only <em>some</em> lights in the scene
  179. affect a material. This can be achieved by creating an instance
  180. of <a href="LightsNode.html">LightsNode</a> with a list of selective
  181. lights and assign the node to this property.</p>
  182. <pre><code class="language-js">const customLightsNode = lights( [ light1, light2 ] );
  183. material.lightsNode = customLightsNode;
  184. </code></pre><br/>Default is <code>null</code>.
  185. </div>
  186. </div>
  187. <div class="member">
  188. <h3 class="name" id="maskNode" translate="no">.<a href="#maskNode">maskNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;bool></span> </h3>
  189. <div class="description">
  190. <p>Discards the fragment if the mask value is <code>false</code>.<br/>Default is <code>null</code>.</p>
  191. </div>
  192. </div>
  193. <div class="member">
  194. <h3 class="name" id="mrtNode" translate="no">.<a href="#mrtNode">mrtNode</a><span class="type-signature"> : <a href="MRTNode.html">MRTNode</a></span> </h3>
  195. <div class="description">
  196. <p>MRT configuration is done on renderer or pass level. This node allows to
  197. overwrite what values are written into MRT targets on material level. This
  198. can be useful for implementing selective FX features that should only affect
  199. specific objects.<br/>Default is <code>null</code>.</p>
  200. </div>
  201. </div>
  202. <div class="member">
  203. <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>
  204. <div class="description">
  205. <p>The normals of node materials are by default inferred from the <code>normalMap</code>/<code>normalScale</code>
  206. or <code>bumpMap</code>/<code>bumpScale</code> properties. This node property allows to overwrite the default
  207. and define the normals with a node instead.</p>
  208. <p>If you don't want to overwrite the normals but modify the existing values instead,
  209. use <a href="TSL.html#materialNormal">materialNormal</a>.<br/>Default is <code>null</code>.</p>
  210. </div>
  211. </div>
  212. <div class="member">
  213. <h3 class="name" id="opacityNode" translate="no">.<a href="#opacityNode">opacityNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;float></span> </h3>
  214. <div class="description">
  215. <p>The opacity of node materials is by default inferred from the <code>opacity</code>
  216. and <code>alphaMap</code> properties. This node property allows to overwrite the default
  217. and define the opacity with a node instead.</p>
  218. <p>If you don't want to overwrite the opacity but modify the existing
  219. value instead, use <a href="TSL.html#materialOpacity">materialOpacity</a>.<br/>Default is <code>null</code>.</p>
  220. </div>
  221. </div>
  222. <div class="member">
  223. <h3 class="name" id="outputNode" translate="no">.<a href="#outputNode">outputNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec4></span> </h3>
  224. <div class="description">
  225. <p>This node can be used to define the final output of the material.</p>
  226. <p>TODO: Explain the differences to <code>fragmentNode</code>.<br/>Default is <code>null</code>.</p>
  227. </div>
  228. </div>
  229. <div class="member">
  230. <h3 class="name" id="positionNode" translate="no">.<a href="#positionNode">positionNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec3></span> </h3>
  231. <div class="description">
  232. <p>The local vertex positions are computed based on multiple factors like the
  233. attribute data, morphing or skinning. This node property allows to overwrite
  234. the default and define local vertex positions with nodes instead.</p>
  235. <p>If you don't want to overwrite the vertex positions but modify the existing
  236. values instead, use <a href="TSL.html#positionLocal">positionLocal</a>.</p>
  237. <pre><code class="language-js">material.positionNode = positionLocal.add( displace );
  238. </code></pre><br/>Default is <code>null</code>.
  239. </div>
  240. </div>
  241. <div class="member">
  242. <h3 class="name" id="receivedShadowNode" translate="no">.<a href="#receivedShadowNode">receivedShadowNode</a><span class="type-signature"> : function | <a href="FunctionNode.html">FunctionNode</a>.&lt;vec4></span> </h3>
  243. <div class="description">
  244. <p>This node can be used to influence how an object using this node material
  245. receive shadows.</p>
  246. <pre><code class="language-js">const totalShadows = float( 1 ).toVar();
  247. material.receivedShadowNode = Fn( ( [ shadow ] ) => {
  248. totalShadows.mulAssign( shadow );
  249. //return float( 1 ); // bypass received shadows
  250. return shadow.mix( color( 0xff0000 ), 1 ); // modify shadow color
  251. } );</code></pre><br/>Default is <code>null</code>.
  252. </div>
  253. </div>
  254. <div class="member">
  255. <h3 class="name" id="receivedShadowPositionNode" translate="no">.<a href="#receivedShadowPositionNode">receivedShadowPositionNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;float></span> </h3>
  256. <div class="description">
  257. <p>Allows to overwrite the position used for shadow map rendering which
  258. is by default <a href="TSL.html#positionWorld">positionWorld</a>, the vertex position
  259. in world space.<br/>Default is <code>null</code>.</p>
  260. </div>
  261. </div>
  262. <div class="member">
  263. <h3 class="name" id="type" translate="no">.<a href="#type">type</a><span class="type-signature"> : string</span> </h3>
  264. <div class="description">
  265. <p>Represents the type of the node material.</p>
  266. </div>
  267. <dl class="details">
  268. <dt class="tag-overrides"><strong>Overrides:</strong> <a href="Material.html#type">Material#type</a></dt>
  269. </dl>
  270. </div>
  271. <div class="member">
  272. <h3 class="name" id="vertexNode" translate="no">.<a href="#vertexNode">vertexNode</a><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec4></span> </h3>
  273. <div class="description">
  274. <p>This node property can be used if you need complete freedom in implementing
  275. the vertex shader. Assigning a node will replace the built-in material logic
  276. used in the vertex stage.<br/>Default is <code>null</code>.</p>
  277. </div>
  278. </div>
  279. <h2 class="subsection-title">Methods</h2>
  280. <h3 class="name name-method" id="build" translate="no">.<a href="#build">build</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span> </h3>
  281. <div class="method">
  282. <div class="description">
  283. <p>Builds this material with the given node builder.</p>
  284. </div>
  285. <table class="params">
  286. <tbody>
  287. <tr>
  288. <td class="name"><code>builder</code></td>
  289. <td class="description last"><p>The current node builder.</p></td>
  290. </tr>
  291. </tbody>
  292. </table>
  293. </div>
  294. <h3 class="name name-method" id="copy" translate="no">.<a href="#copy">copy</a><span class="signature">( source : <span class="param-type">NodeMaterial</span> )</span><span class="type-signature"> : <a href="NodeMaterial.html">NodeMaterial</a></span> </h3>
  295. <div class="method">
  296. <div class="description">
  297. <p>Copies the properties of the given node material to this instance.</p>
  298. </div>
  299. <table class="params">
  300. <tbody>
  301. <tr>
  302. <td class="name"><code>source</code></td>
  303. <td class="description last"><p>The material to copy.</p></td>
  304. </tr>
  305. </tbody>
  306. </table>
  307. <dl class="details">
  308. <dt class="tag-overrides"><strong>Overrides:</strong> <a href="Material.html#copy">Material#copy</a></dt>
  309. </dl>
  310. <dl class="details">
  311. <dt class="tag-returns"><strong>Returns:</strong> A reference to this node material.</dt>
  312. </dl>
  313. </div>
  314. <h3 class="name name-method" id="customProgramCacheKey" translate="no">.<a href="#customProgramCacheKey">customProgramCacheKey</a><span class="signature">()</span><span class="type-signature"> : string</span> </h3>
  315. <div class="method">
  316. <div class="description">
  317. <p>Allows to define a custom cache key that influence the material key computation
  318. for render objects.</p>
  319. </div>
  320. <dl class="details">
  321. <dt class="tag-overrides"><strong>Overrides:</strong> <a href="Material.html#customProgramCacheKey">Material#customProgramCacheKey</a></dt>
  322. </dl>
  323. <dl class="details">
  324. <dt class="tag-returns"><strong>Returns:</strong> The custom cache key.</dt>
  325. </dl>
  326. </div>
  327. <h3 class="name name-method" id="setDefaultValues" translate="no">.<a href="#setDefaultValues">setDefaultValues</a><span class="signature">( material : <span class="param-type">Material</span> )</span> </h3>
  328. <div class="method">
  329. <div class="description">
  330. <p>Most classic material types have a node pendant e.g. for <code>MeshBasicMaterial</code>
  331. there is <code>MeshBasicNodeMaterial</code>. This utility method is intended for
  332. defining all material properties of the classic type in the node type.</p>
  333. </div>
  334. <table class="params">
  335. <tbody>
  336. <tr>
  337. <td class="name"><code>material</code></td>
  338. <td class="description last"><p>The material to copy properties with their values to this node material.</p></td>
  339. </tr>
  340. </tbody>
  341. </table>
  342. </div>
  343. <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> </h3>
  344. <div class="method">
  345. <div class="description">
  346. <p>Setups the vertex and fragment stage of this node material.</p>
  347. </div>
  348. <table class="params">
  349. <tbody>
  350. <tr>
  351. <td class="name"><code>builder</code></td>
  352. <td class="description last"><p>The current node builder.</p></td>
  353. </tr>
  354. </tbody>
  355. </table>
  356. </div>
  357. <h3 class="name name-method" id="setupClipping" translate="no">.<a href="#setupClipping">setupClipping</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span><span class="type-signature"> : <a href="ClippingNode.html">ClippingNode</a></span> </h3>
  358. <div class="method">
  359. <div class="description">
  360. <p>Setups the clipping node.</p>
  361. </div>
  362. <table class="params">
  363. <tbody>
  364. <tr>
  365. <td class="name"><code>builder</code></td>
  366. <td class="description last"><p>The current node builder.</p></td>
  367. </tr>
  368. </tbody>
  369. </table>
  370. <dl class="details">
  371. <dt class="tag-returns"><strong>Returns:</strong> The clipping node.</dt>
  372. </dl>
  373. </div>
  374. <h3 class="name name-method" id="setupDepth" translate="no">.<a href="#setupDepth">setupDepth</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span> </h3>
  375. <div class="method">
  376. <div class="description">
  377. <p>Setups the depth of this material.</p>
  378. </div>
  379. <table class="params">
  380. <tbody>
  381. <tr>
  382. <td class="name"><code>builder</code></td>
  383. <td class="description last"><p>The current node builder.</p></td>
  384. </tr>
  385. </tbody>
  386. </table>
  387. </div>
  388. <h3 class="name name-method" id="setupDiffuseColor" translate="no">.<a href="#setupDiffuseColor">setupDiffuseColor</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span>, geometry : <span class="param-type">BufferGeometry</span> )</span> </h3>
  389. <div class="method">
  390. <div class="description">
  391. <p>Setups the computation of the material's diffuse color.</p>
  392. </div>
  393. <table class="params">
  394. <tbody>
  395. <tr>
  396. <td class="name"><code>builder</code></td>
  397. <td class="description last"><p>The current node builder.</p></td>
  398. </tr>
  399. <tr>
  400. <td class="name"><code>geometry</code></td>
  401. <td class="description last"><p>The geometry.</p></td>
  402. </tr>
  403. </tbody>
  404. </table>
  405. </div>
  406. <h3 class="name name-method" id="setupEnvironment" translate="no">.<a href="#setupEnvironment">setupEnvironment</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec4></span> </h3>
  407. <div class="method">
  408. <div class="description">
  409. <p>Setups the environment node from the material.</p>
  410. </div>
  411. <table class="params">
  412. <tbody>
  413. <tr>
  414. <td class="name"><code>builder</code></td>
  415. <td class="description last"><p>The current node builder.</p></td>
  416. </tr>
  417. </tbody>
  418. </table>
  419. <dl class="details">
  420. <dt class="tag-returns"><strong>Returns:</strong> The environment node.</dt>
  421. </dl>
  422. </div>
  423. <h3 class="name name-method" id="setupFog" translate="no">.<a href="#setupFog">setupFog</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span>, outputNode : <span class="param-type">Node.&lt;vec4></span> )</span><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec4></span> </h3>
  424. <div class="method">
  425. <div class="description">
  426. <p>Setup the fog.</p>
  427. </div>
  428. <table class="params">
  429. <tbody>
  430. <tr>
  431. <td class="name"><code>builder</code></td>
  432. <td class="description last"><p>The current node builder.</p></td>
  433. </tr>
  434. <tr>
  435. <td class="name"><code>outputNode</code></td>
  436. <td class="description last"><p>The existing output node.</p></td>
  437. </tr>
  438. </tbody>
  439. </table>
  440. <dl class="details">
  441. <dt class="tag-returns"><strong>Returns:</strong> The output node.</dt>
  442. </dl>
  443. </div>
  444. <h3 class="name name-method" id="setupHardwareClipping" translate="no">.<a href="#setupHardwareClipping">setupHardwareClipping</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span> </h3>
  445. <div class="method">
  446. <div class="description">
  447. <p>Setups the hardware clipping if available on the current device.</p>
  448. </div>
  449. <table class="params">
  450. <tbody>
  451. <tr>
  452. <td class="name"><code>builder</code></td>
  453. <td class="description last"><p>The current node builder.</p></td>
  454. </tr>
  455. </tbody>
  456. </table>
  457. </div>
  458. <h3 class="name name-method" id="setupLightMap" translate="no">.<a href="#setupLightMap">setupLightMap</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec3></span> </h3>
  459. <div class="method">
  460. <div class="description">
  461. <p>Setups the light map node from the material.</p>
  462. </div>
  463. <table class="params">
  464. <tbody>
  465. <tr>
  466. <td class="name"><code>builder</code></td>
  467. <td class="description last"><p>The current node builder.</p></td>
  468. </tr>
  469. </tbody>
  470. </table>
  471. <dl class="details">
  472. <dt class="tag-returns"><strong>Returns:</strong> The light map node.</dt>
  473. </dl>
  474. </div>
  475. <h3 class="name name-method" id="setupLighting" translate="no">.<a href="#setupLighting">setupLighting</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec3></span> </h3>
  476. <div class="method">
  477. <div class="description">
  478. <p>Setups the outgoing light node.</p>
  479. </div>
  480. <table class="params">
  481. <tbody>
  482. <tr>
  483. <td class="name"><code>builder</code></td>
  484. <td class="description last"><p>The current node builder.</p></td>
  485. </tr>
  486. </tbody>
  487. </table>
  488. <dl class="details">
  489. <dt class="tag-returns"><strong>Returns:</strong> The outgoing light node.</dt>
  490. </dl>
  491. </div>
  492. <h3 class="name name-method" id="setupLightingModel" translate="no">.<a href="#setupLightingModel">setupLightingModel</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span><span class="type-signature"> : <a href="LightingModel.html">LightingModel</a></span> <span class="type-signature">(abstract) </span></h3>
  493. <div class="method">
  494. <div class="description">
  495. <p>This method should be implemented by most derived materials
  496. since it defines the material's lighting model.</p>
  497. </div>
  498. <table class="params">
  499. <tbody>
  500. <tr>
  501. <td class="name"><code>builder</code></td>
  502. <td class="description last"><p>The current node builder.</p></td>
  503. </tr>
  504. </tbody>
  505. </table>
  506. <dl class="details">
  507. <dt class="tag-returns"><strong>Returns:</strong> The lighting model.</dt>
  508. </dl>
  509. </div>
  510. <h3 class="name name-method" id="setupLights" translate="no">.<a href="#setupLights">setupLights</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span><span class="type-signature"> : <a href="LightsNode.html">LightsNode</a></span> </h3>
  511. <div class="method">
  512. <div class="description">
  513. <p>Setups the lights node based on the scene, environment and material.</p>
  514. </div>
  515. <table class="params">
  516. <tbody>
  517. <tr>
  518. <td class="name"><code>builder</code></td>
  519. <td class="description last"><p>The current node builder.</p></td>
  520. </tr>
  521. </tbody>
  522. </table>
  523. <dl class="details">
  524. <dt class="tag-returns"><strong>Returns:</strong> The lights node.</dt>
  525. </dl>
  526. </div>
  527. <h3 class="name name-method" id="setupModelViewProjection" translate="no">.<a href="#setupModelViewProjection">setupModelViewProjection</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec4></span> </h3>
  528. <div class="method">
  529. <div class="description">
  530. <p>Setups the position in clip space.</p>
  531. </div>
  532. <table class="params">
  533. <tbody>
  534. <tr>
  535. <td class="name"><code>builder</code></td>
  536. <td class="description last"><p>The current node builder.</p></td>
  537. </tr>
  538. </tbody>
  539. </table>
  540. <dl class="details">
  541. <dt class="tag-returns"><strong>Returns:</strong> The position in view space.</dt>
  542. </dl>
  543. </div>
  544. <h3 class="name name-method" id="setupNormal" translate="no">.<a href="#setupNormal">setupNormal</a><span class="signature">()</span><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec3></span> </h3>
  545. <div class="method">
  546. <div class="description">
  547. <p>Setups the normal node from the material.</p>
  548. </div>
  549. <dl class="details">
  550. <dt class="tag-returns"><strong>Returns:</strong> The normal node.</dt>
  551. </dl>
  552. </div>
  553. <h3 class="name name-method" id="setupObserver" translate="no">.<a href="#setupObserver">setupObserver</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span><span class="type-signature"> : <a href="NodeMaterialObserver.html">NodeMaterialObserver</a></span> </h3>
  554. <div class="method">
  555. <div class="description">
  556. <p>Setups a node material observer with the given builder.</p>
  557. </div>
  558. <table class="params">
  559. <tbody>
  560. <tr>
  561. <td class="name"><code>builder</code></td>
  562. <td class="description last"><p>The current node builder.</p></td>
  563. </tr>
  564. </tbody>
  565. </table>
  566. <dl class="details">
  567. <dt class="tag-returns"><strong>Returns:</strong> The node material observer.</dt>
  568. </dl>
  569. </div>
  570. <h3 class="name name-method" id="setupOutgoingLight" translate="no">.<a href="#setupOutgoingLight">setupOutgoingLight</a><span class="signature">()</span><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec3></span> </h3>
  571. <div class="method">
  572. <div class="description">
  573. <p>Setups the outgoing light node variable</p>
  574. </div>
  575. <dl class="details">
  576. <dt class="tag-returns"><strong>Returns:</strong> The outgoing light node.</dt>
  577. </dl>
  578. </div>
  579. <h3 class="name name-method" id="setupOutput" translate="no">.<a href="#setupOutput">setupOutput</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span>, outputNode : <span class="param-type">Node.&lt;vec4></span> )</span><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec4></span> </h3>
  580. <div class="method">
  581. <div class="description">
  582. <p>Setups the output node.</p>
  583. </div>
  584. <table class="params">
  585. <tbody>
  586. <tr>
  587. <td class="name"><code>builder</code></td>
  588. <td class="description last"><p>The current node builder.</p></td>
  589. </tr>
  590. <tr>
  591. <td class="name"><code>outputNode</code></td>
  592. <td class="description last"><p>The existing output node.</p></td>
  593. </tr>
  594. </tbody>
  595. </table>
  596. <dl class="details">
  597. <dt class="tag-returns"><strong>Returns:</strong> The output node.</dt>
  598. </dl>
  599. </div>
  600. <h3 class="name name-method" id="setupPosition" translate="no">.<a href="#setupPosition">setupPosition</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec3></span> </h3>
  601. <div class="method">
  602. <div class="description">
  603. <p>Setups the computation of the position in local space.</p>
  604. </div>
  605. <table class="params">
  606. <tbody>
  607. <tr>
  608. <td class="name"><code>builder</code></td>
  609. <td class="description last"><p>The current node builder.</p></td>
  610. </tr>
  611. </tbody>
  612. </table>
  613. <dl class="details">
  614. <dt class="tag-returns"><strong>Returns:</strong> The position in local space.</dt>
  615. </dl>
  616. </div>
  617. <h3 class="name name-method" id="setupPositionView" translate="no">.<a href="#setupPositionView">setupPositionView</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec3></span> </h3>
  618. <div class="method">
  619. <div class="description">
  620. <p>Setups the position node in view space. This method exists
  621. so derived node materials can modify the implementation e.g. sprite materials.</p>
  622. </div>
  623. <table class="params">
  624. <tbody>
  625. <tr>
  626. <td class="name"><code>builder</code></td>
  627. <td class="description last"><p>The current node builder.</p></td>
  628. </tr>
  629. </tbody>
  630. </table>
  631. <dl class="details">
  632. <dt class="tag-returns"><strong>Returns:</strong> The position in view space.</dt>
  633. </dl>
  634. </div>
  635. <h3 class="name name-method" id="setupPremultipliedAlpha" translate="no">.<a href="#setupPremultipliedAlpha">setupPremultipliedAlpha</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span>, outputNode : <span class="param-type">Node.&lt;vec4></span> )</span><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec4></span> </h3>
  636. <div class="method">
  637. <div class="description">
  638. <p>Setups premultiplied alpha.</p>
  639. </div>
  640. <table class="params">
  641. <tbody>
  642. <tr>
  643. <td class="name"><code>builder</code></td>
  644. <td class="description last"><p>The current node builder.</p></td>
  645. </tr>
  646. <tr>
  647. <td class="name"><code>outputNode</code></td>
  648. <td class="description last"><p>The existing output node.</p></td>
  649. </tr>
  650. </tbody>
  651. </table>
  652. <dl class="details">
  653. <dt class="tag-returns"><strong>Returns:</strong> The output node.</dt>
  654. </dl>
  655. </div>
  656. <h3 class="name name-method" id="setupVariants" translate="no">.<a href="#setupVariants">setupVariants</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span> <span class="type-signature">(abstract) </span></h3>
  657. <div class="method">
  658. <div class="description">
  659. <p>Abstract interface method that can be implemented by derived materials
  660. to setup material-specific node variables.</p>
  661. </div>
  662. <table class="params">
  663. <tbody>
  664. <tr>
  665. <td class="name"><code>builder</code></td>
  666. <td class="description last"><p>The current node builder.</p></td>
  667. </tr>
  668. </tbody>
  669. </table>
  670. </div>
  671. <h3 class="name name-method" id="setupVertex" translate="no">.<a href="#setupVertex">setupVertex</a><span class="signature">( builder : <span class="param-type">NodeBuilder</span> )</span><span class="type-signature"> : <a href="Node.html">Node</a>.&lt;vec4></span> </h3>
  672. <div class="method">
  673. <div class="description">
  674. <p>Setups the logic for the vertex stage.</p>
  675. </div>
  676. <table class="params">
  677. <tbody>
  678. <tr>
  679. <td class="name"><code>builder</code></td>
  680. <td class="description last"><p>The current node builder.</p></td>
  681. </tr>
  682. </tbody>
  683. </table>
  684. <dl class="details">
  685. <dt class="tag-returns"><strong>Returns:</strong> The position in clip space.</dt>
  686. </dl>
  687. </div>
  688. <h3 class="name name-method" id="toJSON" translate="no">.<a href="#toJSON">toJSON</a><span class="signature">( meta : <span class="param-type">Object | string</span> )</span><span class="type-signature"> : Object</span> </h3>
  689. <div class="method">
  690. <div class="description">
  691. <p>Serializes this material to JSON.</p>
  692. </div>
  693. <table class="params">
  694. <tbody>
  695. <tr>
  696. <td class="name"><code>meta</code></td>
  697. <td class="description last"><p>The meta information for serialization.</p></td>
  698. </tr>
  699. </tbody>
  700. </table>
  701. <dl class="details">
  702. <dt class="tag-overrides"><strong>Overrides:</strong> <a href="Material.html#toJSON">Material#toJSON</a></dt>
  703. </dl>
  704. <dl class="details">
  705. <dt class="tag-returns"><strong>Returns:</strong> The serialized node.</dt>
  706. </dl>
  707. </div>
  708. <h2 class="subsection-title">Source</h2>
  709. <p>
  710. <a href="https://github.com/mrdoob/three.js/blob/master/src/materials/nodes/NodeMaterial.js" target="_blank" rel="noopener" translate="no">src/materials/nodes/NodeMaterial.js</a>
  711. </p>
  712. </article>
  713. </section>
  714. <script src="../scripts/linenumber.js"></script>
  715. <script src="../scripts/page.js"></script>
  716. </body>
  717. </html>
粤ICP备19079148号