ShaderMaterial

The ShaderMaterial object has the necessary methods to pass data from your scene to the Vertex and Fragment Shaders and returns a material that can be applied to any mesh.

This returned material effects how the mesh will look based on the code in the shaders.

see

https://doc.babylonjs.com/how_to/shader_material

Hierarchy

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Find examples in Playground
  • Instantiate a new shader material. The ShaderMaterial object has the necessary methods to pass data from your scene to the Vertex and Fragment Shaders and returns a material that can be applied to any mesh. This returned material effects how the mesh will look based on the code in the shaders.

    see

    https://doc.babylonjs.com/how_to/shader_material

    Parameters

    • name: string

      Define the name of the material in the scene

    • scene: Scene

      Define the scene the material belongs to

    • shaderPath: any

      Defines the route to the shader code in one of three ways:

      • object: { vertex: "custom", fragment: "custom" }, used with Effect.ShadersStore["customVertexShader"] and Effect.ShadersStore["customFragmentShader"]
      • object: { vertexElement: "vertexShaderCode", fragmentElement: "fragmentShaderCode" }, used with shader code in script tags
      • object: { vertexSource: "vertex shader code string", fragmentSource: "fragment shader code string" } using with strings containing the shaders code
      • string: "./COMMON_NAME", used with external files COMMON_NAME.vertex.fx and COMMON_NAME.fragment.fx in index.html folder.
    • Optional options: Partial<IShaderMaterialOptions>

      Define the options used to create the shader

    Returns ShaderMaterial

Properties

allowShaderHotSwapping

Find examples in Playground
allowShaderHotSwapping: boolean

Gets or sets a boolean indicating that the material is allowed (if supported) to do shader hot swapping. This means that the material can keep using a previous shader while a new one is being compiled. This is mostly used when shader parallel compilation is supported (true by default)

animations

Find examples in Playground
animations: Nullable<Array<Animation>>

Stores the animations for the material

checkReadyOnEveryCall

Find examples in Playground
checkReadyOnEveryCall: boolean

Specifies if the ready state should be checked on each call

checkReadyOnlyOnce

Find examples in Playground
checkReadyOnlyOnce: boolean

Specifies if the ready state should be checked once

customShaderNameResolve

Find examples in Playground
customShaderNameResolve: function

Custom callback helping to override the default shader used in the material.

Type declaration

depthFunction

Find examples in Playground
depthFunction: number

Specifies the depth function that should be used. 0 means the default engine function

disableColorWrite

Find examples in Playground
disableColorWrite: boolean

Specifies if color writing should be disabled

disableDepthWrite

Find examples in Playground
disableDepthWrite: boolean

Specifies if depth writing should be disabled

doNotSerialize

Find examples in Playground
doNotSerialize: boolean

Specifies if the material should be serialized

forceDepthWrite

Find examples in Playground
forceDepthWrite: boolean

Specifies if depth writing should be forced

getRenderTargetTextures

Find examples in Playground
getRenderTargetTextures: Nullable<function>

Callback triggered to get the render target textures

id

Find examples in Playground
id: string

The ID of the material

inspectableCustomProperties

Find examples in Playground
inspectableCustomProperties: IInspectable[]

List of inspectable custom properties (used by the Inspector)

see

https://doc.babylonjs.com/how_to/debug_layer#extensibility

metadata

Find examples in Playground
metadata: any

Gets or sets user defined metadata

name

Find examples in Playground
name: string

The name of the material

onCompiled

Find examples in Playground
onCompiled: Nullable<function>

Callback triggered when the material is compiled

onDisposeObservable

Find examples in Playground
onDisposeObservable: Observable<Material>

An event triggered when the material is disposed

onError

Find examples in Playground
onError: Nullable<function>

Callback triggered when an error occurs

pointSize

Find examples in Playground
pointSize: number

Stores the size of points

reservedDataStore

Find examples in Playground
reservedDataStore: any

For internal use only. Please do not use.

separateCullingPass

Find examples in Playground
separateCullingPass: boolean

Specifies if there should be a separate pass for culling

shadowDepthWrapper

Find examples in Playground
shadowDepthWrapper: Nullable<ShadowDepthWrapper>

Custom shadow depth material to use for shadow rendering instead of the in-built one

sideOrientation

Find examples in Playground
sideOrientation: number

Stores the value for side orientation

snippetId

