Last reviewed 31 Jul 2026
Applies to
Banter VR JavaScript SDK Procedural geometry Ambient occlusion
Difficulty Advanced

Build a Procedural Banter Room with Primitives and AO Baking

Banter geometry primitives can assemble static environments at runtime. A room can be built from BanterBox floor and wall objects beneath one root GameObject, then processed with BanterAOBaking to merge child meshes and bake ambient occlusion into vertex colours.

Procedural Room Workflow

Create one room root, add every static floor and wall as a child, apply materials and collision, preview the merge, then bake AO on the root.

  1. Create the room root and child box primitives.
  2. Add materials and colliders before baking.
  3. Add BanterAOBaking to the root, preview, bake, and clear when changes are needed.

Create the Room Root

const room = new BS.GameObject({
  name: "ProceduralRoom"
});

The official AO documentation requires a root parent with the processed primitives beneath it.

Add a Floor

const floor = new BS.GameObject({
  name: "Floor",
  parent: room,
  localPosition: new BS.Vector3(0, 0, 0)
});

floor.AddComponent(new BS.BanterBox({
  width: 8,
  height: 0.2,
  depth: 8
}));

floor.AddComponent(new BS.BanterMaterial({
  color: new BS.Vector4(0.18, 0.2, 0.24, 1),
  side: BS.MaterialSide.Front
}));

floor.AddComponent(new BS.BoxCollider({
  size: new BS.Vector3(8, 0.2, 8)
}));

The collider is separate from the visible box component.

Add a Wall

const backWall = new BS.GameObject({
  name: "BackWall",
  parent: room,
  localPosition: new BS.Vector3(0, 2, 4)
});

backWall.AddComponent(new BS.BanterBox({
  width: 8,
  height: 4,
  depth: 0.2
}));

backWall.AddComponent(new BS.BanterMaterial({
  color: new BS.Vector4(0.3, 0.35, 0.45, 1)
}));

backWall.AddComponent(new BS.BoxCollider({
  size: new BS.Vector3(8, 4, 0.2)
}));

Repeat the pattern for the remaining walls. Keep every static piece beneath the same root.

Add AO Baking to the Root

const baker = room.AddComponent(
  new BS.BanterAOBaking({
    subdivisionLevel: 2,
    sampleCount: 128,
    aoIntensity: 1.2,
    aoBias: 0.005,
    aoRadius: 0,
    hideSourceObjects: true,
    targetShaderName: "Mobile/StylizedFakeLit"
  })
);

The target shader must support vertex colours.

Preview before Baking

baker.Preview();

Preview() merges and subdivides without calculating AO. Use it to check whether the intended child meshes are included.

Bake and Clear

baker.BakeAO();

BakeAO() merges the child meshes, subdivides them, and calculates ambient occlusion.

baker.Clear();

Clear() removes the generated result and restores the original child objects.

Build and Bake in Layers

The official Banter guidance recommends this order:

  1. Background and distant scenery
  2. Ground and floors
  3. Large structures
  4. Detail objects

It also recommends rebaking when new nearby or intersecting objects should affect the occlusion.

Keep Moving Objects Outside the Bake

The official component is intended for static geometry that will not move. Keep doors, pickups, physics objects, and other moving content outside the baked room hierarchy.

Common Questions

Why are some Banter room pieces missing from the AO preview?

Check that every intended static primitive is a child of the GameObject containing BanterAOBaking.

Why does the baked shading not appear?

Confirm that targetShaderName identifies a shader that supports vertex colours.

Official References

Related Navigation