request rendering of new frames in kepler.gl

Question

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.

score 0 · Accepted Answer · answered Mar 20 '19 at 13:01

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:

calling this.setState({}); will change the App's internal state und thus trigger the rendering of a new frame.
passing the animation call to window.requestAnimationFrame(this._animate); will result in an endless loop where the browser calls _animate() 60 times per second.
the endless loop will be interrupted when the App (component) will be unmounted.

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

request rendering of new frames in kepler.gl

1 Answers1