EffectMaterial

Defined in: packages/three-flatland/src/materials/EffectMaterial.ts:104

Base material class with composable packed-buffer effect system.

Extends MeshBasicNodeMaterial and adds:

Packed vec4 effect buffers with bitmask enable flags
Effect registration with automatic slot assignment
Shader rebuilding with effect chain composition

Subclasses override _buildBaseColor() to provide their own base color/UV (e.g., Sprite2DMaterial provides sprite-specific UV flip, atlas, tint).

This base class can be extended for non-sprite materials that also need effects.

Extends

MeshBasicNodeMaterial

Extended by

Sprite2DMaterial

Constructors

Constructor

new EffectMaterial(options?): EffectMaterial

Defined in: packages/three-flatland/src/materials/EffectMaterial.ts:229

Parameters

options?

EffectMaterialOptions = {}

Returns

EffectMaterial

Overrides

MeshBasicNodeMaterial.constructor

Properties

allowOverride

allowOverride: boolean

Defined in: three.js/materials/Material:allowOverride

Whether it’s possible to override the material with Scene#overrideMaterial or not.

Default

true

Inherited from

MeshBasicNodeMaterial.allowOverride

alphaHash

alphaHash: boolean

Defined in: three.js/materials/Material:alphaHash

Enables alpha hashed transparency, an alternative to Material#transparent or Material#alphaTest. The material will not be rendered if opacity is lower than a random threshold. Randomization introduces some grain or noise, but approximates alpha blending without the associated problems of sorting. Using TAA can reduce the resulting noise.

Default

false

Inherited from

MeshBasicNodeMaterial.alphaHash

alphaMap

alphaMap: Texture <unknown, TextureEventMap > | null

Defined in: three.js/materials/MeshBasicMaterial:alphaMap

The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque).

Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.

alphaMap represents non-color data. Any texture assigned must have texture.colorSpace = NoColorSpace (default).

Default

null

Inherited from

MeshBasicNodeMaterial.alphaMap

alphaTestNode

alphaTestNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:alphaTestNode

The alpha test of node materials is by default inferred from the alphaTest property. This node property allows to overwrite the default and define the alpha test with a node instead.

If you don’t want to overwrite the alpha test but modify the existing value instead, use materialAlphaTest.

Default

null

Inherited from

MeshBasicNodeMaterial.alphaTestNode

alphaToCoverage

alphaToCoverage: boolean

Defined in: three.js/materials/Material:alphaToCoverage

Whether alpha to coverage should be enabled or not. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with antialias parameter set to true). Enabling this will smooth aliasing on clip plane edges and alphaTest-clipped edges.

Default

false

Inherited from

MeshBasicNodeMaterial.alphaToCoverage

aoMap

aoMap: Texture <unknown, TextureEventMap > | null

Defined in: three.js/materials/MeshBasicMaterial:aoMap

The red channel of this texture is used as the ambient occlusion map. Requires a second set of UVs.

aoMap represents non-color data. Any texture assigned must have texture.colorSpace = NoColorSpace (default).

Default

null

Inherited from

MeshBasicNodeMaterial.aoMap

aoMapIntensity

aoMapIntensity: number

Defined in: three.js/materials/MeshBasicMaterial:aoMapIntensity

Intensity of the ambient occlusion effect. Range is [0,1], where 0 disables ambient occlusion. Where intensity is 1 and the AO map’s red channel is also 1, ambient light is fully occluded on a surface.

Default

Inherited from

MeshBasicNodeMaterial.aoMapIntensity

aoNode

aoNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:aoNode

The lighting of node materials might be influenced by ambient occlusion. The default AO is inferred from an ambient occlusion map assigned to aoMap and the respective aoMapIntensity. This node property allows to overwrite the default and define the ambient occlusion with a custom node instead.

If you don’t want to overwrite the diffuse color but modify the existing values instead, use materialAO.

Default

null

Inherited from

MeshBasicNodeMaterial.aoNode

backdropAlphaNode

backdropAlphaNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:backdropAlphaNode

This node allows to modulate the influence of backdropNode to the outgoing light.

Default

null

Inherited from

MeshBasicNodeMaterial.backdropAlphaNode

backdropNode

backdropNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:backdropNode

This node can be used to implement a variety of filter-like effects. The idea is to store the current rendering into a texture e.g. via viewportSharedTexture(), use it to create an arbitrary effect and then assign the node composition to this property. Everything behind the object using this material will now be affected by a filter.

const material = new NodeMaterial()
material.transparent = true;

// everything behind the object will be monochromatic
material.backdropNode = saturation( viewportSharedTexture().rgb, 0 );

Backdrop computations are part of the lighting so only lit materials can use this property.

Default

null

Inherited from

MeshBasicNodeMaterial.backdropNode

blendAlpha

blendAlpha: number

Defined in: three.js/materials/Material:blendAlpha

Represents the alpha value of the constant blend color.

This property has only an effect when using custom blending with ConstantAlpha or OneMinusConstantAlpha.

Default

Inherited from

MeshBasicNodeMaterial.blendAlpha

blendColor

blendColor: Color

Defined in: three.js/materials/Material:blendColor

Represents the RGB values of the constant blend color.

This property has only an effect when using custom blending with ConstantColor or OneMinusConstantColor.

Default

(0,0,0)

Inherited from

MeshBasicNodeMaterial.blendColor

blendDst

blendDst: BlendingDstFactor

Defined in: three.js/materials/Material:blendDst

Defines the blending destination factor.

Default

OneMinusSrcAlphaFactor

Inherited from

MeshBasicNodeMaterial.blendDst

blendDstAlpha

blendDstAlpha: BlendingDstFactor | null

Defined in: three.js/materials/Material:blendDstAlpha

