Skip to content
StaticContainer for gl-react-dom: render the Surface once, snapshot it and release the WebGL context
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.eslintrc
.gitignore
README.md
package.json

README.md

gl-react-dom-static-container ![](https://img.shields.io/badge/gl--react--dom->= 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:

2

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:

1

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.

Props

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

Usage

var GLStaticContainer = require("gl-react-dom-static-container");
// or
import GLStaticContainer from "gl-react-dom-static-container";

...

<GLStaticContainer>
  <Surface ...>
    ...
  </Surface>
</GLStaticContainer>

Full Example

(see example/ folder)

You can’t perform that action at this time.