-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·154 lines (143 loc) · 6.33 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Light-Material Interaction Visualization </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"
integrity="sha512-WoO4Ih0CDOSLYafy22wZD/mcJ7k0ESLqtQsFa6zFKnEUrbtuGU+GkLtVhgt93xa2qewG5gKEC6CWlN8OaCTSVg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/",
"dat.gui": "https://unpkg.com/dat.gui@latest/build/dat.gui.module.js"
}
}
</script>
<script src="https://unpkg.com/function-plot/dist/function-plot.js"></script>
</head>
<body>
<header>
<h3>
Light-Material Interaction Visualization
</h3>
</header>
<div class="container-fluid vh-100 text-center">
<div class="dashboard">
<div class="row">
<div class="col-8">
<div class="dark-gray-div">
<h3>Render</h3>
<div class="image-container">
<img id="render_img" src="assets/diffuse_cyan.png">
<canvas id="hiddenCanvas" style="display:none;"></canvas>
</div>
</div>
</div>
<div class="col-4">
<div class="dark-gray-div">
<h3>Material Selection</h3>
<p class="intro">With this dashboard, you can simulate the effects of light interaction with different materials, as commonly modelled in the field of computer graphics.
When light hits an object, it behaves differently depending on the kind of material the object is made out of. The different windows here can give you an idea of the kind of behaviour light exhibits on different materials.
</p>
<p>To begin, choose a material:</p>
<form id="materialForm">
<select id="material">
<optgroup label="Diffuse">
<option value="0">Cyan</option>
<option value="1">Orange</option>
<option value="2">Purple</option>
</optgroup>
<optgroup label="Conductor">
<option value="3">Aluminum</option>
<option value="4">Gold</option>
<option value="5">Copper</option>
<option value="6">Tungsten</option>
</optgroup>
<optgroup label="Dielectric">
<option value="7">Dielectric</option>
</optgroup>
</select>
<br><br>
<input type="submit" value="Select">
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="dark-gray-div">
<h3>Material "Bumpiness"</h3>
<div id="bsdf"></div>
</div>
</div>
<div class="col-4">
<div class="dark-gray-div">
<h3>Roughness Parameter</h3>
<p>The graph on the left is a representation of the material's microfacet surface model. Microfacets are small, individual surface elements that make up the appearance of the material.
This is visualized as a function that gives the distribution of microfacet normals with respect to the surface normal.
The X-axis is the angle between the normal vector of the microfacet and the surface normal. The Y-axis represents the probability density of microfacets with that angle.
The greater the variation of microfacet normals, the rougher the surface is.
</p>
<p class="diffuse-text">Diffuse surfaces are usually modelled with Lambertian reflection which makes the reflected rays have the same probability in all directions.
Thus, the probability density should be the same anywhere. Choose a non-diffuse surface to control its roughness.</p>
<p class="non-diffuse-text">For non-diffuse surfaces there are two commonly used distributions: <span style="color: #ff0000;">GGX</span> distribution and <span style="color: #00ff00;">Beckmann</span> distribution.</p>
<form id="roughnessForm">
<p id="sliderValue">Roughness Value: 0.5</p>
<input type="range" id="slider" name="slider" min="0.1" max="1" step="0.1" value="0.5" oninput="updateSliderText(this.value)">
<button type="submit">Apply</button>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="dark-gray-div">
<h3>Light Behaviour Visualization</h3>
<div class="scene">
</div>
</div>
</div>
<div class="col-4">
<div class="dark-gray-div">
<h3>Control panel</h3>
<div class="control-panel"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="dark-gray-div">
<h3>Color Histogram</h3>
<p class="centered">Count of pixels at each pixel value (0-255)</p>
<div class="histogram-container">
<svg id="histogram"></svg>
<form id="histogramForm">
<label for="colorChannel">Choose color channel:</label>
<select id="colorChannel" name="colorChannel">
<option value="grayscale" selected>Grayscale</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<button type="submit">Apply</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="js/input_form.js"></script>
<script src="js/render.js"></script>
<script src="js/bsdf.js"></script>
<script src="js/sample.js" type="module"></script>
<script src="js/light_vis.js" type="module"></script>
</html>