NodeMaterial.html 39 KB

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