By Hilmybox — 02 Jan 2026

Tesseract: High-Speed Void | Interactive Raymarched Experience

Dive into an infinite architectural abyss. This high-performance WebGL experience uses raymarching shaders to render a procedural 3D grid that reacts to your movement and scrolling, pushing the boundaries of browser-based generative art.

Click here to access.

1. The Core Engine

The logic is driven by a custom Raymarching Engine encapsulated within a GLSL (OpenGL Shading Language) fragment shader.

Signed Distance Fields (SDFs): Unlike traditional engines that use polygons, this engine represents objects as mathematical functions. The map function defines a repeating lattice of beams by calculating the distance from any point in space to the nearest geometric surface.
Procedural Infinite Space: The engine uses a modular arithmetic operator (mod(p, 10.0)) to fold 3D space onto itself. This creates an "infinite" architectural abyss without consuming extra memory, as the geometry is calculated on-the-fly.
Uniform Management: The engine communicates with the CPU via "Uniforms," passing real-time data like uTime (for velocity), uMouse (for rotation), and uZoom (for field of view).

2. Rendering Technology

The project utilizes Fragment-Shader-Only Rendering via WebGL and the Three.js library.

Raymarching: The renderer shoots a virtual ray from the camera position (ro) into the scene. It iteratively "steps" along that ray using the distance returned by the SDF until it hits a surface or exceeds the maximum distance (70.0 units).
Orthographic Proxy: A THREE.OrthographicCamera and a single THREE.PlaneGeometry that covers the entire screen are used as a canvas. The actual 3D depth and geometry are calculated entirely inside the pixels of this plane.
Post-Processing & Lighting: The rendering logic includes built-in effects:
- Distance Fog: Atmospheric depth is simulated by darkening pixels based on their travel distance (t).
- Dithering: A pseudo-random noise function (fract(sin(dot(...)))) is added to prevent color banding in the gradients.
- Vignette: A smoothstep function darkens the edges of the screen to focus the user's eye on the center of the void.

3. Mathematical Tools

The project relies on Linear Algebra and Trigonometric Functions to manage spatial transformations.

Rotation Matrices: A custom mat2 rot(float a) function handles the camera rotation. It performs a 2D rotation on the YZ and XZ planes, allowing the user to "look around" the abyss.
Normalization & Vectors: To ensure consistent movement speed, the ray direction (rd) is normalized, keeping the vector length at 1.0 regardless of the screen's aspect ratio.
Interpolation (Lerp/Mix): * Color Blending: The mix function is used to create a cyber-purple and neon-cyan gradient that oscillates based on a sine wave:

Movement Smoothing: The CPU side uses .lerp() to interpolate the mouse position, creating a "weighted" feel so the camera doesn't snap instantly to the cursor.

4. Front-End Environment

The environment is a Modern Web Standard (ESM) ecosystem designed for zero-latency interactivity.

Import Maps: This allows the browser to resolve the Three.js library directly from a CDN (Content Delivery Network) using clean, modern syntax without needing a build tool like Webpack.
Heads-Up Display (HUD): A floating interface is built using standard HTML/CSS. It utilizes pointer-events: none so that the UI can be read without blocking the user's ability to interact with the 3D scene underneath.
Integrity System: A background "Security Guard" runs every 2 seconds via setInterval. It verifies that the attribution link to hilmybox.com remains present and correct in the DOM, acting as a safeguard for the developer's intellectual property.