Defines the blending destination alpha factor.

Default

null

Inherited from

MeshBasicNodeMaterial.blendDstAlpha

blendEquation

blendEquation: BlendingEquation

Defined in: three.js/materials/Material:blendEquation

Defines the blending equation.

Default

AddEquation

Inherited from

MeshBasicNodeMaterial.blendEquation

blendEquationAlpha

blendEquationAlpha: BlendingEquation | null

Defined in: three.js/materials/Material:blendEquationAlpha

Defines the blending equation of the alpha channel.

Default

null

Inherited from

MeshBasicNodeMaterial.blendEquationAlpha

blending

blending: Blending

Defined in: three.js/materials/Material:blending

Defines the blending type of the material.

It must be set to CustomBlending if custom blending properties like Material#blendSrc, Material#blendDst or Material#blendEquation should have any effect.

Default

NormalBlending

Inherited from

MeshBasicNodeMaterial.blending

blendSrc

blendSrc: BlendingSrcFactor

Defined in: three.js/materials/Material:blendSrc

Defines the blending source factor.

Default

SrcAlphaFactor

Inherited from

MeshBasicNodeMaterial.blendSrc

blendSrcAlpha

blendSrcAlpha: BlendingSrcFactor | null

Defined in: three.js/materials/Material:blendSrcAlpha

Defines the blending source alpha factor.

Default

null

Inherited from

MeshBasicNodeMaterial.blendSrcAlpha

castShadowNode

castShadowNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:castShadowNode

This node can be used to influence how an object using this node material casts shadows. To apply a color to shadows, you can simply do:

material.castShadowNode = vec4( 1, 0, 0, 1 );

Which can be nice to fake colored shadows of semi-transparent objects. It is also common to use the property with Fn function so checks are performed per fragment.

materialCustomShadow.castShadowNode = Fn( () => {
  hash( vertexIndex ).greaterThan( 0.5 ).discard();
  return materialColor;
} )();

Default

null

Inherited from

MeshBasicNodeMaterial.castShadowNode

castShadowPositionNode

castShadowPositionNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:castShadowPositionNode

Allows to overwrite the geometry position used for shadow map projection which is by default positionLocal, the vertex position in local space.

Default

null

Inherited from

MeshBasicNodeMaterial.castShadowPositionNode

clipIntersection

clipIntersection: boolean

Defined in: three.js/materials/Material:clipIntersection

Changes the behavior of clipping planes so that only their intersection is clipped, rather than their union.

Default

false

Inherited from

MeshBasicNodeMaterial.clipIntersection

clippingPlanes

clippingPlanes: Plane [] | null

Defined in: three.js/materials/Material:clippingPlanes

User-defined clipping planes specified as THREE.Plane objects in world space. These planes apply to the objects this material is attached to. Points in space whose signed distance to the plane is negative are clipped (not rendered). This requires WebGLRenderer#localClippingEnabled to be true.

Default

null

Inherited from

MeshBasicNodeMaterial.clippingPlanes

clipShadows

clipShadows: boolean

Defined in: three.js/materials/Material:clipShadows

Defines whether to clip shadows according to the clipping planes specified on this material.

Default

false

Inherited from

MeshBasicNodeMaterial.clipShadows

color

color: Color

Defined in: three.js/materials/MeshBasicMaterial:color

Color of the material.

Default

(1,1,1)

Inherited from

MeshBasicNodeMaterial.color

colorNode

colorNode: Node <"vec3"> | Node <"float"> | Node <"vec4"> | Node <"vec2"> | Node <"color"> | null

Defined in: three.js/materials/nodes/NodeMaterial:colorNode

The diffuse color of node materials is by default inferred from the color and map properties. This node property allows to overwrite the default and define the diffuse color with a node instead.

material.colorNode = color( 0xff0000 ); // define red color

If you don’t want to overwrite the diffuse color but modify the existing values instead, use materialColor.

material.colorNode = materialColor.mul( color( 0xff0000 ) ); // give diffuse colors a red tint

Default

null

Inherited from

MeshBasicNodeMaterial.colorNode

colorWrite

colorWrite: boolean

Defined in: three.js/materials/Material:colorWrite

Whether to render the material’s color.

This can be used in conjunction with Object3D#renderOder to create invisible objects that occlude other objects.

Default

true

Inherited from

MeshBasicNodeMaterial.colorWrite

combine

combine: Combine

Defined in: three.js/materials/MeshBasicMaterial:combine

How to combine the result of the surface’s color with the environment map, if any.

When set to MixOperation, the MeshBasicMaterial#reflectivity is used to blend between the two colors.

Default

MultiplyOperation

Inherited from

MeshBasicNodeMaterial.combine

contextNode

contextNode: ContextNode <unknown> | null

Defined in: three.js/materials/nodes/NodeMaterial:contextNode

This node can be used as a global context management component for this material.

Default

null

Inherited from

MeshBasicNodeMaterial.contextNode

defines?

optional defines?: Record<string, unknown>

Defined in: three.js/materials/Material:defines

Inherited from

MeshBasicNodeMaterial.defines

depthFunc

depthFunc: DepthModes

Defined in: three.js/materials/Material:depthFunc

Defines the depth function.

Default

LessEqualDepth

Inherited from

MeshBasicNodeMaterial.depthFunc

depthNode

depthNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:depthNode

Allows to overwrite depth values in the fragment shader.

Default

null

Inherited from

MeshBasicNodeMaterial.depthNode

depthTest

depthTest: boolean

Defined in: three.js/materials/Material:depthTest

Whether to have depth test enabled when rendering this material. When the depth test is disabled, the depth write will also be implicitly disabled.

Default

true

Inherited from

MeshBasicNodeMaterial.depthTest

depthWrite

