-
Notifications
You must be signed in to change notification settings - Fork 62
/
Copy pathindex.html
125 lines (106 loc) · 4.03 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
<!DOCTYPE html>
<html><head>
<title>WebGL Path Tracing</title>
<style type="text/css"><!--
body {
max-width: 900px;
padding: 30px;
margin: 0 auto;
font: 14px/19px 'Lucida Grande', sans-serif;
}
#main {
margin: 80px 0;
padding-left: 542px;
height: 512px;
position: relative;
}
#error {
position: absolute;
left: 0;
top: 0;
width: 412px;
height: 412px;
padding: 50px;
text-align: center;
background: #DFDFDF;
}
canvas {
position: absolute;
left: 0;
top: 0;
}
p, ul {
margin: 0 0 30px 0;
}
h1 {
font: bold italic 50px Georgia;
margin: 0 0 60px 0;
text-align: center;
}
a {
color: inherit;
}
#footer {
text-align: center;
margin: 100px 0 0 0;
}
#glossiness-factor {
display: none;
font-size: 12px;
}
#glossiness-factor input {
width: 40px;
text-align: center;
}
--></style>
<script type="text/javascript" src="sylvester.src.js"></script>
<script type="text/javascript" src="glUtils.js"></script>
<script type="text/javascript" src="webgl-path-tracing.js"></script>
</head><body>
<h1>WebGL Path Tracing</h1>
<p>Path tracing is a realistic lighting algorithm that simulates light bouncing around a scene. This path tracer uses WebGL for realtime performance and supports diffuse, mirrored, and glossy surfaces. The path tracer is continually rendering, so the scene will start off grainy and become smoother over time. Here's how to interact with it:</p>
<ul>
<li>Add an object using the "Add Sphere" or "Add Cube" buttons</li>
<li>Select an object by clicking on it</li>
<li>Move the selection along the face of its selection box by dragging around on that face</li>
<li>Delete the selection using the backspace key</li>
<li>Rotate the camera by dragging the background</li>
</ul>
<div id="main">
<canvas id="canvas" width="512" height="512"></canvas>
<div id="error"><noscript>Please enable JavaScript.</noscript></div>
<p>
<button onclick="javascript:ui.selectLight()">Select Light</button>
<button onclick="javascript:ui.addSphere()">Add Sphere</button>
<button onclick="javascript:ui.addCube()">Add Cube</button>
</p>
<p>
<b>Material:</b>
<select id="material">
<option value="0" selected>Diffuse</option>
<option value="1">Mirror</option>
<option value="2">Glossy</option>
</select>
<span id="glossiness-factor">
<br>with glossiness factor: 0 < <input id="glossiness" value="0.6"> < 1
</span>
<br>
<b>Environment:</b>
<select id="environment">
<option value="0" selected>Cornell Box - Yellow and Blue</option>
<option value="1">Cornell Box - Red and Green</option>
</select>
</p>
<p>
<b>Load preset scene:</b>
<br><button onclick="javascript:ui.setObjects(makeSphereColumn())">Sphere Column</button>
<br><button onclick="javascript:ui.setObjects(makeSpherePyramid())">Sphere Pyramid</button>
<br><button onclick="javascript:ui.setObjects(makeSphereAndCube())">Sphere and Cube</button>
<br><button onclick="javascript:ui.setObjects(makeCubeAndSpheres())">Cube and Spheres</button>
<br><button onclick="javascript:ui.setObjects(makeTableAndChair())">Table and Chair</button>
<br><button onclick="javascript:ui.setObjects(makeStacks())">Stacks</button>
</p>
</div>
<p>The entire scene is dynamically compiled into a GLSL shader. Everything can be repositioned using the current shader, but any geometry or material change means a recompilation. To calculate a pixel color, a ray is shot into the scene and allowed to bounce around five times. At each bounce, the direct light incoming at that point (including shadows) is multiplied by all previous material colors and accumulated. Soft shadows are achieved by randomly jittering the light position per-pixel. The path tracing solution will only completely converge if your browser supports the OES_texture_float extension.</p>
<p id="footer">Made by <a href="/">Evan Wallace</a> in 2010</p>
</body></html>