<StaticContainer> for gl-react-dom: caches WebGL rendering into an
<img>, free and reuse WebGL contexts. The library schedules the WebGL renderings to limit the maximum concurrent number of running WebGL contexts in order to display a lot of WebGL renderings on the same page.
The maximum concurrent instance limit of WebGL can easily be reach if you try to use at least about 20 WebGL canvas running at the same time.
gl-react-dom-static-containersolves this problem by: (1) caching gl-react rendering into an image and (2) preventing a maximum concurrent gl-react-dom's Surface allowed to run at the same time.
childrenrequired (node): the
maximumConcurrent(number): limit the maximum concurrent
<Surface>instance that can run across all StaticContainer's.
shouldUpdate(bool): set to true to make the StaticContainer render the WebGL. If you keep the
shouldUpdatevalue to true, the WebGL will continue to render the
maximumConcurrentis reached). When
shouldUpdateis set back to false, and after a
debounceShouldUpdateduration, the Surface will be captured and cached in an image.
debounceShouldUpdate(number in ms): see
timeout(number in ms): set the time to wait before the first render happens.
var GLStaticContainer = require("gl-react-dom-static-container"); // or import GLStaticContainer from "gl-react-dom-static-container"; ... <GLStaticContainer> <Surface ...> ... </Surface> </GLStaticContainer>
(see example/ folder)