Experimental animation support in layers

36 views
Skip to first unread message

Smári McCarthy

unread,
Jan 18, 2023, 8:08:21 PMJan 18
to openglobus
Hi all,

  I've created a smallish patch (see URL below) which adds per-tile animation support. There's an example of this in examples/animatedLayer.

   Now, currently, this is something of a double-edged sword, since it's very easy to essentially drive your frame rate down to something obnoxiously low. My feeling is that the strategy I'm using isn't sufficiently selective, so it's not just rerendering currently visible tiles in the layer, but also non-visible tiles. If somebody can suggest a fix for this, I'd appreciate it.

  Also, the example isn't great, since it uses a <canvas> node to draw, which is somewhat slow, and works in a way where the textures are being thrown away after each update instead of reusing them and drawing into them again ─ which would save a lot of time and reduce garbage collection.

  Anyway, I thought I'd share it anyway, in the spirit of "release early, release often", and hopefully somebody can advise me on how to improve the performance.


   Thanks!
     - Smári

Michael Gevlich

unread,
Jan 20, 2023, 3:50:14 AMJan 20
to openglobus
Hey Smari! I see your code, good job! But I have to explain something first. 

Your code  works fine, but not optimally, because of:
1) traversing tree second time is not necessary
2) no need second requestAnimationFrame
3) every time you creates texture, which is heavy thing.

I suggest to replace all logic inside applyMaterial method. Just debug applyMaterial inside CanvasTiles. The key is that each frame you already have visible nodes(*), and each frame each node try appllyMaterial. 

(*) Check globus.planet.renderedNodes

Like this:

applyMaterial(material) {
    if (material.isReady) {
        if (material.layer.animated) {
            requestAnimationFrame(() => {
                this.drawTile(material,
                function (canvas) {
                    material.applyImage(canvas);
                });
            });
        }
        return [0, 0, 1, 1];
....

But, it work slow(but much better) too because of 3. If you check profiler you will see that createTexture takes a lot. In this case I strongly recommend use GeoTexture2D for wind animation etc, but this is shader deal always.

Michael Gevlich

unread,
Jan 20, 2023, 3:52:56 AMJan 20
to openglobus
Just put debug pointer into applyMaterial of the CanvasTile layer and you will see that it waork every frame. Just put applyMaterial and it will be redrawn.

Michael Gevlich

unread,
Jan 20, 2023, 5:56:16 AMJan 20
to openglobus

Smári McCarthy

unread,
Jan 23, 2023, 8:46:52 AMJan 23
to Michael Gevlich, openglobus
Hi! 

Thanks for this. I didn't know GeoTexture2D supported that already, and hadn't found it in the documentation. There's a lot of magic in this system. :-)

In this case, how would I go about making a GeoImage/GeoTexture that covers the entire planet?

 - Smári



--
You received this message because you are subscribed to a topic in the Google Groups "openglobus" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/openglobus/QoXt2Q1JEnI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to openglobus+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/openglobus/384726ec-bbf7-42e0-8d6b-db1eb299b381n%40googlegroups.com.

Michael Gevlich

unread,
Jan 26, 2023, 3:48:46 AMJan 26
to openglobus
First, there is an example http://openglobus.org/examples/geoTexture2d/geoTexture2d.html It shows how to display animated render buffer. Animated render buffer is always uses webgl interface, so you need some glsl and webgl skills to implement GeoTexture2d animation. Second, check this tutorial https://blog.mapbox.com/how-i-built-a-wind-map-with-webgl-b63022b5537f

P.S. I just noted that example doesn't work anymore. I'll fix it asap.

Michael Gevlich

unread,
Jan 26, 2023, 3:58:27 AMJan 26
to openglobus
Reply all
Reply to author
Forward
0 new messages