Material.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>[name]</h1>
  11. <p class="desc">
  12. Abstract base class for materials.<br /><br />
  13. Materials describe the appearance of [page:Object objects]. They are
  14. defined in a (mostly) renderer-independent way, so you don't have to
  15. rewrite materials if you decide to use a different renderer.<br /><br />
  16. The following properties and methods are inherited by all other material
  17. types (although they may have different defaults).
  18. </p>
  19. <h2>Constructor</h2>
  20. <h3>[name]()</h3>
  21. <p>This creates a generic material.</p>
  22. <h2>Properties</h2>
  23. <h3>[property:Boolean alphaHash]</h3>
  24. <p>
  25. Enables alpha hashed transparency, an alternative to [page:.transparent] or [page:.alphaTest].
  26. The material will not be rendered if opacity is lower than a random threshold.
  27. Randomization introduces some grain or noise, but approximates alpha blending without
  28. the associated problems of sorting. Using TAARenderPass can reduce the resulting noise.
  29. </p>
  30. <h3>[property:Float alphaTest]</h3>
  31. <p>
  32. Sets the alpha value to be used when running an alpha test. The material
  33. will not be rendered if the opacity is lower than this value. Default is
  34. `0`.
  35. </p>
  36. <h3>[property:Boolean alphaToCoverage]</h3>
  37. <p>
  38. Enables alpha to coverage. Can only be used with MSAA-enabled contexts
  39. (meaning when the renderer was created with *antialias* parameter set to
  40. `true`). Enabling this will smooth aliasing on clip plane edges and alphaTest-clipped edges.
  41. Default is `false`.
  42. </p>
  43. <h3>[property:Float blendAlpha]</h3>
  44. <p>
  45. Represents the alpha value of the constant blend color. Default is `0`.
  46. This property has only an effect when using custom blending with [page:CustomBlendingEquation ConstantAlpha] or [page:CustomBlendingEquation OneMinusConstantAlpha].
  47. </p>
  48. <h3>[property:Color blendColor]</h3>
  49. <p>
  50. Represent the RGB values of the constant blend color. Default is `0x000000`.<br />
  51. This property has only an effect when using custom blending with [page:CustomBlendingEquation ConstantColor] or [page:CustomBlendingEquation OneMinusConstantColor].
  52. </p>
  53. <h3>[property:Integer blendDst]</h3>
  54. <p>
  55. Blending destination. Default is [page:CustomBlendingEquation OneMinusSrcAlphaFactor].
  56. See the destination factors [page:CustomBlendingEquation constants] for all possible values.<br />
  57. The material's [page:Constant blending] must be set to [page:Materials CustomBlending]
  58. for this to have any effect.
  59. </p>
  60. <h3>[property:Integer blendDstAlpha]</h3>
  61. <p>
  62. The transparency of the [page:.blendDst]. Uses [page:.blendDst] value if
  63. null. Default is `null`.
  64. </p>
  65. <h3>[property:Integer blendEquation]</h3>
  66. <p>
  67. Blending equation to use when applying blending. Default is
  68. [page:CustomBlendingEquation AddEquation]. See the blending equation
  69. [page:CustomBlendingEquation constants] for all possible values.<br />
  70. The material's [page:Constant blending] must be set to [page:Materials CustomBlending]
  71. for this to have any effect.
  72. </p>
  73. <h3>[property:Integer blendEquationAlpha]</h3>
  74. <p>
  75. The transparency of the [page:.blendEquation]. Uses [page:.blendEquation]
  76. value if null. Default is `null`.
  77. </p>
  78. <h3>[property:Blending blending]</h3>
  79. <p>
  80. Which blending to use when displaying objects with this material. <br />
  81. This must be set to [page:Materials CustomBlending] to use custom
  82. [page:Constant blendSrc], [page:Constant blendDst] or [page:Constant blendEquation].<br />
  83. See the blending mode [page:Materials constants] for all possible values.
  84. Default is [page:Materials NormalBlending].
  85. </p>
  86. <h3>[property:Integer blendSrc]</h3>
  87. <p>
  88. Blending source. Default is [page:CustomBlendingEquation SrcAlphaFactor].
  89. See the source factors [page:CustomBlendingEquation constants] for all
  90. possible values.<br />
  91. The material's [page:Constant blending] must be set to [page:Materials CustomBlending]
  92. for this to have any effect.
  93. </p>
  94. <h3>[property:Integer blendSrcAlpha]</h3>
  95. <p>
  96. The transparency of the [page:.blendSrc]. Uses [page:.blendSrc] value if
  97. null. Default is `null`.
  98. </p>
  99. <h3>[property:Boolean clipIntersection]</h3>
  100. <p>
  101. Changes the behavior of clipping planes so that only their intersection is
  102. clipped, rather than their union. Default is `false`.
  103. </p>
  104. <h3>[property:Array clippingPlanes]</h3>
  105. <p>
  106. User-defined clipping planes specified as THREE.Plane objects in world
  107. space. These planes apply to the objects this material is attached to.
  108. Points in space whose signed distance to the plane is negative are clipped
  109. (not rendered). This requires [page:WebGLRenderer.localClippingEnabled] to
  110. be `true`. See the [example:webgl_clipping_intersection WebGL / clipping /intersection] example. Default is `null`.
  111. </p>
  112. <h3>[property:Boolean clipShadows]</h3>
  113. <p>
  114. Defines whether to clip shadows according to the clipping planes specified
  115. on this material. Default is `false`.
  116. </p>
  117. <h3>[property:Boolean colorWrite]</h3>
  118. <p>
  119. Whether to render the material's color. This can be used in conjunction
  120. with a mesh's [page:Integer renderOrder] property to create invisible
  121. objects that occlude other objects. Default is `true`.
  122. </p>
  123. <h3>[property:Object defines]</h3>
  124. <p>
  125. Custom defines to be injected into the shader. These are passed in form of
  126. an object literal, with key/value pairs. `{ MY_CUSTOM_DEFINE: '' , PI2:
  127. Math.PI * 2 }`. The pairs are defined in both vertex and fragment shaders.
  128. Default is `undefined`.
  129. </p>
  130. <h3>[property:Integer depthFunc]</h3>
  131. <p>
  132. Which depth function to use. Default is [page:Materials LessEqualDepth].
  133. See the depth mode [page:Materials constants] for all possible values.
  134. </p>
  135. <h3>[property:Boolean depthTest]</h3>
  136. <p>
  137. Whether to have depth test enabled when rendering this material. Default
  138. is `true`. When the depth test is disabled, the depth write will also be
  139. implicitly disabled.
  140. </p>
  141. <h3>[property:Boolean depthWrite]</h3>
  142. <p>
  143. Whether rendering this material has any effect on the depth buffer.
  144. Default is `true`.<br /><br />
  145. When drawing 2D overlays it can be useful to disable the depth writing in
  146. order to layer several things together without creating z-index artifacts.
  147. </p>
  148. <h3>[property:Boolean forceSinglePass]</h3>
  149. <p>
  150. Whether double-sided, transparent objects should be rendered with a single
  151. pass or not. Default is `false`.<br /><br />
  152. The engine renders double-sided, transparent objects with two draw calls
  153. (back faces first, then front faces) to mitigate transparency artifacts.
  154. There are scenarios however where this approach produces no quality gains
  155. but still doubles draw calls e.g. when rendering flat vegetation like
  156. grass sprites. In these cases, set the `forceSinglePass` flag to `true` to
  157. disable the two pass rendering to avoid performance issues.
  158. </p>
  159. <h3>[property:Boolean isMaterial]</h3>
  160. <p>Read-only flag to check if a given object is of type [name].</p>
  161. <h3>[property:Boolean stencilWrite]</h3>
  162. <p>
  163. Whether stencil operations are performed against the stencil buffer. In
  164. order to perform writes or comparisons against the stencil buffer this
  165. value must be `true`. Default is `false`.
  166. </p>
  167. <h3>[property:Integer stencilWriteMask]</h3>
  168. <p>
  169. The bit mask to use when writing to the stencil buffer. Default is `0xFF`.
  170. </p>
  171. <h3>[property:Integer stencilFunc]</h3>
  172. <p>
  173. The stencil comparison function to use. Default is [page:Materials AlwaysStencilFunc].
  174. See stencil function [page:Materials constants] for
  175. all possible values.
  176. </p>
  177. <h3>[property:Integer stencilRef]</h3>
  178. <p>
  179. The value to use when performing stencil comparisons or stencil
  180. operations. Default is `0`.
  181. </p>
  182. <h3>[property:Integer stencilFuncMask]</h3>
  183. <p>
  184. The bit mask to use when comparing against the stencil buffer. Default is
  185. `0xFF`.
  186. </p>
  187. <h3>[property:Integer stencilFail]</h3>
  188. <p>
  189. Which stencil operation to perform when the comparison function returns
  190. false. Default is [page:Materials KeepStencilOp]. See the stencil
  191. operations [page:Materials constants] for all possible values.
  192. </p>
  193. <h3>[property:Integer stencilZFail]</h3>
  194. <p>
  195. Which stencil operation to perform when the comparison function returns
  196. true but the depth test fails. Default is [page:Materials KeepStencilOp].
  197. See the stencil operations [page:Materials constants] for all possible
  198. values.
  199. </p>
  200. <h3>[property:Integer stencilZPass]</h3>
  201. <p>
  202. Which stencil operation to perform when the comparison function returns
  203. true and the depth test passes. Default is [page:Materials KeepStencilOp].
  204. See the stencil operations [page:Materials constants] for all possible
  205. values.
  206. </p>
  207. <h3>[property:Integer id]</h3>
  208. <p>Unique number for this material instance.</p>
  209. <h3>[property:String name]</h3>
  210. <p>
  211. Optional name of the object (doesn't need to be unique). Default is an
  212. empty string.
  213. </p>
  214. <h3>[property:Boolean needsUpdate]</h3>
  215. <p>Specifies that the material needs to be recompiled.</p>
  216. <h3>[property:Float opacity]</h3>
  217. <p>
  218. Float in the range of `0.0` - `1.0` indicating how transparent the
  219. material is. A value of `0.0` indicates fully transparent, `1.0` is fully
  220. opaque.<br />
  221. If the material's [page:Boolean transparent] property is not set to
  222. `true`, the material will remain fully opaque and this value will only
  223. affect its color. <br />
  224. Default is `1.0`.
  225. </p>
  226. <h3>[property:Boolean polygonOffset]</h3>
  227. <p>
  228. Whether to use polygon offset. Default is `false`. This corresponds to the
  229. `GL_POLYGON_OFFSET_FILL` WebGL feature.
  230. </p>
  231. <h3>[property:Integer polygonOffsetFactor]</h3>
  232. <p>Sets the polygon offset factor. Default is `0`.</p>
  233. <h3>[property:Integer polygonOffsetUnits]</h3>
  234. <p>Sets the polygon offset units. Default is `0`.</p>
  235. <h3>[property:String precision]</h3>
  236. <p>
  237. Override the renderer's default precision for this material. Can be
  238. `"highp"`, `"mediump"` or `"lowp"`. Default is `null`.
  239. </p>
  240. <h3>[property:Boolean premultipliedAlpha]</h3>
  241. <p>
  242. Whether to premultiply the alpha (transparency) value. See
  243. [Example:webgl_materials_physical_transmission WebGL / Materials / Physical / Transmission]
  244. for an example of the difference. Default is `false`.
  245. </p>
  246. <h3>[property:Boolean dithering]</h3>
  247. <p>
  248. Whether to apply dithering to the color to remove the appearance of
  249. banding. Default is `false`.
  250. </p>
  251. <h3>[property:Integer shadowSide]</h3>
  252. <p>
  253. Defines which side of faces cast shadows. When set, can be [page:Materials THREE.FrontSide],
  254. [page:Materials THREE.BackSide], or [page:Materials THREE.DoubleSide].
  255. Default is `null`. <br />
  256. If `null`, the side casting shadows is determined as follows: <br />
  257. </p>
  258. <table>
  259. <thead>
  260. <tr>
  261. <th>[page:Material.side]</th>
  262. <th>Side casting shadows</th>
  263. </tr>
  264. </thead>
  265. <tbody>
  266. <tr>
  267. <td>THREE.FrontSide</td>
  268. <td>back side</td>
  269. </tr>
  270. <tr>
  271. <td>THREE.BackSide</td>
  272. <td>front side</td>
  273. </tr>
  274. <tr>
  275. <td>THREE.DoubleSide</td>
  276. <td>both sides</td>
  277. </tr>
  278. </tbody>
  279. </table>
  280. <h3>[property:Integer side]</h3>
  281. <p>
  282. Defines which side of faces will be rendered - front, back or both.
  283. Default is [page:Materials THREE.FrontSide]. Other options are
  284. [page:Materials THREE.BackSide] or [page:Materials THREE.DoubleSide].
  285. </p>
  286. <h3>[property:Boolean toneMapped]</h3>
  287. <p>
  288. Defines whether this material is tone mapped according to the renderer's
  289. [page:WebGLRenderer.toneMapping toneMapping] setting. It is ignored when rendering to a render target or using post processing.
  290. Default is `true`.
  291. </p>
  292. <h3>[property:Boolean transparent]</h3>
  293. <p>
  294. Defines whether this material is transparent. This has an effect on
  295. rendering as transparent objects need special treatment and are rendered
  296. after non-transparent objects. <br />
  297. When set to true, the extent to which the material is transparent is
  298. controlled by setting its [page:Float opacity] property.
  299. Default is `false`.
  300. </p>
  301. <h3>[property:String type]</h3>
  302. <p>
  303. Value is the string 'Material'. This shouldn't be changed, and can be used
  304. to find all objects of this type in a scene.
  305. </p>
  306. <h3>[property:String uuid]</h3>
  307. <p>
  308. [link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] of
  309. this material instance. This gets automatically assigned, so this
  310. shouldn't be edited.
  311. </p>
  312. <h3>[property:Integer version]</h3>
  313. <p>
  314. This starts at `0` and counts how many times [page:Material.needsUpdate .needsUpdate] is set to `true`.
  315. </p>
  316. <h3>[property:Boolean vertexColors]</h3>
  317. <p>
  318. Defines whether vertex coloring is used. Default is `false`. The engine
  319. supports RGB and RGBA vertex colors depending on whether a three (RGB) or
  320. four (RGBA) component color buffer attribute is used.
  321. </p>
  322. <h3>[property:Boolean visible]</h3>
  323. <p>Defines whether this material is visible. Default is `true`.</p>
  324. <h3>[property:Object userData]</h3>
  325. <p>
  326. An object that can be used to store custom data about the Material. It
  327. should not hold references to functions as these will not be cloned.
  328. Default is an empty object `{}`.
  329. </p>
  330. <h2>Methods</h2>
  331. <p>
  332. [page:EventDispatcher EventDispatcher] methods are available on this
  333. class.
  334. </p>
  335. <h3>[method:Material clone]( )</h3>
  336. <p>Return a new material with the same parameters as this material.</p>
  337. <h3>[method:this copy]( [param:material material] )</h3>
  338. <p>Copy the parameters from the passed material into this material.</p>
  339. <h3>[method:undefined dispose]()</h3>
  340. <p>
  341. Frees the GPU-related resources allocated by this instance. Call this
  342. method whenever this instance is no longer used in your app.
  343. </p>
  344. <p>
  345. Material textures must be disposed of by the dispose() method of
  346. [page:Texture Texture].
  347. </p>
  348. <h3>
  349. [method:undefined onBeforeCompile]( [param:Shader shader], [param:WebGLRenderer renderer] )
  350. </h3>
  351. <p>
  352. An optional callback that is executed immediately before the shader
  353. program is compiled. This function is called with the shader source code
  354. as a parameter. Useful for the modification of built-in materials.
  355. </p>
  356. <p>
  357. Unlike properties, the callback is not supported by [page:Material.clone .clone](),
  358. [page:Material.copy .copy]() and [page:Material.toJSON .toJSON]().
  359. </p>
  360. <p>
  361. This callback is only supported in `WebGLRenderer` (not `WebGPURenderer`).
  362. </p>
  363. <h3>
  364. [method:undefined onBeforeRender]( [param:WebGLRenderer renderer], [param:Scene scene], [param:Camera camera], [param:BufferGeometry geometry], [param:Object3D object], [param:Group group] )
  365. </h3>
  366. <p>
  367. An optional callback that is executed immediately before the material is used to
  368. render a 3D object.
  369. </p>
  370. <p>
  371. Unlike properties, the callback is not supported by [page:Material.clone .clone](),
  372. [page:Material.copy .copy]() and [page:Material.toJSON .toJSON]().
  373. </p>
  374. <p>
  375. This callback is only supported in `WebGLRenderer` (not `WebGPURenderer`).
  376. </p>
  377. <h3>[method:String customProgramCacheKey]()</h3>
  378. <p>
  379. In case onBeforeCompile is used, this callback can be used to identify
  380. values of settings used in onBeforeCompile, so three.js can reuse a cached
  381. shader or recompile the shader for this material as needed.
  382. </p>
  383. <p>
  384. For example, if onBeforeCompile contains a conditional statement like:<br />
  385. <code>
  386. if ( black ) {
  387. shader.fragmentShader = shader.fragmentShader.replace('gl_FragColor = vec4(1)',
  388. 'gl_FragColor = vec4(0)')
  389. }
  390. </code>
  391. then customProgramCacheKey should be set like this:<br />
  392. <code>
  393. material.customProgramCacheKey = function() {
  394. return black ? '1' : '0';
  395. }
  396. </code>
  397. </p>
  398. <p>
  399. Unlike properties, the callback is not supported by [page:Material.clone .clone](),
  400. [page:Material.copy .copy]() and [page:Material.toJSON .toJSON]().
  401. </p>
  402. <h3>[method:undefined setValues]( [param:Object values] )</h3>
  403. <p>
  404. values -- a container with parameters.<br />
  405. Sets the properties based on the `values`.
  406. </p>
  407. <h3>[method:Object toJSON]( [param:Object meta] )</h3>
  408. <p>
  409. meta -- object containing metadata such as textures or images for the
  410. material.<br />
  411. Convert the material to three.js
  412. [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
  413. </p>
  414. <h2>Source</h2>
  415. <p>
  416. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  417. </p>
  418. </body>
  419. </html>