Skip to main content

​
Overview

G3Engine uses a Physically Based Rendering (PBR) material system that provides realistic lighting and surface properties.

​
MaterialProps

The core material interface that defines all visual properties of scene objects. 
export interface MaterialProps {
    color: string;
    roughness: number;
    metalness: number;
    emissive?: string;
    emissiveIntensity?: number;
    opacity?: number;
    transparent?: boolean;
}

​
Base Properties

​
color
string
required
Base color of the material in hex format (e.g., “#6366f1”, “#ff0000”)This is the primary color of the object under white light.
​
roughness
number
required
Surface roughness from 0.0 to 1.0
  • 0.0 - Perfectly smooth, mirror-like reflections
  • 0.5 - Semi-rough surface
  • 1.0 - Completely rough, diffuse surface
​
metalness
number
required
Metallic property from 0.0 to 1.0
  • 0.0 - Non-metallic (dielectric) materials like plastic, wood, stone
  • 0.5 - Partial metallic (rare, mostly for transitions)
  • 1.0 - Pure metal like gold, silver, copper, steel

​
Emissive Properties

​
emissive
string
Emissive (self-illuminating) color in hex formatMakes the material glow with its own light. Commonly used for:
  • Light bulbs
  • Neon signs
  • Magic effects
  • UI elements
​
emissiveIntensity
number
Intensity multiplier for emissive glowRange typically 0-10, though higher values are supported:
  • 0.0 - No glow
  • 1.0 - Normal glow
  • 5.0+ - Very bright glow

​
Transparency Properties

​
transparent
boolean
Enables transparency for the materialMust be set to true for opacity to have any effect.
​
opacity
number
Opacity level from 0.0 to 1.0Only works when transparent: true:
  • 0.0 - Fully transparent (invisible)
  • 0.5 - Semi-transparent
  • 1.0 - Fully opaque

​
Material Presets

Common material configurations for different surface types.

​
Plastics and Polymers

const glossyPlastic: MaterialProps = {
  color: '#6366f1',
  roughness: 0.3,
  metalness: 0.0
};

​
Metals

const gold: MaterialProps = {
  color: '#ffd700',
  roughness: 0.2,
  metalness: 1.0
};

​
Glass and Transparent Materials

const clearGlass: MaterialProps = {
  color: '#ffffff',
  roughness: 0.0,
  metalness: 0.0,
  opacity: 0.2,
  transparent: true
};

​
Emissive Materials

const neonSign: MaterialProps = {
  color: '#00ffff',
  roughness: 0.5,
  metalness: 0.0,
  emissive: '#00ffff',
  emissiveIntensity: 3.0
};

​
PBR Guidelines

​
Roughness Values

RangeAppearanceExamples
0.0 - 0.2Mirror-like, sharp reflectionsPolished metal, glass, water
0.2 - 0.5Semi-glossyGlossy plastic, satin
0.5 - 0.8Semi-roughMatte plastic, unpolished wood
0.8 - 1.0Completely diffuseConcrete, fabric, rough stone

​
Metalness Values

In PBR, metalness should almost always be either 0 or 1. Values in between (like 0.5) are physically inaccurate and should only be used for artistic effects or transitions.
ValueTypeExamples
0.0Dielectric (non-metal)Plastic, wood, stone, glass, skin
1.0MetallicGold, silver, copper, aluminum, steel

​
Color Selection

For metallic materials, the color field represents the material’s reflectance color:
  • Gold: Yellowish tint (#ffd700)
  • Copper: Reddish-brown (#b87333)
  • Silver/Aluminum: Light gray (#c0c0c0)
For non-metallic materials, color is the base albedo color under white light.

​
Updating Materials

Materials can be updated using the editor store: 
import { useEditorStore } from '@/store/editorStore';

const updateMaterial = useEditorStore((state) => state.updateMaterial);

// Update specific properties
updateMaterial(objectId, {
  roughness: 0.5,
  metalness: 0.0
});

// Update color
updateMaterial(objectId, {
  color: '#ff0000'
});

// Make object glow
updateMaterial(objectId, {
  emissive: '#00ff00',
  emissiveIntensity: 3.0
});

Build docs developers (and LLMs) love

Get started for freeTalk to us