Kalmitech Interactive Systems & Graphics Lab is an engineering sandbox and game deployment hub showcasing low-level browser graphics, real-time physics simulations, and procedural shaders.
The platform hosts three distinct graphics architectures: Crash Camp 3D (a sub-zero wilderness survival simulation built on Three.js, Cannon-es physics, Simplex procedural noise, and GLTF asset pipelines), Alien Invasion (a classic space shooter ported from Python/Pygame to zero-dependency HTML5 Canvas with real-time WebAudio synthesis), and Pong ECS (an Entity-Component-System cyber arcade driven by WebGL2 multi-arena GLSL fragment shaders).
The Challenge
Problem Statement
Browser gaming historically suffered from bloated runtimes, sluggish frame rates, heavy download footprints, and unreliable mobile input translation. Running multi-scene 3D mesh rendering alongside physics calculations and custom fragment shaders directly in browser threads requires disciplined asset budgeting and garbage-collection avoidance.
Engineering Resolution
Solution Design
Engineered zero-dependency rendering systems optimized for modern GPU hardware. Crash Camp 3D couples Three.js with Cannon-es rigid-body collision meshes and Simplex noise biomes. Pong ECS compiles authentic GLSL fragment shaders directly onto WebGL2 screen-aligned quads. All systems are bundled with Vite, precached with a resilient PWA Service Worker v2, and delivered through Nginx with optimized asset headers.
Capabilities
Key Features & Architecture
1
Real-Time 3D Simulation
Three.js and Cannon-es rigid-body physics, procedural terrain noise, and authentic GLTF 3D wreckage models.
2
Procedural GLSL Shaders
Multi-arena fragment shader pipeline rendering heat-wave refraction, glacial crystals, and undulating swamp fog.
3
Canvas 2D Engine Port
Python/Pygame mechanics ported to zero-dependency HTML5 Canvas with escalating wave difficulty.
Three.js mesh rendering, Cannon-es collision meshes, and Simplex biomes
Crash Camp 3D drops players into the frozen aftermath of Flight 402. The simulation combines Three.js hierarchical scene graphs with Cannon-es physics bodies for rigid-body terrain collisions.
Procedural terrain elevation is computed on-the-fly using 2D Fractional Brownian Motion (fBm) over Simplex noise. Dynamic particle systems render snow drift, wind gusts, and burning campfire embers, while a custom ServiceWorker v2 guarantees instant zero-downtime offline execution.
PROCEDURAL GLSL SHADER PIPELINES (PONG ECS)
Procedural GLSL Shader Pipelines (Pong ECS)
Full-screen post-processing fragment shaders compiled on WebGL2 quads
Pong ECS executes an Entity-Component-System architecture coupled to a WebGL2 fragment shader pipeline.
Each arena compiles distinct GLSL fragment shaders directly onto a screen-aligned quad: the Desert Arena generates high-temperature refraction ripples and sandstorm particles; the Iceland Arena renders hard-edged glacial ice facets; and the Swamp Arena computes undulating toxic methane gas clouds using volumetric noise algorithms.
High-efficiency 2D sprite rendering and real-time frequency synthesis
Ported from Python and Pygame into modern ECMAScript, Alien Invasion renders escalating waves of alien fleets using direct HTML5 Canvas 2D operations without third-party game framework overhead.
All sound effects—laser discharge, alien explosions, and ship thrust—are synthesized in real-time using the WebAudio API's OscillatorNode and BiquadFilterNode circuits, removing the bandwidth penalty of static audio files.
Screenshots & Interface Walkthrough
Interface Documentation
Visual overview of production interfaces, management consoles, and operational workflows. Click any screenshot for high-resolution inspection.
Cover Thumbnail
Figure 01
Arcade Lobby & Telemetry Console: Unified cyberpunk interface running hardware capability detection, WebGL2 pipeline checks, and responsive game deployment cards.
Figure 02
Crash Camp 3D Wilderness Survival: Sub-zero simulation built with Three.js, Cannon-es physics, Simplex procedural noise, and particle systems around Flight 402 wreckage.
Figure 03
Alien Invasion Arcade: Python/Pygame game mechanics ported to zero-dependency HTML5 Canvas with WebAudio synthesis, escalating speed waves, and touch controls.
Figure 04
Pong ECS Cyber Shader Arena: Entity-Component-System architecture driving real-time GLSL fragment shaders for Desert heat waves, Iceland blizzards, and Swamp spore mists.
Outcomes & Results
Delivery Impact
Delivers three fully playable production games operating at an uncompromised 60 FPS across desktop and mobile browsers with sub-second launch times and zero external plugins or installations required.
