cesiumjs-materials-shaders

CesiumJS Materials, Shaders & Post-Processing

Version baseline: CesiumJS 1.144 (August 2026). All imports use ES module style.

Material System (Fabric JSON)

Material defines surface appearance for Primitives through a JSON schema called Fabric. Materials compile to GLSL and are consumed by MaterialAppearance or PolylineMaterialAppearance.

While a material's image loads, CesiumJS renders a placeholder texture that defaults to white. Since 1.144 the static Texture.defaultColor changes that placeholder color to avoid white flashes during material construction. Note that the Texture class is runtime-public but absent from the published TypeScript definitions, so TypeScript callers need a cast.

Built-in Material Types

Surface: Color (color), Image (image, repeat), DiffuseMap, AlphaMap, SpecularMap, EmissionMap (image, channel(s), repeat), BumpMap, NormalMap (image, channel(s), strength, repeat).

Patterns: Grid (color, cellAlpha, lineCount, lineThickness), Stripe (evenColor, oddColor, repeat), Checkerboard (lightColor, darkColor, repeat), Dot (lightColor, darkColor, repeat).

Effects: Water (baseWaterColor, blendColor, normalMap, frequency, animationSpeed, amplitude), RimLighting (color, rimColor, width), Fade (fadeInColor, fadeOutColor, maximumDistance).

Terrain: ElevationContour (color, spacing, width), ElevationRamp (image, minimumHeight, maximumHeight).

Polyline: PolylineArrow (color), PolylineDash (color, gapColor, dashLength, dashPattern), PolylineGlow (color, glowPower, taperPower), PolylineOutline (color, outlineColor, outlineWidth).

Creating Materials

import { Material, Color, Cartesian2 } from "cesium";

// Shorthand with fromType (preferred for built-in types)
const colorMat = Material.fromType("Color", { color: new Color(1.0, 0.0, 0.0, 0.5) });

// Full Fabric notation
const gridMat = new Material({
  fabric: {
    type: "Grid",
    uniforms: { color: Color.GREEN, cellAlpha: 0.1, lineCount: new Cartesian2(8, 8) },
  },
});

// Async loading -- awaits textures before first frame, no flicker
const imageMat = await Material.fromTypeAsync("Image", { image: "./textures/facade.png" });