-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (93 loc) · 3.3 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Ray Tracer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
crossorigin="anonymous">
</script>
<script src="camera.js"></script>
<script src="obj_loader.js"></script>
<script src="object.js"></script>
<script src="bvh.js"></script>
<script src="scene.js"></script>
</head>
<body>
<input type="file" onchange="readFiles(this)" multiple>
<canvas class="myCanvas" width="1024" height="768"></canvas>
<script>
const canvas = document.querySelector('.myCanvas');
// set size of 2D image
const width = 1024;
const height = 768;
const ctx = canvas.getContext('2d');
const scene = new Scene();
scene.canvas = canvas;
async function readFiles(input) {
scene.clearScene();
for (let i = 0; i < input.files.length; i++) {
let file = input.files[i];
let reader = new FileReader();
reader.readAsText(file);
reader.onload = async function () {
if (file.name.includes(".txt")) {
console.log("Loading Scene File...");
scene.loadSceneInfo(reader.result);
} else if (file.name.includes(".obj")) {
console.log("Loading OBJ File...");
// If the file is an obj file, we make sure to load it after the scene file to avoid any issues
await setTimeout(() => {
scene.loadObj(file.name, reader.result);
}, 2000);
} else {
console.log("Invalid scene extension");
}
};
reader.onerror = function () {
console.log(reader.error);
};
}
// Adding a delay allows js to load all files properly
await setTimeout(() => {
start();
}, 4000);
}
function start() {
// Assign the last loaded object as the mesh to be drawn
// This is done to avoid javascript's asynchronous file loading
scene.assignAsMesh();
// This removes any meshes that may have been loaded that don't have any obj files assigned to them
scene.removeHangingMeshes();
// Apply transformations to the meshes
scene.transformMeshes();
// Sort the objects by distance from the camera
scene.sortObjectsByDistance();
console.log("Building BVH...");
scene.bvh = buildBVH(scene.objects);
console.log(scene.bvh);
console.log("Scene to be rendered");
console.log(scene);
// set background to black
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, width, height);
console.log("Ray Tracing...");
scene.raytrace();
}
// Set a specific color for a pixel on a canvas
function setPixel(ctx, x, y, r, g, b) {
ctx.fillStyle = `rgb(${r},${g},${b})`;
ctx.fillRect(x, y, 1, 1);
}
// Set a random color for a pixel on a canvas
// Used as a placeholder
function setRandomColor(x, y) {
ctx.fillStyle = `rgb(
${Math.floor(Math.random() * 255)},
${Math.floor(Math.random() * 255)},
${Math.floor(Math.random() * 255)} )`;
ctx.fillRect(x, y, 1, 1);
}
</script>
</body>
</html>