-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
206 lines (175 loc) · 8.62 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
---
---
<html>
<head>
<title>ProjectX WebGL Demo</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="lib/webgl-debug.js"></script>
<script type="text/javascript" src="lib/jquery-1.4.2.js"></script>
<script type="text/javascript" src="lib/sylvester.js"></script>
<script type="text/javascript" src="lib/glUtils.js"></script>
<script type="text/javascript" src="lib/game-shim.js"></script>
<script type="text/javascript" src="helpers.js"></script>
<script type="text/javascript" src="ship.js"></script>
<script type="text/javascript" src="gamma.js"></script>
<script type="text/javascript" src="fps.js"></script>
<script type="text/javascript" src="vector.js"></script>
<script type="text/javascript" src="quat.js"></script>
<script type="text/javascript" src="gl.js"></script>
<script type="text/javascript" src="images.js"></script>
<script type="text/javascript" src="inputs.js"></script>
<script type="text/javascript" src="mouse.js"></script>
<script type="text/javascript" src="physics.js"></script>
<script type="text/javascript" src="main.js"></script>
<style type="text/css">
body > div, body > canvas { display:block; float:left; margin:0.5em; border:1px solid black; }
#panel { float:right; }
.button { color:white; cursor:pointer; display:block; background:gray; border-bottom:1px solid black; text-align:center; }
.button:hover { font-style:italic; }
.body { padding:0.5em; }
.toolbar { padding-bottom:0.5em; margin-bottom:0.5em; border-bottom:1px solid black; }
.label { display:inline-block; width:9em; }
textarea { padding:0; border:none; }
canvas { border:medium none; }
</style>
</head>
<body>
<div style="padding:1em;">
<div id="canvas-wrapper">
<canvas id="main-canvas" width="500" height="500"></canvas>
</div>
<button id="request_full_screen">Fullscreen</button>
<button id="request_pointer_lock">Lock Pointer</button>
</div>
<div id="panel">
<b class="button" onclick="$('#settings-body').toggle()">Panel</b>
<div class="body" id="settings-body">
<div style="float:left;">
<form>
Project Info
<div style="padding:1em">
<div class="label">Generated at: </div><span>{{ 'now' | date: "%m/%d/%y %H:%M:%S %Z" }}</span><br>
<div class="label">GitHub: </div><a href="https://github.com/chino/pxwgl-net">Project Page</a></span><br>
</div>
Browser Support
<div style="padding:1em">
<div class="label"> Fullscreen: </div><span id="fullscreen"> false </span><br>
<div class="label"> Pointer Lock: </div><span id="pointer_lock"> false </span><br>
<div class="label"> GamePad: </div><span id="game_pad"> false </span><br>
<div class="label"> High Res Timer: </div><span id="high_res_timer"> false </span><br>
</div>
Info
<div class="body" id="info-body">
<div class="label"> Main FPS: </div><span id="main_fps"> 0 </span><br>
<div class="label"> Render FPS: </div><span id="fps"> 0 </span><br>
<div class="label"> Phsyics FPS: </div><span id="physics_fps"> 0 </span><br>
<div class="label"> Position: </div><span id="pos"> 0,0,0 </span><br>
<div class="label"> Orientation: </div><span id="quat"> 0,0,0,0 </span><br>
<div class="label"> Mouse: </div><span id="mouse"> 0,0 </span><br>
<div class="label"> Players: </div><span id="players"> 0 </span><br>
<div class="label"> Verts & Colors: </div><span id="level-verts"> 0 </span><br>
<div class="label"> Verts Unique: </div><span id="level-verts-unique"> 0 </span><br>
<div class="label"> Triangles: </div><span id="level-triangles"> 0 </span><br>
<div class="label"> TCords: </div><span id="level-tcords"> 0 </span><br>
</div>
Controls
<div style="padding:1em;">
<div class="label"> forward </div>w <br>
<div class="label"> backward </div>s <br>
<div class="label"> up </div>e <br>
<div class="label"> down </div>d <br>
<div class="label"> left </div>f <br>
<div class="label"> right </div>g <br>
<div class="label"> Turn Accell: </div>
<input id="turn-accell" type="text" value="1" style="width:3em;"/> <br>
<div class="label"> Move Accell: </div>
<input id="move-accell" type="text" value="20" style="width:3em;"/> <br>
<div class="label"> Move Drag: </div>
<input id="move-drag" type="text" value="0.8" style="width:3em;"/> <br>
<div class="label"> Turn Drag: </div>
<input id="turn-drag" type="text" value="0.5" style="width:3em;"/> <br>
</div>
Graphics
<div style="padding:1em;">
<div class="label"> Acid Effect: </div>
<input id="acid" type="checkbox"/><br>
<div class="label"> Textures: </div>
<input id="texture-button" type="checkbox" checked="true"/><br>
<div class="label"> Alpha Test: </div>
<input id="alpha-test" type="checkbox" checked="true"/><br>
<div class="label"> Vertex Colors: </div>
<input id="vertex-colors" type="checkbox" checked="true"/><br>
<div class="label"> Culling: </div>
<input id="culling" type="checkbox" checked="true"/><br>
<div class="label"> Viewport: </div>
<input id="canvas-width" type="text" value="500" style="width:4em;"/> x
<input id="canvas-height" type="text" value="500" style="width:4em;"/><br>
<div class="label"> Clear Color (rgb): </div>
<input id="clear-red" type="text" value="0.0" style="width:3em;"/>
<input id="clear-green" type="text" value="0.0" style="width:3em;"/>
<input id="clear-blue" type="text" value="0.0" style="width:3em;"/><br>
<div class="label"> Front Face: </div>
<select id="front-face">
<option value="cw">Clock Wise</option>
<option value="ccw">Counter CW</option>
</select>
<br>
<div class="label"> RenderMode: </div>
<select id="rendermode-dropdown">
<option value="triangles">Triangles</option>
<option value="lines">Lines</option>
<option value="points">Points</option>
</select>
<br>
<div class="label"> Line Width: </div>
<input id="line-width" type="text" value="1" style="width:3em;"/><br>
<div class="label"> Point Size: </div>
<input id="point-size" type="text" value="1" style="width:3em;"/><br>
<div class="label"> Perspective FOVY: </div>
<input id="fovy" type="text" value="70.0" style="width:3em;"/><br>
<div class="label"> Perspective Far: </div>
<input id="far" type="text" value="10000.0" style="width:10em;"/><br>
<div class="label"> Fog: </div>
<input id="fog" type="checkbox"/><br>
<div class="label"> Fog Density: </div>
<input id="fog-density" type="text" value="0.0005" style="width:10em;"/><br>
<div class="label"> Gamma: </div>
<input id="gamma-value" type="text" value="1" style="width:10em;"/><br>
<canvas id="gamma-canvas" height="255" width="255" style="border:1px solid black; margin-top:1em;"></canvas>
</div>
</div>
<div id="textures" style="float:left; margin:0.5em;"></div>
</form>
</div>
</div>
<div>
<b class="button" onclick="$('#log-body').toggle()">Logs</b>
<div class="body" id="log-body">
<div class="toolbar">
<input type="button" value="Clear" onclick="$('#log').empty()"/>
</div>
<div id="log"></div>
</div>
</div>
<div>
<b class="button" onclick="$('#vertex-shader-body').toggle()">Vertex Shader</b>
<div class="body" id="vertex-shader-body" style="display:none">
<div class="toolbar">
<input id="vertex-shader-apply" type="button" value="Apply Changes"/>
<input id="vertex-shader-reset" type="button" value="Reset Defaults"/>
</div>
<textarea class="body" id="vertex-shader" type="text" rows="50" cols="90"></textarea>
</div>
</div>
<div>
<b class="button" onclick="$('#fragment-shader-body').toggle()">Fragement Shader</b>
<div class="body" id="fragment-shader-body" style="display:none">
<div class="toolbar">
<input id="fragment-shader-apply" type="button" value="Apply Changes"/>
<input id="fragment-shader-reset" type="button" value="Reset Defaults"/>
</div>
<textarea id="fragment-shader" type="text" rows="50" cols="90"></textarea>
</div>
</div>
</body>
</html>