diff options
| author | James Barnett <noreply@jamesbarnett.xyz> | 2022-01-04 21:44:49 +0000 |
|---|---|---|
| committer | James Barnett <noreply@jamesbarnett.xyz> | 2022-01-04 21:44:49 +0000 |
| commit | 16b0f20415efd3ed2c181df74a473ebd5265892b (patch) | |
| tree | 2d94216df0dca5b378f74b47515af5b910fc5ae7 /index.html | |
| parent | 496c63266d02bc9369e3406353b877a8ebbae60a (diff) | |
| download | js-raytracer-16b0f20415efd3ed2c181df74a473ebd5265892b.tar.xz js-raytracer-16b0f20415efd3ed2c181df74a473ebd5265892b.zip | |
Fix specular lighting. Update scene.
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 56 |
1 files changed, 32 insertions, 24 deletions
@@ -8,33 +8,26 @@ </head> <body> - <div class="container grid-xl"> + <div class="container"> <div class="columns"> <div class="column col-xl-12"> <div id="output-wrapper" class="p-centered"> <canvas id="render-output"></canvas> </div> </div> + </div> + <div class="container grid-xl"> + <div class="columns controls"> <div class="column"> - <div class="columns controls"> - <!-- <div class="column col-12 col-xl-3"> - <p>foo</p> + <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="column col-12 col-xl-1 hide-xl"> - <div class="divider"></div> - </div> --> - <div class="column col-12 col-xl-9"> - <div class="form-group"> - <label class="form-label label-sm" for="res">Resolution</label> - <select id="res" class="form-select select-sm"> - <option value="720p" selected>720p</option> - <option value="1080p">1080p</option> - <option value="1440p">1440p</option> - <option value="4k">4k</option> - <option value="8k">8k</option> - </select> - </div> - <p>Render options</p> + <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> @@ -65,9 +58,11 @@ <i class="form-icon"></i> Refractions </label> </div> - <p>Performance options</p> + </div> + <div class="column col-3"> + <span>Performance options</span> <div class="form-group"> - <label class="form-switch tooltip"> + <label class="form-switch"> <input id="buffer-draw" type="checkbox" checked> <i class="form-icon"></i> Buffer draw calls </label> @@ -88,12 +83,25 @@ <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="12" value="2" step="2"> - <span id="threads-value" class="input-group-addon">2</span> + <input id="threads" class="slider" type="range" min="2" max="12" value="4" step="2"> + <span id="threads-value" class="input-group-addon">4</span> </div> </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="view-full" class="btn btn-link">view full size</button> + <button id="view-full" class="btn btn-link">View full image</button> <pre class="code"><code id="console"></code></pre> </div> </div> |