https://vijay.eu/tags/webgl/Recent content in Webgl on Vijay KodamHugo -- gohugo.ioenWed, 10 Jun 2026 12:00:00 +0300https://vijay.eu/projects/retro-racer/Wed, 10 Jun 2026 12:00:00 +0300https://vijay.eu/projects/retro-racer/<div class="retro-racer"> <h1 class="racer-title">Retro Racer</h1> <p class="racer-subtitle">A 3D arcade racer. One lap, against the clock.</p> <div class="racer-frame"> <canvas id="racerCanvas"></canvas> <div class="racer-banner hidden" id="racerBanner" aria-live="polite"></div> <div class="racer-hud" aria-live="off"> <div class="hud-item"> <span class="hud-label">Time</span> <span class="hud-value" id="hudTime">0:00.0</span> </div> <div class="hud-item hud-item--speed"> <span class="hud-label">Speed</span> <span class="hud-value" id="hudSpeed">0 km/h</span> </div> <div class="hud-item"> <span class="hud-label">Progress</span> <span class="hud-value" id="hudProgress">0%</span> </div> </div> <div class="racer-overlay" id="racerStart"> <h2>Retro Racer</h2> <p>Complete one lap as fast as you can. Dodge traffic and stay on the road - grass and crashes will slow you down.</p> <p>Arrow keys or WASD to drive. On touch devices, hold gas/brake with your left thumb and steer with your right.</p> <button class="racer-btn" id="racerStartBtn" type="button" disabled>Start Race</button> <p class="racer-loading" id="racerLoading">Loading 3D assets...</p> <p class="racer-best" id="racerStartBest"></p> </div> <div class="racer-overlay hidden" id="racerResults"> <h2>Finish!</h2> <p class="racer-result-time" id="racerResultTime"></p> <p class="racer-best" id="racerResultBest"></p> <button class="racer-btn" id="racerAgainBtn" type="button">Race Again</button> </div> <div class="racer-cinematic hidden" id="racerCinematic" aria-hidden="true"> <div class="racer-letterbox racer-letterbox--top"></div> <div class="racer-letterbox racer-letterbox--bottom"></div> <div class="racer-flyby-label"> <span class="racer-flyby-name">Mazda Miata</span> <span class="racer-flyby-sub">MX-5 NA</span> </div> <button class="racer-skip-btn" id="racerSkipBtn" type="button">Skip &rsaquo;&rsaquo;</button> </div> </div> <div class="racer-touch"> <div class="touch-cluster touch-cluster--drive" aria-label="Speed controls (left thumb)"> <button class="touch-btn touch-btn--gas" id="racerBtnGas" type="button" aria-label="Accelerate">GAS</button> <button class="touch-btn touch-btn--brake" id="racerBtnBrake" type="button" aria-label="Brake">BRAKE</button> </div> <div class="touch-cluster touch-cluster--steer" aria-label="Steering controls (right thumb)"> <button class="touch-btn touch-btn--arrow" id="racerBtnLeft" type="button" aria-label="Steer left">&larr;</button> <button class="touch-btn touch-btn--arrow" id="racerBtnRight" type="button" aria-label="Steer right">&rarr;</button> </div> </div> <p class="racer-note">Built with vanilla JavaScript and <a href="https://threejs.org/" rel="noopener">three.js</a>. Car models "<a href="https://sketchfab.com/3d-models/mazda-miata-mx-5-na-d51fcd44b74f4daf8012c41e0400c041" rel="noopener">Mazda Miata MX-5 NA</a>" and "<a href="https://sketchfab.com/3d-models/toyota-ae86-trueno-fe02fba6302e450ea8424591493341ea" rel="noopener">Toyota AE86 Trueno</a>" by Lexyc16 on Sketchfab (CC-BY 4.0). Textures and lighting from <a href="https://polyhaven.com/" rel="noopener">Poly Haven</a> (CC0). Your best lap time is stored locally in your browser.</p> </div>