CesiumGS / CesiumGS/cesium

Improve model shader caching

Open
#9,141 0 comments 0 reactions 0 assignees View on GitHub
type - enhancement
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.

![Peek 2020-09-06 14-34](https://user-images.githubusercontent.com/915398/92332751-18a80000-f04e-11ea-9759-abe8d1eb29ca.gif)

[Sandcastle](http://localhost:8080/Apps/Sandcastle/index.html#c=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)

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.