-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
92 lines (92 loc) · 3.84 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
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8" />
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body onload="main()">
<script src="js/gl-matrix-min.js"></script>
<script src="js/models.js"></script>
<script src="shaders/common.js"></script>
<script src="shaders/vshader.js"></script>
<script src="shaders/bubbleFShader.js"></script>
<script src="shaders/glassFShader.js"></script>
<script src="js/main.js"></script>
<div style="margin-top:10px; float:left">
<canvas id="glCanvas" style="border:none;""></canvas>
</div>
<div style="margin-left:10px; float:left">
<div class="panel">
<p>Rendering Control</p>
<table>
<tr>
<td>
<p>Type</p>
<input type="radio" id="bubble" name="type" value="bubble" onclick="switchShader('bubble')" checked>
<label for="bubble">Bubble</label>
<input type="radio" id="glass" name="type" value="glass" onclick="switchShader('glass')">
<label for="glass">Glass</label>
</td>
</tr>
<tr>
<td>
<p>Background</p>
<input type="radio" id="mountains" name="texture" value="mountains" onclick="loadNewCubemap(0)" checked>
<label for="mountains"><img src="assets/cubemap/nx.png"/ width="80" height="80"></label>
<input type="radio" id="checkerboard" name="texture" value="checkerboard" onclick="loadNewCubemap(1)">
<label for="checkerboard"><img src="assets/checkerboard.jpg"/ width="80" height="80"></label>
<input type="radio" id="goldrush" name="texture" value="checkerboard" onclick="loadNewCubemap(2)">
<label for="checkerboard"><img src="assets/skybox/mp_goldrush/bk.png"/ width="80" height="80"></label>
</td>
</tr>
<tr>
<td>
<p>Indices of Refraction</p>
<div class="refraction">
<p class="slideranno">1</p>
<input type="range" min="1" max="5" value="1.5" step=".1" class="slider" id="rindex" oninput="setSlider({ index : 'rindex' })" onchange="setSlider({ index : 'rindex' })">
<p class="slideranno" id="rindexvalue"></p>
</div>
</td>
</tr>
<tr>
<td>
<div class="refraction-glass">
<p class="slideranno">1</p>
<input type="range" min="1" max="5" value="1.5" step=".1" class="slider" id="gindex" oninput="setSlider({ index : 'gindex' })" onchange="setSlider({ index : 'gindex' })">
<p class="slideranno" id="gindexvalue"></p>
</div>
</td>
</tr>
<tr>
<td>
<div class="refraction-glass">
<p class="slideranno">1</p>
<input type="range" min="1" max="5" value="1.5" step=".1" class="slider" id="bindex" oninput="setSlider({ index : 'bindex' })" onchange="setSlider({ index : 'bindex' })">
<p class="slideranno" id="bindexvalue"></p>
</div>
</td>
</tr>
</table>
</div>
<div style="clear:left"></div>
<div class="panel">
<p>Animation Control</p>
<table>
<tr>
<td>
<input type="checkbox" id="animated" name="animated" onchange="curtime.setPlay(this.checked);" checked>Animated
</td>
</tr>
</table>
</div>
<div style="clear:left"></div>
<div class="panel">
<p>Time to Render Frame (ms)</p>
<p id="frametimer">0.00</p>
<p>FPS</p>
<p id="framecount">0</p>
</div>
</div>
</body>
</html>