cesiumjs-materials-shaders

Configure CesiumJS materials, shaders, and post-processing pipelines.

112|16|Updated Mar 31, 2026
One-click install
npx skills add https://github.com/CesiumGS/cesiumjs-skills --skill cesiumjs-materials-shaders
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: cesiumjs-materials-shaders
Source: https://github.com/CesiumGS/cesiumjs-skills/tree/main/skills/cesiumjs-materials-shaders
Command: npx skills add https://github.com/CesiumGS/cesiumjs-skills --skill cesiumjs-materials-shaders

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Rendering CesiumJS scenes with advanced materials and post-processing can be complex and error-prone; developers need a unified guide to create Fabric materials, apply image-based lighting, and configure screen-space effects.

Core Features & Use Cases

  • Material system: define Fabric materials (Color, Image, checks, patterns) and apply them via MaterialAppearance to primitives and entities.
  • Image-based lighting and post-processing: enable realistic lighting and effects like bloom, tonemapping, and depth of field across models and tilesets.
  • Shader authoring and integration: create CustomShader or GLSL-based materials and apply them to models, tilesets, or voxels for advanced visual customization.
  • Use Case: design a cesium viewer scene with a glossy fabric material on a primitive, integrated post-processing, and a custom shader for feature highlighting.

Quick Start

Use this skill to create and apply a Fabric material with image-based lighting on a CesiumJS primitive or model.

Frequently Asked Questions about cesiumjs-materials-shaders

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create custom materials in CesiumJS using the Fabric system?

CesiumJS Fabric materials define visual properties like color, images, and patterns for primitives and models. You apply them using MaterialAppearance to customize rendering for entities and tilesets.

How do I add post-processing effects like bloom and depth of field to a CesiumJS scene?

CesiumJS post-processing pipelines apply screen-space effects including bloom, depth of field, and tonemapping to models and tilesets. You configure these visual enhancements through PostProcessStage APIs.

Can I write custom GLSL shaders for CesiumJS models and tilesets?

CesiumJS supports custom GLSL shader authoring through the CustomShader API, allowing advanced visual customization for rendering primitives, 3D models, voxel volumes, and tilesets.

How does image-based lighting work in CesiumJS for realistic rendering?

Image-based lighting in CesiumJS enables realistic illumination on models and tilesets by using environment reflection data. It integrates with the material system and post-processing pipeline for enhanced visual fidelity.

What is the best way to apply a glossy material to a CesiumJS primitive?

To apply a glossy material to a CesiumJS primitive, define a Fabric material with the desired visual properties and attach it using MaterialAppearance, integrating image-based lighting for realistic reflections.

Does CesiumJS 1.139 support custom shaders for feature highlighting on tilesets?

CesiumJS 1.139 supports custom shader integration for feature highlighting on tilesets and models, using the CustomShader API to inject specific GLSL code for advanced visual differentiation.