or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

2d-controls.md2d-layout.md3d-controls.md3d-materials.mdindex.mdinput-controls.mdutilities.md
tile.json

3d-materials.mddocs/

3D Materials

Specialized materials for 3D GUI elements including Fluent Design System materials and Mixed Reality Design Language (MRDL) materials.

Capabilities

Fluent Design Materials

Microsoft Fluent Design System materials for modern 3D interfaces.

class FluentMaterial extends PushMaterial {
  albedoColor: Color3;
  renderHoverLight: boolean;
  renderBorders: boolean;
  renderBorder: boolean;
  borderWidth: number;
  borderMinValue: number;
  edgeWidth: number;
  hoverRadius: number;
  hoverColor: Color3;
  hoverPosition: Vector3;
  globalLeftIndex: number;
  globalRightIndex: number;
  
  dispose(forceDisposeEffect?: boolean): void;
}

class FluentButtonMaterial extends PushMaterial {
  radius: number;
  line_width: number;
  absolute_sizes: boolean;
  enabled: boolean;
  blobIntensity: number;
  blobFarDistance: number;
  blobNearDistance: number;
  blobFadeLength: number;
  blobPulse: number;
  blobFade: number;
  selection_fuzz: number;
  selected: number;
  selection_fade: number;
  selection_fade_size: number;
  selected_distance: number;
  selected_fade_length: number;
  proximity_max_intensity: number;
  proximity_far_distance: number;
  proximity_near_distance: number;
  proximity_anisotropy: number;
  useGlobalLeftIndex: boolean;
  useGlobalRightIndex: boolean;
  globalLeftIndex: number;
  globalRightIndex: number;
  
  dispose(forceDisposeEffect?: boolean): void;
}

class FluentBackplateMaterial extends PushMaterial {
  radius: number;
  line_width: number;
  absolute_sizes: boolean;
  enabled: boolean;
  blobIntensity: number;
  blobFarDistance: number;
  blobNearDistance: number;
  blobFadeLength: number;
  blobPulse: number;
  blobFade: number;
  selection_fuzz: number;
  selected: number;
  selection_fade: number;
  selection_fade_size: number;
  selected_distance: number;
  selected_fade_length: number;
  proximity_max_intensity: number;
  proximity_far_distance: number;
  proximity_near_distance: number;
  proximity_anisotropy: number;
  useGlobalLeftIndex: boolean;
  useGlobalRightIndex: boolean;
  globalLeftIndex: number; 
  globalRightIndex: number;
  fadeOut: boolean;
  
  dispose(forceDisposeEffect?: boolean): void;
}

Usage Examples:

import { FluentMaterial, FluentButtonMaterial } from "@babylonjs/gui";

// Create fluent material for button
const fluentMat = new FluentMaterial("fluentMat", scene);
fluentMat.albedoColor = Color3.Blue();
fluentMat.renderHoverLight = true;
fluentMat.renderBorders = true;
fluentMat.borderWidth = 0.01;

// Apply to mesh
buttonMesh.material = fluentMat;

// Configure hover effects
fluentMat.hoverColor = Color3.Yellow();
fluentMat.hoverRadius = 0.1;

// Create fluent button material
const buttonMat = new FluentButtonMaterial("buttonMat", scene);
buttonMat.radius = 0.05;
buttonMat.blobIntensity = 0.5;
buttonMat.proximity_max_intensity = 0.8;
buttonMat.useGlobalLeftIndex = true;

Mixed Reality Design Language (MRDL) Materials

MRDL materials for mixed reality and holographic interfaces.

