animated tile provider

CesiumJS
1

I’m creating a program to create and visualize fantasy worlds, so I need to be able to have custom tile providers. Fortunately, Cesium allows me to do this without needing a tile server.

I’ve been practicing the different ways Cesium gives me to have my own tile providers. For example, the following is a tilemap: it uses a texture atlas and a canvas. I cut the atlas and paste the cut pieces onto another canvas to form a map. This is based on a SCV (Single Value Catalog).

image
image1916×983 382 KB

My question is this: can I create an animated tilemap? I’d like to be able to represent movements and animations on a tile, not on an overlaid image. Is that possible? Performance isn’t a concern; I just want to know if it’s possible and how, so I can study it and see how to implement it.

The other thing is, I need to know if there’s a way to update individual tiles without having to reload the page. I’m working on this because I created a function that detects which tiles you want to extract, so you can draw the map yourself right in that area. Once drawn, it’s cropped and saved, allowing you to draw the world by hand. But I don’t know how to update only the tiles I change, so I don’t have to reload the whole page.

2

Hey @nahured! Welcome to the Cesium Forum!

In regards to animated tilemaps, there is potential you may have some luck with TimeDynamicImagery. Have you looked into that at all? It may at the very least give you insight on how to get started, but this is more intended for things like weather radar. Given your fantasy world and use case, you may only want animations in limited areas, character movement, rivers, fire etc. You could place Entity rectangles on the ground with an ImageMaterialProperty driven by a CallbackProperty. Cesium re-evaluates callback properties every frame automatically. I haven’t tested this but potentially something like:

viewer.entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(west, south, east, north),
    material: new Cesium.ImageMaterialProperty({
      image: new Cesium.CallbackProperty(() => {
        return getAnimationFrame(currentFrame); // return a Canvas
      }, false),
    }),
  },
});

This would keep it separate from your tilemap which should hopefully simplify things for you. If you have the assets or means to get them, CesiumJS also supports 3D animated objects as well (e.g. Sandcastle | CesiumJS). But that is totally dependant on the visual style you’re going for.

For updated individual tiles without reloading, from my understanding you are serving your Tilemap from memory and not from an external service? So in theory you should be able to update the Tile there, and then refresh the layer? Would you care to mention what you have tried already for this?

Curious to here more about your use case, I can see lots of TTRPG this would be useful for or even if you’re writing a story and world building etc.

Let me know how you go!

1 Like
3

Thank you very much, I’ll be looking into using an entity instead of an image provider.

In my case, what I do is convert coordinates in degrees to the tile number that represents that point’s position according to the zoom level. Once I have two points, I can create a grid that represents an area of ​​the tiles. I do an ascending search in the tile tree and reconstruct the tiles I want to generate by increasing the size of the parent tiles. I export these as an image and edit them in a drawing program. Then I put it back into the program that remembers the tiles they represent, crops the image, and saves each tile in its place. That’s how I paint the fantasy world.

1 Like