Use orientation, mouse, qwe-keys to navigate. Canvas is matched to your browser window. 3D WebGL model 60 fps on Nexus 10.

I get the same ~ 60 fps for all 512x512 quests with one rendering call per frame: plain, with z-ordered data, geometry clipmaps, textures (see comments below). 1024x1024 worlds are to heavy (30 fps) as like as the script with view frustum culling (multiple rendering of only visible meshes from 4x4 array).
I've got about 60 / 10 fps for antialias off / on (see tests). Therefore antialiasing is switched off for all quests temporally.

See also Spline based terrains.

Tiny mobile game demos

"Sea quest" tiny demo (512x512 terrain, ~10 kb, all scripts in public domain).
Find 6 poles in correct order (blue, cyan, green, yellow, red and white). The first 4 poles variant. Use q,w,e keys, fingers, mouse or device orientation to navigate in full screen. World number 0 is used.

"Mad racer" on a mountain ring.
"Water racing" (keep the right bank). It is not easy to find this simple trace (stream map). "Top view" mode is added.

Infinite Worlds

Simple terrains

1024×1024 random fractal terrain. 512×512 terrain suits more for Nexus 10. See also terrain with Z-ordered points (512×512 terrain) and "not random" terrain.

Storing elevation grids in 8-bit texutes

2048x2048 foggy terrain is stored in a 8-bit texture with periodic boundaries. 515x512 region is rendered (1024x1024 terrain). 4096x4096 textures are acceptable for Nexus 10 but calculations of normals on CPU are slow (~5 sec for 2048x2048 grids). clipmaps

Geometry clipmaps algorithm

2048x2048 terrain and GPU based geometry clipmaps algorithm with 3 levels of details are used (256x256 patches are sketched on the left). 2 additional layers smooth borders (similar to "Continuous Distance-Dependent Level of Detail for Rendering Heightmaps (CDLOD)" Filip Strugar, 11 July 2010).

Procedural fractal and spline based noise texture are used to make simple animated clouds and water.


1000 simple towers are added (about half of them are "imaginary" images repeated periodically at the borders due to periodicity of the world). 8000 triangles and one more rendring call. 60 fps on Nexus 10. So you can add your own geometry. E.g. beacons or accurate textures for towers (with loopholes). Sorry, no accurate collision test.

"Flying Dutchman" ghost ship. Billboard with transparent picture added.

Lost island

It is difficult to populate accurately a big Lost island.

Fractal terrains

Diamond square algorithm is used to make N×N terrain (N = 2 max = 1024)
 var max = 10,  z0 = .07,  a = .53;
 var N = 1 << max,  NN = N << max, N1 = N-1, NN1 = NN-1;
 var h = new Float32Array(NN);
 var st = N / 16
 while(st > 1){
   var st2 = st >> 1, stN = st << max, stN2 = stN >> 1;
   for(var j = 0; j < NN; j += stN ){
     var jp = (j + stN) & NN1;
     for(var i = 0; i < N; i += st ){
       var ip = (i + st) & N1;
       var h0 = h[i+j], h1 = h[ip+j], h2 = h[i+jp];
       h[i+st2+j+stN2] = (h0 + h1 + h2 + h[ip+jp])*.25 + z0*(Math.random() - a);
       h[i+st2+j] = (h0 + h1)*.5 + z0*(Math.random() - a);
       h[i+j+stN2] = (h0 + h2)*.5 + z0*(Math.random() - a);
   st = st2;  z0 *= .55;
a determines the water level (and percolation).
Contents     updated 15 Aug 2014