StaticContainer for gl-react-dom: render the Surface once, snapshot it and release the WebGL context
Switch branches/tags
Clone or download
Latest commit c51cd70 Jun 18, 2016

gl-react-dom-static-container ![](>= 2.0-05F561.svg)

<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.

without gl-react-dom-static-container:


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.

with gl-react-dom-static-container:


gl-react-dom-static-container solves 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.


  • children required (node): the <Surface> created with gl-react-dom.
  • 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 shouldUpdate value to true, the WebGL will continue to render the <Surface> (unless maximumConcurrent is reached). When shouldUpdate is set back to false, and after a debounceShouldUpdate duration, the Surface will be captured and cached in an image.
  • debounceShouldUpdate (number in ms): see shouldUpdate prop.
  • 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";


  <Surface ...>

Full Example

(see example/ folder)