reactjsreduxdeck.glkepler.gl

request rendering of new frames in kepler.gl


how can I request the rendering of a new frame in kepler.gl?

I created an animated deck.gl layer, like the one in the vis.academy tutorial: http://vis.academy/#/custom-layers/5-custom-uniform

and I also successfully integrated that layer with kepler.gl.
however, kepler.gl updates the layer (renders a new frame) only when I move the mouse or the viewport.

in deckl.gl, the requesting of new frames is configured in the initialization of the app:

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        width: window.innerWidth,
        height: window.innerHeight,
        longitude: -74,
        latitude: 40.7,
        zoom: 11,
        pitch: 30,
        maxZoom: 16
      }
    };
    this._resize = this._resize.bind(this);
    this._animate = this._animate.bind(this);
    this._onViewportChange = this._onViewportChange.bind(this);
  }

......

  _animate() {
    this.setState({});
    this._animation = window.requestAnimationFrame(this._animate);
  }

however, so far I was not able to figure out the corresponding action in kepler.gl.


Solution

  • actually, I managed to get the animation working by porting the code in the question to the kepler.gl app.js in the following way:

    first, add the following method into the App class definition:

    class App extends Component {
      _animate() {
        this.setState({});
        this._animation = window.requestAnimationFrame(this._animate);
      }
    

    then, add in componentDidMount() {

    this._animate();
    

    add in componentWillMount() { //(this line is called in the App's constructor in the deck.gl examples.)

    this._animate = this._animate.bind(this);
    

    and finally in componentWillUnmount() {

    window.cancelAnimationFrame(this._animation);
    

    what (I assume) happens here:

    anyone with a deeper insight, please feel free to extend my very superficial explanation.