VULPA-9
Procedural 3D hardware showroom with bilingual Voice AI avatar assistant, real-time sonification, and cyberpunk glassmorphism UI.
OVERVIEW
VULPA-9 is an immersive web-based hardware showroom combining 100% procedural 3D rendering (Three.js), a bilingual voice AI assistant, and generative audio — no external 3D assets required.
THE PROBLEM
Conventional computer hardware learning media is often boring, static, and results in large file sizes when including 3D assets in 3ds/GLTF format that strain browser bandwidth.
To create lightweight 3D computer hardware educational media that runs smoothly in the browser, features hands-free bilingual voice control, and delivers emotional interaction through an intelligent AI avatar character.
SOLUTION
Building all 3D geometry 100% procedurally using Three.js and custom shaders, integrating the Web Speech API with Levenshtein distance correction for accurate Indonesian voice recognition, and synthesizing hardware audio effects directly through the Web Audio API.
TECHNOLOGIES
KEY FEATURES
Audio Visualizer
Plays an arcade track through the Web Audio analyser — move your cursor and press play.
Screenshots
A quick look at how the interface actually looks.
Hardware Matrix: Procedural 3D lab with an interactive CLI terminal on a laptop, hardware sonification, and the VULPA-9 robotic assistant01 / 3
Component Showroom: Real-time 3D visualization of CPU, GPU, RAM, NVMe, PSU, & Motherboard with Explode View & X-Ray modes02 / 03
VULPA Den: Interactive avatar room with skin customization system, accessories, XP bonding (Bond System), and interactive storytelling03 / 03
CHALLENGES & SOLUTIONS
Producing complex computer hardware visual details (CPU pins, heatsink coolers, circuit boards) without external 3D files.
Writing modular procedural mesh generation algorithms combining instanced geometries, boolean operations, and procedural canvas textures.
Tolerance for mishearing on the Web Speech API when recognizing technical terms and Indonesian commands.
Designing a fuzzy matching NLP pipeline based on Levenshtein distance with dynamic thresholds according to word length and a custom phonetic correction dictionary.
WHAT I LEARNED
The application runs smoothly at 60 FPS on high resolution with a very compact initial bundle size, supports offline usage via PWA, and delivers responsive hands-free voice interaction.