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
|
import {ChunkAllocationMode, RaytraceContext, RaytracerOptions} from "../models/RaytraceContext";
import {RaytraceDispatcher} from "../RaytraceDispatcher";
import {Framebuffer} from "../Framebuffer";
import {getScene} from "../models/Scene";
import {Colour} from "../models/Colour";
import {Logger} from "../Logger";
let dispatcher: RaytraceDispatcher;
const renderButton = document.getElementById('render')!;
const stopRenderButton = document.getElementById('stop-render')!;
const viewFullButton = document.getElementById('view-full')!;
export function registerEventListeners() {
renderButton.addEventListener('click', render);
stopRenderButton.addEventListener('click', stopRender);
viewFullButton.addEventListener('click', () => {
const canvas = document.getElementById(
'render-output'
) as HTMLCanvasElement;
window.open()!.document.body.innerHTML = `<img src=${canvas.toDataURL()}>`;
});
const threadsSlider = getInputElement('threads');
threadsSlider.addEventListener('input', () => {
getInputElement('threads-value').textContent = threadsSlider.value;
});
const threadToggle = getInputElement('enable-threads-toggle');
threadToggle.addEventListener('change', () => {
threadsSlider.disabled = !threadToggle.checked;
});
}
export function render() {
renderButton.classList.add('loading');
stopRenderButton.classList.remove('d-hide');
viewFullButton.classList.add('d-hide');
const {width, height} = parseResolution();
const options = parseOptions();
dispatcher = initDispatcher(width, height, options, onRenderComplete);
dispatcher.requestRender();
}
function stopRender() {
dispatcher.stopRender();
onRenderComplete();
}
function onRenderComplete() {
renderButton.classList.remove('loading');
stopRenderButton.classList.add('d-hide');
viewFullButton.classList.remove('d-hide');
}
function initDispatcher(width: number, height: number, options: RaytracerOptions, onComplete: Function): RaytraceDispatcher {
const fov = Math.PI / 3;
const framebuffer = new Framebuffer(width, height);
const {spheres, planes, lights} = getScene();
const context = new RaytraceContext(
height,
width,
fov,
spheres,
planes,
lights,
new Colour(40, 40, 40),
options
);
return new RaytraceDispatcher(
framebuffer,
context,
new Logger(document.getElementById('console-demo')!),
onComplete
);
}
function parseOptions(): RaytracerOptions {
return {
numThreads: getDesiredThreadCount(),
shadows: getInputElement('shadows-toggle').checked,
diffuseLighting: getInputElement('diffuse-toggle').checked,
specularLighting: getInputElement('specular-toggle').checked,
reflections: getInputElement('reflections-toggle').checked,
refractions: getInputElement('refractions-toggle').checked,
maxRecurseDepth: 5,
maxDrawDistance: 1000,
directMemoryTransfer: getInputElement('direct-transfer').checked,
chunkSize: parseInt(getInputElement('chunk-size').value, 10),
chunkAllocationMode: getChunkAllocationMode(),
chunkBorderColour: new Colour(220, 128, 128),
chunkUnrenderedColour: new Colour(120, 120, 120)
};
}
function parseResolution(): {width: number; height: number} {
switch (getInputElement('res').value) {
case '360p':
return {width: 640, height: 360};
case '480p':
return {width: 832, height: 480};
case '720p':
default:
return {width: 1280, height: 720};
case '1080p':
return {width: 1920, height: 1080};
case '1440p':
return {width: 2560, height: 1440};
case '4k':
return {width: 3840, height: 2160};
}
}
function getChunkAllocationMode(): ChunkAllocationMode {
switch (getInputElement('chunk-allocation-mode').value) {
case 'SEQUENTIAL':
default:
return ChunkAllocationMode.SEQUENTIAL;
case 'RANDOM':
return ChunkAllocationMode.RANDOM
case 'CENTER_TO_EDGE':
return ChunkAllocationMode.CENTER_TO_EDGE
case 'EDGE_TO_CENTER':
return ChunkAllocationMode.EDGE_TO_CENTER
}
}
function getDesiredThreadCount(): number {
if (getInputElement('enable-threads-toggle').checked) {
return Number.parseInt(getInputElement('threads').value);
} else {
return 1;
}
}
function getInputElement(elementId: string) {
return document.getElementById(elementId) as HTMLInputElement;
}
|