Skip to main content

Materials System

Yugma uses a PBR (Physically Based Rendering) material model based on Three.js MeshStandardMaterial.

Material Properties​

Base Color​

The diffuse albedo color of the surface. Set via a color picker in the Properties panel.

Roughness (0–1)​

Controls the microsurface detail:

  • 0.0 — Perfect mirror reflection
  • 0.5 — Semi-glossy surface (default)
  • 1.0 — Completely matte/diffuse

Metalness (0–1)​

Determines if the material behaves as a metal or dielectric:

  • 0.0 — Non-metallic (plastic, wood, stone)
  • 1.0 — Fully metallic (gold, steel, aluminum)

Opacity (0–1)​

Controls transparency:

  • 1.0 — Fully opaque (default)
  • 0.0 — Fully transparent

Wireframe​

Toggles wireframe rendering mode, showing the mesh triangulation.

Emissive Properties​

  • Emissive Color — The color of self-illumination
  • Emissive Intensity (0–3) — Brightness multiplier

Emissive materials glow independently of scene lighting, useful for screens, lights, and neon effects.

Material Persistence​

Material settings are saved as part of the scene data. Each object stores its material configuration in the scene state:

{
  "material": {
    "color": "#ffffff",
    "roughness": 0.5,
    "metalness": 0.0,
    "opacity": 1.0,
    "wireframe": false,
    "emissive": "#000000",
    "emissiveIntensity": 0
  }
}

Changes to material properties are tracked by the undo/redo system.