From abe1f21f84df5864e8a7781864d9e32436bde2d4 Mon Sep 17 00:00:00 2001
From: James Barnett <noreply@jamesbarnett.xyz>
Date: Thu, 31 Jul 2025 18:16:10 +0100
Subject: Add more reference benchmark scores. Update readme

---
 .github/benchmarks.png    | Bin 0 -> 42038 bytes
 README.md                 |  10 ++++++++++
 index.html                |   6 +++---
 src/ui/benchmarkCharts.ts |  21 ++++++++++++++++++---
 4 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 .github/benchmarks.png

diff --git a/.github/benchmarks.png b/.github/benchmarks.png
new file mode 100644
index 0000000..931d1a0
Binary files /dev/null and b/.github/benchmarks.png differ
diff --git a/README.md b/README.md
index c394ba6..b4f3756 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,16 @@ No graphics APIs or libraries are used, only a single HTML5 canvas call to draw
 Various effects are supported, including recursive optical reflections and refractions, and [Phong shading](https://en.wikipedia.org/wiki/Phong_reflection_model). 
 Basic multi-threading is implemented using the [Web Workers API](https://developer.mozilla.org/en-US/docs/Web/API/).
 
+## Benchmarking
+The raytracer can also be used as a basic CPU performance benchmarking tool.
+
+This will test the JavaScript execution performance of your CPU and web browser, and provide a raytracing throughput score in pixels per millisecond.
+
+I've run the benchmark on various different devices I have access to, which provide some reference scores for comparison.
+View them on the [benchmarking page](https://jamesbarnett.io/raytracer#benchmark) and try your own device to see how it compares.
+
+The JavaScript execution engine your browser used will influence the results. The reference benchmark scores were all run in V8 (Chromium), as unfortunately SpiderMonkey (Firefox) seems to be considerably slower, at least at this specific task.
+
 ## Building locally
 You will need NodeJS >= 10.
 
diff --git a/index.html b/index.html
index 2295c32..84494f5 100644
--- a/index.html
+++ b/index.html
@@ -148,13 +148,13 @@
         <div id="benchmark-mode" class="columns controls d-hide">
           <div class="column">
             <div class="columns">
-              <div class="column col-3">
+              <div class="column col-3" style="width: 20%">
                 <p>You can also use the raytracer to run a CPU and JavaScript performance benchmark.</p>
                 <p>This will run multiple 1080p renders, with both single and multicore workloads. An overall score will be calculated based on performance, higher is better.</p>
-                <p>Compare your results to the reference scores from the various other devices I've tested.</p>
+                <p>Compare your results to the reference scores from the various devices I've tested.</p>
               </div>
               <div class="divider-vert"></div>
-              <div class="column col-6">
+              <div class="column col-6" style="width: 55%">
                 <div id="benchmark-results-graph" style="width: 100%; height: 500px"></div>
               </div>
               <div class="column col-3">
diff --git a/src/ui/benchmarkCharts.ts b/src/ui/benchmarkCharts.ts
index 85513c2..b4ebc87 100644
--- a/src/ui/benchmarkCharts.ts
+++ b/src/ui/benchmarkCharts.ts
@@ -5,6 +5,8 @@ let scoreChart: EChartsType;
 const userDeviceLabel = 'Your device';
 
 let deviceScores = [
+  { device: 'AMD Ryzen 9\n7950X\n(16c/32t)', multiCoreScore: 1294, singleCoreScore: 121 },
+  { device: 'AMD Ryzen 7\n5700X\n(8c/16t)', multiCoreScore: 663, singleCoreScore: 104 },
   { device: 'AMD Ryzen 7\n3700X\n(8c/16t)', multiCoreScore: 416, singleCoreScore: 74 },
   { device: 'Intel 11th Gen\ni5-1145G7\n(4c/8t)', multiCoreScore: 294, singleCoreScore: 73 },
   { device: 'Intel 8th Gen\ni7-8550U\n(4c/8t)', multiCoreScore: 221, singleCoreScore: 53 },
@@ -20,7 +22,18 @@ let scoreDataset = {
 const option: EChartsOption = {
   legend: {},
   dataset: scoreDataset,
-  xAxis: { type: 'value' },
+  xAxis: {
+    type: 'value',
+    max: deviceScores[0].multiCoreScore,
+    axisLabel: {
+      showMaxLabel: false,
+      showMinLabel: false
+    },
+    splitLine: {
+      show: true,
+      showMaxLine: false,
+    },
+  },
   yAxis: {
     type: 'category',
     inverse: true,
@@ -45,14 +58,16 @@ const option: EChartsOption = {
       name: 'Multi-core',
       type: 'bar',
       label: {
-        show: true
+        show: true,
+        position: "right"
       },
     },
     {
       name: 'Single core',
       type: 'bar',
       label: {
-        show: true
+        show: true,
+        position: "right"
       },
     }
   ],
-- 
cgit v1.2.3