-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmain.html
157 lines (142 loc) · 5.69 KB
/
main.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
<!DOCTYPE html>
<head>
<title>WebGL</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<!-- Icon -->
<link rel="icon" type="image/x-icon" href="res/favicon.ico">
<!-- Style -->
<link rel="stylesheet" type="text/css" href="style/main.css">
<!-- Scripts -->
<script defer type="text/javascript" src="src/controller.js"></script>
<script defer type="text/javascript" src="src/glMatrix.js"></script>
<script defer type="text/javascript" src="src/callbacks.js"></script>
<script defer type="text/javascript" src="src/colors.js"></script>
<script defer type="text/javascript" src="src/glCourseBasis.js"></script>
<script defer type="text/javascript" src="src/objLoader.js"></script>
<script defer type="text/javascript" src="style/style.js"></script>
</head>
<body onload="webGLStart(); initUI();">
<div id="main_content">
<canvas id="WebGL-test" style="border:none;" width="2180" height="1080"></canvas>
<!-- "Unity" like Menu -->
<div class="menu">
<!-- This button appears on the right corner of the canvas,
it will open the menu on the "click" event -->
<button id="open_menu_btn" onclick="openMenu(event)">Menu</button>
<div id="menu__content">
<!-- This button will close the menu__content div -->
<button id="close_menu_btn" onclick="closeMenu()">Close</button>
<!-- First dropdown menu: Objects
- A checkbox to toggle the plane display
- A selector to choose the 3D Model to display on the canvas
- A color picker to choose the color of .obj models
- A selector to choose the kind of texture the user need [None or Echantillonage]
- If the Sampling is enabled, then display:
- a range slider to change the value of sigma coefficient;
- a range slider to change the value of nI coefficient;
- a range slider to change the value of N coefficient;
-->
<div class="dropdown active">
<div class="header" onclick="toggleDropdown(event);">
<span class="caret down"></span>
Objects
</div>
<div class="content__wrapper">
<!-- Plane toggle -->
<item>
<div class="row checkbox">
<label for="plane_checkbox">Plane</label>
<input type="checkbox" id="plane_checkbox" onclick="CONTROLLER.isTherePlane = this.checked">
</div>
</item>
<!-- Model selection -->
<item>
<div class="row">
<label for="models_select">Objects</label>
<select id="models_select" name="Objects" class="selector" onload="this.selectedIndex = 0;">
<option onclick="CONTROLLER.OBJECT = null;" selected>None</option>
</select>
</div>
</item>
<item id="color_picker">
<div class="row">
<label for="color">Colors:</label>
<input type="color" class="color_picker" id="model_color" name="color" value="#000000" oninput="CONTROLLER.setColor(this.value);">
</div>
</item>
<!-- Light intensity slider input -->
<item id="light_intensity">
<div class="row slider">
<label for="light_intensity">Light intensity</label>
<input type="range" id="intensity_range_select" name="intensity_select" min="1" max="15" step="0.5">
<input type="text" id="intensity_value" class="value_display"/>
</div>
</item>
<!-- Texture's mode selection -->
<item>
<div class="row">
<label for="texture_select">Texture:</label>
<select id="texture_select" name="Textures" class="selector" onchange="handleMode(this.value);">
<option value="LAMBERT" selected>Lambert</option>
<option value="SAMPLING">Sampling</option>
</select>
</div>
</item>
<!-- Frosted Mirror mode toggle -->
<item id="frosted_mirror_checkbox" style="display: none;">
<div class="row checkbox">
<label for="frosted_checkbox">Disable Fresnel</label>
<input type="checkbox" id="frosted_checkbox">
</div>
</item>
<!-- Fresnel slider input -->
<item id="fresnel" style="display: none;">
<div class="row slider">
<label for="fresnel_coeff">Refractive index</label>
<input type="range" id="fresnel_coeff" name="fresnel_coeff" min="1.0" max="2.0" step="0.01">
<input type="text" id="fresnel_coeff_value" class="value_display"/>
</div>
</item>
<!-- Sigma slider input -->
<item id="sigma" style="display: none;">
<div class="row slider">
<label for="sigma_select">Roughness</label>
<input type="range" id="sigma_range_select" name="sigma_select" min="0.0001" max="0.5" step="0.01">
<input type="text" id="sigma_value" class="value_display"/>
</div>
</item>
<!-- Number of samples slider input -->
<item id="N" style="display: none;">
<div class="row slider">
<label for="samples_select">Number of samples</label>
<input type="range" id="sampling_range_select" name="sampling_select" min="1" max="100" step="1">
<input type="text" id="sampling_value" class="value_display"/>
</div>
</item>
</div>
</div>
<!-- Second dropdown menu:
- A checkbox to toggle the skybox display
- A gallery to select the skybox texture
-->
<div class="dropdown">
<div class="header" onclick="toggleDropdown(event);">
<span class="caret down"></span>
Skybox
</div>
<input type="checkbox" id="skybox_checkbox" name="scene">
<div class="content__wrapper">
<!-- Skybox textures gallery -->
<item>
<div class="row gallery">
<label for="gallery">Scenes:</label>
<div id="gallery" class="selector"></div>
</div>
</item>
</div>
</div>
</div>
</div>
</div>
</body>
</html>