Case Study: Project X
A high-performance WebGL 3D puzzle game rendering spatial logic challenges directly in the web browser.
Project Overview
Project X is a 3D spatial logic puzzle game developed as an academic study project to investigate browser-based graphics performance and interactive game engineering. Powered by the Three.js library and raw WebGL, the application challenges players to fill dynamic grid tables by manipulating, rotating, and aligning glowing three-dimensional cubes.
By leveraging Three.js for scene organization, camera setups, and complex spatial calculations, the project researches how custom shaders, lighting pipelines, and game loop timers function under hardware-accelerated web environments.
Key Engineering Pillars
- Three.js Scene Graph: Utilized Three.js to construct the interactive 3D scene graph, handling camera perspective properties, dynamic ambient/spot lighting, and custom textures on cube surfaces.
- Academic Research Scope: Developed as an academic research prototype to evaluate browser resource overhead, GPU state caching, and game loop latency under high-frequency tick runs.
- Dynamic Grid Logic: Developed an algorithmic spatial checker to validate user block alignments, automatically tracking state completed lines, scoring, and level progressions on-the-fly.
- Cross-Platform Responsiveness: Designed scaling canvas ratios to ensure that touch inputs, controls layout, and rendering ratios operate fluidly on both desktop screens and mobile touch interfaces.
Visual Showcase
In-game screenshots demonstrating 3D grid layout, level progression, and UI elements.