Find examples in Playground
snippetId: string

Snippet ID if the material was created from the snippet server

state

Find examples in Playground
state: string

The state of the material

uniqueId

Find examples in Playground
uniqueId: number

Gets or sets the unique id of the material

zOffset

Find examples in Playground
zOffset: number

Stores the z offset value

Static Readonly AllDirtyFlag

Find examples in Playground
AllDirtyFlag: number

The all dirty flag value

Static Readonly AttributesDirtyFlag

Find examples in Playground
AttributesDirtyFlag: number

The dirty attribute flag value

Static Readonly ClockWiseSideOrientation

Find examples in Playground
ClockWiseSideOrientation: number

Stores the clock-wise side orientation

Static Readonly CounterClockWiseSideOrientation

Find examples in Playground
CounterClockWiseSideOrientation: number

Stores the counter clock-wise side orientation

Static Readonly FresnelDirtyFlag

Find examples in Playground
FresnelDirtyFlag: number

The dirty fresnel flag value

Static Readonly LightDirtyFlag

Find examples in Playground
LightDirtyFlag: number

The dirty light flag value

Static Readonly LineListDrawMode

Find examples in Playground
LineListDrawMode: number

Returns the line list draw mode

Static Readonly LineLoopDrawMode

Find examples in Playground
LineLoopDrawMode: number

Returns the line loop draw mode

Static Readonly LineStripDrawMode

Find examples in Playground
LineStripDrawMode: number

Returns the line strip draw mode

Static Readonly MATERIAL_ALPHABLEND

Find examples in Playground
MATERIAL_ALPHABLEND: number

MaterialTransparencyMode: Pixels are blended (according to the alpha mode) with the already drawn pixels in the current frame buffer.

Static Readonly MATERIAL_ALPHATEST

Find examples in Playground
MATERIAL_ALPHATEST: number

MaterialTransparencyMode: Alpha Test mode, pixel are discarded below a certain threshold defined by the alpha cutoff value.

Static Readonly MATERIAL_ALPHATESTANDBLEND

Find examples in Playground
MATERIAL_ALPHATESTANDBLEND: number

MaterialTransparencyMode: Pixels are blended (according to the alpha mode) with the already drawn pixels in the current frame buffer. They are also discarded below the alpha cutoff threshold to improve performances.

Static Readonly MATERIAL_NORMALBLENDMETHOD_RNM

Find examples in Playground
MATERIAL_NORMALBLENDMETHOD_RNM: number

The Reoriented Normal Mapping method is used to blend normals. Details of the algorithm can be found here: https://blog.selfshadow.com/publications/blending-in-detail/

Static Readonly MATERIAL_NORMALBLENDMETHOD_WHITEOUT

Find examples in Playground
MATERIAL_NORMALBLENDMETHOD_WHITEOUT: number

The Whiteout method is used to blend normals. Details of the algorithm can be found here: https://blog.selfshadow.com/publications/blending-in-detail/

Static Readonly MATERIAL_OPAQUE

Find examples in Playground
MATERIAL_OPAQUE: number

MaterialTransparencyMode: No transparency mode, Alpha channel is not use.

Static Readonly MiscDirtyFlag

Find examples in Playground
MiscDirtyFlag: number

The dirty misc flag value

Static Readonly PointFillMode

Find examples in Playground
PointFillMode: number

Returns the point fill mode

Static Readonly PointListDrawMode

Find examples in Playground
PointListDrawMode: number

Returns the point list draw mode

Static SnippetUrl

Find examples in Playground
SnippetUrl: string

Define the Url to load snippets

Static Readonly TextureDirtyFlag

Find examples in Playground
TextureDirtyFlag: number

The dirty texture flag value

Static Readonly TriangleFanDrawMode

Find examples in Playground
TriangleFanDrawMode: number

Returns the triangle fan draw mode

Static Readonly TriangleFillMode

Find examples in Playground
TriangleFillMode: number

Returns the triangle fill mode

Static Readonly TriangleStripDrawMode

Find examples in Playground
TriangleStripDrawMode: number

Returns the triangle strip draw mode

Static Readonly WireFrameFillMode

Find examples in Playground
WireFrameFillMode: number

Returns the wireframe mode

Accessors

alpha

Find examples in Playground
  • get alpha(): number
  • set alpha(value: number): any
  • Gets the alpha value of the material

    Returns number

  • Sets the alpha value of the material

    Parameters

    • value: number

    Returns any

