Improve model shader caching
- Dominant language
- JavaScript
- Stars
- 15.7k
- Forks
- 3.9k
- Avg merge
- 4d 6h
- Merged PRs (30d)
- 34
Description
`Model.js` caches shaders so that multiple `Model` instances that load the same glTF can share the same GL shader program. A model recreates a new shader for itself when it toggles a feature that would alter the shader source, such as clipping planes or color blend mode. One case where this is wasteful is when clipping planes are added to a 3D Tileset because all of the tiles recreate their own shader instead of sharing.
`Model.js` should have a global shader cache similar to `GlobeSurfaceShaderSet` where it caches based on feature state. This way shaders can be shared across many different glTFs. While CesiumJS has a lower-level shader cache this new system would avoid unnecessary processing.
One example where the old system has a bug is when a model has both clipping planes and specular environment maps and clipping planes get turned off. The model will fall back to the cached shader which didn't include the specular environment map code because the environment map wasn't ready when the shader was first created. This would be fixed in the new system if the shader key incorporates both the clipping plane and IBL state.

[Sandcastle](http://localhost:8080/Apps/Sandcastle/index.html#c=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)
Contributor guide
Research direction
Start by reading Model.js and the existing GlobeSurfaceShaderSet caching approach. Use the linked Sandcastle example to observe shader recreation when clipping planes change, including the interaction with specular environment maps. Done means shaders are shared across models based on feature state while clipping-plane and IBL state select the correct shader.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics, performance
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100