Scrolling Grid Maps for Flight Simulations

One of the challenges of creating a flight simulation program is to create a moving landscape. One of the more basic methods of doing so is with a scrolling grid map. You can texture the squares within this grid to create a reasonable looking landscape.

However, one challenge with using a grid map is that you would like to have fairly detailed ground squares for when you are close to the ground. But you would also like those squares to reach to the horizon. This can require an enormous number of squares.

A solution to this problem is to use nested scrolling grid maps that have an inner map with smaller, but more detailed, squares and an outer map with larger, less detailed, squares.

Here are a couple of demo programs which illustrate both types of maps:

Scrolling Grid Map
Nested Scrolling Grid Maps

These versions are not textured, so that you can copy them and play with them locally on your computer (the only external references are to three.js and a style sheet).

I will be adding a textured version to (hopefully) demonstrate that the nested map can be used to create a seamless map that stretches from here to infinity (and beyond?).

To show the maps in action, I have added a small aircraft that you can fly around the map, using either the arrow keys or the buttons. There are two camera views: a “God’s Eye” View and an Airplane-Centered View.

While these may seem simplistic compared to programs that create terrain using large mesh maps, those mesh maps can have a negative impact on performance. And, to a large extent, those mesh maps are overkill because much of the world is relatively flat and because, above a certain altitude, the terrain is not a factor in either air navigation or air combat. In many cases, it makes more sense to use a scrolling grid map that is supplemented by models of features of interest, such as mountains, placed above the scrolling map. This is certainly true over the ocean where all you need is an ocean-textured grid map combined with Blender models of islands of interest.

ADDITION
There is a general discussion of Scrolling Grid Maps on my Aviation Webpage. This page includes links to the above demo programs and will include links to additional demo programs, such as a textured version of a 33X33 single grid map.

MORE
Added non-textured Scrolling Map with Sky. Excellent blending between Earth and Sky (using Fog and a Skydome). This is equivalent to 50 miles visibility at 30k feet.

TEXTURED NESTED SCROLLING MAP
Here is a textured version of the above. For the larger squares, I wanted to avoid having to use several faces, each with a separate texture since it seemed that might be as bad as having separate squares. Instead, I was able to find a method to create a single texture for each large square. This is done only at the beginning so it does not affect frame rate - which seems steady at 60 fps.

LATEST IMPROVEMENTS (5/19/22)
I have now created a 3X nested grid. This allows me to use a texture resolution of 1 pixel per 4 inches when flying close to the ground and to still have a maximum visibility range in excess of 50 miles. So this environment should work well with about every kind of aircraft. Here are the links to the examples:

Now I just need to improve the textures and add things like roads and trees like:these.

The whole topic of Grid Mapping is discussed in more detail in the “How To” section of my webpage under Mapping.

One major improvement is that I am now using an HTML canvas to allow the GPU to handle more of the initial setup. I found that I could create ImageData files using a combination of fillRect and getImageData. I could then customize each image by changing the values in imageData.data. I could also resize the images using a combination of putImageData, drawImage (using the canvas as the image) and getImageData.

LATEST (6/1/22)
I have upgraded the ocean version of the 3X map to included animated waves. Here is webpage discussing these changes with links to several examples. As you can see, it is possible to seamlessly display these waves on all the squares in a grid.

1 Like

\color{#0FF}{Nice,} Keep it coming

\Biggl(\biggl(\Bigl(\bigl(❤\bigr)\Bigr)\biggr)\Biggr)