1 | import { Camera } from "../cameras/Camera.js";
|
2 | import {
|
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";
|
15 | import { BufferGeometry } from "../core/BufferGeometry.js";
|
16 | import { EventDispatcher } from "../core/EventDispatcher.js";
|
17 | import { JSONMeta, Object3D } from "../core/Object3D.js";
|
18 | import { Color, ColorRepresentation } from "../math/Color.js";
|
19 | import { Plane } from "../math/Plane.js";
|
20 | import { Group } from "../objects/Group.js";
|
21 | import { WebGLProgramParametersWithUniforms } from "../renderers/webgl/WebGLPrograms.js";
|
22 | import { WebGLRenderer } from "../renderers/WebGLRenderer.js";
|
23 | import { Scene } from "../scenes/Scene.js";
|
24 | import { EulerTuple, SourceJSON, TextureJSON, Vector2Tuple } from "../Three.js";
|
25 |
|
26 | export 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 |
|
74 | export 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 | */
|
236 | export class Material extends EventDispatcher<{ dispose: {} }> {
|
237 | constructor();
|
238 |
|
239 | /**
|
240 | * Read-only flag to check if a given object is of type { Material}.
|
241 | * This is a _constant_ value
|
242 | * `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 | }
|