https://github.com/tangrams/terrain-demos

Ways to manipulate terrain data with Tangram
https://github.com/tangrams/terrain-demos

Last synced: about 1 month ago
JSON representation

Ways to manipulate terrain data with Tangram

• Host: GitHub
• URL: https://github.com/tangrams/terrain-demos
• Owner: tangrams
• License: mit
• Created: 2016-03-02T21:43:50.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2021-11-08T21:14:24.000Z (almost 3 years ago)
• Last Synced: 2024-04-16T08:11:59.582Z (5 months ago)
• Language: JavaScript
• Size: 3.73 MB
• Stars: 49
• Watchers: 8
• Forks: 11
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# terrain-demos

Ways to manipulate heightmap data in [Tangram](http://github.com/tangrams/tangram) as seen in the [Mapping Mountains](https://mapzen.com/blog/mapping-mountains/) post on the [Mapzen blog](http://mapzen.com/blog).



## Style gallery

- elevation tiles: http://tangrams.github.io/terrain-demos/?url=styles/elevation-tiles.yaml

- basic green: http://tangrams.github.io/terrain-demos/?url=styles/green.yaml

- animated contours: http://tangrams.github.io/terrain-demos/?url=styles/contours.yaml

- grayscale hypsometric: http://tangrams.github.io/terrain-demos/?url=styles/grayscale.yaml

- classic hypsometric: http://tangrams.github.io/terrain-demos/?url=styles/hypsometric.yaml

- slopemap: http://tangrams.github.io/terrain-demos/?url=styles/slope.yaml

- heightmap: http://tangrams.github.io/terrain-demos/?url=styles/heightmap.yaml

- manual normal derivation: http://tangrams.github.io/terrain-demos/?url=styles/normals-manual.yaml

- normal tiles: http://tangrams.github.io/terrain-demos/?url=styles/normals-tiles.yaml

- single light: http://tangrams.github.io/terrain-demos/?url=styles/single-light.yaml

- two lights: http://tangrams.github.io/terrain-demos/?url=styles/two-lights.yaml

- three lights: http://tangrams.github.io/terrain-demos/?url=styles/three-lights.yaml

- environment map: http://tangrams.github.io/terrain-demos/?url=styles/environment-map1.yaml

- metal spheremap: http://tangrams.github.io/terrain-demos/?url=styles/metal.yaml

- sunrise spheremap: http://tangrams.github.io/terrain-demos/?url=styles/sunrise.yaml

- sunset spheremap: http://tangrams.github.io/terrain-demos/?url=styles/sunset.yaml

- swiss style: http://tangrams.github.io/terrain-demos/?url=styles/imhof.yaml

Check out the source code for these and more examples in the [styles directory](https://github.com/tangrams/terrain-demos/tree/gh-pages/styles).

### Elevation tiles vs. Normal tiles alpha elevation

Mapzen offers two sources of elevation data: the ["terrarium" elevation tiles](https://mapzen.com/documentation/terrain-tiles/formats/#terrarium), and also the [alpha channel of the normal tiles](https://mapzen.com/documentation/terrain-tiles/formats/#normal). Most of the examples in this repo are based on the elevation tiles, but some of them (such as normal-alpha-elevation.yaml) use the alpha channel of the normal tiles. This source is a bit trickier to use, but if you don't need the 24-bit resolution of the elevation tiles, and are already loading the normal tiles, it will make your styles faster.

The elevation tiles use a relatively simple linear encoding, but the normal tiles alpha channel is quantized, non-linear, and 8-bit. (More information about this encoding can be found in [the documentation for our elevation datasource](https://mapzen.com/documentation/terrain-tiles/formats/#normal).)

To make this source simpler to interpret, we're using a "[decoder ring](https://wikipedia.org/wiki/Secret_decoder_ring)" image which maps the quantized range to the unquantized range as best it can. This image is generated with [a piece of JavaScript](decoder.js) which runs the quantize function in reverse, and creates a new image in a canvas element with the decoded output values for each input value. [You can run this script here](tangrams.github.io/terrain-demos/decoder.html). This image has also been pregenerated for your convenience, and is stored in this repo as [decoder.png](https://github.com/tangrams/terrain-demos/blob/master/img/decoder.png). It looks like this:

![decoder ring image](https://github.com/tangrams/terrain-demos/blob/master/img/decoder.png)

This image can be used as a texture in a heightmap shader, for easier decoding.

### To run locally:

Start a web server in the repo's directory:

    python -m SimpleHTTPServer 8000

    

If that doesn't work, try:

    python -m http.server 8000

    

Then navigate to, eg: [http://localhost:8000/?url=styles/contours.yaml](http://localhost:8000/?url=styles/contours.yaml)