├── LICENSE
├── README.md
├── data
├── himalaya.json
├── himalaya_mini.json
├── imageData1000x1000.json
├── imageData10x15.json
├── imageData1500x1500.json
├── imageData300x400.json
├── imageData30x40.json
└── pyrenee.json
├── index.html
├── js
├── JsonDemLoader.js
├── OrbitControls.js
├── jquery.min.js
├── three.js
└── three.min.js
└── snap.png
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Jonathan Lurie
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ThreejsDEM
2 |
3 | Once again, I used [Derek Watkins](https://github.com/dwtkns)'s [Tile Grabber](http://dwtkns.com/srtm/) to get DEM data. Those images are originally 16bit (int16) tiff from the [SRTM3](http://www.webgis.com/srtm3.html) that I cropped and converted into json. (More about that project later).
4 |
5 | # What is it?
6 | On a way, this project is very close to one I've done earlier: [DTM2MESH](https://github.com/jonathanlurie/DTM2MESH), that converts elevation data into a 3D Collada file. Well, here, instead of converting into a file we are viewing the elevation data into a web browser thanks to webGL.
7 |
8 | The whole visualization part is made with [ThreeJS](http://threejs.org/) but there is a bit of processing to transform 16bit 2D data into a bunch of 3D triangles, this happens in the file [js/JsonDemLoader.js](https://github.com/jonathanlurie/ThreejsDEM/blob/master/js/JsonDemLoader.js).
9 |
10 |
11 | [LIVE DEMO](http://jonathanlurie.github.io/ThreejsDEM/)
12 | Note that it may take a while to load and process so it might be easier to try it in local. If you are doing so, you will need to create a http server for loading json files:
13 |
14 | ```shell
15 | $ git clone https://github.com/jonathanlurie/ThreejsDEM.git
16 | $ cd ThreejsDEM/
17 | $ python -m SimpleHTTPServer
18 | # then go open a browser at http://localhost:8000
19 | ```
20 |
21 | # Colors
22 | 
23 | As you can see on the screenshot, I mapped some colors depending on the altitude (in meters), the LUT (or sort of) is [here](https://github.com/jonathanlurie/ThreejsDEM/blob/master/js/JsonDemLoader.js#L274) and can be changed easily.
24 |
25 | # Customization
26 | If you clone this repo, you will be able to use different elevation data from different places on the globe. This is also meant to test some performance since some jsonDem are larger that others.
27 |
28 | To change the input data, edit the beginning of the `
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
195 |
196 |
197 |
198 |
199 |