alphaMode

Find examples in Playground
  • get alphaMode(): number
  • set alphaMode(value: number): any
  • Gets the value of the alpha mode

    Value Type Description
    0 ALPHA_DISABLE
    1 ALPHA_ADD
    2 ALPHA_COMBINE
    3 ALPHA_SUBTRACT
    4 ALPHA_MULTIPLY
    5 ALPHA_MAXIMIZED
    6 ALPHA_ONEONE
    7 ALPHA_PREMULTIPLIED
    8 ALPHA_PREMULTIPLIED_PORTERDUFF
    9 ALPHA_INTERPOLATE
    10 ALPHA_SCREENMODE

    Returns number

  • Sets the value of the alpha mode.

    Value Type Description
    0 ALPHA_DISABLE
    1 ALPHA_ADD
    2 ALPHA_COMBINE
    3 ALPHA_SUBTRACT
    4 ALPHA_MULTIPLY
    5 ALPHA_MAXIMIZED
    6 ALPHA_ONEONE
    7 ALPHA_PREMULTIPLIED
    8 ALPHA_PREMULTIPLIED_PORTERDUFF
    9 ALPHA_INTERPOLATE
    10 ALPHA_SCREENMODE

    Parameters

    • value: number

    Returns any

backFaceCulling

Find examples in Playground
  • get backFaceCulling(): boolean
  • set backFaceCulling(value: boolean): any

fillMode

Find examples in Playground
  • get fillMode(): number
  • set fillMode(value: number): any

fogEnabled

Find examples in Playground
  • get fogEnabled(): boolean
  • set fogEnabled(value: boolean): any

hasRenderTargetTextures

Find examples in Playground
  • get hasRenderTargetTextures(): boolean

isFrozen

Find examples in Playground
  • get isFrozen(): boolean

needDepthPrePass

Find examples in Playground
  • get needDepthPrePass(): boolean
  • set needDepthPrePass(value: boolean): any

onBind

Find examples in Playground
  • set onBind(callback: function): any

onBindObservable

Find examples in Playground

onDispose

Find examples in Playground
  • set onDispose(callback: function): any
  • Called during a dispose event

    Parameters

    • callback: function
        • (): void
        • Returns void

    Returns any

onEffectCreatedObservable

Find examples in Playground
  • get onEffectCreatedObservable(): Observable<object>

onUnBindObservable

Find examples in Playground

options

Find examples in Playground
  • Gets the options used to compile the shader. They can be modified to trigger a new compilation

    Returns IShaderMaterialOptions

pointsCloud

Find examples in Playground
  • get pointsCloud(): boolean
  • set pointsCloud(value: boolean): any

shaderPath

Find examples in Playground
  • get shaderPath(): any
  • set shaderPath(shaderPath: any): any
  • Gets the shader path used to define the shader code It can be modified to trigger a new compilation

    Returns any

  • Sets the shader path used to define the shader code It can be modified to trigger a new compilation

    Parameters

    • shaderPath: any

    Returns any

shouldRenderToMRT

Find examples in Playground
  • get shouldRenderToMRT(): boolean

transparencyMode

Find examples in Playground
  • get transparencyMode(): Nullable<number>
  • set transparencyMode(value: Nullable<number>): any
  • Gets the current transparency mode.

    Value Type Description
    0 OPAQUE
    1 ALPHATEST
    2 ALPHABLEND
    3 ALPHATESTANDBLEND

    Returns Nullable<number>

  • Sets the transparency mode of the material.

    Value Type Description
    0 OPAQUE
    1 ALPHATEST
    2 ALPHABLEND
    3 ALPHATESTANDBLEND

    Parameters

    Returns any

wireframe

Find examples in Playground
  • get wireframe(): boolean
  • set wireframe(value: boolean): any

Methods

bind

Find examples in Playground
  • Binds the material to the mesh

    Parameters

    • world: Matrix

      defines the world transformation matrix

    • Optional mesh: Mesh

      defines the mesh to bind the material to

    • Optional effectOverride: Nullable<Effect>

      If provided, use this effect instead of internal effect

    Returns void

bindForSubMesh

Find examples in Playground
  • Binds the submesh to this material by preparing the effect and shader to draw

    Parameters

    • world: Matrix

      defines the world transformation matrix

    • mesh: Mesh

      defines the mesh containing the submesh

    • subMesh: SubMesh

      defines the submesh to bind the material to

    Returns void

