-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
72 lines (66 loc) · 3.02 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
<!doctype html>
<!-- Copyright 2020 Graphcomp - ALL RIGHTS RESERVED -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>View-Frustum Exercise</title>
<meta name="author" content="Robert 'grafman' Free">
<link rel="canonical" href="http://graphcomp.net/projects/onxmaps/index.html" />
<link rel="icon" type="image/png" href="img/favicon-96x96.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.86, maximum-scale=3.0">
<link rel='stylesheet' type='text/css' href='css/OpenSans.css'>
<link rel='stylesheet' type='text/css' href='css/Lato.css'>
<link rel='stylesheet' type='text/css' href='css/Lora.css'>
<link rel='stylesheet' type='text/css' href='css/main.css'>
<script type="text/javascript" src="js/libs/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/libs/glMatrix-0.9.5.min.js"></script>
<script type="text/javascript" src="js/libs/webgl-utils.js"></script>
<script type="module" src="js/main.js"></script>
</head>
<body>
<center>
<h2>View-Frustum Exercise</h2>
Source is on <a href="https://github.com/bfree-github/experiments-frustum-view" target="bfree_source">GitHub</a> -
also visit Bob Free's <a href="http://graphcomp.net/bfree" target="bfree">portfolio</a>
</center>
<p /> <p />
<table>
<tr>
<th class="canvas">3D View</th>
<th class="pad"></th>
<th class="canvas">Stats</th>
<th class="pad"></th>
<th class="remainder">Overhead</th>
</tr>
<tr>
<td class="canvas">
<canvas id="canvasPersp"></canvas>
</td>
<td class="pad"></td>
<td class="remainder">
Map Level: <span id="orthoLevel"></span>
<br />
</td>
<td class="pad"></td>
<td class="canvas">
<canvas id="canvasOrtho"></canvas>
</td>
</tr>
</table>
<p /> <p />
At the moment, only the left 3D View supports user navigation:
<ul>
<li>Use your thumb-wheel (tablet pinch support can be added) to<br />
zoom in/out through various map levels from O (top) to 19 (bottom).</li>
<li>Drag left/right to turn/yaw your view (swivel your head left/right).</li>
<li>Drag up/down to tilt your view (swivel your head up down).</li>
<li>Currently, the eye horizontal position remains stationary over the map origin.</li>
</ul>
<p /> <p />
The right Overhead View is a positionally static 2D orthogonal view looking down over the center of the map.
<p />
A green trapezoid appears that depicts the 3D View's frustum projection on the ground. Drag your mouse in the 3D View to see the trapezoid change in reverse of the 3D camera view.
<p />
Grids appear depicting the map level based on eye position height. Use your thumb-wheel in the 3D View to see the grid levels change. You will note that the trapezoid elongates as your eye tilts more towards the horizon, as you approach ground level.
</body>
</html>