-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (105 loc) · 4.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
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
<html>
<head>
<title>CPU Raymarcher</title>
<script src="raymarcher.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script type="text/javascript">
let t = 0.0;
function modelSDF(p) {
let d1 = Raymarcher.Primitives.Sphere(p, 0.75);
let distortionAmplitude = 0.1*(0.5*Math.sin(t)+0.5);
let d2 = distortionAmplitude*Math.sin(20*p.x)*Math.sin(20*p.y)*Math.sin(20*p.z);
return d1+d2;
}
function createScene(width, height) {
height = height || width; // if only one dimension is specified it is square
let scene = new Raymarcher.Scene(width, height);
let model = new Raymarcher.Model(modelSDF, Raymarcher.Shaders.Lambert(new Raymarcher.Vec3(0.75, 0.75, 0.75)), new Raymarcher.Vec3(0, 0, 1));
scene.add(model);
scene.add(new Raymarcher.Light(new Raymarcher.Vec3(1, 1, 1), 0.1, new Raymarcher.Vec3(1, 1, 0)));
scene.add(new Raymarcher.Light(new Raymarcher.Vec3(0, 1, 0), 0.5, new Raymarcher.Vec3(-1, -1, 0)));
document.getElementById("scene-frame").appendChild(scene.canvas);
scene.start((dt) => {
t += dt;
}, 60);
}
function warn(width, height) {
height = height || width; // if only one dimension is specified it is square
bootbox.confirm("<p><b style=\"color: red; font-size: 24px;\">Rendering at higher resolutions can cause your computer to freeze. Proceed at your own risk.</b></p> This example only uses the CPU so if your computer is older it may not handle this well. Click the \"Cancel\" or close this page if you have tabs open that are important in case the browser freezes. Modern computers should be fine but it's better to be safe and close all important work first.", (result) => {
if (result) {
$("#64x64-li").removeClass('active');
$("#128x128-li").removeClass('active');
$("#256x256-li").removeClass('active');
$("#512x512-li").removeClass('active');
$("#400x300-li").removeClass('active');
$("#" + width + "x" + height + "-li").addClass('active');
$("#scene-frame").empty(); // remove previous canvas
createScene(width, height);
}
});
}
document.addEventListener("DOMContentLoaded", () => {
$("#64x64").click((e) => {
e.preventDefault();
$("#64x64-li").addClass('active');
$("#128x128-li").removeClass('active');
$("#256x256-li").removeClass('active');
$("#scene-frame").empty(); // remove previous canvas
createScene(64);
});
$("#128x128").click((e) => {
e.preventDefault();
$("#64x64-li").removeClass('active');
$("#128x128-li").addClass('active');
$("#256x256-li").removeClass('active');
$("#scene-frame").empty(); // remove previous canvas
createScene(128);
});
$("#256x256").click((e) => {
e.preventDefault();
warn(256);
});
$("#512x512").click((e) => {
e.preventDefault();
warn(512);
});
$("#400x300").click((e) => {
e.preventDefault();
warn(400, 300);
});
createScene(128);
});
</script>
</head>
<body>
<div class="row" style="padding: 10px">
<div class="col-sm-10"></div>
<div class="col-sm-2">
<a href="https://github.com/i-yam-jeremy/cpu-raymarcher" class="btn btn-default">View on GitHub</a>
</div>
</div>
<div class="container" style="padding: 10px; background-color: #CCCCCC">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="jumbotron">
<h2>CPU Raymarcher Demo</h2>
This is a simple demo of my CPU-based raymarcher. You can find the GPU-based version <a href="https://github.com/i-yam-jeremy/gpu-raymarcher">here</a>.
</div>
<ul class="nav nav-tabs">
<li id="64x64-li"><a id="64x64" href="#">64x64</a></li>
<li class="active" id="128x128-li"><a id="128x128" href="#">128x128</a></li>
<li id="256x256-li"><a id="256x256" href="#">256x256</a></li>
<li id="512x512-li"><a id="512x512" href="#">512x512</a></li>
<li id="400x300-li"><a id="400x300" href="#">400x300</a></li>
</ul>
<div id="scene-frame"></div>
</div>
<div class="col-md-3"></div>
</div>
</body>
</html>