bindOnlyWorldMatrix

Find examples in Playground
  • Binds the world matrix to the material

    Parameters

    • world: Matrix

      defines the world transformation matrix

    • Optional effectOverride: Nullable<Effect>

      If provided, use this effect instead of internal effect

    Returns void

bindSceneUniformBuffer

Find examples in Playground

bindView

Find examples in Playground
  • bindView(effect: Effect): void
  • Binds the view matrix to the effect

    Parameters

    • effect: Effect

      defines the effect to bind the view matrix to

    Returns void

bindViewProjection

Find examples in Playground
  • bindViewProjection(effect: Effect): void
  • Binds the view projection matrix to the effect

    Parameters

    • effect: Effect

      defines the effect to bind the view projection matrix to

    Returns void

clone

Find examples in Playground
  • Makes a duplicate of the material, and gives it a new name

    Parameters

    • name: string

      defines the new name for the duplicated material

    Returns ShaderMaterial

    the cloned material

dispose

Find examples in Playground
  • dispose(forceDisposeEffect?: boolean, forceDisposeTextures?: boolean, notBoundToMesh?: boolean): void
  • Disposes the material

    Parameters

    • Optional forceDisposeEffect: boolean

      specifies if effects should be forcefully disposed

    • Optional forceDisposeTextures: boolean

      specifies if textures should be forcefully disposed

    • Optional notBoundToMesh: boolean

      specifies if the material that is being disposed is known to be not bound to any mesh

    Returns void

forceCompilation

Find examples in Playground
  • Force shader compilation

    Parameters

    • mesh: AbstractMesh

      defines the mesh associated with this material

    • Optional onCompiled: function

      defines a function to execute once the material is compiled

    • Optional options: Partial<IMaterialCompilationOptions>

      defines the options to configure the compilation

    • Optional onError: function

      defines a function to execute if the material fails compiling

        • (reason: string): void
        • Parameters

          • reason: string

          Returns void

    Returns void

forceCompilationAsync

Find examples in Playground

freeze

Find examples in Playground
  • freeze(): void

getActiveTextures

Find examples in Playground
  • Gets the active textures from the material

    Returns BaseTexture[]

    an array of textures

getAlphaTestTexture

Find examples in Playground

getBindedMeshes

Find examples in Playground

getClassName

Find examples in Playground
  • getClassName(): string
  • Gets the current class name of the material e.g. "ShaderMaterial" Mainly use in serialization.

    Returns string

    the class name

getEffect

Find examples in Playground

getScene

Find examples in Playground

hasTexture

Find examples in Playground
  • Specifies if the material uses a texture

    Parameters

    • texture: BaseTexture

      defines the texture to check against the material

    Returns boolean

    a boolean specifying if the material uses the texture

isReady

Find examples in Playground
  • isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean
  • Checks if the material is ready to render the requested mesh

    Parameters

    • Optional mesh: AbstractMesh

      Define the mesh to render

    • Optional useInstances: boolean

      Define whether or not the material is used with instances

    Returns boolean

    true if ready, otherwise false

isReadyForSubMesh

Find examples in Playground
  • Specifies that the submesh is ready to be used

    Parameters

    • mesh: AbstractMesh

      defines the mesh to check

    • subMesh: SubMesh

      defines which submesh to check

    • Optional useInstances: boolean

      specifies that instances should be used

    Returns boolean

    a boolean indicating that the submesh is ready or not

markAsDirty

Find examples in Playground
  • markAsDirty(flag: number): void
  • Marks a define in the material to indicate that it needs to be re-computed

    Parameters

    • flag: number

      defines a flag used to determine which parts of the material have to be marked as dirty

    Returns void

markDirty

Find examples in Playground
  • markDirty(): void
  • Marks the material to indicate that it needs to be re-calculated

    Returns void

needAlphaBlending

Find examples in Playground
  • needAlphaBlending(): boolean
  • Specifies if the material will require alpha blending

    Returns boolean

    a boolean specifying if alpha blending is needed

needAlphaBlendingForMesh

Find examples in Playground

needAlphaTesting

Find examples in Playground
  • needAlphaTesting(): boolean
  • Specifies if this material should be rendered in alpha test mode

    Returns boolean

    a boolean specifying if an alpha test is needed.

