Maps & Terrains

Modification from the basic example, this one converts LonLat coordinates of the empire state building to cartesian cords then performs a tree search for the last possible tile to render. It streams down sub tilesets during the tile search in the process. Renders the 3D tile when the location has been found.

From scratch with a basic 3D Tiles parser & loader, this example shows how to parse 3D tiles from google, download JSON and GLBs to render two initial tiles in the tileset.

Download PBF data, use protobuf to deserialize binary into JSON. From there turn the points, lines and polygons into meshes that can be rendered with webgl.

Download Mapzen's terrarium & normal map tiles along with ArcGIS satellite map tile. Use height map to apply vertex displacement to a grid plane mesh, then render it well with the normals for to handle lighting and satellite image as its texture.

Parse and extrude multiple polygons to build a single building, then scale and place it correctly over a raster tile. Filtering all buildings from the tile except for Empire State Building.

Download tile image, convert to a texture then render to a quad face mesh.

Scaling and swopping tiles during zoom operation, plus doing tile translations using a floating origin.

3D tiles that have their vertices far away from origin causes z-fighting like problems caused by floating point errors. This example fixes the mesh into localspace, then uses a ModelViewMatrix in a shader to properly render the tile at extremely large distances from origin with the camera without any strange artifacts.

Render a procedural terrain tile using a custom shader that draws out the contour lines along with using the composer to apply a bloom post effect. View without bloom

Using a material with noise, render to a square text to create a heightmap. Then use that texture for displacement of a grid along with generating normals from the heightmap.

Generating smooth contour lines requires a bit of extra work by doing the noise displacement in the vertex shader (Heightmaps won't work) for smooth height values plus procedurally create the lines as a texture to utilize mipmaps to smooth things out

Procedurally generate a heightmap textture then apply colors in relation to the height.

Generating smooth contour lines requires a bit of extra work by doing the noise displacement in the vertex shader (Heightmaps won't work) for smooth height values plus procedurally create the lines as a texture to utilize mipmaps to smooth things out

Using a heightmap image as a displacement stamping.