Drag to stir · Right-drag to look
I: 360 · U: controls · Space: pause
— FPS

How Immersive Fluids Works

Overview

A real-time dye and velocity field surrounds the viewer. Drag or touch to stir, inject colour, and create eddies. Enable Always draw with mouse in Fluid to draw on mouse movement without holding a button, or launch with ?mouseAlwaysOn=1. Use Scene and Fluid to tune the simulation; use Logo obstacle to add a solid image boundary.

Background

Use Background to set a colour or toggle transparency. In 360, its tab has colour swatches and a custom hex field. Transparency gives empty areas real alpha so the fluid can sit over another layer in a compatible host.

Launch with ?background=204060 for a solid colour, or ?transparent=1 for alpha output. Turning transparency off restores the selected colour.

Keyboard shortcuts

  • I: toggle 360 / Igloo mode.
  • U: hide or restore controls. Right-click also toggles the room panel.
  • Space: pause or resume. R: reset the fluid.
  • H: hide or restore all overlays.
  • Right-drag or Alt-drag: look around in flat preview.
  • Esc: close this help panel.

Logo obstacles

Choose a local PNG, SVG, WebP or JPEG, or use Try Igloo logo for the embedded sample. Transparent areas stay open; opaque pixels block the fluid. Uploads are saved in this browser and restored on refresh. Reset preserves the obstacle; Remove logo deletes the current local image.

Enable Emit dye and adjust Emission strength to release colour from the outline. It uses the selected palette, follows the logo's size and position, and works independently of Auto flow. Pause stops emission.

For a repeatable launch: ?logo=igloo&logoEmit=1&logoEmission=1&logoAngle=0&logoHeight=0&logoScale=0.12. External image hosts must allow cross-origin access.

Save settings

Settings → Copy settings URL captures the current controls, view and output configuration. Open the link to restore them. If clipboard access is blocked, select the URL in the text field and copy it manually.

Uploaded logos are stored locally in this browser. A local-logo settings link needs that saved image on the same origin; use a hosted image URL or the embedded Igloo logo to share across devices. Clearing browser site data removes saved images.

360 / Igloo setup

Launch with ?igloo=1. In Igloo Core, disable Dynamic Resolution, use a 6000 × 1000 source, then apply Cubemap to Equirectangular followed by True Perspective.

Place the touch panel with panel=right, panelY=0.2 and panelSize=1.2 (or panelScale). Use hidePanel=1 for a clean launch and scale=0.75 to lower rendering resolution.