From cesiumjs-skills
Defines CesiumJS Fabric materials via JSON or GLSL shaders for primitives and entities, configures PBR ImageBasedLighting, and adds post-processing effects like bloom, depth of field, ambient occlusion.
npx claudepluginhub cesiumgs/cesiumjs-skills --plugin cesiumjs-skillsThis skill uses the workspace's default tool permissions.
Version baseline: CesiumJS 1.139 (March 2026). All imports use ES module style.
Authors CesiumJS CustomShader GLSL for Models, Cesium3DTilesets, and VoxelPrimitives using VertexInput, FragmentInput, FeatureIds, and Metadata for EXT_mesh_features, structural metadata, vertex displacement, and custom shading.
Covers Three.js materials including MeshBasic, Lambert, Phong, Standard (PBR), Physical, Toon, and ShaderMaterial. Guides styling meshes with textures, lighting, custom shaders, and performance optimization.
Covers Three.js materials: MeshBasic, Lambert, Phong, Standard, Physical, Toon, shaders, properties for meshes, textures, lighting, performance optimization.
Share bugs, ideas, or general feedback.
Version baseline: CesiumJS 1.139 (March 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)