Jelly Slider

An interactive 3D jelly slider visualization powered by WebGPU and TypeGPU, featuring GPU-accelerated ray marching, physics simulation, and advanced rendering techniques.

Features

• GPU Ray Marching: Real-time signed distance field (SDF) rendering with ray marching
• Physics Simulation: Position-based dynamics with Verlet integration for realistic jelly behavior
• Advanced Rendering:
  • Fresnel reflection and refraction
  • Beer-Lambert light absorption
  • Temporal anti-aliasing (TAA)
  • Ambient occlusion
  • Caustic lighting effects
• Interactive Controls: Drag the jelly slider to interact with the physics simulation
• Responsive Quality: Auto-adjusts rendering quality based on GPU performance

Requirements

• Modern browser with WebGPU support (Chrome 113+, Edge 113+)
• GPU with WebGPU capabilities

Getting Started

Installation

npm install

Development

Start the development server:

npm run dev

The application will open at http://localhost:3000

Build

Build for production:

npm run build

Preview the production build:

npm run preview

Project Structure

jelly/
├── src/
│   ├── index.ts           # Main application entry point with ray marching shaders
│   ├── slider.ts          # Physics-based slider implementation
│   ├── camera.ts          # Camera controller with TAA jitter
│   ├── events.ts          # Mouse/touch event handling
│   ├── taa.ts             # Temporal anti-aliasing resolver
│   ├── utils.ts           # Rendering utilities (Fresnel, Beer-Lambert, etc.)
│   ├── dataTypes.ts       # TypeGPU data structures and layouts
│   ├── constants.ts       # Rendering and physics constants
│   └── numbers.ts         # Percentage text rendering system
├── index.html             # HTML entry point
├── package.json           # Dependencies and scripts
├── tsconfig.json          # TypeScript configuration
└── vite.config.ts         # Vite build configuration

Technologies

• TypeGPU: Type-safe WebGPU shader programming in TypeScript
• Vite: Fast development server and build tool
• wgpu-matrix: Efficient matrix operations for WebGPU
• @typegpu/sdf: Signed distance field utilities
• @typegpu/noise: Noise and pseudo-random functions

How It Works

Ray Marching

The renderer uses sphere tracing to march rays through the scene, evaluating signed distance functions (SDFs) to determine surface intersections with sub-pixel accuracy.

Physics Simulation

The jelly slider uses position-based dynamics with:

• Verlet integration for stable physics
• Distance constraints for segment length preservation
• Bending resistance with variable stiffness
• Compression-based arching behavior

Rendering Pipeline

1. Ray marching with SDF evaluation
2. Normal calculation using gradient estimation
3. Lighting with shadows and ambient occlusion
4. Fresnel-based reflection/refraction mixing
5. Temporal anti-aliasing for smooth motion

Controls

• Mouse/Touch Drag: Interact with the jelly slider
• The percentage display updates based on slider position

License

Based on the TypeGPU jelly-slider example

Credits

Original implementation from the TypeGPU project by Software Mansion.