class MRDLInnerquadMaterial extends PushMaterial {
  radius: number;
  line_width: number;
  absolute_sizes: boolean;
  enabled: boolean;
  blobIntensity: number;
  blobFarDistance: number;
  blobNearDistance: number;
  blobFadeLength: number;
  blobPulse: number;
  blobFade: number;
  selection_fuzz: number;
  selected: number;
  selection_fade: number;
  selection_fade_size: number;
  selected_distance: number;
  selected_fade_length: number;
  proximity_max_intensity: number;
  proximity_far_distance: number;
  proximity_near_distance: number;
  proximity_anisotropy: number;
  useGlobalLeftIndex: boolean;
  useGlobalRightIndex: boolean;
  globalLeftIndex: number;
  globalRightIndex: number;
  
  dispose(forceDisposeEffect?: boolean): void;
}

class MRDLFrontplateMaterial extends PushMaterial {
  radius: number;
  line_width: number;
  absolute_sizes: boolean;
  enabled: boolean;
  blobIntensity: number;
  blobFarDistance: number;
  blobNearDistance: number;
  blobFadeLength: number;
  blobPulse: number;
  blobFade: number;
  selection_fuzz: number;
  selected: number;
  selection_fade: number;
  selection_fade_size: number;
  selected_distance: number;
  selected_fade_length: number;
  proximity_max_intensity: number;
  proximity_far_distance: number;
  proximity_near_distance: number;
  proximity_anisotropy: number;
  useGlobalLeftIndex: boolean;
  useGlobalRightIndex: boolean;
  globalLeftIndex: number;
  globalRightIndex: number;
  fadeOut: boolean;
  
  dispose(forceDisposeEffect?: boolean): void;
}

class MRDLBackglowMaterial extends PushMaterial {
  radius: number;  
  line_width: number;
  absolute_sizes: boolean;
  enabled: boolean;
  blobIntensity: number;
  blobFarDistance: number;
  blobNearDistance: number;
  blobFadeLength: number;
  blobPulse: number;
  blobFade: number;
  selection_fuzz: number;
  selected: number;
  selection_fade: number;
  selection_fade_size: number;
  selected_distance: number;
  selected_fade_length: number;
  proximity_max_intensity: number;
  proximity_far_distance: number;
  proximity_near_distance: number;
  proximity_anisotropy: number;
  useGlobalLeftIndex: boolean;
  useGlobalRightIndex: boolean;
  globalLeftIndex: number;
  globalRightIndex: number;
  
  dispose(forceDisposeEffect?: boolean): void;
}

class MRDLBackplateMaterial extends PushMaterial {
  radius: number;
  line_width: number; 
  absolute_sizes: boolean;
  enabled: boolean;
  blobIntensity: number;
  blobFarDistance: number;
  blobNearDistance: number;
  blobFadeLength: number;
  blobPulse: number;
  blobFade: number;
  selection_fuzz: number;
  selected: number;
  selection_fade: number;
  selection_fade_size: number;
  selected_distance: number;
  selected_fade_length: number;
  proximity_max_intensity: number;
  proximity_far_distance: number;
  proximity_near_distance: number;
  proximity_anisotropy: number;
  useGlobalLeftIndex: boolean;
  useGlobalRightIndex: boolean;
  globalLeftIndex: number;
  globalRightIndex: number;
  fadeOut: boolean;
  
  dispose(forceDisposeEffect?: boolean): void;
}

Usage Examples:

import { 
  MRDLInnerquadMaterial, 
  MRDLFrontplateMaterial, 
  MRDLBackplateMaterial 
} from "@babylonjs/gui";

// Create MRDL innerquad material
const innerquadMat = new MRDLInnerquadMaterial("innerquad", scene);
innerquadMat.radius = 0.05;
innerquadMat.blobIntensity = 0.7;
innerquadMat.proximity_max_intensity = 1.0;

// Create MRDL frontplate material
const frontplateMat = new MRDLFrontplateMaterial("frontplate", scene);
frontplateMat.radius = 0.08;
frontplateMat.line_width = 0.01;
frontplateMat.enabled = true;

