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.