Another web app sample with ThreeJS integration. Primarily for KaiOS, however the concept can be adapted for any platform.
It showcases a technique for creating an endlessly scrolling terrain without having to have a huge terrain mesh in memory or requiring dynamic tessellation. The terrain mesh in this example only covers the cameras frustum and is completely static. To achieve the scrolling effect, only the textures on the mesh are scrolling and rotating by modifying the UVs.
The terrain topology is based on a height map. The transformation is done in the vertex shader, thus the terrain “looks” flat when trying to access its height through the game code. To make the transformed shape accessible in code, the height map value will be read when casting a ray towards the terrain, multiplied by the same factor that the shaders uses for the displacement. This is required to detect collisions with the ground.
The surface normal can also be accessed by reading a normal map, that is derived from the height map.
Live demo:
https://ays-arts.de/public/terrain/
Project on GitHub
https://github.com/Sekuta82/ScrollingTerrain_KaiOS