// Create MRDL backplate material
const backplateMat = new MRDLBackplateMaterial("backplate", scene);
backplateMat.radius = 0.1;
backplateMat.fadeOut = true;
backplateMat.blobFade = 0.8;

// Apply materials to holographic interface
holographicPanel.frontMaterial = frontplateMat;
holographicPanel.backMaterial = backplateMat;

Handle Materials

Specialized materials for interactive handles and grips.

class HandleMaterial extends PushMaterial {
  blobIntensity: number;
  blobFarDistance: number;
  blobNearDistance: number;
  blobFadeLength: number;
  blobPulse: number;
  blobFade: number;
  rate: number;
  highlight_transform: Matrix;
  highlight_width: number;
  highlight_color: Color3;
  highlight: number;
  proximity_max_intensity: number;
  proximity_far_distance: number;
  proximity_near_distance: number;
  proximity_anisotropy: number;
  useGlobalLeftIndex: boolean;
  useGlobalRightIndex: boolean;
  globalLeftIndex: number;
  globalRightIndex: number;
  
  dispose(forceDisposeEffect?: boolean): void;
}

Usage Examples:

import { HandleMaterial } from "@babylonjs/gui";

// Create handle material for grip controls
const handleMat = new HandleMaterial("handleMat", scene);
handleMat.blobIntensity = 0.6;
handleMat.proximity_max_intensity = 1.0;
handleMat.highlight_color = Color3.Green();
handleMat.highlight_width = 0.02;

// Apply to handle mesh
gripMesh.material = handleMat;

// Configure proximity detection
handleMat.proximity_far_distance = 0.3;
handleMat.proximity_near_distance = 0.05;
handleMat.useGlobalLeftIndex = true;

Material Properties and Configuration

Common Properties

All 3D GUI materials share common properties for proximity interaction and visual effects:

interface IMaterialProximitySettings {
  proximity_max_intensity: number;
  proximity_far_distance: number;
  proximity_near_distance: number;
  proximity_anisotropy: number;
}

interface IMaterialBlobSettings {
  blobIntensity: number;
  blobFarDistance: number;
  blobNearDistance: number;
  blobFadeLength: number;
  blobPulse: number;
  blobFade: number;
}

interface IMaterialSelectionSettings {
  selection_fuzz: number;
  selected: number;
  selection_fade: number;
  selection_fade_size: number;
  selected_distance: number;
  selected_fade_length: number;
}

interface IMaterialIndexSettings {
  useGlobalLeftIndex: boolean;
  useGlobalRightIndex: boolean;
  globalLeftIndex: number;
  globalRightIndex: number;
}

Material Usage Patterns

Fluent Design Integration:

// Complete fluent button setup
const button = new HolographicButton("fluentBtn");
button.text = "Fluent Button";

// Configure fluent materials
button.backMaterial.renderHoverLight = true;
button.backMaterial.hoverColor = Color3.Blue();
button.frontMaterial.renderBorders = true;
button.frontMaterial.borderWidth = 0.01;

// Set proximity interaction
button.backMaterial.proximity_max_intensity = 0.8;
button.backMaterial.proximity_far_distance = 0.2;

MRDL Material Layering:

// Multi-layer MRDL interface
const slate = new HolographicSlate("mrdlSlate");

// Configure backplate for depth
slate.backplateMaterial.radius = 0.1;
slate.backplateMaterial.fadeOut = true;

// Configure frontplate for interaction
slate.frontplateMaterial.blobIntensity = 0.7;
slate.frontplateMaterial.selection_fade = 0.9;

Types and Interfaces

// Material animation interfaces
interface IMaterialAnimation {
  rate: number;
  highlight: number;
  blobPulse: number;
}

// Color and highlighting
interface IMaterialHighlight {
  highlight_transform: Matrix;
  highlight_width: number;
  highlight_color: Color3;
}

// Base material interface for 3D GUI
abstract class PushMaterial extends Material {
  dispose(forceDisposeEffect?: boolean): void;
}