PROJECT NIGHTMARE: Technical Design & Architecture White Paper

Cryo Sleep Studios | Developer: JDVanguard

Abstract

Project Nightmare is a dual-perspective survival horror experience that pushes the boundaries of web-based game technologies packaged for desktop deployment. Built entirely from scratch using vanilla JavaScript, HTML5 Canvas, and WebGL, the project features a unique "two-games-in-one" architecture. It seamlessly transitions between a classic top-down 2D isometric mode and a fully immersive, first-person 3D environment. This white paper details the custom rendering engines, procedural systems, AI logic, and backend security infrastructure powering the game.

1. Engine Architecture & Deployment

Rather than relying on heavy, pre-built game engines like Unity or Unreal, Project Nightmare utilizes a lightweight, bespoke architecture optimized for high performance.

  • The Dual-Engine Paradigm: The game uses two distinct rendering pipelines. The Classic Mode relies on a highly optimized HTML5 Canvas 2D context. The Atmosphere Mode leverages WebGL via the Three.js library to render a fully 3D environment.

  • Electron & Steamworks Integration: The web technologies are compiled into a standalone desktop executable using Electron. A custom hybrid file system automatically checks for the presence of the Node.js fs module to write physical save files to the hard drive, while retaining a localStorage fallback for browser testing. The game natively hooks into the Steam API using steamworks.js to fetch player identities and securely trigger over 70 distinct achievements.

2. Graphics & Rendering Pipelines

To maintain a cohesive, oppressive atmosphere across both 2D and 3D modes, distinct rendering techniques were employed.

2D Isometric Voxel Rendering

The 2D mode does not use pre-rendered sprites. Instead, it uses mathematical projections to draw dynamic, pseudo-3D voxel models directly onto the 2D canvas.

  • Using a custom toIso(x, y, z) function, raw coordinate data is translated into isometric screen space.

  • Entities are constructed using the drawVoxel function, which calculates lighting and shades individual polygons dynamically based on their simulated height and depth.

3D Atmospheric Rendering

The 3D engine is built to maximize frame rates while delivering intense volumetric horror.

  • Geometry Caching: To prevent memory leaks during intense waves of enemies, the engine utilizes a custom boxCache and matCache system. Instead of creating new meshes for every zombie limb or debris chunk, the engine retrieves pre-calculated geometries from memory.

  • Procedural Textures: To keep the file size incredibly small, environmental textures (like the grass ground cover) are procedurally generated at runtime using mathematical noise algorithms written directly to a virtual canvas, which is then mapped to the 3D ground plane.

  • Post-Processing & Filters: Both modes utilize layered CSS and SVG filters—including CRT scanlines, vignette shadows, and procedural SVG fractal noise—to create a gritty, found-footage aesthetic without the heavy GPU cost of WebGL post-processing passes.

3. The Hybrid Audio Engine

Project Nightmare features a highly resilient, custom-built audio engine utilizing the window.AudioContext API.

  • Sample Playback: The primary audio engine decodes and plays high-quality MP3 samples with randomized pitch modulation (playbackRate.value = 0.9 + Math.random() * 0.2) to prevent repetitive audio fatigue during intense firefights.

  • Procedural Synth Fallback: If an audio file fails to load, the engine seamlessly falls back to procedural audio synthesis. It uses mathematical oscillators (Sine, Square, Sawtooth, Triangle) paired with Biquad Filters and Gain Nodes to synthesize weapon sounds, enemy screams, and weather effects purely from code. For example, the heartbeat effect is generated using a 60Hz Triangle wave passed through a 150Hz lowpass filter with an exponential volume drop-off.

4. Artificial Intelligence & Dynamic Events

The entity AI is designed to keep players in a constant state of tension through varied behavioral patterns.

  • Entity Behaviors: The horde consists of over a dozen distinct enemy types. "Spitters" calculate distance to stop and launch ranged acid attacks, "Hellhounds" utilize leap logic to double their speed when within 8 meters of the player, and "Ghosts" utilize dot-product vector math (camDir.dot(vec.clone().negate()) > 0.6) to determine if the player is looking at them—only moving when the player's back is turned.

  • Dynamic Directors: The game features unpredictable mid-wave events. The "Blood Moon" event dynamically shifts the fog and skybox to crimson while accelerating enemy spawns. The "Stalker Event" deploys a very hard to kill entity (with piercing white eyes) with 1000 HP if a single run exceeds 5 minutes, forcing the player to constantly stay on the move.

5. Security & Cloud Infrastructure

To maintain the integrity of the Global Survival Rankings, rigorous backend security was implemented.

  • Silent Authentication: The game integrates with Google Firebase. Upon launch, it executes signInAnonymously(auth)to fetch a cryptographically secure, unique ID badge from Google's servers. The Firestore database is locked behind strict security rules, completely rejecting any high-score uploads from clients lacking this secure token.

  • Anti-Cheat Memory Vault: To defeat casual memory scanners (like Cheat Engine), the game does not store the player's wave or kill count as plain numbers. Instead, it utilises the SecureNightmareVault, an Immediately Invoked Function Expression (IIFE) that scrambles game stats in the RAM using Bitwise XOR encryption linked to a randomised session key. The data is only decrypted locally for the exact millisecond it takes to uplink to the Firebase cloud.

Conclusion

Project Nightmare demonstrates how far native web technologies can be pushed when paired with desktop compilation wrappers. By writing custom rendering, audio, and security engines from the ground up, Cryo Sleep Studios has delivered a highly performant, immersive, and secure dual-perspective horror experience.