depthWrite: boolean

Defined in: three.js/materials/Material:depthWrite

Whether rendering this material has any effect on the depth buffer.

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.

Default

true

Inherited from

MeshBasicNodeMaterial.depthWrite

dithering

dithering: boolean

Defined in: three.js/materials/Material:dithering

Whether to apply dithering to the color to remove the appearance of banding.

Default

false

Inherited from

MeshBasicNodeMaterial.dithering

envMap

envMap: Texture <unknown, TextureEventMap > | null

Defined in: three.js/materials/MeshBasicMaterial:envMap

The environment map.

envMap represents luminance data, and the texture must be assigned a Texture#colorSpace . Most envMap textures set texture.colorSpace = LinearSRGBColorSpace and use float-type formats such as .exr or .hdr.

Default

null

Inherited from

MeshBasicNodeMaterial.envMap

envMapRotation

envMapRotation: Euler

Defined in: three.js/materials/MeshBasicMaterial:envMapRotation

The rotation of the environment map in radians.

Default

(0,0,0)

Inherited from

MeshBasicNodeMaterial.envMapRotation

envNode

envNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:envNode

The environment of node materials can be defined by an environment map assigned to the envMap property or by Scene.environment if the node material is a PBR material. This node property allows to overwrite the default behavior and define the environment with a custom node.

material.envNode = pmremTexture( renderTarget.texture );

Default

null

Inherited from

MeshBasicNodeMaterial.envNode

fog

fog: boolean

Defined in: three.js/materials/nodes/NodeMaterial:fog

Whether this material is affected by fog or not.

Default

true

Inherited from

MeshBasicNodeMaterial.fog

forceSinglePass

forceSinglePass: boolean

Defined in: three.js/materials/Material:forceSinglePass

Whether double-sided, transparent objects should be rendered with a single pass or not.

The engine renders double-sided, transparent objects with two draw calls (back faces first, then front faces) to mitigate transparency artifacts. There are scenarios however where this approach produces no quality gains but still doubles draw calls e.g. when rendering flat vegetation like grass sprites. In these cases, set the forceSinglePass flag to true to disable the two pass rendering to avoid performance issues.

Default

false

Inherited from

MeshBasicNodeMaterial.forceSinglePass

fragmentNode

fragmentNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:fragmentNode

This node property can be used if you need complete freedom in implementing the fragment shader. Assigning a node will replace the built-in material logic used in the fragment stage.

Default

null

Inherited from

MeshBasicNodeMaterial.fragmentNode

geometryNode

geometryNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:geometryNode

This node property is intended for logic which modifies geometry data once or per animation step. Apps usually place such logic randomly in initialization routines or in the animation loop. geometryNode is intended as a dedicated API so there is an intended spot where geometry modifications can be implemented.

The idea is to assign a Fn definition that holds the geometry modification logic. A typical example would be a GPU based particle system that provides a node material for usage on app level. The particle simulation would be implemented as compute shaders and managed inside a Fn function. This function is eventually assigned to geometryNode.

Default

null

Inherited from

MeshBasicNodeMaterial.geometryNode

isMaterial

readonly isMaterial: boolean

Defined in: three.js/materials/Material:isMaterial

This flag can be used for type testing.

Default

true

Inherited from

MeshBasicNodeMaterial.isMaterial

isMeshBasicNodeMaterial

readonly isMeshBasicNodeMaterial: boolean

Defined in: three.js/materials/nodes/MeshBasicNodeMaterial:isMeshBasicNodeMaterial

This flag can be used for type testing.

Default

true

Inherited from

MeshBasicNodeMaterial.isMeshBasicNodeMaterial

isNodeMaterial

readonly isNodeMaterial: boolean

Defined in: three.js/materials/nodes/NodeMaterial:isNodeMaterial

This flag can be used for type testing.

Default

true

Inherited from

MeshBasicNodeMaterial.isNodeMaterial

lightMap

lightMap: Texture <unknown, TextureEventMap > | null

Defined in: three.js/materials/MeshBasicMaterial:lightMap

The light map. Requires a second set of UVs.

lightMap represents pre-baked illuminance data, and the texture must be assigned a Texture#colorSpace . Most lightMap textures set texture.colorSpace = LinearSRGBColorSpace and use float-type formats such as .exr or .hdr.

Default

null

Inherited from

MeshBasicNodeMaterial.lightMap

lightMapIntensity

lightMapIntensity: number

Defined in: three.js/materials/MeshBasicMaterial:lightMapIntensity

Intensity of the baked light.

Default

Inherited from

MeshBasicNodeMaterial.lightMapIntensity

lights

lights: boolean

Defined in: three.js/materials/nodes/NodeMaterial:lights

Whether this material is affected by lights or not.

Default

false

Inherited from

MeshBasicNodeMaterial.lights

lightsNode

lightsNode: LightsNode | null

Defined in: three.js/materials/nodes/NodeMaterial:lightsNode

Node materials which set their lights property to true are affected by all lights of the scene. Sometimes selective lighting is wanted which means only some lights in the scene affect a material. This can be achieved by creating an instance of LightsNode with a list of selective lights and assign the node to this property.

const customLightsNode = lights( [ light1, light2 ] );
material.lightsNode = customLightsNode;

Default

null

Inherited from

MeshBasicNodeMaterial.lightsNode

map

map: Texture <unknown, TextureEventMap > | null

Defined in: three.js/materials/MeshBasicMaterial:map

The color map. May optionally include an alpha channel, typically combined with Material#transparent or Material#alphaTest. The texture map color is modulated by the diffuse color.

map represents color data, and the texture must be assigned a Texture#colorSpace . Most map textures set texture.colorSpace = SRGBColorSpace.

Default

null

Inherited from

