diff options
| -rw-r--r-- | .github/benchmarks.png | bin | 0 -> 42038 bytes | |||
| -rw-r--r-- | README.md | 10 | ||||
| -rw-r--r-- | index.html | 6 | ||||
| -rw-r--r-- | src/ui/benchmarkCharts.ts | 21 |
4 files changed, 31 insertions, 6 deletions
diff --git a/.github/benchmarks.png b/.github/benchmarks.png Binary files differnew file mode 100644 index 0000000..931d1a0 --- /dev/null +++ b/.github/benchmarks.png @@ -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. @@ -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" }, } ], |
