Transparency and ghosting
Sometimes the most important part of a model is hidden behind something else. "Ghosting" lets you fade out the parts that are in the way — like the building shell — so you can see the structure inside while still keeping enough context to make sense of it. It's a great way to highlight what matters without throwing away the surroundings entirely.
How transparency works
Colours in Twinfinity are RGBA: four channels (red, green, blue, alpha), each from 0 to 255. The alpha channel controls opacity. An IFC object becomes transparent the moment its colour has an alpha below 255 — the viewer renders anything with alpha < 255 through its transparency pipeline. An alpha of 255 is fully solid; lower values let more of the scene behind show through, and 0 is effectively invisible.
To ghost a subset of the model, you only need to lower the alpha on the objects you want to fade — for example the building shell (walls, roof, floors) — while leaving everything else at its original, solid colour.
Ghosting the building shell
The snippet below keeps each shell object's own colour and just drops its alpha, so the walls, roof and slabs turn translucent while the rest of the model stays solid:
// The shell classes to ghost, and how solid they stay (0 = invisible, 255 = opaque).
const shellClasses = ['walls', 'roof', 'floor'] as const;
const ghostAlpha = 40;
api.ifc.foreach((o) => {
if (!shellClasses.some((c) => o.class.is(c))) {
return;
}
// Keep the object's own colour, just lower its alpha so it turns translucent.
const [r, g, b] = o.meshes[0]?.style.surfaceColor ?? [200, 200, 200, 255];
o.setColor([r, g, b, ghostAlpha]);
});See it in the playground: Transparency (ghosting).