Skip to content

Materials & textures

The four examples the gallery lists under Materials & textures. Each block is what the gallery’s code panel shows beside that example, copied from the example itself: the lines that do it rather than the whole file, so it isn’t compiled here the way the guides’ code is. The file it came from is linked under each one.

Metalness and roughness across a grid, five ways of blending, and textures written at startup so there is nothing to download.

// A material describes what a surface is, not what it looks like.
final brass = OrblitMaterial(
key: 7,
baseColour: Vector4(0.72, 0.45, 0.20, 1),
metallic: 1.0,
roughness: 0.25,
);
// Maps multiply into the numbers beside them, so a texture and a slider are
// the same control. Tiling is applied by the shader — there is no automatic
// repeat behind your back.
final floor = OrblitMaterial(
key: 8,
tiling: Vector2(3, 3),
baseColourMap: OrblitTexture('/path/albedo.png'),
normalMap: OrblitTexture('/path/normals.png', srgb: false),
metallicRoughnessMap: OrblitTexture('/path/packed.png', srgb: false),
);
// Blending is the one property that cannot change without recompiling the
// shader, so it selects which compiled surface the object is drawn with.
final glass = OrblitMaterial(
key: 9,
blend: OrblitBlend.transparent,
baseColour: Vector4(0.5, 0.78, 0.9, 0.45),
roughness: 0.15,
);
// Objects name a material by its key; the renderer keeps one instance behind
// however many are made of it.
OrblitScene(
objects: [OrblitObject(key: 1, material: 7, transform: ..., colour: ...)],
materials: [brass, floor, glass],
camera: camera,
);

From materials.dart. To open the gallery on it:

Terminal window
ORBLIT_EXAMPLE='materials' flutter run -d macos

A wall of textures named at once — pictures, Basis and cooked sets chosen by the device — lit by a picture filtered at run time.

// On the web, fetch the best file the device samples and provide it.
for (final candidate in device.textureCandidates('wall.ktx2')) {
final bytes = await fetchBytes('textures/$candidate');
if (bytes == null) continue;
await OrblitResources.provide(
OrblitResources.nameFor('textures/$candidate'), bytes);
break;
}
OrblitMaterial(
key: 1,
baseColourMap: OrblitTexture(OrblitResources.nameFor('textures/wall.ktx2')),
);
OrblitScene(
objects: [...],
environment: OrblitEnvironment.fromImage(
OrblitResources.nameFor('pictures/place.hdr')),
camera: camera,
);

From textures.dart. To open the gallery on it:

Terminal window
ORBLIT_EXAMPLE='textures' flutter run -d macos

Two surfaces on one mesh: linear, masked, and masked by height.

// One material, two surfaces. The mask decides between them — and what the
// mask is taken to mean is the mode.
OrblitMaterial(
key: 1,
baseColourMap: OrblitTexture(cobbles),
blendBaseColourMap: OrblitTexture(grass),
blendMaskMap: OrblitTexture(height, srgb: false),
blendMode: OrblitBlendMode.maskedDepth,
blendAmount: 0.5, // how much grass there is
blendSharpness: 14, // how hard the handover is
blendTiling: Vector2(5, 5), // grass at its own scale
)
// linear — the amount, everywhere, ignoring the mask.
// masked — the mask scaled by the amount: a proportional fade.
// maskedDepth — the mask read as a height, so the low ground fills first.

From blend.dart. To open the gallery on it:

Terminal window
ORBLIT_EXAMPLE='blending' flutter run -d macos

Posters, scorches, a puddle and road paint projected onto a floor and a wall, lit and shadowed with the surface under them.

// A poster: a box whose own y is the way it is thrown. A quarter turn about
// x throws it along minus z, onto a wall facing the camera. The box's x and
// z are the picture's width and height; its y is how deep it reaches.
OrblitDecal(
key: 101,
position: Vector3(-1.6, 2.1, -2.9),
rotation: Quaternion.axisAngle(Vector3(1, 0, 0), math.pi / 2),
size: Vector3(1.6, 0.4, 2.2),
texture: OrblitTexture('/path/poster.png'),
)
// A puddle: mostly a colour and a roughness. Painted before the floor is
// lit, so it reflects the sun where the dry floor round it does not.
OrblitDecal(
key: 103,
position: Vector3(0.6, 0, 2.2),
size: Vector3(2.6, 0.3, 1.5),
texture: OrblitTexture('/path/puddle.png'),
colour: Vector3(0.05, 0.06, 0.07),
roughness: 0.04,
)
// Paint that leaves anything on layer one alone.
OrblitDecal(
key: 105,
position: Vector3(2.4, 0.6, 0.4),
size: Vector3(2.6, 1.6, 2.6),
texture: OrblitTexture('/path/splash.png'),
layers: {0},
)
// Past thirty-two in one scene, the rest are reported rather than painted.

From decals.dart. To open the gallery on it:

Terminal window
ORBLIT_EXAMPLE='decals' flutter run -d macos