Back to Home

HYPERHELL: 4D Doom Game on WebGPU

Project HYPERHELL implements 4D shooter in the style of Doom with WebGPU and Unblink rendering. Demo available in browser on M1/M2 and Nvidia. Complements cssDoom — port on CSS+JS without canvas.

4D HYPERHELL and cssDoom: new Doom ports for the browser
Advertisement 728x90

Open-Source Project HYPERHELL: 4D Labyrinth in the Style of Doom on WebGPU

HYPERHELL is an open-source project featuring a 4D labyrinth reminiscent of classic Doom. The demo runs directly in your browser on WebGPU-compatible hardware. Testing confirmed on MacBook M1/M2 and Nvidia GPUs in Chrome. Players navigate four-dimensional space, battling demons, lost souls, and dark angels. Encounters with the Merchant let you trade resources to keep going.

The developer uses '4D-eye' rendering—a camera with a 3D sensor based on Unblink mechanics. This visualizes 4D structures without traditional projections.

Technical Implementation of 4D Rendering

HYPERHELL leverages WebGPU to process four-dimensional geometry. The key is the 4D camera, which simulates perceiving the third dimension within 4D space. This goes beyond standard 3D projections that lose data from higher dimensions.

Google AdInline article slot
  • WebGPU requirements: Compatible browser (Chrome) and GPU (Nvidia, Apple Silicon M1/M2).
  • 4D visualization: Unblink mechanics with a 3D sensor for native rendering of 4D objects.
  • Game mechanics: Navigation through a hypercube, real-time combat, resource trading.
  • Open-source code: Available on GitHub for study and modifications.

The project targets experiments with real-time hypergeometry, ideal for mid- and senior-level GPU rendering developers.

Alternative: cssDoom Without Canvas or WebGL

Also featured is cssDoom—a Doom port using pure CSS for graphics and JavaScript for logic. Skipping canvas and WebGL makes it a standout demo of CSS power in game development.

It faithfully recreates the original Doom code. Licensed under GPLv2, with source on GitHub. Great for grasping low-level rendering without hardware acceleration.

Google AdInline article slot
  • Graphics: CSS animations and transformations for sprites and environments.
  • Logic: Vanilla JavaScript, works in any modern browser.
  • Advantages: Minimal dependencies, emphasis on CSS styling.
  • Limitations: Lower performance than WebGL counterparts due to CPU rendering.

Comparing Approaches to Retro Shooters

HYPERHELL pushes Doom into 4D with WebGPU handling the heavy computations. cssDoom sticks to CSS/JS, trading speed for a pure tech stack.

| Aspect | HYPERHELL | cssDoom |

|-------------|---------------|-----------|

Google AdInline article slot

| Rendering | WebGPU, 4D | CSS-only |

| Dependencies| GPU | Browser |

| Complexity | High (4D geometry) | Low (2.5D) |

| License | Open Source | GPLv2 |

Both projects offer fresh spins on classics for web development.

Key Takeaways

  • HYPERHELL brings 4D rendering via WebGPU and Unblink mechanics for true perception of hyperspace.
  • Tested on M1/M2 and Nvidia; demo runs online, no install needed.
  • cssDoom recreates Doom using only CSS+JS, no canvas or WebGL.
  • Both open on GitHub, perfect for exploring alternative rendering techniques.
  • Emphasis on performance and minimalism, no marketing hype.

— Editorial Team

Advertisement 728x90

Read Next