aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--css/style.css113
-rw-r--r--css/tamzen-8-b.ttfbin0 -> 23540 bytes
-rw-r--r--css/tamzen-8-r.ttfbin0 -> 26228 bytes
-rw-r--r--index.html14
-rw-r--r--src/RaytraceDispatcher.ts11
-rw-r--r--src/models/RaytraceContext.ts2
-rw-r--r--src/ui/benchmarkCharts.ts14
-rw-r--r--src/ui/benchmarkView.ts6
-rw-r--r--src/ui/demoView.ts6
-rw-r--r--style.css47
-rw-r--r--webpack.config.js2
11 files changed, 147 insertions, 68 deletions
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..489fc48
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,113 @@
+@font-face {
+ font-family: 'tamzen';
+ src: url('./tamzen-8-r.ttf') format('truetype');
+ font-weight: normal;
+}
+
+@font-face {
+ font-family: 'tamzen';
+ src: url('./tamzen-8-b.ttf') format('truetype');
+ font-weight: bold;
+}
+
+body {
+ font-size: 16px;
+ line-height: 16px;
+ background: #0a0a0a;
+ color: #bbb;
+ font-family: 'tamzen', monospace;
+}
+
+.tab {
+ border-bottom: .05rem solid #a3a3a3;
+ font-size: 1.1em;
+}
+
+.tab .tab-item a {
+ border-bottom: .3rem solid transparent;
+}
+
+.divider-vert::before {
+ border-left: .05rem solid #a3a3a3;
+}
+
+.form-select:not([multiple]):not([size]) {
+ background: #000 url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
+ font-size: 1em;
+}
+
+a {
+ font-weight: bold;
+}
+
+p {
+ margin: 0 0 0.8rem;
+}
+
+#output-wrapper {
+ margin-top: 0.5em;
+}
+
+#render-output {
+ width: 100%;
+ height: 65vmin;
+ object-fit: contain;
+}
+
+.controls {
+ margin-top: 0.5em;
+}
+
+.slider {
+ margin-right: 0.5em;
+ width: 100%;
+}
+
+.nested-slider {
+ padding-left: 40px;
+}
+
+.console {
+ height: 120px;
+ padding: 0 0 0 1em;
+ white-space: pre-line;
+}
+
+#res-label {
+ padding-bottom: 4px;
+ padding-top: 0px;
+ margin-top: -1px;
+ font-size: 15px;
+}
+
+.divider-vert {
+ padding: 0;
+}
+
+.render-option-heading {
+ font-size: 18px;
+ font-weight: bold;
+}
+
+.form-label.label-sm {
+ font-size: 1em;
+}
+
+.btn.btn-link {
+ font-weight: bold;
+ font-size: 1.1em;
+}
+
+.code code {
+ background: #333;
+ color: #dd0;
+ padding: 1em;
+}
+
+.score-col {
+ line-height: 1.8em;
+}
+
+#threads-value {
+ background: #0a0a0a;
+}
diff --git a/css/tamzen-8-b.ttf b/css/tamzen-8-b.ttf
new file mode 100644
index 0000000..b5eadcf
--- /dev/null
+++ b/css/tamzen-8-b.ttf
Binary files differ
diff --git a/css/tamzen-8-r.ttf b/css/tamzen-8-r.ttf
new file mode 100644
index 0000000..b16c24b
--- /dev/null
+++ b/css/tamzen-8-r.ttf
Binary files differ
diff --git a/index.html b/index.html
index 84494f5..b9095cb 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<title>Raytracer</title>
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
- <link rel="stylesheet" href="style.css">
+ <link rel="stylesheet" href="css/style.css">
</head>
<body>
@@ -44,7 +44,7 @@
</div>
<div class="divider-vert"></div>
<div class="column col-2">
- <span>Render options</span>
+ <span class="render-option-heading">Render options</span>
<div class="form-group">
<label class="form-switch">
<input id="diffuse-toggle" type="checkbox" checked>
@@ -77,7 +77,7 @@
</div>
</div>
<div class="column col-3">
- <span>Performance options</span>
+ <span class="render-option-heading">Performance options</span>
<div class="form-group">
<label class="form-switch">
<input id="direct-transfer" type="checkbox" checked>
@@ -165,15 +165,15 @@
</div>
<div class="columns">
<div class="column col-12" >
- <div class="h4">Score</div>
+ <div class="h4 text-bold">Score</div>
</div>
</div>
- <div class="columns">
- <div class="column col-6">
+ <div class="columns score-col">
+ <div class="column col-6 text-bold">
<div>Multi-core</div>
<div id="multi-core-score" class="h1 loading-lg">-</div>
</div>
- <div class="column col-6">
+ <div class="column col-6 text-bold">
<div>Single core</div>
<div id="single-core-score" class="h1 loading-lg">-</div>
</div>
diff --git a/src/RaytraceDispatcher.ts b/src/RaytraceDispatcher.ts
index 12f2502..b408bef 100644
--- a/src/RaytraceDispatcher.ts
+++ b/src/RaytraceDispatcher.ts
@@ -150,21 +150,18 @@ export class RaytraceDispatcher {
let borderWidth = 0;
if (this.context.height <= 720) {
- borderWidth = 2;
+ borderWidth = 4;
} else {
- borderWidth = 5;
+ borderWidth = 8;
}
- const borderColour = new Colour(220, 128, 128);
- const unrenderedAreaColour = new Colour(160, 160, 160);
-
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
if (y < borderWidth || y >= (height-borderWidth) || x < borderWidth || x >= (width-borderWidth)) {
- this.framebuffer.writePixelAt(chunk.xStart+x, chunk.yStart+y, borderColour);
+ this.framebuffer.writePixelAt(chunk.xStart+x, chunk.yStart+y, this.context.options.chunkBorderColour);
} else {
- this.framebuffer.writePixelAt(chunk.xStart+x, chunk.yStart+y, unrenderedAreaColour);
+ this.framebuffer.writePixelAt(chunk.xStart+x, chunk.yStart+y, this.context.options.chunkUnrenderedColour);
}
}
diff --git a/src/models/RaytraceContext.ts b/src/models/RaytraceContext.ts
index 1f22d32..b6ff1c1 100644
--- a/src/models/RaytraceContext.ts
+++ b/src/models/RaytraceContext.ts
@@ -41,6 +41,8 @@ export interface RaytracerOptions {
directMemoryTransfer: boolean;
chunkSize: number;
chunkAllocationMode: ChunkAllocationMode;
+ chunkBorderColour: Colour,
+ chunkUnrenderedColour: Colour
}
export enum ChunkAllocationMode {
diff --git a/src/ui/benchmarkCharts.ts b/src/ui/benchmarkCharts.ts
index b4ebc87..d272567 100644
--- a/src/ui/benchmarkCharts.ts
+++ b/src/ui/benchmarkCharts.ts
@@ -48,10 +48,14 @@ const option: EChartsOption = {
usersDevice: {
color: "#5755d9",
fontWeight: "bold",
- fontSize: "14px"
+ fontSize: 20
},
},
+ fontSize: 16
},
+ axisTick: {
+ length: 20
+ }
},
series: [
{
@@ -74,16 +78,22 @@ const option: EChartsOption = {
grid: {
left: '0%',
top: '5%',
+ bottom: '5%',
containLabel: true
},
color: [
'#5755d9',
'#f1f1fc'
],
+ backgroundColor: "#0a0a0a",
+ textStyle: {
+ fontSize: 16,
+ fontFamily: "tamzen"
+ },
}
export function initScoreChart(dom: HTMLElement) {
- scoreChart = echarts.init(dom);
+ scoreChart = echarts.init(dom, 'dark');
scoreChart.setOption(option);
window.addEventListener('resize', function() {
diff --git a/src/ui/benchmarkView.ts b/src/ui/benchmarkView.ts
index 487ec63..baba3e8 100644
--- a/src/ui/benchmarkView.ts
+++ b/src/ui/benchmarkView.ts
@@ -82,7 +82,7 @@ function initDispatcher(width: number, height: number, options: RaytracerOptions
spheres,
planes,
lights,
- new Colour(221, 221, 221),
+ new Colour(40, 40, 40),
options
);
@@ -106,6 +106,8 @@ function getBenchmarkRenderOptions(multiCore: boolean) {
maxDrawDistance: 1000,
directMemoryTransfer: true,
chunkSize: 0,
- chunkAllocationMode: ChunkAllocationMode.SEQUENTIAL
+ chunkAllocationMode: ChunkAllocationMode.SEQUENTIAL,
+ chunkBorderColour: new Colour(220, 128, 128),
+ chunkUnrenderedColour: new Colour(120, 120, 120)
}
}
diff --git a/src/ui/demoView.ts b/src/ui/demoView.ts
index e42696b..9b9c3c2 100644
--- a/src/ui/demoView.ts
+++ b/src/ui/demoView.ts
@@ -68,7 +68,7 @@ function initDispatcher(width: number, height: number, options: RaytracerOptions
spheres,
planes,
lights,
- new Colour(221, 221, 221),
+ new Colour(40, 40, 40),
options
);
@@ -92,7 +92,9 @@ function parseOptions(): RaytracerOptions {
maxDrawDistance: 1000,
directMemoryTransfer: getInputElement('direct-transfer').checked,
chunkSize: parseInt(getInputElement('chunk-size').value, 10),
- chunkAllocationMode: getChunkAllocationMode()
+ chunkAllocationMode: getChunkAllocationMode(),
+ chunkBorderColour: new Colour(220, 128, 128),
+ chunkUnrenderedColour: new Colour(120, 120, 120)
};
}
diff --git a/style.css b/style.css
deleted file mode 100644
index 9f3302e..0000000
--- a/style.css
+++ /dev/null
@@ -1,47 +0,0 @@
-body {
- font-size: 15px;
-}
-
-p {
- margin: 0 0 0.8rem;
-}
-
-#output-wrapper {
- margin-top: 0.5em;
-}
-
-#render-output {
- width: 100%;
- height: 65vmin;
- object-fit: contain;
-}
-
-.controls {
- margin-top: 0.5em;
-}
-
-.slider {
- margin-right: 0.5em;
- width: 100%;
-}
-
-.nested-slider {
- padding-left: 40px;
-}
-
-.console {
- height: 120px;
- padding: 0 0 0 1em;
- white-space: pre-line;
-}
-
-#res-label {
- padding-bottom: 4px;
- padding-top: 0px;
- margin-top: -1px;
- font-size: 15px;
-}
-
-.divider-vert {
- padding: 0;
-} \ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 900a109..1162afd 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -25,7 +25,7 @@ module.exports = {
new CopyPlugin({
patterns: [
{ from: 'index.html' },
- { from: 'style.css' }
+ { from: 'css/*' }
],
}),
],
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-10 14:43:54 +0000