UNPKG

19.6 kBTypeScriptView Raw
1import { Camera } from "../cameras/Camera.js";
2import {
3 Blending,
4 BlendingDstFactor,
5 BlendingEquation,
6 BlendingSrcFactor,
7 Combine,
8 DepthModes,
9 NormalMapTypes,
10 PixelFormat,
11 Side,
12 StencilFunc,
13 StencilOp,
14} from "../constants.js";
15import { BufferGeometry } from "../core/BufferGeometry.js";
16import { EventDispatcher } from "../core/EventDispatcher.js";
17import { JSONMeta, Object3D } from "../core/Object3D.js";
18import { Color, ColorRepresentation } from "../math/Color.js";
19import { Plane } from "../math/Plane.js";
20import { Group } from "../objects/Group.js";
21import { WebGLProgramParametersWithUniforms } from "../renderers/webgl/WebGLPrograms.js";
22import { WebGLRenderer } from "../renderers/WebGLRenderer.js";
23import { Scene } from "../scenes/Scene.js";
24import { EulerTuple, SourceJSON, TextureJSON, Vector2Tuple } from "../Three.js";
25
26export interface MaterialParameters {
27 alphaHash?: boolean | undefined;
28 alphaTest?: number | undefined;
29 alphaToCoverage?: boolean | undefined;
30 blendAlpha?: number | undefined;
31 blendColor?: ColorRepresentation | undefined;
32 blendDst?: BlendingDstFactor | undefined;
33 blendDstAlpha?: number | undefined;
34 blendEquation?: BlendingEquation | undefined;
35 blendEquationAlpha?: number | undefined;
36 blending?: Blending | undefined;
37 blendSrc?: BlendingSrcFactor | BlendingDstFactor | undefined;
38 blendSrcAlpha?: number | undefined;
39 clipIntersection?: boolean | undefined;
40 clippingPlanes?: Plane[] | undefined;
41 clipShadows?: boolean | undefined;
42 colorWrite?: boolean | undefined;
43 defines?: any;
44 depthFunc?: DepthModes | undefined;
45 depthTest?: boolean | undefined;
46 depthWrite?: boolean | undefined;
47 name?: string | undefined;
48 opacity?: number | undefined;
49 polygonOffset?: boolean | undefined;
50 polygonOffsetFactor?: number | undefined;
51 polygonOffsetUnits?: number | undefined;
52 precision?: "highp" | "mediump" | "lowp" | null | undefined;
53 premultipliedAlpha?: boolean | undefined;
54 forceSinglePass?: boolean | undefined;
55 dithering?: boolean | undefined;
56 side?: Side | undefined;
57 shadowSide?: Side | undefined;
58 toneMapped?: boolean | undefined;
59 transparent?: boolean | undefined;
60 vertexColors?: boolean | undefined;
61 visible?: boolean | undefined;
62 format?: PixelFormat | undefined;
63 stencilWrite?: boolean | undefined;
64 stencilFunc?: StencilFunc | undefined;
65 stencilRef?: number | undefined;
66 stencilWriteMask?: number | undefined;
67 stencilFuncMask?: number | undefined;
68 stencilFail?: StencilOp | undefined;
69 stencilZFail?: StencilOp | undefined;
70 stencilZPass?: StencilOp | undefined;
71 userData?: Record<string, any> | undefined;
72}
73
74export interface MaterialJSON {
75 metadata: { version: number; type: string; generator: string };
76
77 uuid: string;
78 type: string;
79
80 name?: string;
81
82 color?: number;
83 roughness?: number;
84 metalness?: number;
85
86 sheen?: number;
87 sheenColor?: number;
88 sheenRoughness?: number;
89 emissive?: number;
90 emissiveIntensity?: number;
91
92 specular?: number;
93 specularIntensity?: number;
94 specularColor?: number;
95 shininess?: number;
96 clearcoat?: number;
97 clearcoatRoughness?: number;
98 clearcoatMap?: string;
99 clearcoatRoughnessMap?: string;
100 clearcoatNormalMap?: string;
101 clearcoatNormalScale?: Vector2Tuple;
102
103 dispersion?: number;
104
105 iridescence?: number;
106 iridescenceIOR?: number;
107 iridescenceThicknessRange?: number;
108 iridescenceMap?: string;
109 iridescenceThicknessMap?: string;
110
111 anisotropy?: number;
112 anisotropyRotation?: number;
113 anisotropyMap?: string;
114
115 map?: string;
116 matcap?: string;
117 alphaMap?: string;
118
119 lightMap?: string;
120 lightMapIntensity?: number;
121
122 aoMap?: string;
123 aoMapIntensity?: number;
124
125 bumpMap?: string;
126 bumpScale?: number;
127
128 normalMap?: string;
129 normalMapType?: NormalMapTypes;
130 normalScale?: Vector2Tuple;
131
132 displacementMap?: string;
133 displacementScale?: number;
134 displacementBias?: number;
135
136 roughnessMap?: string;
137 metalnessMap?: string;
138
139 emissiveMap?: string;
140 specularMap?: string;
141 specularIntensityMap?: string;
142 specularColorMap?: string;
143
144 envMap?: string;
145 combine?: Combine;
146
147 envMapRotation?: EulerTuple;
148 envMapIntensity?: number;
149 reflectivity?: number;
150 refractionRatio?: number;
151
152 gradientMap?: string;
153
154 transmission?: number;
155 transmissionMap?: string;
156 thickness?: number;
157 thicknessMap?: string;
158 attenuationDistance?: number;
159 attenuationColor?: number;
160
161 size?: number;
162 shadowSide?: number;
163 sizeAttenuation?: boolean;
164
165 blending?: Blending;
166 side?: Side;
167 vertexColors?: boolean;
168
169 opacity?: number;
170 transparent?: boolean;
171
172 blendSrc?: BlendingSrcFactor;
173 blendDst?: BlendingDstFactor;
174 blendEquation?: BlendingEquation;
175 blendSrcAlpha?: number | null;
176 blendDstAlpha?: number | null;
177 blendEquationAlpha?: number | null;
178 blendColor?: number;
179 blendAlpha?: number;
180
181 depthFunc?: DepthModes;
182 depthTest?: boolean;
183 depthWrite?: boolean;
184 colorWrite?: boolean;
185
186 stencilWriteMask?: number;
187 stencilFunc?: StencilFunc;
188 stencilRef?: number;
189 stencilFuncMask?: number;
190 stencilFail?: StencilOp;
191 stencilZFail?: StencilOp;
192 stencilZPass?: StencilOp;
193 stencilWrite?: boolean;
194
195 rotation?: number;
196
197 polygonOffset?: boolean;
198 polygonOffsetFactor?: number;
199 polygonOffsetUnits?: number;
200
201 linewidth?: number;
202 dashSize?: number;
203 gapSize?: number;
204 scale?: number;
205
206 dithering?: boolean;
207
208 alphaTest?: number;
209 alphaHash?: boolean;
210 alphaToCoverage?: boolean;
211 premultipliedAlpha?: boolean;
212 forceSinglePass?: boolean;
213
214 wireframe?: boolean;
215 wireframeLinewidth?: number;
216 wireframeLinecap?: string;
217 wireframeLinejoin?: string;
218
219 flatShading?: boolean;
220
221 visible?: boolean;
222
223 toneMapped?: boolean;
224
225 fog?: boolean;
226
227 userData?: Record<string, unknown>;
228
229 textures?: Array<Omit<TextureJSON, "metadata">>;
230 images?: SourceJSON[];
231}
232
233/**
234 * Materials describe the appearance of objects. They are defined in a (mostly) renderer-independent way, so you don't have to rewrite materials if you decide to use a different renderer.
235 */
236export class Material extends EventDispatcher<{ dispose: {} }> {
237 constructor();
238
239 /**
240 * Read-only flag to check if a given object is of type {@link Material}.
241 * @remarks This is a _constant_ value
242 * @defaultValue `true`
243 */
244 readonly isMaterial: true;
245
246 /**
247 * Value is the string 'Material'. This shouldn't be changed, and can be used to find all objects of this type in a
248 * scene.
249 */
250 type: string;
251
252 /**
253 * Enables alpha hashed transparency, an alternative to {@link .transparent} or {@link .alphaTest}. The material
254 * will not be rendered if opacity is lower than a random threshold. Randomization introduces some grain or noise,
255 * but approximates alpha blending without the associated problems of sorting. Using TAARenderPass can reduce the
256 * resulting noise.
257 */
258 alphaHash: boolean;
259
260 /**
261 * Enables alpha to coverage. Can only be used with MSAA-enabled rendering contexts (meaning when the renderer was
262 * created with *antialias* parameter set to `true`). Enabling this will smooth aliasing on clip plane edges and
263 * alphaTest-clipped edges.
264 * @default false
265 */
266 alphaToCoverage: boolean;
267
268 /**
269 * Represents the alpha value of the constant blend color. This property has only an effect when using custom
270 * blending with {@link ConstantAlphaFactor} or {@link OneMinusConstantAlphaFactor}.
271 * @default 0
272 */
273 blendAlpha: number;
274
275 /**
276 * Represent the RGB values of the constant blend color. This property has only an effect when using custom
277 * blending with {@link ConstantColorFactor} or {@link OneMinusConstantColorFactor}.
278 * @default 0x000000
279 */
280 blendColor: Color;
281
282 /**
283 * Blending destination. It's one of the blending mode constants defined in Three.js. Default is {@link OneMinusSrcAlphaFactor}.
284 * @default THREE.OneMinusSrcAlphaFactor
285 */
286 blendDst: BlendingDstFactor;
287
288 /**
289 * The tranparency of the .blendDst. Default is null.
290 * @default null
291 */
292 blendDstAlpha: number | null;
293
294 /**
295 * Blending equation to use when applying blending. It's one of the constants defined in Three.js. Default is {@link AddEquation}.
296 * @default THREE.AddEquation
297 */
298 blendEquation: BlendingEquation;
299
300 /**
301 * The tranparency of the .blendEquation. Default is null.
302 * @default null
303 */
304 blendEquationAlpha: number | null;
305
306 /**
307 * Which blending to use when displaying objects with this material. Default is {@link NormalBlending}.
308 * @default THREE.NormalBlending
309 */
310 blending: Blending;
311
312 /**
313 * Blending source. It's one of the blending mode constants defined in Three.js. Default is {@link SrcAlphaFactor}.
314 * @default THREE.SrcAlphaFactor
315 */
316 blendSrc: BlendingSrcFactor | BlendingDstFactor;
317
318 /**
319 * The tranparency of the .blendSrc. Default is null.
320 * @default null
321 */
322 blendSrcAlpha: number | null;
323
324 /**
325 * Changes the behavior of clipping planes so that only their intersection is clipped, rather than their union. Default is false.
326 * @default false
327 */
328 clipIntersection: boolean;
329
330 /**
331 * User-defined clipping planes specified as THREE.Plane objects in world space.
332 * These planes apply to the objects this material is attached to.
333 * Points in space whose signed distance to the plane is negative are clipped (not rendered).
334 * See the WebGL / clipping /intersection example. Default is null.
335 * @default null
336 */
337 clippingPlanes: Plane[] | null;
338
339 /**
340 * Defines whether to clip shadows according to the clipping planes specified on this material. Default is false.
341 * @default false
342 */
343 clipShadows: boolean;
344
345 /**
346 * Whether to render the material's color. This can be used in conjunction with a mesh's .renderOrder property to create invisible objects that occlude other objects. Default is true.
347 * @default true
348 */
349 colorWrite: boolean;
350
351 /**
352 * Custom defines to be injected into the shader. These are passed in form of an object literal, with key/value pairs. { MY_CUSTOM_DEFINE: '' , PI2: Math.PI * 2 }.
353 * The pairs are defined in both vertex and fragment shaders. Default is undefined.
354 * @default undefined
355 */
356 defines: undefined | { [key: string]: any };
357
358 /**
359 * Which depth function to use. Default is {@link LessEqualDepth}. See the depth mode constants for all possible values.
360 * @default THREE.LessEqualDepth
361 */
362 depthFunc: DepthModes;
363
364 /**
365 * Whether to have depth test enabled when rendering this material. When the depth test is disabled, the depth write
366 * will also be implicitly disabled.
367 * @default true
368 */
369 depthTest: boolean;
370
371 /**
372 * Whether rendering this material has any effect on the depth buffer. Default is true.
373 * When drawing 2D overlays it can be useful to disable the depth writing in order to layer several things together without creating z-index artifacts.
374 * @default true
375 */
376 depthWrite: boolean;
377
378 /**
379 * Unique number of this material instance.
380 */
381 id: number;
382
383 /**
384 * Whether rendering this material has any effect on the stencil buffer. Default is *false*.
385 * @default false
386 */
387 stencilWrite: boolean;
388
389 /**
390 * The stencil comparison function to use. Default is {@link AlwaysStencilFunc}. See stencil operation constants for all possible values.
391 * @default THREE.AlwaysStencilFunc
392 */
393 stencilFunc: StencilFunc;
394
395 /**
396 * The value to use when performing stencil comparisons or stencil operations. Default is *0*.
397 * @default 0
398 */
399 stencilRef: number;
400
401 /**
402 * The bit mask to use when writing to the stencil buffer. Default is *0xFF*.
403 * @default 0xff
404 */
405 stencilWriteMask: number;
406
407 /**
408 * The bit mask to use when comparing against the stencil buffer. Default is *0xFF*.
409 * @default 0xff
410 */
411 stencilFuncMask: number;
412
413 /**
414 * Which stencil operation to perform when the comparison function returns false. Default is {@link KeepStencilOp}. See the stencil operation constants for all possible values.
415 * @default THREE.KeepStencilOp
416 */
417 stencilFail: StencilOp;
418
419 /**
420 * Which stencil operation to perform when the comparison function returns true but the depth test fails.
421 * Default is {@link KeepStencilOp}.
422 * See the stencil operation constants for all possible values.
423 * @default THREE.KeepStencilOp
424 */
425 stencilZFail: StencilOp;
426
427 /**
428 * Which stencil operation to perform when the comparison function returns true and the depth test passes.
429 * Default is {@link KeepStencilOp}.
430 * See the stencil operation constants for all possible values.
431 * @default THREE.KeepStencilOp
432 */
433 stencilZPass: StencilOp;
434
435 /**
436 * Material name. Default is an empty string.
437 * @default ''
438 */
439 name: string;
440
441 /**
442 * Opacity. Default is 1.
443 * @default 1
444 */
445 opacity: number;
446
447 /**
448 * Whether to use polygon offset. Default is false. This corresponds to the POLYGON_OFFSET_FILL WebGL feature.
449 * @default false
450 */
451 polygonOffset: boolean;
452
453 /**
454 * Sets the polygon offset factor. Default is 0.
455 * @default 0
456 */
457 polygonOffsetFactor: number;
458
459 /**
460 * Sets the polygon offset units. Default is 0.
461 * @default 0
462 */
463 polygonOffsetUnits: number;
464
465 /**
466 * Override the renderer's default precision for this material. Can be "highp", "mediump" or "lowp". Defaults is null.
467 * @default null
468 */
469 precision: "highp" | "mediump" | "lowp" | null;
470
471 /**
472 * Whether to premultiply the alpha (transparency) value. See WebGL / Materials / Transparency for an example of the difference. Default is false.
473 * @default false
474 */
475 premultipliedAlpha: boolean;
476
477 /**
478 * @default false
479 */
480 forceSinglePass: boolean;
481
482 /**
483 * Whether to apply dithering to the color to remove the appearance of banding. Default is false.
484 * @default false
485 */
486 dithering: boolean;
487
488 /**
489 * Defines which of the face sides will be rendered - front, back or both.
490 * Default is {@link THREE.FrontSide}. Other options are {@link THREE.BackSide} and {@link THREE.DoubleSide}.
491 *
492 * @default {@link THREE.FrontSide}
493 */
494 side: Side;
495
496 /**
497 * Defines which of the face sides will cast shadows. Default is *null*.
498 * If *null*, the value is opposite that of side, above.
499 * @default null
500 */
501 shadowSide: Side | null;
502
503 /**
504 * Defines whether this material is tone mapped according to the renderer's
505 * {@link WebGLRenderer.toneMapping toneMapping} setting. It is ignored when rendering to a render target or using
506 * post processing.
507 * @default true
508 */
509 toneMapped: boolean;
510
511 /**
512 * Defines whether this material is transparent. This has an effect on rendering as transparent objects need special treatment and are rendered after non-transparent objects.
513 * When set to true, the extent to which the material is transparent is controlled by setting it's .opacity property.
514 * @default false
515 */
516 transparent: boolean;
517
518 /**
519 * UUID of this material instance. This gets automatically assigned, so this shouldn't be edited.
520 */
521 uuid: string;
522
523 /**
524 * Defines whether vertex coloring is used. Default is false.
525 * @default false
526 */
527 vertexColors: boolean;
528
529 /**
530 * Defines whether this material is visible. Default is true.
531 * @default true
532 */
533 visible: boolean;
534
535 /**
536 * An object that can be used to store custom data about the Material. It should not hold references to functions as these will not be cloned.
537 * @default {}
538 */
539 userData: Record<string, any>;
540
541 /**
542 * This starts at 0 and counts how many times .needsUpdate is set to true.
543 * @default 0
544 */
545 version: number;
546
547 /**
548 * Gets the alpha value to be used when running an alpha test. Default is 0.
549 * @default 0
550 */
551 get alphaTest(): number;
552
553 /**
554 * Sets the alpha value to be used when running an alpha test. Default is 0.
555 * @default 0
556 */
557 set alphaTest(value: number);
558
559 /**
560 * An optional callback that is executed immediately before the material is used to render a 3D object.
561 * Unlike properties, the callback is not supported by {@link .clone()}, {@link .copy()} and {@link .toJSON()}.
562 * This callback is only supported in `WebGLRenderer` (not `WebGPURenderer`).
563 */
564 onBeforeRender(
565 renderer: WebGLRenderer,
566 scene: Scene,
567 camera: Camera,
568 geometry: BufferGeometry,
569 object: Object3D,
570 group: Group,
571 ): void;
572
573 /**
574 * An optional callback that is executed immediately before the shader program is compiled.
575 * This function is called with the shader source code as a parameter.
576 * Useful for the modification of built-in materials.
577 * Unlike properties, the callback is not supported by {@link .clone()}, {@link .copy()} and {@link .toJSON()}.
578 * This callback is only supported in `WebGLRenderer` (not `WebGPURenderer`).
579 * @param parameters WebGL program parameters
580 * @param renderer WebGLRenderer context that is initializing the material
581 */
582 onBeforeCompile(parameters: WebGLProgramParametersWithUniforms, renderer: WebGLRenderer): void;
583
584 /**
585 * In case onBeforeCompile is used, this callback can be used to identify values of settings used in onBeforeCompile, so three.js can reuse a cached shader or recompile the shader as needed.
586 */
587 customProgramCacheKey(): string;
588
589 /**
590 * Sets the properties based on the values.
591 * @param values A container with parameters.
592 */
593 setValues(values: MaterialParameters): void;
594
595 /**
596 * Convert the material to three.js JSON format.
597 * @param meta Object containing metadata such as textures or images for the material.
598 */
599 toJSON(meta?: JSONMeta): MaterialJSON;
600
601 /**
602 * Return a new material with the same parameters as this material.
603 */
604 clone(): this;
605
606 /**
607 * Copy the parameters from the passed material into this material.
608 * @param material
609 */
610 copy(material: Material): this;
611
612 /**
613 * Frees the GPU-related resources allocated by this instance. Call this method whenever this instance is no longer
614 * used in your app.
615 *
616 * Material textures must be disposed of by the dispose() method of {@link Texture}.
617 */
618 dispose(): void;
619
620 /**
621 * Specifies that the material needs to be updated, WebGL wise. Set it to true if you made changes that need to be reflected in WebGL.
622 * This property is automatically set to true when instancing a new material.
623 * @default false
624 */
625 set needsUpdate(value: boolean);
626
627 /**
628 * @deprecated onBuild() has been removed.
629 */
630 onBuild(object: Object3D, parameters: WebGLProgramParametersWithUniforms, renderer: WebGLRenderer): void;
631}