XDL WebGPU Showcase Demo

Overview

The viz3d_showcase.xdl demo showcases the full capabilities of XDL’s 3D visualization system powered by WebGPU. It demonstrates high-performance GPU-accelerated volume rendering with multiple scientific scenarios.

Features Demonstrated

🎨 Four Stunning Visualizations

Gaussian Blob (Rainbow colormap)
- Smooth 3D Gaussian distribution
- Demonstrates basic volume rendering
- Beautiful rainbow color mapping
Torus Shape (Viridis colormap)
- Complex geometric structure using signed distance functions
- Shows capability to render hollow/curved shapes
- Scientific Viridis colormap
Turbulent Flow (Plasma colormap)
- Multi-scale turbulence simulation
- Vortex structures with multiple frequency components
- Plasma colormap perfect for flow visualization
Spiral Galaxy (Inferno colormap)
- 3-arm spiral galaxy with disk and bulge
- Demonstrates astrophysical visualization
- Hot Inferno colormap for stellar density

⚡ Technical Highlights

High Resolution: 64³ volumes (262,144 voxels each)
GPU Acceleration: WebGPU ray marching shaders
Real-time: 60 FPS interactive rendering
Scientific Colormaps: Rainbow, Viridis, Plasma, Inferno
Interactive Controls: Mouse rotation and zoom
Cross-platform: Metal (macOS), Vulkan (Linux), DirectX 12 (Windows)

Running the Demo

Prerequisites

cd /Users/ravindraboddipalli/sources/xdl
cargo build --release

Execute

./target/release/xdl examples/demo/viz3d_showcase.xdl

What to Expect

The demo will:

Generate each 64³ volume procedurally (~10 seconds per volume)
Open an interactive 3D window for each visualization
Display beautiful ray-marched volume rendering
Wait for you to close each window (ESC or X button)
Proceed to the next visualization automatically
Show a summary at the end

Total runtime: ~5 minutes (depending on interaction time)

Controls

When each 3D window opens:

Control	Action
Left Mouse Button	Rotate camera around target
Mouse Wheel	Zoom in/out
ESC	Close window and proceed to next demo
Close Button (X)	Same as ESC

Performance

On Apple M4 (tested configuration):

Volume generation: ~10 seconds per 64³ volume
GPU upload: < 100ms per volume
Rendering: 60 FPS at 1280x720 resolution
Total voxels: 1,048,576 (4 × 262,144)

Customization

You can modify the demo by editing viz3d_showcase.xdl:

Change Resolution

grid = 64  ; Try 32 (faster) or 128 (higher quality)

Modify Colormaps

VIZ3D_COLORMAP, 'RAINBOW'  ; Change to VIRIDIS, PLASMA, INFERNO, TURBO, GRAYSCALE

Adjust Camera

VIZ3D_CAMERA, POSITION=[0.0, 0.0, 3.0], TARGET=[0.0, 0.0, 0.0], FOV=45.0

Create Your Own Volumes

Add your own visualization between the demos:

; Custom Demo
grid = 64
my_volume = FLTARR(grid, grid, grid)

FOR i = 0, grid-1 DO BEGIN
    FOR j = 0, grid-1 DO BEGIN
        FOR k = 0, grid-1 DO BEGIN
            ; Your custom function here
            my_volume[i, j, k] = ...
        END
    END
END

VIZ3D_INIT, WINDOW_SIZE=[1280, 720]
VIZ3D_COLORMAP, 'VIRIDIS'
VIZ3D_CAMERA, POSITION=[0,0,3], TARGET=[0,0,0]
VIZ3D_VOLUME, my_volume, DIMENSIONS=[grid, grid, grid]
VIZ3D_RENDER, /INTERACTIVE, TITLE='My Custom Viz'

Technology Stack

XDL Script
    ↓
Parser & Interpreter
    ↓
Multi-dimensional Arrays (FLTARR)
    ↓
VIZ3D Stdlib Functions
    ↓
xdl-viz3d Renderer
    ↓
WebGPU (wgpu-rs 22.1)
    ↓
WGSL Ray Marching Shaders
    ↓
Metal/Vulkan/DirectX 12
    ↓
60 FPS Rendering

Visualizations in Detail

1. Gaussian Blob

Mathematical Function:

ρ(x,y,z) = exp(-(dx² + dy² + dz²) / (2σ²))

Shows a smooth 3D Gaussian distribution, perfect for demonstrating basic volume rendering principles. The Rainbow colormap makes the density gradients visually striking.

2. Torus

Distance Function:

d = √((√(x² + y²) - R)² + z²) - r
ρ = exp(-|d| / 3)

Uses signed distance field to create a perfect donut shape. Demonstrates the renderer’s ability to handle complex topology with smooth surfaces.

3. Turbulent Flow

Multi-scale Turbulence:

T = 0.5·sin(3x)cos(3y)sin(3z)
  + 0.3·sin(7x)cos(7y)sin(7z)
  + 0.2·sin(13x)cos(13y)sin(13z)
  + vortex

Simulates turbulent flow with multiple spatial frequencies. The Plasma colormap is excellent for showing flow structures and eddies.

4. Spiral Galaxy

Galaxy Structure:

ρ = disk_density × thickness × spiral_arms + bulge

Spiral arms: Multiple sinusoidal patterns with twist
Disk: Exponential radial falloff
Thickness: Gaussian vertical profile
Bulge: Central 3D Gaussian

Creates a realistic-looking spiral galaxy with 3 arms, a disk, and a central bulge. Perfect for astrophysical visualization.

Comparison with Other Tools

Feature	XDL VIZ3D	ParaView	VisIt	MATLAB
Startup Time	< 1 sec	~10 sec	~15 sec	~5 sec
Scripting	XDL/IDL	Python	Python	MATLAB
GPU Acceleration	✅ WebGPU	✅ OpenGL	✅ OpenGL	✅
Volume Rendering	✅ Ray marching	✅	✅	✅
Code Simplicity	Very High	Medium	Medium	High
Cross-platform	✅	✅	✅	❌

Tips for Best Results

Close windows promptly to see all 4 demos
Try rotating each volume to see the 3D structure
Zoom in to see fine details
Run in full screen for best visual experience
Try on different hardware to see GPU performance

Troubleshooting

Window doesn’t appear

Check that you’re running the CLI version: ./target/release/xdl (not xdl-gui)
Ensure WebGPU drivers are available (automatic on macOS with Metal)

Slow performance

Reduce grid size: grid = 32 instead of 64
Close other GPU-intensive applications

Want to skip a demo

Press ESC or close the window to proceed immediately

Future Enhancements

Potential additions to this showcase:

Learn More

Main documentation: VIZ3D_COMPLETE_FINAL.md
Parser fixes: PARSER_AND_ARRAY_FIXES.md
API reference: docs/VIZ3D_IMPLEMENTATION.md
Source code: xdl-viz3d/ directory

Created something cool with VIZ3D? We’d love to see it! The system is designed to be a platform for scientific visualization and creative exploration.

Enjoy exploring the full power of XDL 3D Visualization with WebGPU! 🚀