serialize

Find examples in Playground
  • serialize(): any
  • Serializes this material in a JSON representation

    Returns any

    the serialized material object

setArray2

Find examples in Playground
  • Set a vec2 array in the shader from a number array.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: number[]

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setArray3

Find examples in Playground
  • Set a vec3 array in the shader from a number array.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: number[]

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setArray4

Find examples in Playground
  • Set a vec4 array in the shader from a number array.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: number[]

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setColor3

Find examples in Playground
  • Set a vec3 in the shader from a Color3.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: Color3

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setColor3Array

Find examples in Playground
  • Set a vec3 array in the shader from a Color3 array.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: Color3[]

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setColor4

Find examples in Playground
  • Set a vec4 in the shader from a Color4.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: Color4

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setColor4Array

Find examples in Playground
  • Set a vec4 array in the shader from a Color4 array.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: Color4[]

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setFloat

Find examples in Playground
  • Set a float in the shader.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: number

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setFloats

Find examples in Playground
  • Set an array of floats in the shader.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: number[]

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setInt

Find examples in Playground
  • Set a int in the shader.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: number

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setMatrices

Find examples in Playground
  • Set a float32Array in the shader from a matrix array.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: Matrix[]

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setMatrix

Find examples in Playground
  • Set a mat4 in the shader from a Matrix.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: Matrix

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setMatrix2x2

Find examples in Playground
  • Set a mat2 in the shader from a Float32Array.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: Float32Array

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setMatrix3x3

Find examples in Playground
  • Set a mat3 in the shader from a Float32Array.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: Float32Array

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setTexture

Find examples in Playground
  • Set a texture in the shader.

    Parameters

    • name: string

      Define the name of the uniform samplers as defined in the shader

    • texture: BaseTexture

      Define the texture to bind to this sampler

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setTextureArray

Find examples in Playground
  • Set a texture array in the shader.

    Parameters

    • name: string

      Define the name of the uniform sampler array as defined in the shader

    • textures: BaseTexture[]

      Define the list of textures to bind to this sampler

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setVector2

Find examples in Playground
  • Set a vec2 in the shader from a Vector2.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: Vector2

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setVector3

Find examples in Playground
  • Set a vec3 in the shader from a Vector3.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: Vector3

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

setVector4

Find examples in Playground
  • Set a vec4 in the shader from a Vector4.

    Parameters

    • name: string

      Define the name of the uniform as defined in the shader

    • value: Vector4

      Define the value to give to the uniform

    Returns ShaderMaterial

    the material itself allowing "fluent" like uniform updates

toString

Find examples in Playground
  • toString(fullDetails?: boolean): string
  • Returns a string representation of the current material

    Parameters

    • Optional fullDetails: boolean

      defines a boolean indicating which levels of logging is desired

    Returns string

    a string with material information

unbind

Find examples in Playground
  • unbind(): void

unfreeze

Find examples in Playground
  • unfreeze(): void

Static CreateFromSnippetAsync

Find examples in Playground
  • CreateFromSnippetAsync(snippetId: string, scene: Scene, rootUrl?: string): Promise<ShaderMaterial>
  • Creates a ShaderMaterial from a snippet saved by the Inspector

    Parameters

    • snippetId: string

      defines the snippet to load

    • scene: Scene

      defines the hosting scene

    • Optional rootUrl: string

      defines the root URL to use to load textures and relative dependencies

    Returns Promise<ShaderMaterial>

    a promise that will resolve to the new ShaderMaterial

Static Parse

Find examples in Playground
  • Creates a shader material from parsed shader material data

    Parameters

    • source: any

      defines the JSON represnetation of the material

    • scene: Scene

      defines the hosting scene

    • rootUrl: string

      defines the root URL to use to load textures and relative dependencies

    Returns ShaderMaterial

    a new material

Static ParseFromFileAsync

Find examples in Playground
  • Creates a new ShaderMaterial from a snippet saved in a remote file

    Parameters

    • name: Nullable<string>

      defines the name of the ShaderMaterial to create (can be null or empty to use the one from the json data)

    • url: string

      defines the url to load from

    • scene: Scene

      defines the hosting scene

    • Optional rootUrl: string

      defines the root URL to use to load textures and relative dependencies

    Returns Promise<ShaderMaterial>

    a promise that will resolve to the new ShaderMaterial

Generated using TypeDoc