cesiumjs-custom-shader

Write and apply custom GLSL shaders to CesiumJS rendering pipelines.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables developers to author and attach custom GLSL shaders to CesiumJS rendering pipelines, allowing access to per-vertex attributes, feature IDs, and metadata for advanced shading and visual effects.

Core Features & Use Cases

  • Create vertexMain and fragmentMain entry points to customize Model, Cesium3DTileset, and VoxelPrimitive rendering.
  • Access EXT_mesh_features and EXT_structural_metadata to color by feature or property, perform vertex displacement, or drive voxel shading in fragments.
  • Integrate with cesiumjs-material-shaders, cesiumjs-3d-tiles, and cesiumjs-models-particles to compose rich visuals.

Quick Start

Create a CustomShader with vertexShaderText and fragmentShaderText and attach it to a Model or Cesium3DTileset to begin shader-driven rendering.

Frequently Asked Questions about cesiumjs-custom-shader

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

FAQPage Schema
How do I write custom GLSL shaders for CesiumJS 3D models and tilesets?▼

To write custom GLSL shaders for CesiumJS, you define vertexShaderText and fragmentShaderText entry points and attach them to a Model or Cesium3DTileset via the CustomShader constructor to override default rendering.

Can I use EXT_mesh_features and structural metadata to color CesiumJS primitives per-feature?▼

Yes, you can access EXT_mesh_features and EXT_structural_metadata inside custom GLSL fragment shaders to read feature IDs and property tables, enabling per-feature coloring and visual effects on CesiumJS primitives.

What is the best way to apply vertex displacement in CesiumJS rendering pipelines?▼

The best way to apply vertex displacement in CesiumJS is by authoring a vertexMain entry point in a CustomShader, allowing you to manipulate per-vertex attributes directly within the WebGL rendering pipeline.

Does CesiumJS support custom shading for VoxelPrimitive rendering?▼

Yes, CesiumJS supports custom shading for VoxelPrimitive rendering by utilizing the CustomShader API to inject GLSL fragment logic, enabling specialized voxel shading and metadata-driven visual effects.

What configurations are required for the CesiumJS CustomShader constructor?▼

The CesiumJS CustomShader constructor requires specifying mode, lightingModel, translucencyMode, uniforms, varyings, and the vertexMain and fragmentMain shader entry points to properly integrate custom GLSL.