-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
178 lines (168 loc) · 8.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Indolence of Memory by not Dali</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;700&family=Crimson+Text:wght@400;700&family=Roboto+Mono:wght@400&display=swap"
rel="stylesheet"
/>
<link href="css/style.css" rel="stylesheet" >
<script src="https://unpkg.com/mathjs@7.5.1/dist/math.min.js"></script>
</head>
<body onload="main()">
<canvas
id="webgl"
style="background: url('mat/bg.jpg')"
width="800"
height="400"
>
Please use a browser that supports "canvas"
</canvas>
<span id="deco1">「</span>
<span id="deco2">」</span>
<div class="info" style="background: url('mat/bg2.jpg')">
<!-- image cut from: https://www.flickr.com/photos/artexplorer/5042254324 The Persistence of Memory - Salvador Dalí 1931 -->
<div class="slidecontainer">
<div>
<input
type="range"
min="0"
max="3"
value="0"
class="slider"
id="shadingScheme"
/>
</div>
<div class="optionsDiv">
<span class="options-title">
👆 <strong> Drag the Slider </strong> 👉
</span>
<span class="options" id="opt0"> Default </span
><span>|</span>
<span class="options" id="opt1">
Phong Shading </span
><span>|</span>
<span class="options" id="opt2">
Gouraud Shading </span
><span>|</span>
<span class="options" id="opt5"> Fog </span>
</div>
</div>
<div class="buttons">
<button id="showGrid" onclick="gridDisplay()">
Show Plane
</button>
<button id="showSphere" onclick="sphereDisplay()">
Show Sphere
</button>
<div class="general_info">
<p class="instructions">Move horizontally 👉 WSAD</p>
<p class="instructions">Move vertically 👉 QE</p>
<p class="instructions">
Change viewing angle 👉 arrow keys
</p>
<p class="instructions">Zoom in/out 👉 Mouse Scroll</p>
</div>
</div>
<div class="dynamicInstruction" id="dynamicInstruction0">
<p class="switchInfo" id="headlightp"> <span>Turn</span> <strong id="headlightSwitchText">on</strong> Headlight 💡</p>
<label class="switch">
<input type="checkbox" id="headlightSwitch" />
<span class="sliderBox round"></span>
</label>
<!--p><span>Mouse drag</span> to change the world light position</p -->
<p>Press <span>m</span> key to change material of the central sphere</p>
<p> <span>Mouse drag</span> on left part of screen to change primary light position </p>
<p>(Note: it might be dragged behind)</p>
<div class="primaryLightOptions">
<div>
<p class="switchInfo" id="plightp"> <span>Turn</span> <strong id="plightSwitchText">off</strong> primary light 💡</p>
<label class="switch">
<input type="checkbox" id="plightSwitch" checked />
<span class="sliderBox round"></span>
</label>
</div>
<div class="smallSlider">
<div>
<span>Set Ambient Reflection</span>
<input
type="range" step="0.01" min="0.00" max="1.00" class="minislider"
value="0.40" id="AmbientVal" oninput="setSlider(0)"
/> <strong class="miniSliderText">0.40</strong>
<em>set color:</em>
<input type="color" id="AmbientColor" class="colorPicker" value="#000000" oninput="setColorSlider(0)" >
</div>
<div>
<input
type="range" step="0.01" min="0.00" max="1.00" class="minislider"
value="1.00" id="DiffuseVal" oninput="setSlider(1)"
/> <strong class="miniSliderText">1.00</strong>
<em>set color:</em>
<input type="color" id="DiffuseColor" class="colorPicker" value="#000000" oninput="setColorSlider(1)" >
<span>Set Diffuse Reflection   </span>
</div>
<div>
<input
type="range" step="0.01" min="0.00" max="1.00" class="minislider"
value="1.00" id="SpecularVal" oninput="setSlider(2)"
/> <strong class="miniSliderText">1.00</strong>
<em>set color:</em>
<input type="color" id="SpecularColor" class="colorPicker" value="#000000" oninput="setColorSlider(2)" >
<span>Set Specular Reflection</span>
</div>
<p id="note">Note: set all color to RGB(0,0,0) can reverse to default.</p>
<div>
<input
type="range" step="1" min="-20" max="80" class="minislider"
value="0" id="ShininessVal" oninput="setSlider(3)"/>
<strong class="miniSliderText">0</strong>
<span>Alter Shininess</span>
</div>
</div>
</div>
</div>
<div class="dynamicInstruction" id="dynamicInstruction1">
<p class="switchInfo"> <span> Switch to </span> <strong id="phongSwitchText">Blinn-Phong</strong> lighting 👉 </p>
<label class="switch">
<input type="checkbox" id="phongSwitch" />
<span class="sliderBox round"></span>
</label>
<p>Press <span>m</span> key to change material of the central sphere</p>
</div>
<div class="dynamicInstruction" id="dynamicInstruction2">
<p class="switchInfo"> <span> Switch to </span> <strong id="gouraudSwitchText">Blinn-Phong</strong> lighting 👉 </p>
<label class="switch">
<input type="checkbox" id="gouraudSwitch" />
<span class="sliderBox round"></span>
</label>
<p>Press <span>m</span> key to change material of the central sphere</p>
</div>
<div class="dynamicInstruction" id="dynamicInstruction3">
<p>
Press W to move forward to view the contents' color
clearly.
</p>
<p>
Press D to move backward to see the contents' color
faded out.
</p>
</div>
</div>
<script src="lib/webgl-utils.js" type="text/javascript"></script>
<script src="lib/webgl-debug.js" type="text/javascript"></script>
<script src="lib/cuon-utils.js" type="text/javascript"></script>
<script src="lib/cuon-matrix-quat03.js" type="text/javascript"></script>
<script src="lib/dat-gui.js" type="text/javascript"></script>
<script src="src/animate.js" type="text/javascript"></script>
<script src="src/htmlcallBacks.js" type="text/javascript"></script>
<script src="src/calMotion.js" type="text/javascript"></script>
<script src="src/initVBOwithShaders.js" type="text/javascript"></script>
<script src="src/VBOinfo.js" type="text/javascript"></script>
<script src="src/draw.js" type="text/javascript"></script>
<script src="src/main.js" type="text/javascript"></script>
<script src="mat/materials_Ayerdi.js" type="text/javascript"></script>
<script src="mat/lights-JT.js" type="text/javascript"></script>
</body>
</html>