diff options
| author | James Barnett <noreply@jamesbarnett.xyz> | 2025-07-31 16:04:04 +0100 |
|---|---|---|
| committer | James Barnett <noreply@jamesbarnett.xyz> | 2025-07-31 16:04:04 +0100 |
| commit | bccbcc12c72f5edde605601a311646d1ca96d7e1 (patch) | |
| tree | 494a79f237fa22186ab9a3a80e7b3d84719e2460 /index.html | |
| parent | 7b06f4e9958562f3df09eecc368e92af013e5b39 (diff) | |
| download | js-raytracer-bccbcc12c72f5edde605601a311646d1ca96d7e1.tar.xz js-raytracer-bccbcc12c72f5edde605601a311646d1ca96d7e1.zip | |
Add CPU performance benchmarking
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 259 |
1 files changed, 160 insertions, 99 deletions
@@ -9,6 +9,7 @@ <body> <div class="container"> + <div class="columns"> <div class="column col-xl-12"> <div id="output-wrapper" class="p-centered"> @@ -16,119 +17,179 @@ </div> </div> </div> - <div class="container grid-xl"> - <div class="columns controls"> - <div class="column"> - <div class="columns"> - <div class="column col-3"> - <p>A minimal ray tracing engine written from scratch in JS. No graphics APIs or libraries are used, only a single HTML5 canvas call to draw the generated bitmap image.</p> - <p>Various effects are supported, including recursive optical reflections and refractions, and <a href="https://en.wikipedia.org/wiki/Phong_reflection_model">Phong shading</a>. Basic multi-threading is implemented using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API" target="_blank">Web Workers API</a>.</p> - <p>The source is on <a href="https://github.com/jamesbarnett91/js-raytracer" target="_blank">GitHub</a>.</p> - </div> - <div class="divider-vert"></div> - <div class="column col-2"> - <span>Render options</span> - <div class="form-group"> - <label class="form-switch"> - <input id="diffuse-toggle" type="checkbox" checked> - <i class="form-icon"></i> Diffuse lighting - </label> - </div> - <div class="form-group"> - <label class="form-switch"> - <input id="specular-toggle" type="checkbox" checked> - <i class="form-icon"></i> Specular lighting - </label> + + <div class="container grid-xl"> + + <div class="columns"> + <div class="column"> + <ul class="tab"> + <li id="demo-tab" class="tab-item active"> + <a href="#">Raytracing demo</a> + </li> + <li id="benchmark-tab" class="tab-item"> + <a href="#">CPU Benchmark</a> + </li> + </ul> + </div> + </div> + + <div id="demo-mode" class="columns controls"> + <div class="column"> + <div class="columns"> + <div class="column col-3"> + <p>A minimal ray tracing engine written from scratch in JS. No graphics APIs or libraries are used, only a single HTML5 canvas call to draw the generated bitmap image.</p> + <p>Various effects are supported, including recursive optical reflections and refractions, and <a href="https://en.wikipedia.org/wiki/Phong_reflection_model">Phong shading</a>. Basic multi-threading is implemented using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API" target="_blank">Web Workers API</a>.</p> + <p>The raytracer can also produce CPU performance benchmarks.</p> + <p>The source is on <a href="https://github.com/jamesbarnett91/js-raytracer" target="_blank">GitHub</a>.</p> </div> - <div class="form-group"> - <label class="form-switch"> - <input id="shadows-toggle" type="checkbox" checked> - <i class="form-icon"></i> Shadows - </label> + <div class="divider-vert"></div> + <div class="column col-2"> + <span>Render options</span> + <div class="form-group"> + <label class="form-switch"> + <input id="diffuse-toggle" type="checkbox" checked> + <i class="form-icon"></i> Diffuse lighting + </label> + </div> + <div class="form-group"> + <label class="form-switch"> + <input id="specular-toggle" type="checkbox" checked> + <i class="form-icon"></i> Specular lighting + </label> + </div> + <div class="form-group"> + <label class="form-switch"> + <input id="shadows-toggle" type="checkbox" checked> + <i class="form-icon"></i> Shadows + </label> + </div> + <div class="form-group"> + <label class="form-switch"> + <input id="reflections-toggle" type="checkbox" checked> + <i class="form-icon"></i> Reflections + </label> + </div> + <div class="form-group"> + <label class="form-switch"> + <input id="refractions-toggle" type="checkbox" checked> + <i class="form-icon"></i> Refractions + </label> + </div> </div> - <div class="form-group"> - <label class="form-switch"> - <input id="reflections-toggle" type="checkbox" checked> - <i class="form-icon"></i> Reflections - </label> + <div class="column col-3"> + <span>Performance options</span> + <div class="form-group"> + <label class="form-switch"> + <input id="direct-transfer" type="checkbox" checked> + <i class="form-icon"></i> Zero-copy array transfer + </label> + </div> + <div class="form-group"> + <label class="form-switch"> + <input id="enable-threads-toggle" type="checkbox" checked> + <i class="form-icon"></i> Multi-threaded rendering + </label> + </div> + <div class="form-group nested-slider"> + <label class="form-label label-sm" for="threads">Render threads</label> + <!-- TODO style --> + <div class="input-group"> + <input id="threads" class="slider" type="range" min="2" max="32" value="4" step="2"> + <span id="threads-value" class="input-group-addon">4</span> + </div> + </div> + <div class="form-group"> + <label class="form-group"> + <label id="chunk-size-label" class="form-label label-sm" for="res">Chunk size</label> + <select id="chunk-size" class="form-select select-sm"> + <option value="0" selected>Auto</option> + <option value="8">8x8</option> + <option value="16">16x16</option> + <option value="32">32x32</option> + <option value="64">64x64</option> + <option value="128">128x128</option> + <option value="256">256x256</option> + </select> + </label> + </div> + <div class="form-group"> + <label class="form-group"> + <label id="chunk-allocation-mode-label" class="form-label label-sm" for="res">Chunk allocation mode</label> + <select id="chunk-allocation-mode" class="form-select select-sm"> + <option value="SEQUENTIAL" selected>Sequential</option> + <option value="RANDOM">Random</option> + <option value="CENTER_TO_EDGE">Center to edge</option> + <option value="EDGE_TO_CENTER">Edge to center</option> + </select> + </label> + </div> </div> - <div class="form-group"> - <label class="form-switch"> - <input id="refractions-toggle" type="checkbox" checked> - <i class="form-icon"></i> Refractions - </label> + <div class="column col-4"> + <div class="form-group"> + <label id="res-label" class="form-label label-sm" for="res">Resolution</label> + <select id="res" class="form-select select-sm"> + <option value="360p">360p</option> + <option value="480p">480p</option> + <option value="720p" selected >720p</option> + <option value="1080p">1080p</option> + <option value="1440p">1440p</option> + <option value="4k">4k</option> + </select> + </div> + <button id="render" class="btn btn-primary btn-lg">Render</button> + <button id="stop-render" class="btn btn-link d-hide">Stop render</button> + <button id="view-full" class="btn btn-link d-hide">View full image</button> + <pre class="code"><code id="console-demo" class="console"></code></pre> </div> </div> - <div class="column col-3"> - <span>Performance options</span> - <div class="form-group"> - <label class="form-switch"> - <input id="direct-transfer" type="checkbox" checked> - <i class="form-icon"></i> Zero-copy array transfer - </label> + </div> + </div> + + <div id="benchmark-mode" class="columns controls d-hide"> + <div class="column"> + <div class="columns"> + <div class="column col-3"> + <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> </div> - <div class="form-group"> - <label class="form-switch"> - <input id="enable-threads-toggle" type="checkbox" checked> - <i class="form-icon"></i> Multi-threaded rendering - </label> + <div class="divider-vert"></div> + <div class="column col-6"> + <div id="benchmark-results-graph" style="width: 100%; height: 500px"></div> </div> - <div class="form-group nested-slider"> - <label class="form-label label-sm" for="threads">Render threads</label> - <!-- TODO style --> - <div class="input-group"> - <input id="threads" class="slider" type="range" min="2" max="32" value="4" step="2"> - <span id="threads-value" class="input-group-addon">4</span> + <div class="column col-3"> + <div class="columns"> + <div class="column col-12 d-flex" style="justify-content: center; padding-bottom: 15px"> + <button id="benchmark" class="btn btn-primary btn-lg">Run benchmark</button> + </div> + </div> + <div class="columns"> + <div class="column col-12" > + <div class="h4">Score</div> + </div> + </div> + <div class="columns"> + <div class="column col-6"> + <div>Multi-core</div> + <div id="multi-core-score" class="h1 loading-lg">-</div> + </div> + <div class="column col-6"> + <div>Single core</div> + <div id="single-core-score" class="h1 loading-lg">-</div> + </div> + </div> + <div class="columns"> + <div class="column col-12" > + <pre class="code"><code id="console-benchmark" class="console"></code></pre> + </div> </div> </div> - <div class="form-group"> - <label class="form-group"> - <label id="chunk-size-label" class="form-label label-sm" for="res">Chunk size</label> - <select id="chunk-size" class="form-select select-sm"> - <option value="0" selected>Auto</option> - <option value="8">8x8</option> - <option value="16">16x16</option> - <option value="32">32x32</option> - <option value="64">64x64</option> - <option value="128">128x128</option> - <option value="256">256x256</option> - </select> - </label> - </div> - <div class="form-group"> - <label class="form-group"> - <label id="chunk-allocation-mode-label" class="form-label label-sm" for="res">Chunk allocation mode</label> - <select id="chunk-allocation-mode" class="form-select select-sm"> - <option value="SEQUENTIAL" selected>Sequential</option> - <option value="RANDOM">Random</option> - <option value="CENTER_TO_EDGE">Center to edge</option> - <option value="EDGE_TO_CENTER">Edge to center</option> - </select> - </label> - </div> - </div> - <div class="column col-4"> - <div class="form-group"> - <label id="res-label" class="form-label label-sm" for="res">Resolution</label> - <select id="res" class="form-select select-sm"> - <option value="360p">360p</option> - <option value="480p">480p</option> - <option value="720p" selected >720p</option> - <option value="1080p">1080p</option> - <option value="1440p">1440p</option> - <option value="4k">4k</option> - </select> - </div> - <button id="render" class="btn btn-primary">Render</button> - <button id="stop-render" class="btn btn-link d-hide">Stop render</button> - <button id="view-full" class="btn btn-link d-hide">View full image</button> - <pre class="code"><code id="console"></code></pre> </div> </div> </div> + </div> </div> - <script src="./bundle.js"></script> </body> </html> |