API
API|
@babylonjs/gui|
FluentBackplateMaterial

Class FluentBackplateMaterial

Class used to render square buttons with fluent design

Hierarchy (View Summary)

Index
constructor
absoluteSizes baseColor blobFade blobFade2 blobFadeLength blobFarDistance blobFarSize blobIntensity blobNearDistance blobNearSize blobNearSize2 blobPulse blobPulse2 fadeOut globalLeftIndexTipPosition globalRightIndexTipPosition highlightColor highlightWidth iridescenceEdgeIntensity iridescenceIntensity lineColor lineWidth radius BLOB_TEXTURE_URL IM_TEXTURE_URL
bindForSubMesh clone dispose getAlphaTestTexture getAnimatables getClassName isReadyForSubMesh needAlphaBlending needAlphaTesting serialize Parse
absoluteSizes: boolean = false

Gets or sets whether to use absolute sizes when calculating effects on the backplate. Since desktop and VR/AR have different relative sizes, it's usually best to keep this false.

baseColor: any = ...

Gets or sets the base color of the backplate.

blobFade: number = 0

Gets or sets the opacity of the fluent hover glow effect corresponding to the left pointer (0.0 - 1.0). Default is 0.

blobFade2: number = 0

Gets or sets the opacity of the fluent hover glow effect corresponding to the right pointer (0.0 - 1.0). Default is 0.

blobFadeLength: number = 0.08

Gets or sets the length of the fluent hover glow effect fade.

blobFarDistance: number = 0.08

Gets or sets the distance considered "far" from the backplate, which controls the size of the fluent hover glow effect (see blobFarSize).

blobFarSize: number = 0.04

Gets or sets the far size of the fluent hover glow effect.

blobIntensity: number = 0.98

Gets or sets the intensity of the fluent hover glow effect.

blobNearDistance: number = 0

Gets or sets the distance considered "near" to the backplate, which controls the size of the fluent hover glow effect (see blobNearSize).

blobNearSize: number = 0.22

Gets or sets the size of the fluent hover glow effect when the left pointer is considered "near" to the backplate (see blobNearDistance).

blobNearSize2: number = 0.22

Gets or sets the size of the fluent hover glow effect when the right pointer is considered "near" to the backplate (see blobNearDistance).

blobPulse: number = 0

Gets or sets the progress of the fluent hover glow effect selection animation corresponding to the left pointer (0.0 - 1.0).

blobPulse2: number = 0

Gets or sets the progress of the fluent hover glow effect selection animation corresponding to the right pointer (0.0 - 1.0).

fadeOut: number = 1

Gets or sets the opacity of the backplate (0.0 - 1.0).

globalLeftIndexTipPosition: any = ...

Gets or sets the world-space position of the tip of the left index finger.

globalRightIndexTipPosition: any = ...

Gets or sets the world-space position of the tip of the right index finger.

highlightColor: any = ...

Gets or sets the color of the highlights on the backplate line.

highlightWidth: number = 0.25

Gets or sets the width of the highlights on the backplate line.

iridescenceEdgeIntensity: number = 1

Gets or sets the intensity of the iridescence effect on the backplate edges.

iridescenceIntensity: number = 0

Gets or sets the intensity of the iridescence effect.

lineColor: any = ...

Gets or sets the line color of the backplate.

lineWidth: number = 0.01

Gets or sets the line width of the backplate.

radius: number = 0.03

Gets or sets the corner radius on the backplate. Best to keep this value between 0.01 and 0.5. Default is 0.03.

BLOB_TEXTURE_URL: string = "https://assets.babylonjs.com/core/MRTK/mrtk-fluent-backplate-blob.png"

URL pointing to the texture used to define the coloring for the fluent blob effect.

IM_TEXTURE_URL: string = "https://assets.babylonjs.com/core/MRTK/mrtk-fluent-backplate-iridescence.png"

URL pointing to the texture used to define iridescent map.