##### Geometry Tile Sets

The geometry tile sets for the seawater regions that are closer to the islands' shore have been split up into three separate regions and then further improved to include animation frames. These three regions are for the beach, shallow seawater, and turquoise seawater.

The beach region tile set has only two keyframes for the seawater. We use a darker shade of blue for certain pixels in the second keyframe to imagine how the seawater would approach the beach and recede from the shore.

![Updated tile-sets for the beach region.](ipfs://QmatedcvcyRpKCEC64VGcSNvAFRhCMBgw4MZU7hd5EKm8i)

The shallow seawater region is further split into two sections, with three keyframes each. This is the region after the beach water and before the turquoise seawater region. The turquoise seawater region is also similarly modelled, but it has to connect appropriately to the offshore seawater region that is even further away from the coast.

We model the animations to imagine how the colours of the seawater would change when transitioning from the turquoise seawater region through the shallow seawater region, before reaching the beach. We need to ensure that there is a smooth transition of colours from the darker shades of the turquoise seawater region to the lighter ones in the shallow region.

![Updated tile-sets for shallow and turquoise seawater regions.](ipfs://QmSce8F992nHiy2ioawksHcWGMuAmrTCBbyQM9RnMgHoCk)

After putting the seawater tiles together and adjusting the colour bands for the correct colours, a sample shallow seawater region around an island is made to determine if the shallow seawater animation has sufficient correctness.

The first four sample keyframes examine how the seawater approaches the island and the seawater regions closer to the beach get contracted.

![First four sample keyframes](ipfs://QmaYxkNTHMSkXvYH8XGds5YKubG6gp7bAmK8HBLP9DFcRQ)

The next four sample keyframes simply reverse the previous animation sequence, showing the seawater receding from the beach and stretching away from the island.

![Next four sample keyframes](ipfs://QmbQad2gS9uPVHFs3yTKspoERszH2THsyuSwL2MdYArkYi)

Next, we made the reef seawater region to surround the turquoise seawater. The flow of the seawater in this region moves in either a west or south direction. This is to simulate the flow of seawater around the island along its surrounding reefs. This also allows for a transition to the deeper seawater regions that lie next to the reefs.

The geometry tile sets have dimensions of 4x4, 4x8, 8x4, 4x12, 12x4, 4x16, 16x4 points. Each tile set has 16 keyframes for animation. For example, a 16x4 points tile will wobble its pixel colours in a west direction, while a 4x16 points tile will do similarly in a south direction.

![New tile-sets for 4x4,4x8,4x12,4x16 point regions.](ipfs://QmPshDVqrDEuuyR4PHJ8H2TUNy1VaBC5e6T45V8xk1jZ9J)

![New tile-sets for 8x4,12x4,16x4 point regions.](ipfs://QmdBR1c9Rp7q6zDJCTRp4q45HC27cSsaVoLcVqSVxiPkhd)

Further away from the reefs, the seawater is modeled using larger tiles, allowing enough space for showing the web-like wave crests. The wave crests are set to have brighter colours compared to its surrounding region within the same tile.

These geometry tile sets have dimensions of 4x4, 8x8, 12x12, 16x16 points. Each tile set also has 16 animation keyframes. The larger 16x16 points tile sets are able to show the web-like wave crests. Since these tile sets are of squarish dimension, the seawater animation is set to flow in a south-west direction.

![New tile-sets for 4x4,8x8,12x12 point regions.](ipfs://QmPU4ZnjhkrhkXdVfyw9otusGnpmjXAEU3TgwKwZzetTq6)

![New tile-sets for 16x16 point regions.](ipfs://QmY1CM2auoBmhcPiZTLAu9AkJHE8z2h3REGhHJE56gr71Q)

##### Seawater Animation

The seawater around these equatorial and subtropical island reefs is set to be turquoise. Shallow seawater will approach and recede from the beaches, while the seawater around the reefs flows along its contours around the island. The deeper seawater regions flow in a south-west direction with a web of wave crests.

::video[Seawater animation around tropical islands.]{src="ipfs://QmXgh5FaToGxrPriJVVUKNX2n3dE1SyfXdcmzPEMPkEBFL"}

For temperate and subpolar climate regions, the shallow seawater colours are currently set to light blue. They will be adjusted in a future iteration when there is more information based on real-world geography.

::video[Seawater animation around temperate islands.]{src="ipfs://QmaSCsWVF6x1Zix15vvFyKhxmDQtVS3WYsVhnAyJE5JVoK"}

::video[Seawater animation around sub-polar islands.]{src="ipfs://QmXwSqDKuvB4ibsDWjGmFn8m3NAfEW3LqUmZTCDiVYVYwx"}

Seawater colours outside of the island zones will transition to darker shades of blue as the distance away from the islands increases.

::video[Seawater colour transition.]{src="ipfs://QmVvreRDWLWmtaBZoCnEZ6rTLi56undwaM9MmCjmGy4Pv6"}

##### Graphics Engine Upgrades

The graphics engine has been further upgraded to eliminate stalling due to large memory allocations and to break up long and time-consuming tasks.

During the voxel geometry chunk updates, which are time-consuming, the process is now delegated to a worker thread for each chunk. This is done using Javascript's Web Workers functionality, which allows concurrent computations to be done in a thread within the CPU multi-core. Since the number of threads is limited to 2 per core, the geometry chunks are also not issued for updates together in the same time frame. The updates are spread out over a period of time using a queue system. The more CPU cores the system has, the faster the scene geometry gets updated.

In order to reduce the memory bandwidth that each geometry chunk would require, the system makes use of the unsigned byte data type for its vertex buffers and unsigned short for its index buffers. The vertex buffers store data indices for indirect texture access in order to access unique geometry data in the vertex textures.

Since the system uses a modified CPU-based sparse voxel octree, we can reconstruct the world-space position in the vertex shader. Hence, the system does not store the world-space position in floating-point precision in the vertex buffer. It also recovers other attributes such as the texture coordinates, world-space normals, and animation indices.

Furthermore, the system does not store all of its data indices in the entire voxel chunk. It splits up the geometry data for each voxel cell, which in turn creates their own geometry buffers. This is done after the geometry chunk has been updated.

The creation and copying of geometry buffer attributes are also done in an iterative manner, so that the engine system does not stall due to excessive memory allocation in the same frame. Furthermore, the system makes use of an attribute reuse sub-system in order to reuse previously allocated memory that was returned to the free pool. In this case, the system only needs to copy the geometry data over into these reusable attribute buffers.

During rendering, draw calls are executed for each of these voxel cells. At the moment, the renderer does not currently use the glMultidraw extension, but this will be implemented in a future iteration.

With respect to the seawater animation, all the mesh data indices are combined into the geometry buffers for each animation keyframe. So during rendering, we can simply check if the current animating frame requires a specific geometry mesh, otherwise, it will be displaced out of the viewport.

##### Released tokens

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::24032" data_spec="FX-GEN-DATA-002"}

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::24045" data_spec="FX-GEN-DATA-002"}

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::24082" data_spec="FX-GEN-DATA-002"}

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::24182" data_spec="FX-GEN-DATA-002"}

##### References

Littlecube Island Maps: Development Techniques

<https://www.fxhash.xyz/article/littlecube-island-maps:-development-techniques>


In this article, we will discuss some technical solution changes for the project to procedurally generate the flowing animations for the seawater. We will also describe some of our development updates to our custom-built voxel graphics engine.

Indie game developer for Littlecube Valley, a research-oriented game project using NFTs.

Research & development engineer (Computer Graphics). 
Digital artist making living worlds and animations using voxel art.

Littlecube Island Maps: Development Update (v2)

Written by

Editions

Share

Details

stay ahead with our newsletter