MeshBasicNodeMaterial.map

maskNode

maskNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:maskNode

Discards the fragment if the mask value is false.

Default

null

Inherited from

MeshBasicNodeMaterial.maskNode

maskShadowNode

maskShadowNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:maskShadowNode

This node can be used to implement a shadow mask for the material.

Default

null

Inherited from

MeshBasicNodeMaterial.maskShadowNode

mrtNode

mrtNode: MRTNode | null

Defined in: three.js/materials/nodes/NodeMaterial:mrtNode

MRT configuration is done on renderer or pass level. This node allows to overwrite what values are written into MRT targets on material level. This can be useful for implementing selective FX features that should only affect specific objects.

Default

null

Inherited from

MeshBasicNodeMaterial.mrtNode

name

name: string

Defined in: three.js/materials/Material:name

The name of the material.

Inherited from

MeshBasicNodeMaterial.name

normalNode

normalNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:normalNode

The normals of node materials are by default inferred from the normalMap/normalScale or bumpMap/bumpScale properties. This node property allows to overwrite the default and define the normals with a node instead.

If you don’t want to overwrite the normals but modify the existing values instead, use materialNormal.

Default

null

Inherited from

MeshBasicNodeMaterial.normalNode

opacity

opacity: number

Defined in: three.js/materials/Material:opacity

Defines how transparent the material is. A value of 0.0 indicates fully transparent, 1.0 is fully opaque.

If the Material#transparent is not set to true, the material will remain fully opaque and this value will only affect its color.

Default

Inherited from

MeshBasicNodeMaterial.opacity

opacityNode

opacityNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:opacityNode

The opacity of node materials is by default inferred from the opacity and alphaMap properties. This node property allows to overwrite the default and define the opacity with a node instead.

If you don’t want to overwrite the opacity but modify the existing value instead, use materialOpacity.

Default

null

Inherited from

MeshBasicNodeMaterial.opacityNode

outputNode

outputNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:outputNode

This node can be used to define the final output of the material.

TODO: Explain the differences to fragmentNode.

Default

null

Inherited from

MeshBasicNodeMaterial.outputNode

polygonOffset

polygonOffset: boolean

Defined in: three.js/materials/Material:polygonOffset

Whether to use polygon offset or not. When enabled, each fragment’s depth value will be offset after it is interpolated from the depth values of the appropriate vertices. The offset is added before the depth test is performed and before the value is written into the depth buffer.

Can be useful for rendering hidden-line images, for applying decals to surfaces, and for rendering solids with highlighted edges.

Default

false

Inherited from

MeshBasicNodeMaterial.polygonOffset

polygonOffsetFactor

polygonOffsetFactor: number

Defined in: three.js/materials/Material:polygonOffsetFactor

Specifies a scale factor that is used to create a variable depth offset for each polygon.

Default

Inherited from

MeshBasicNodeMaterial.polygonOffsetFactor

polygonOffsetUnits

polygonOffsetUnits: number

Defined in: three.js/materials/Material:polygonOffsetUnits

Is multiplied by an implementation-specific value to create a constant depth offset.

Default

Inherited from

MeshBasicNodeMaterial.polygonOffsetUnits

positionNode

positionNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:positionNode

The local vertex positions are computed based on multiple factors like the attribute data, morphing or skinning. This node property allows to overwrite the default and define local vertex positions with nodes instead.

If you don’t want to overwrite the vertex positions but modify the existing values instead, use positionLocal.

material.positionNode = positionLocal.add( displace );

Default

null

Inherited from

MeshBasicNodeMaterial.positionNode

precision

precision: "highp" | "mediump" | "lowp" | null

Defined in: three.js/materials/Material:precision

Override the renderer’s default precision for this material.

Default

null

Inherited from

MeshBasicNodeMaterial.precision

premultipliedAlpha

premultipliedAlpha: boolean

Defined in: three.js/materials/Material:premultipliedAlpha

Whether to premultiply the alpha (transparency) value.

Default

false

Inherited from

MeshBasicNodeMaterial.premultipliedAlpha

receivedShadowNode

receivedShadowNode: (() => Node ) | null

Defined in: three.js/materials/nodes/NodeMaterial:receivedShadowNode

This node can be used to influence how an object using this node material receive shadows.

const totalShadows = float( 1 ).toVar();
material.receivedShadowNode = Fn( ( [ shadow ] ) => {
  totalShadows.mulAssign( shadow );
  //return float( 1 ); // bypass received shadows
  return shadow.mix( color( 0xff0000 ), 1 ); // modify shadow color
} );

@default null

#### Inherited from

`MeshBasicNodeMaterial.receivedShadowNode`

***

### receivedShadowPositionNode

