3D Materials

A material decides how the surface of a mesh responds to light: its color, how shiny or matte it is, whether it is metallic, see-through or glowing. It is declared once, as an element, and assigned to any number of meshes through their material property:

<pacem-3d-material-standard id="steel" color="#c9cdd2" metalness="1" roughness=".25"></pacem-3d-material-standard>
<pacem-3d-mesh geometry="{{ #sphere.geometry }}" material="{{ #steel.material }}"></pacem-3d-mesh>

Three materials cover most needs, from the cheapest to the most realistic:

• basic: a color (or a texture), shaded with a simple light model; predictable and cheap;
• standard: physically based (the glTF 2.0 metalness/roughness model): metals, plastics, wood, stone... under any lighting;
• physical: the standard one plus light passing through the surface: glass, water, gems.

Every demo below has a shape selector, sliders to play with the attributes and a few ready-made presets as starting points. Drag on a stage to orbit the camera.

Basic

<pacem-3d-material-basic> shows its color, optionally multiplied by a texture (map), as it is: no physics, no tone mapping. When the scene has lights, it gets a gentle half-Lambert shading, which never goes fully black on the side away from the light. opacity below 1 makes it see-through, flat-shading lights every face uniformly.

Use it for flat, illustrative looks, helpers and anything that must keep its exact color.

Standard

<pacem-3d-material-standard> is physically based: the glTF 2.0 metalness/roughness material, the one Blender, three.js and game engines share, so models look the way their authors intended. Two numbers describe most real surfaces:

• metalness: dielectric (0: plastic, wood, stone, paint) or metal (1); metals have no diffuse color and reflect tinted;
• roughness: from 0, a mirror, to 1, completely matte.

The color is the diffuse color of a dielectric, the reflection color of a metal. emissive-color and emissive-intensity make a surface glow by itself. Every parameter can vary across the surface through maps (map, metalness-roughness-map, normal-map, occlusion-map, emissive-map, bump-map, opacity-map): the textures selector loads a few full sets. A displacement-map goes further: it really moves the vertices (the aerial rocks and broken brick wall sets, displacement-scale in local units), so it needs finely tessellated meshes, like the ones here. Both come from Poly Haven (CC0), Aerial Rocks 02 and Broken Brick Wall: base color, normal map, occlusion/roughness/metalness packed glTF-style, and displacement. reflect-scene makes the surface reflect the other objects (here, the wall), not just the sky.

Physical

<pacem-3d-material-physical> is the standard material plus what happens to the light that goes through the surface (glTF KHR_materials_ior, _transmission, _volume):

• transmission: the share of light passing through, from 0 (opaque) to 1 (clear glass);
• ior: the index of refraction, how much the view bends (water 1.33, glass 1.5, diamond 2.42); it also sets how much the surface reflects;
• thickness: how far the light travels inside, which shifts what is seen behind;
• attenuation-color and attenuation-distance: the tint white light takes after that distance inside the volume (0 means no absorption): thin glass looks clear, thick glass tinted.

What lies behind the object (the tiled wall) is refracted. With reflect-scene the surface also reflects the wall, faintly when seen face-on and strongly at grazing angles, as real glass does.