A real-time product study built around a fictional compact stereo system.
KERNWERK is an interactive product visualization rather than a conventional configurator. The scene combines authored camera views, physical CD interaction, spatial audio, product information, and a performance-aware rendering pipeline in one browser experience.
The project is designed to remain usable across integrated graphics, laptops, and high-end GPUs. It starts conservatively, measures the rendered scene, and adjusts quality without requiring the visitor to understand graphics settings.
- Guided camera tour with parallax, points of interest, and anchored product cards
- Physics-based CD dragging, tray attraction, snapping, removal, and lid interaction
- Functional player controls, display states, volume, track selection, and playback
- Local FLAC, WAV, and MP3 loading with multi-track discs and generated disc labels
- Stereo Web Audio playback through separate high- and low-frequency speaker sources
- Audio-reactive speaker membranes and positional player foley
- Progressive KTX2 texture streaming with Low, Medium, High, and cinematic assets
- Adaptive performance profiles for post-processing, lights, shadows, pixel ratio, and texture quality
- In-browser level editor for objects, lights, materials, post-processing, and saved level overrides
| Action | Input |
|---|---|
| Open a product view | Select a camera point of interest |
| Return to the overview | Back or Esc |
| Interact with the player | Click its physical controls or CD lid |
| Move a disc | Drag it with the pointer |
| Create a custom disc | Use Load track or drop audio files onto the page |
| Free camera in debug mode | WASD, Q / E, and right-mouse look |
The file picker accepts up to 20 tracks per disc, with a maximum duration of 15 minutes per track.
Requirements: a current Node.js release and npm.
cd app
npm install
npm run devVite prints the local URL and reloads the scene when source files change. To expose the development server on the local network:
npm run dev -- --host 0.0.0.0Build and inspect the production bundle locally:
npm run build
npm run previewRun the automated checks:
npm run checkEditable source assets live in the ignored root-level assets-source/ directory. Browser-ready models, textures, and audio are generated or copied into app/assets/ and committed so GitHub Pages can serve the project directly.
| Command | Purpose |
|---|---|
npm run textures |
Generate the normal runtime texture tiers |
npm run textures:4k |
Rebuild the 4K tier |
npm run textures:cinematic |
Prepare cinematic source textures |
npm run audio |
Convert bundled audio for browser playback |
Texture generation uses KTX2/Basis Universal profiles chosen per map type. The application first presents a practical runtime tier, then upgrades textures when the selected quality and measured performance allow it.
app/ Vite application and runtime assets
app/assets/ Runtime GLB, KTX2, image, and audio files
app/scripts/ Texture and audio preparation tools
app/src/config/ Saved level configuration
app/src/app/ Shared application state
app/src/scene/ Scene, camera, materials, streaming, and presentation
app/src/receiver/ Player, disc, speaker, and display behavior
app/src/interaction/ Pointer interaction and custom cursor
app/src/physics/ Rapier world and physical dragging
app/src/audio/ Track playback and player foley
app/src/performance/ Startup measurement and adaptive quality
app/src/postprocessing/ Render effects and quality-aware composition
app/src/debug/ Level, object, light, and material editor
docs/images/ README media
Runtime state is coordinated through a small store. SceneRuntime owns the Three.js scene and prefab assembly; dedicated runtimes handle player behavior, discs, speakers, camera presentation, Rapier interaction, Web Audio, post-processing, adaptive quality, and the debug editor.
The public build keeps editor controls hidden. Open the browser console and run:
kernwerk.debug();Useful diagnostics:
kernwerk.status();
kernwerk.loading();
kernwerk.quality('Auto'); // Auto, Ultra, High, Medium, or LowWhen running through the Vite development server, the editor's save action writes level overrides to app/src/config/level-config.json. In a static production deployment it exports the configuration instead.
The environment is authored in app/assets/enviroment/Scene0.glb; reusable objects live in app/assets/Prefabs/. Blender node names form the runtime contract:
PF_*nodes mark prefab placementUBX_*andUCX_*nodes provide simplified collidersCAM_*nodes define authored camera viewsCAMHINT_*nodes position corresponding navigation hintsUI_ProductCard_*nodes anchor product information in the scene
Keep these names stable when re-exporting GLB files. Level-editor transforms may override authored transforms until offsets are reset and the level configuration is saved again.
TypeScript, Three.js, Rapier, Web Audio API, lil-gui, and Vite. The production site is deployed to GitHub Pages through the workflow in .github/workflows/deploy-pages.yml.
The source code is licensed under the Apache License 2.0. Redistributed versions must preserve the license, attribution notices, and the project NOTICE, and modified files must be identified as changed.
Original visual assets are available under CC BY 4.0 with attribution to Artem Lut, a link to this repository, and an indication of modifications. The KERNWERK name and identity are not licensed for branding derived projects or implying endorsement.
Music, referenced product designs, trademarks, and other third-party material are excluded from those grants and remain subject to their respective notices.
Design and development by Artem Lut. Selected work is available on Behance.
Music featured in the demo:
- Surprising_Media, "Smoked Glass Keys (piano dark jazz)", Pixabay Content License
- Alexander Nakarada, "Circuits", CC BY 4.0
KERNWERK is fictional branding created for this demonstration. The featured hardware is a digital interpretation of products by Technics and ELAC. This project is not affiliated with real brands, or their respective rights holders.