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