OCTO 3D Standard

Material library

Five materials build everything

No ad hoc materials. Every mesh takes one of these from three/materials.js, so a robot, a city and a game level share the same light response and the same glow.

M1 Hull

Dark machined body for platforms, buildings and robot shells. Takes the lighting rig, never glows on its own.

Type: MeshStandard
Color: #13213D trench
Metal / rough: 0.75 / 0.32
Emissive: #2B6BFF at 0.06

M2 Holo glass

Fresnel rim, scanlines and a travelling band. The signature holographic surface for shields, slabs and screens.

Type: Shader, additive
Fresnel: pow 2.2
Scan: 90 lines per unit
Opacity: 0.35 to 0.7

M3 Emissive

Unlit HDR color above 1.0 that feeds bloom. Visors, status nodes, chart bars. The only thing allowed to bloom.

Type: MeshBasic, HDR
Intensity: 1.6 to 3.0
Colors: cyan, violet, lime
Budget: 15% of pixels

M4 Edge line

Sharp additive wire for platform rims and silhouettes. Gives the isometric read at any zoom.

Type: LineBasic, additive
Source: EdgesGeometry 20°
Opacity: 0.5 to 0.9
Depth write: off

M5 Beam and floor

Light columns with flowing noise and the hex grid floor with an outward pulse ring. Gives every scene ground and energy.

Type: Shader, additive
Hex scale: 1.4 per unit
Pulse: 2.2 units per s
Fade: radial to 25%

Lighting rig

Cool key, violet fill, cyan rim

Three lights and a low ambient, positioned in world units. Call lightRig(scene) once. Toggle each light in the console above to see what it carries.

Light	Color	Value	Job
Key	#BFE6FF	1.4	Form and top face read
Fill	#9F8CFF	0.5	Brand violet in shadows
Rim	#3FD8FF	30, range 14	Cyan halo on hulls
Ambient	#1A2A50	0.6	Never pure black
Tone map	ACES Filmic		Exposure 1.0
Shadows	Off on web		Fake with floor glow

Glow and glass

Bloom is earned, glass is additive

The scene renders into a half float target, a bright pass keeps only luminance above the threshold, two blur levels at half and quarter resolution, then an ACES composite. Only M3 Emissive crosses the threshold.

// one call per page
const bloom = createBloom(renderer, {
  threshold: 0.6,   // luminance gate
  strength:  1.2,   // composite gain
  radius:    1      // blur tap spread
});
renderer.toneMapping = THREE.ACESFilmicToneMapping;

// holo glass uniforms
holoGlass({ color: PALETTE.cyan, rim: PALETTE.chalk,
            opacity: 0.55, scan: 1.0 });
// fresnel f = pow(1 - |N·V|, 2.2)
// rgb = mix(color * .35, rim, f) * scanline

Rule	Value
Bloom threshold	0.6 luminance
Bloom passes	2 levels, 9 taps
Glass blending	Additive, depth write off
Glass stacking	Max 3 layers on screen
Emissive cap	3.0, no NaN, clamp 32
Mobile	Pixel ratio 1.5, same passes

World scale

One unit is one meter

Y up, right handed, meters. Hero objects sit on a platform whose top is at y 0.4 so floor glow never clips. Cameras are orthographic for isometric scenes, 34 degree perspective for centerpieces.

Node 0.5 m

Server 1 m

Agent 1.8 m

Platform 4 m

Shield core 3 m

Tower 5 m

Globe r 2.5 m

Isometric camera

Orthographic, yaw 45°, pitch 30° (atan 1/√3). Frustum height 16 units on desktop, 22 on phone.

Grid

Hex floor at 1.4 cells per meter. Platforms snap to 0.5 m. Labels anchor 0.3 m above the top face.

Game ready

Same units import 1 to 1 into Unity, Unreal and Godot. Character capsule 1.8 m by 0.5 m.

GLB asset pipeline

From DCC to browser in five checks

Every asset arrives as glTF 2.0 binary. Material slots are named for the library so the loader swaps them for OCTO materials on import.

Model

Blender, meters, Y up on export. Apply transforms. Origin at base center.

Name slots

Material names octo_hull, octo_glass, octo_emit, octo_edge, octo_beam.

Optimize

gltf transform: dedup, weld, Draco or Meshopt, KTX2 textures at 1K max.

Validate

Khronos validator zero errors. Triangle and size budget checked in CI.

Bind

Loader maps slot names to library materials, adds edges, registers bloom.

const MAP = { octo_hull: hull(), octo_glass: holoGlass(), octo_emit: emissive(),
              octo_edge: edgeLine(), octo_beam: beam() };
gltf.scene.traverse(o => { if (o.isMesh && MAP[o.material.name]) o.material = MAP[o.material.name]; });

Performance budgets

Fast on a phone, rich on a wall

Measured live in the console above. A scene that breaks a budget does not ship.

Budget	Desktop	Phone	Game hero
Frame time p95	16.7 ms	22 ms	16.7 ms
Draw calls	150	90	400
Triangles	300 K	120 K	1.5 M
GLB size	2 MB	1 MB	12 MB
Textures	1K KTX2	512 KTX2	2K KTX2
Repeats	Instance anything that appears more than four times