From cesiumjs-skills
Creates and applies CesiumJS materials with Fabric JSON, custom GLSL, and built-in types (Grid, Stripe, Water, NormalMap). Covers MaterialAppearance, PBR lighting, and post-processing effects like bloom, DOF, and FXAA.
How this skill is triggered — by the user, by Claude, or both
Slash command
/cesiumjs-skills:cesiumjs-materials-shadersThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Version baseline: CesiumJS 1.142 (June 2026). All imports use ES module style.
Version baseline: CesiumJS 1.142 (June 2026). All imports use ES module style.
Material defines surface appearance for Primitives through a JSON schema called Fabric. Materials compile to GLSL and are consumed by MaterialAppearance or PolylineMaterialAppearance.
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, normalMap, frequency, animationSpeed), 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).
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" });
Use source for inline GLSL. Uniforms declared in uniforms are available by name in the shader.
import { Material, Color } from "cesium";
const pulseMaterial = new Material({
fabric: {
uniforms: { color: Color.CYAN, speed: 2.0 },
source: `czm_material czm_getMaterial(czm_materialInput materialInput) {
czm_material material = czm_getDefaultMaterial(materialInput);
float pulse = sin(czm_frameNumber * speed * 0.01) * 0.5 + 0.5;
material.diffuse = color.rgb;
material.alpha = color.a * pulse;
return material;
}`,
},
translucent: true,
});
import { Primitive, GeometryInstance, RectangleGeometry, Rectangle,
MaterialAppearance, Material, Color, Cartesian2 } from "cesium";
viewer.scene.primitives.add(new Primitive({
geometryInstances: new GeometryInstance({
geometry: new RectangleGeometry({ rectangle: Rectangle.fromDegrees(-100, 30, -90, 40) }),
}),
appearance: new MaterialAppearance({
material: Material.fromType("Checkerboard", {
lightColor: Color.WHITE, darkColor: Color.BLACK, repeat: new Cartesian2(4, 4),
}),
}),
}));
materials + components)import { Material, Color } from "cesium";
const compositeMat = new Material({ fabric: {
materials: {
gridMaterial: { type: "Grid" },
colorMaterial: { type: "Color", uniforms: { color: Color.BLUE } },
},
components: {
diffuse: "gridMaterial.diffuse + 0.2 * colorMaterial.diffuse",
alpha: "min(gridMaterial.alpha, colorMaterial.alpha)",
},
}});
CustomShader injects user GLSL into Model, Cesium3DTileset, and VoxelPrimitive rendering, with access to vertex attributes, feature IDs, and EXT_structural_metadata.
For shader authoring — struct reference, metadata access, feature IDs, voxel subset, 1.139 breaking changes, and seven worked examples — see the cesiumjs-custom-shader skill. This skill owns the CustomShader integration surface; the authoring depth lives there.
Minimal example:
import { CustomShader, Model } from "cesium";
const shader = new CustomShader({
fragmentShaderText: `
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
material.diffuse = vec3(1.0, 0.5, 0.0);
}
`,
});
const model = await Model.fromGltfAsync({ url: "./building.glb", customShader: shader });
viewer.scene.primitives.add(model);
Controls PBR image-based lighting for Model and Cesium3DTileset. imageBasedLightingFactor (Cartesian2) scales diffuse (x) and specular (y) from 0 to 1. Diffuse comes from sphericalHarmonicCoefficients (array of 9 Cartesian3, L0-L2). Specular comes from specularEnvironmentMaps (URL to KTX2 cube map).
import { ImageBasedLighting, Cartesian2, Cartesian3 } from "cesium";
const coefficients = [ // 9 Cartesian3 values for L0..L2 bands
new Cartesian3(0.35, 0.35, 0.38), new Cartesian3(0.11, 0.11, 0.11),
new Cartesian3(0.04, 0.04, 0.04), new Cartesian3(-0.08, -0.08, -0.08),
new Cartesian3(-0.02, -0.02, -0.02), new Cartesian3(0.04, 0.04, 0.04),
new Cartesian3(-0.06, -0.06, -0.06), new Cartesian3(0.01, 0.01, 0.01),
new Cartesian3(-0.03, -0.03, -0.03),
];
const ibl = new ImageBasedLighting({
imageBasedLightingFactor: new Cartesian2(1.0, 1.0),
sphericalHarmonicCoefficients: coefficients,
specularEnvironmentMaps: "./environment/specular.ktx2",
});
const model = await Cesium.Model.fromGltfAsync({ url: "./helmet.glb", imageBasedLighting: ibl });
viewer.scene.primitives.add(model);
// Disable: model.imageBasedLighting.imageBasedLightingFactor = new Cartesian2(0.0, 0.0);
Screen-space pipeline via viewer.scene.postProcessStages (PostProcessStageCollection). Stages execute in order; each reads colorTexture and depthTexture.
createBlurStage() (delta, sigma, stepSize), createDepthOfFieldStage() (focalDistance, delta, sigma, stepSize), createEdgeDetectionStage() (color, length), createSilhouetteStage() (color, length), createBlackAndWhiteStage() (gradations), createBrightnessStage() (brightness), createNightVisionStage(), createLensFlareStage() (intensity, distortion, ghostDispersal, haloWidth).
Bloom, ambient occlusion, and FXAA are accessed directly on the collection (not via the library). Tonemapping defaults to PBR_NEUTRAL.
import { Tonemapper, PostProcessStageLibrary } from "cesium";
// Bloom
viewer.scene.postProcessStages.bloom.enabled = true;
viewer.scene.postProcessStages.bloom.uniforms.contrast = 128.0;
viewer.scene.postProcessStages.bloom.uniforms.brightness = -0.3;
// Ambient Occlusion (HBAO)
viewer.scene.postProcessStages.ambientOcclusion.enabled = true;
viewer.scene.postProcessStages.ambientOcclusion.uniforms.intensity = 3.0;
// FXAA
viewer.scene.postProcessStages.fxaa.enabled = true;
// Tonemapping: REINHARD, MODIFIED_REINHARD, FILMIC, ACES, PBR_NEUTRAL (default)
viewer.scene.postProcessStages.tonemapper = Tonemapper.ACES;
viewer.scene.postProcessStages.exposure = 1.2; // <1 darker, >1 brighter
// Depth of field (added via library)
const dof = viewer.scene.postProcessStages.add(
PostProcessStageLibrary.createDepthOfFieldStage()
);
dof.uniforms.focalDistance = 500.0; // meters from camera
dof.uniforms.sigma = 3.8;
Custom stages receive colorTexture, depthTexture (sampler2D) and v_textureCoordinates (vec2). Output via out_FragColor. Uniforms can be constants or functions (re-evaluated each frame).
import { PostProcessStage } from "cesium";
const sepia = viewer.scene.postProcessStages.add(new PostProcessStage({
fragmentShader: `
uniform sampler2D colorTexture; in vec2 v_textureCoordinates; uniform float intensity;
void main() {
vec4 c = texture(colorTexture, v_textureCoordinates);
float gray = dot(c.rgb, vec3(0.299, 0.587, 0.114));
out_FragColor = vec4(mix(c.rgb, gray * vec3(1.2, 1.0, 0.8), intensity), c.a);
}`,
uniforms: { intensity: () => 0.8 }, // function uniform, re-evaluated each frame
}));
Use czm_selected() in the fragment shader and assign features to stage.selected.
import { PostProcessStage, Color } from "cesium";
const highlight = viewer.scene.postProcessStages.add(new PostProcessStage({
fragmentShader: `
uniform sampler2D colorTexture; in vec2 v_textureCoordinates; uniform vec4 highlight;
void main() {
vec4 color = texture(colorTexture, v_textureCoordinates);
if (czm_selected()) {
out_FragColor = vec4(mix(color.rgb, highlight.rgb, highlight.a), 1.0);
} else { out_FragColor = color; }
}`,
uniforms: { highlight: () => new Color(1.0, 1.0, 0.0, 0.5) },
}));
highlight.selected = [pickedFeature];
import { PostProcessStage, PostProcessStageComposite, PostProcessStageLibrary } from "cesium";
const blur = PostProcessStageLibrary.createBlurStage();
const combine = new PostProcessStage({
fragmentShader: `
uniform sampler2D colorTexture; uniform sampler2D blurTexture;
in vec2 v_textureCoordinates;
void main() {
vec4 orig = texture(colorTexture, v_textureCoordinates);
vec4 blurred = texture(blurTexture, v_textureCoordinates);
out_FragColor = mix(orig, blurred, 0.5);
}`,
uniforms: { blurTexture: blur.name }, // reference another stage's output by name
});
viewer.scene.postProcessStages.add(new PostProcessStageComposite({
stages: [blur, combine],
inputPreviousStageTexture: false, // both read the original scene texture
}));
viewer.scene.postProcessStages.remove(sepia); // remove specific stage
dof.enabled = false; // disable without removing
viewer.scene.postProcessStages.removeAll(); // remove all custom stages
Predefined blending presets for Appearance.renderState on Primitives.
| Preset | Behavior |
|---|---|
BlendingState.DISABLED | No blending |
BlendingState.ALPHA_BLEND | Standard alpha: src*srcA + dst*(1-srcA) |
BlendingState.PRE_MULTIPLIED_ALPHA_BLEND | Premultiplied: src + dst*(1-srcA) |
BlendingState.ADDITIVE_BLEND | Additive: src*srcA + dst |
import { MaterialAppearance, BlendingState, Material, Color } from "cesium";
const appearance = new MaterialAppearance({
material: Material.fromType("Color", { color: Color.RED.withAlpha(0.5) }),
renderState: { depthTest: { enabled: true }, blending: BlendingState.ALPHA_BLEND },
});
Material.fromType() for built-in types -- cached shader programs avoid recompilation.Material.fromTypeAsync() for texture materials to prevent default-texture flicker.PostProcessStage.textureScale below 1.0 (e.g., 0.5) to reduce pixels processed in expensive stages.bloom.enabled = false) -- enabled stages consume GPU resources.PostProcessStageComposite to reduce intermediate texture allocations.PostProcessStage count -- each requires a full-screen draw call and framebuffer.Model.customShader, Cesium3DTileset.customShader, VoxelPrimitive.customShader (struct reference, metadata, feature IDs)npx claudepluginhub cesiumgs/cesiumjs-skills --plugin cesiumjs-skillsWrites custom GLSL shaders for CesiumJS models, 3D tiles, and voxel primitives, with access to vertex attributes, feature IDs, and metadata.
Covers Three.js material types (PBR, basic, phong, shader) and their properties for styling meshes, working with textures, creating custom shaders, and optimizing performance.
Writes custom shaders for Three.js using GLSL or TSL for WebGL/WebGPU. Covers debugging, post-processing, noise functions, procedural textures, and performance optimization.