> **receivedShadowPositionNode**: [`Node`](https://threejs.org/docs/) \| `null`

Defined in: [three.js/materials/nodes/NodeMaterial:receivedShadowPositionNode](https://threejs.org/docs/#api/en/materials/nodes/NodeMaterial.receivedShadowPositionNode)

Allows to overwrite the position used for shadow map rendering which
is by default positionWorld, the vertex position
in world space.

#### Default

```ts
null

Inherited from

MeshBasicNodeMaterial.receivedShadowPositionNode

reflectivity

reflectivity: number

Defined in: three.js/materials/MeshBasicMaterial:reflectivity

How much the environment map affects the surface. The valid range is between 0 (no reflections) and 1 (full reflections).

Default

Inherited from

MeshBasicNodeMaterial.reflectivity

refractionRatio

refractionRatio: number

Defined in: three.js/materials/MeshBasicMaterial:refractionRatio

The index of refraction (IOR) of air (approximately 1) divided by the index of refraction of the material. It is used with environment mapping modes CubeRefractionMapping and EquirectangularRefractionMapping. The refraction ratio should not exceed 1.

Default

0.98

Inherited from

MeshBasicNodeMaterial.refractionRatio

shadowSide

shadowSide: Side | null

Defined in: three.js/materials/Material:shadowSide

Defines which side of faces cast shadows. If null, the side casting shadows is determined as follows:

When Material#side is set to FrontSide, the back side cast shadows.
When Material#side is set to BackSide, the front side cast shadows.
When Material#side is set to DoubleSide, both sides cast shadows.

Default

null

Inherited from

MeshBasicNodeMaterial.shadowSide

side

side: Side

Defined in: three.js/materials/Material:side

Defines which side of faces will be rendered - front, back or both.

Default

FrontSide

Inherited from

MeshBasicNodeMaterial.side

specularMap

specularMap: Texture <unknown, TextureEventMap > | null

Defined in: three.js/materials/MeshBasicMaterial:specularMap

Specular map used by the material.

specularMap represents color data, and the texture must be assigned a Texture#colorSpace . Most specularMap textures set texture.colorSpace = SRGBColorSpace.

Default

null

Inherited from

MeshBasicNodeMaterial.specularMap

stencilFail

stencilFail: StencilOp

Defined in: three.js/materials/Material:stencilFail

Which stencil operation to perform when the comparison function returns false.

Default

KeepStencilOp

Inherited from

MeshBasicNodeMaterial.stencilFail

stencilFunc

stencilFunc: StencilFunc

Defined in: three.js/materials/Material:stencilFunc

The stencil comparison function to use.

Default

AlwaysStencilFunc

Inherited from

MeshBasicNodeMaterial.stencilFunc

stencilFuncMask

stencilFuncMask: number

Defined in: three.js/materials/Material:stencilFuncMask

The bit mask to use when comparing against the stencil buffer.

Default

0xff

Inherited from

MeshBasicNodeMaterial.stencilFuncMask

stencilRef

stencilRef: number

Defined in: three.js/materials/Material:stencilRef

The value to use when performing stencil comparisons or stencil operations.

Default

Inherited from

MeshBasicNodeMaterial.stencilRef

stencilWrite

stencilWrite: boolean

Defined in: three.js/materials/Material:stencilWrite

Whether stencil operations are performed against the stencil buffer. In order to perform writes or comparisons against the stencil buffer this value must be true.

Default

false

Inherited from

MeshBasicNodeMaterial.stencilWrite

stencilWriteMask

stencilWriteMask: number

Defined in: three.js/materials/Material:stencilWriteMask

The bit mask to use when writing to the stencil buffer.

Default

0xff

Inherited from

MeshBasicNodeMaterial.stencilWriteMask

stencilZFail

stencilZFail: StencilOp

Defined in: three.js/materials/Material:stencilZFail

Which stencil operation to perform when the comparison function returns true but the depth test fails.

Default

KeepStencilOp

Inherited from

MeshBasicNodeMaterial.stencilZFail

stencilZPass

stencilZPass: StencilOp

Defined in: three.js/materials/Material:stencilZPass

Which stencil operation to perform when the comparison function returns true and the depth test passes.

Default

KeepStencilOp

Inherited from

MeshBasicNodeMaterial.stencilZPass

toneMapped

toneMapped: boolean

Defined in: three.js/materials/Material:toneMapped

Defines whether this material is tone mapped according to the renderer’s tone mapping setting.

It is ignored when rendering to a render target or using post processing or when using WebGPURenderer. In all these cases, all materials are honored by tone mapping.

Default

true

Inherited from

MeshBasicNodeMaterial.toneMapped

transparent

transparent: boolean

Defined in: three.js/materials/Material:transparent

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.

When set to true, the extent to which the material is transparent is controlled by Material#opacity.

Default

false

Inherited from

MeshBasicNodeMaterial.transparent

type

type: string

Defined in: three.js/materials/Material:type

The type property is used for detecting the object type in context of serialization/deserialization.

Inherited from

MeshBasicNodeMaterial.type

userData

userData: Record<string, any>

Defined in: three.js/materials/Material:userData

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.

Inherited from

MeshBasicNodeMaterial.userData

uuid

readonly uuid: string

Defined in: three.js/materials/Material:uuid

The UUID of the material.

Inherited from

MeshBasicNodeMaterial.uuid

version

readonly version: number

Defined in: three.js/materials/Material:version

This starts at 0 and counts how many times Material#needsUpdate is set to true.

Default

Inherited from

MeshBasicNodeMaterial.version

vertexColors

vertexColors: boolean

Defined in: three.js/materials/Material:vertexColors

If set to true, vertex colors should be used.

The engine supports RGB and RGBA vertex colors depending on whether a three (RGB) or four (RGBA) component color buffer attribute is used.

Default

false

Inherited from

MeshBasicNodeMaterial.vertexColors

vertexNode

vertexNode: Node | null

Defined in: three.js/materials/nodes/NodeMaterial:vertexNode

This node property can be used if you need complete freedom in implementing the vertex shader. Assigning a node will replace the built-in material logic used in the vertex stage.

Default

null

Inherited from

MeshBasicNodeMaterial.vertexNode

visible

visible: boolean

Defined in: three.js/materials/Material:visible

Defines whether 3D objects using this material are visible.

Default

true

Inherited from

MeshBasicNodeMaterial.visible

wireframe

wireframe: boolean

Defined in: three.js/materials/MeshBasicMaterial:wireframe

Renders the geometry as a wireframe.

Default

false

Inherited from

MeshBasicNodeMaterial.wireframe

wireframeLinecap

wireframeLinecap: "round" | "bevel" | "miter"

Defined in: three.js/materials/MeshBasicMaterial:wireframeLinecap

Defines appearance of wireframe ends.

Can only be used with SVGRenderer.

Default

'round'

Inherited from

MeshBasicNodeMaterial.wireframeLinecap

wireframeLinejoin

wireframeLinejoin: "round" | "bevel" | "miter"

Defined in: three.js/materials/MeshBasicMaterial:wireframeLinejoin

Defines appearance of wireframe joints.

Can only be used with SVGRenderer.

Default

'round'

Inherited from

MeshBasicNodeMaterial.wireframeLinejoin

wireframeLinewidth

wireframeLinewidth: number

Defined in: three.js/materials/MeshBasicMaterial:wireframeLinewidth

Controls the thickness of the wireframe.

Can only be used with SVGRenderer.

Default

Inherited from

MeshBasicNodeMaterial.wireframeLinewidth

MAX_EFFECT_FLOATS

readonly static MAX_EFFECT_FLOATS: 24 = 24

Defined in: packages/three-flatland/src/materials/EffectMaterial.ts:154

Maximum total effect-data floats allowed across all registered effects on this material. WebGPU allows 8 vertex-buffer bindings per pipeline; SpriteBatch uses 2 fixed bindings (instanceMatrix + interleaved core — the synth-quad geometry’s position/uv attributes exist for user TSL but cost a binding only when a material’s nodes actually read them), leaving 6 for effectBuf0..5 × 4 floats = 24 floats. Exceeding this would force a 7th effectBuf binding which WebGPU rejects at pipeline creation with a cryptic “vertex buffer count exceeds maximum” error. registerEffect throws clearly when the cap would be exceeded.

A material whose custom TSL nodes call uv()/positionGeometry() consumes one or two additional vertex-buffer bindings beyond the 2 above, reducing headroom below 24 floats for that material.

Accessors

alphaTest

Get Signature

get alphaTest(): number

Defined in: three.js/materials/Material:alphaTest

Sets the alpha value to be used when running an alpha test. The material will not be rendered if the opacity is lower than this value.

Default

Returns

number

Set Signature

set alphaTest(value): void

Defined in: three.js/materials/Material:alphaTest

Parameters

value

number

Returns

void

Inherited from

MeshBasicNodeMaterial.alphaTest

colorTransform

Get Signature

get colorTransform(): ColorTransformFn | null

Defined in: packages/three-flatland/src/materials/EffectMaterial.ts:251

Get the color transform function.

Returns

ColorTransformFn | null

Set Signature

set colorTransform(value): void

Defined in: packages/three-flatland/src/materials/EffectMaterial.ts:259

Set the color transform function. Triggers shader rebuild.

Parameters

value

ColorTransformFn | null

Returns

void

maxEffectFloats

Get Signature

get maxEffectFloats(): number

Defined in: packages/three-flatland/src/materials/EffectMaterial.ts:205

Per-instance effect-float cap for THIS material. Strategy-dependent in subclasses: tight-mesh geometry spends bindings on position/uv, shrinking the effect budget (see Sprite2DMaterial).

Returns

number

needsUpdate

Set Signature

set needsUpdate(value): void

Defined in: three.js/materials/Material:needsUpdate

Setting this property to true indicates the engine the material needs to be recompiled.

Default

false

Parameters

value

boolean

Returns

void

Inherited from

MeshBasicNodeMaterial.needsUpdate

requiredChannels

Get Signature

get requiredChannels(): ReadonlySet<string>

Defined in: packages/three-flatland/src/materials/EffectMaterial.ts:271

Get the required channels set.

Returns

ReadonlySet<string>

Set Signature

set requiredChannels(value): void

Defined in: packages/three-flatland/src/materials/EffectMaterial.ts:279

Set the required channels. Triggers shader rebuild when channels change.

Parameters

value

ReadonlySet<string>

Returns

void

type

Get Signature

get static type(): string

Defined in: three.js/materials/nodes/NodeMaterial:type

Returns

string

Inherited from

MeshBasicNodeMaterial.type

Methods

addEventListener()

addEventListener<T>(type, listener): void

Defined in: three.js/core/EventDispatcher:addEventListener

Adds a listener to an event type.

Type Parameters

T

T extends "dispose"

Parameters

type

T

The type of event to listen to.

listener

EventListener <MaterialEventMap [T], T, EffectMaterial>

The function that gets called when the event is fired.

Returns

void

Inherited from

MeshBasicNodeMaterial.addEventListener

build()

build(builder): void

Defined in: three.js/materials/nodes/NodeMaterial:build

Builds this material with the given node builder.

Parameters

builder

NodeBuilder

The current node builder.

Returns

void

Inherited from

MeshBasicNodeMaterial.build

clone()

clone(): this

Defined in: three.js/materials/Material:clone

Returns a new material with copied values from this instance.

Returns

this

A clone of this instance.

Inherited from

MeshBasicNodeMaterial.clone

copy()

copy(source): this

Defined in: three.js/materials/nodes/NodeMaterial:copy

Copies the common properties of the given material to this instance.

Parameters

source

Material

The material to copy.

Returns

this

A reference to this node material.

Inherited from

MeshBasicNodeMaterial.copy

customProgramCacheKey()

customProgramCacheKey(): string

Defined in: three.js/materials/Material:customProgramCacheKey

In case Material#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 for this material as needed.

This method can only be used when rendering with WebGLRenderer .

Returns

string

The custom program cache key.

Inherited from

MeshBasicNodeMaterial.customProgramCacheKey

dispatchEvent()

dispatchEvent<T>(event): void

Defined in: three.js/core/EventDispatcher:dispatchEvent

Fire an event type.

Type Parameters

T

T extends "dispose"

Parameters

event

BaseEvent <T> & MaterialEventMap [T]

The event that gets fired.

Returns

void

Inherited from

MeshBasicNodeMaterial.dispatchEvent

dispose()

dispose(): void

Defined in: three.js/materials/Material:dispose

Frees the GPU-related resources allocated by this instance. Call this method whenever this instance is no longer used in your app.

Returns

void

Fires

Material#dispose

Inherited from

MeshBasicNodeMaterial.dispose

fromJSON()

fromJSON(json, textures): this

Defined in: three.js/materials/Material:fromJSON

Deserializes the material from the given JSON.

Parameters

json

MaterialJSON

The JSON holding the serialized material.

textures

Record<string, Texture >

A dictionary holding textures referenced by the material.

Returns

this

A reference to this material.

Inherited from

MeshBasicNodeMaterial.fromJSON

getEffectFieldLocation()

getEffectFieldLocation(effectName, fieldName): { bufferName: string; componentIndex: number; size: number; } | undefined

Defined in: packages/three-flatland/src/materials/EffectMaterial.ts:785

Locate an effect’s schema field within the packed instance buffers. Returns the effectBufN attribute that contains this field, the float offset within a single instance’s 4-float slice of that buffer (0-3), and the field’s float width. Returns undefined if no registered effect declares the given field.

Used by instance-writing code (e.g. TileLayer, SpriteBatch) that needs to poke per-instance effect values directly without going through a MaterialEffect instance’s property setter.

Parameters

effectName

string

fieldName

string

Returns

{ bufferName: string; componentIndex: number; size: number; } | undefined

getEffects()

getEffects(): readonly typeof MaterialEffect[]

Defined in: packages/three-flatland/src/materials/EffectMaterial.ts:511

Get the list of registered effect classes.

Returns

readonly typeof MaterialEffect[]

getUsedEffectFloats()

getUsedEffectFloats(): number

Defined in: packages/three-flatland/src/materials/EffectMaterial.ts:213

Current per-instance effect-float usage (sum across all registered effects). Complements getMaxEffectFloats.

Returns

number

hasEffect()

hasEffect(effectClass): boolean

Defined in: packages/three-flatland/src/materials/EffectMaterial.ts:504

Check if an effect class is registered on this material.

Parameters

effectClass

typeof MaterialEffect

Returns

boolean

hasEventListener()

hasEventListener<T>(type, listener): boolean

Defined in: three.js/core/EventDispatcher:hasEventListener

Checks if listener is added to an event type.

Type Parameters

T

T extends "dispose"

Parameters

type

T

The type of event to listen to.

listener

EventListener <MaterialEventMap [T], T, EffectMaterial>

The function that gets called when the event is fired.

Returns

boolean

Inherited from

MeshBasicNodeMaterial.hasEventListener

onBeforeCompile()

onBeforeCompile(parameters, renderer): void

Defined in: three.js/materials/Material:onBeforeCompile

An optional callback that is executed immediately before the shader program is compiled. This function is called with the shader source code as a parameter. Useful for the modification of built-in materials.

This method can only be used when rendering with WebGLRenderer . The recommended approach when customizing materials is to use WebGPURenderer with the new Node Material system and TSL .

Parameters

parameters

WebGLProgramParametersWithUniforms

renderer

WebGLRenderer

A reference to the renderer.

Returns

void

Inherited from

MeshBasicNodeMaterial.onBeforeCompile

onBeforeRender()

onBeforeRender(renderer, scene, camera, geometry, object, group): void

Defined in: three.js/materials/Material:onBeforeRender

An optional callback that is executed immediately before the material is used to render a 3D object.

This method can only be used when rendering with WebGLRenderer .

Parameters

renderer

WebGLRenderer

The renderer.

scene

Scene

The scene.

camera

Camera

The camera that is used to render the scene.

geometry

BufferGeometry

The 3D object’s geometry.

object

Object3D

The 3D object.

group

Group

The geometry group data.

Returns

void

Inherited from

MeshBasicNodeMaterial.onBeforeRender

registerEffect()

registerEffect(effectClass, constants?): boolean

Defined in: packages/three-flatland/src/materials/EffectMaterial.ts:325

Register an effect class on this material. Assigns a bit index and packed buffer slots, then rebuilds the shader. If the effect is already registered, this is a no-op.

Parameters

effectClass

typeof MaterialEffect

The MaterialEffect subclass to register

constants?

Record<string, unknown>

Optional constants from the effect instance (for provider effects)

Returns

boolean

Whether the buffer tier changed (requiring batch rebuild).

removeEventListener()

removeEventListener<T>(type, listener): void

Defined in: three.js/core/EventDispatcher:removeEventListener

Removes a listener from an event type.

Type Parameters

T

T extends "dispose"

Parameters

type

T

The type of the listener that gets removed.

listener

EventListener <MaterialEventMap [T], T, EffectMaterial>

The listener function that gets removed.

Returns

void

Inherited from

MeshBasicNodeMaterial.removeEventListener

setDefaultValues()

setDefaultValues(material): void

Defined in: three.js/materials/nodes/NodeMaterial:setDefaultValues

Most classic material types have a node pendant e.g. for MeshBasicMaterial there is MeshBasicNodeMaterial. This utility method is intended for defining all material properties of the classic type in the node type.

Parameters

material

Material

The material to copy properties with their values to this node material.

Returns

void

Inherited from

MeshBasicNodeMaterial.setDefaultValues

setup()

setup(builder): void

Defined in: three.js/materials/nodes/NodeMaterial:setup

Setups the vertex and fragment stage of this node material.

Parameters

builder

NodeBuilder

The current node builder.

Returns

void

Inherited from

MeshBasicNodeMaterial.setup

setupAmbientOcclusion()

setupAmbientOcclusion(builder): Node

Defined in: three.js/materials/nodes/NodeMaterial:setupAmbientOcclusion

Setups the ambient occlusion node from the material.

Parameters

builder

NodeBuilder

The current node builder.

Returns

Node

The ambient occlusion node.

Inherited from

MeshBasicNodeMaterial.setupAmbientOcclusion

setupClipping()

setupClipping(builder): ClippingNode

Defined in: three.js/materials/nodes/NodeMaterial:setupClipping

Setups the clipping node.

Parameters

builder

NodeBuilder

The current node builder.

Returns

ClippingNode

The clipping node.

Inherited from

MeshBasicNodeMaterial.setupClipping

setupDepth()

setupDepth(builder): void

Defined in: three.js/materials/nodes/NodeMaterial:setupDepth

Setups the depth of this material.

Parameters

builder

NodeBuilder

The current node builder.

Returns

void

Inherited from

MeshBasicNodeMaterial.setupDepth

setupDiffuseColor()

setupDiffuseColor(builder): void

Defined in: three.js/materials/nodes/NodeMaterial:setupDiffuseColor

Setups the computation of the material’s diffuse color.

Parameters

builder

NodeBuilder

The current node builder.

Returns

void

Inherited from

MeshBasicNodeMaterial.setupDiffuseColor

setupEnvironment()

setupEnvironment(builder): BasicEnvironmentNode | null

Defined in: three.js/materials/nodes/MeshBasicNodeMaterial:setupEnvironment

Overwritten since this type of material uses BasicEnvironmentNode to implement the default environment mapping.

Parameters

builder

NodeBuilder

The current node builder.

Returns

BasicEnvironmentNode | null

The environment node.

Inherited from

MeshBasicNodeMaterial.setupEnvironment

setupFog()

setupFog(builder, outputNode): Node

Defined in: three.js/materials/nodes/NodeMaterial:setupFog

Setup the fog.

Parameters

builder

NodeBuilder

The current node builder.

outputNode

Node

The existing output node.

Returns

Node

The output node.

Inherited from

MeshBasicNodeMaterial.setupFog

setupHardwareClipping()

setupHardwareClipping(builder): void

Defined in: three.js/materials/nodes/NodeMaterial:setupHardwareClipping

Setups the hardware clipping if available on the current device.

Parameters

builder

NodeBuilder

The current node builder.

Returns

void

Inherited from

MeshBasicNodeMaterial.setupHardwareClipping

setupLighting()

setupLighting(builder): Node

Defined in: three.js/materials/nodes/NodeMaterial:setupLighting

Setups the outgoing light node.

Parameters

builder

NodeBuilder

The current node builder.

Returns

Node

The outgoing light node.

Inherited from

MeshBasicNodeMaterial.setupLighting

setupLightingModel()

setupLightingModel(): BasicLightingModel

Defined in: three.js/materials/nodes/MeshBasicNodeMaterial:setupLightingModel

Setups the lighting model.

Returns

BasicLightingModel

The lighting model.

Inherited from

MeshBasicNodeMaterial.setupLightingModel

setupLightMap()

setupLightMap(builder): Node

Defined in: three.js/materials/nodes/NodeMaterial:setupLightMap

Setups the light map node from the material.

Parameters

builder

NodeBuilder

The current node builder.

Returns

Node

The light map node.

Inherited from

MeshBasicNodeMaterial.setupLightMap

setupMaterialLightings()

setupMaterialLightings(builder): LightingNode []

Defined in: three.js/materials/nodes/NodeMaterial:setupMaterialLightings

Setups the lights node based on the scene, environment and material.

Parameters

builder

NodeBuilder

The current node builder.

Returns

LightingNode []

The lights node.

Inherited from

MeshBasicNodeMaterial.setupMaterialLightings

setupModelViewProjection()

setupModelViewProjection(): Node

Defined in: three.js/materials/nodes/NodeMaterial:setupModelViewProjection

Setups the position in clip space.

Returns

Node

The position in view space.

Inherited from

MeshBasicNodeMaterial.setupModelViewProjection

setupNormal()

setupNormal(): Node

Defined in: three.js/materials/nodes/NodeMaterial:setupNormal

Setups the normal node from the material.

Returns

Node

The normal node.

Inherited from

MeshBasicNodeMaterial.setupNormal

setupObserver()

setupObserver(builder): NodeMaterialObserver

Defined in: three.js/materials/nodes/NodeMaterial:setupObserver

Setups a node material observer with the given builder.

Parameters

builder

NodeBuilder

The current node builder.

Returns

NodeMaterialObserver

The node material observer.

Inherited from

MeshBasicNodeMaterial.setupObserver

setupOutgoingLight()

setupOutgoingLight(): Node

Defined in: three.js/materials/nodes/NodeMaterial:setupOutgoingLight

Setups the outgoing light node variable

Returns

Node

The outgoing light node.

Inherited from

MeshBasicNodeMaterial.setupOutgoingLight

setupOutput()

setupOutput(builder, outputNode): Node

Defined in: three.js/materials/nodes/NodeMaterial:setupOutput

Setups the output node.

This method can be implemented by derived materials to extend the functionality of the material’s output or replace it altogether.

class ColoredShadowMaterial extends MeshPhongNodeMaterial {
  constructor( parameters ) {
    super( parameters );
    this._shadeColor = uniform( new Color( parameters.shadeColor ?? 0xff0000 ) );
  }

  setupOutput( builder, outputNode ) {
     // Modify the native output of the MeshPhongNodeMaterial fragment shader
    const brightness = min( outputNode.r, 1.0 );
    const mixedColor = mix( this._shadeColor, diffuseColor.rgb, brightness );
     // Return new output back into NodeMaterial flow
    return super.setupOutput( builder, vec4( mixedColor, outputNode.a ) );
  }
}