-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
145 lines (122 loc) · 7.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mapping</title>
<style>
*{ font-family: monospace; font-size:16px; }
body{ display:flex; flex-direction:column; align-items:center; }
div{ width:75vw; }
hr{ border-top:2px dotted gray; height:0px; }
h1{ font-size:20px; }
a{ text-decoration:none; color:orangered; }
a:hover{ color: orange; }
li{ margin-bottom: 8px; }
li p{ margin: 2px 0px 4px 0px; color:#505050;}
p.dim{ color:#606060; }
</style>
</head>
<body>
<div>
<h1>Maps & Terrains</h1>
<div>
<p class="dim">
I have interest in building virtual worlds that can be used in games or apps. There was an interesting
demo by @wooorldXR that really inspired me into trying my hand in learning how to build a 3D map viewer
from scratch. So this repo will contain all the little experiments & prototypes using freely available mapping
data to recreate that demo & then some :)
</p>
<p class="dim">
Another purpose of this repo is to develop a collection of examples / prototypes that is feature focused. Ideally
this should make it easier for people to pick apart & learn how each bit works as a good starting point. Mind you,
nothing here is production ready as things aren't optimized or very well abstracted. Since the goal is for learning,
things are kept as bare bones and simple as possible.
</p>
<p>
<b>Inspiration</b> :<br>
- <a href="https://twitter.com/haltor/status/1594166328356704258">https://twitter.com/haltor/status/1594166328356704258</a><br>
- <a href="https://twitter.com/tiltfive/status/1597644083828518913">https://twitter.com/tiltfive/status/1597644083828518913</a><br>
- <a href="https://twitter.com/SketchpunkLabs/status/1600487910758907905">https://twitter.com/SketchpunkLabs/status/1600487910758907905</a><br>
</p>
<p>
<b>Source Code</b> : <a href="https://github.com/sketchpunklabs/mapping">https://github.com/sketchpunklabs/mapping</a>
</p>
</div>
<div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center;">
<img src="./images/state_building.png" style="flex:0 0; height:150px;">
<img src="./images/terrain_tile.png" style="flex:0 0; height:150px;">
<img src="./images/topo.png" style="flex:0 0; height:150px;">
<img src="./images/goo3dtiles.png" style="flex:0 0; height:150px;">
<img src="./images/voxels.png" style="flex:0 0; height:150px;">
</div>
<hr>
<table width="100%" cellspacing="5"><tr><td width="50%" valign="top">
<b>Mapping Tile Prototypes</b>
<ol>
<li><a href="./prototypes/013_google_3dtiles_search.html">Google Photorealistic 3DTiles - Render tile at LonLat ( API Key Needed )</a>
<p>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.
</p>
</li>
<li><a href="./prototypes/013_google_3dtiles_barebones.html">Google Photorealistic 3DTiles - Basic ( API Key Needed )</a>
<p>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.
</p>
</li>
<li><a href="./prototypes/006_vector_tile.html">Vector Tiles</a>
<p>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.
</p>
</li>
<li><a href="./prototypes/004_3d_terrain_tile.html">Terrarium Heightmap Terrain Tiles</a>
<p>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.
</p>
</li>
<li><a href="./prototypes/003_building_tile.html">Render 3D Build Tile</a>
<p>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.
</p>
</li>
<li><a href="./prototypes/002_texture_tile.html">Render Raster Tile</a>
<p>Download tile image, convert to a texture then render to a quad face mesh.</p>
</li>
<li><a href="./prototypes/001_slippy_mechanics.html">Slippy Viewer Mechanics</a><br>
<p>Scaling and swopping tiles during zoom operation, plus doing tile translations using a floating origin.</p>
</li>
<li><a href="./prototypes/005_floating_origin.html">Fix Mesh with Floating Origin</a>
<p>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.
</p>
</li>
</ol>
</td><td width="50%" valign="top">
<b>Procedural Terrain Prototypes</b>
<ol>
<li><a href="./prototypes/007_topographic_bloom.html">Topographic Contour Lines ( With Bloom )</a>
<p>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. <a href="./prototypes/007_topographic.html">View without bloom</a></p>
</li>
<li><a href="./prototypes/008_procedural_heightmap.html">Procedural Heightmap Texture</a>
<p>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.</p>
</li>
<li><a href="./prototypes/009_smooth_contours.html">Smooth Contour Lines</a>
<p>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</p>
</li>
<li><a href="./prototypes/010_height_coloring.html">Height Coloring</a>
<p>Procedurally generate a heightmap textture then apply colors in relation to the height.</p>
</li>
<li><a href="./prototypes/011_cubes.html">Instanced Cubes with FBM & ColorRamp</a>
<p>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</p>
</li>
<li><a href="./prototypes/012_heightmap_stamp.html">Displacement Stamp</a>
<p>Using a heightmap image as a displacement stamping.</p>
</li>
</ol>
</td></tr></table>
</div>
</body>
</html>