cesiumjs-custom-shader

CesiumJS CustomShader

Version baseline: CesiumJS 1.144. All imports use ES module style.

CustomShader injects user GLSL into the Model / Cesium3DTileset / VoxelPrimitive rendering pipeline. It exposes glTF attributes, feature IDs, and EXT_structural_metadata to per-vertex and per-fragment code, and returns values through the built-in czm_modelVertexOutput and czm_modelMaterial structs.

Use this skill for writing the shader body. Use:

• cesiumjs-materials-shaders — for Fabric Material, ImageBasedLighting, PostProcessStage (bloom, SSAO, FXAA, tonemapping).
• cesiumjs-3d-tiles — for declarative per-feature coloring via Cesium3DTileStyle, and for VoxelPrimitive setup/configuration.
• cesiumjs-models-particles — for Model.fromGltfAsync, animations, ModelFeature.getProperty().

Out of scope

• Fabric Material for entity polylines/polygons/walls — see cesiumjs-materials-shaders.
• PostProcessStage screen-space effects — see cesiumjs-materials-shaders.
• ImageBasedLighting — see cesiumjs-materials-shaders.
• Cesium3DTileStyle declarative JSON styling — see cesiumjs-3d-tiles. Do not combine with CustomShader on the same tileset.
• Authoring EXT_structural_metadata / EXT_mesh_features in glTF — tooling concern, not runtime.

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.0, 0.0);
    }
  `,
});

const model = await Model.fromGltfAsync({ url: "./aircraft.glb", customShader: shader });
viewer.scene.primitives.add(model);

Note: Writing material.alpha requires translucencyMode: CustomShaderTranslucencyMode.TRANSLUCENT — see "Translucency" below. On opaque models with the default INHERIT mode, alpha writes are silently ignored.

Visual eval framing: after adding a shadered Model, wait until the model is ready enough to render, then frame a known target point explicitly. Do not rely on the first post-load frame or on a tiny default-scale model. For public model evals, set minimumPixelSize (usually 256-400), use a moderate scale, and add a silhouette or strong color tint when the shader effect is the thing being judged.