Config

Usage

To set configuration options for the simulation, you can pass an object with the desired options to the setConfig method.

simulation.setConfig({
  colorPalette: ['#cc211b', '#f1c593', '#e87e54', '#f193a7', '#ec6fa9'],
  backgroundColor: '#020202',
  densityDissipation: 3,
  colorUpdateSpeed: 5,
  hover: false,
  brightness: 0.6,
  velocityDissipation: 0.5,
  bloom: false,
});

All colors are hex strings

Run setConfig() before starting the simulation simulation.start() to make sure that the configuration is applied before the simulation starts.

setConfig() can be called during the simulation

Default Config

You can get the default configuration by importing it from the package.

import WebGLFluidEnhanced, { defaultConfig } from 'webgl-fluid-enhanced';

Object Type

Prop	Type	Default
`simResolution`	`number`	`128`
`dyeResolution`	`number`	`1024`
`captureResolution`	`number`	`512`
`densityDissipation`	`number`	`1`
`velocityDissipation`	`number`	`0.2`
`pressure`	`number`	`0.8`
`pressureIterations`	`number`	`20`
`curl`	`number`	`30`
`splatRadius`	`number`	`0.25`
`splatForce`	`number`	`6000`
`shading`	`boolean`	`true`
`colorful`	`boolean`	`true`
`colorUpdateSpeed`	`number`	`10`
`colorPalette`	`array`	`[]`
`hover`	`boolean`	`true`
`inverted`	`boolean`	`false`
`backgroundColor`	`string`	`#000000`
`transparent`	`boolean`	`false`
`brightness`	`number`	`0.5`
`bloom`	`boolean`	`true`
`bloomIterations`	`number`	`8`
`bloomResolution`	`number`	`256`
`bloomIntensity`	`number`	`0.8`
`bloomThreshold`	`number`	`0.6`
`bloomSoftKnee`	`number`	`0.7`
`sunrays`	`boolean`	`true`
`sunraysResolution`	`number`	`196`
`sunraysWeight`	`number`	`1`

Mobile

If the simulation is running on a mobile device, the dyeResolution will be set to 512.

Linear Filtering

If the browser does not support linear filtering, the dyeResolution will be set to 512 and the shading, bloom, and sunrays will be disabled.

Config

Usage

Default Config

Object Type

On this page