ESM support for https://github.com/PavelDoGreat/WebGL-Fluid-Simulation.
npm install webgl-fluid
ESM support for WebGL-Fluid-Simulation.
- Hover to activate by default, can also be click
- Control whether to generate configurable number of random splats at initialization and at intervals
- Background image
``shell`
npm i webgl-fluid
`html
$3
`html
`
Options
`ts
WebGLFluid(document.querySelector('canvas'), {
TRIGGER: 'hover',
IMMEDIATE: true,
AUTO: false,
INTERVAL: 3000,
SIM_RESOLUTION: 128,
DYE_RESOLUTION: 1024,
CAPTURE_RESOLUTION: 512,
DENSITY_DISSIPATION: 1,
VELOCITY_DISSIPATION: 0.3,
PRESSURE: 0.8,
PRESSURE_ITERATIONS: 20,
CURL: 30,
SPLAT_RADIUS: 0.35,
SPLAT_FORCE: 6000,
SPLAT_COUNT: Number.parseInt(Math.random() * 20) + 5,
SHADING: true,
COLORFUL: true,
COLOR_UPDATE_SPEED: 10,
PAUSED: false,
BACK_COLOR: { r: 0, g: 0, b: 0 },
TRANSPARENT: false,
BLOOM: true,
BLOOM_ITERATIONS: 8,
BLOOM_RESOLUTION: 256,
BLOOM_INTENSITY: 0.8,
BLOOM_THRESHOLD: 0.6,
BLOOM_SOFT_KNEE: 0.7,
SUNRAYS: true,
SUNRAYS_RESOLUTION: 196,
SUNRAYS_WEIGHT: 1.0,
})
`
Trigger Mode
`ts
WebGLFluid(document.querySelector('canvas'), {
TRIGGER: 'hover', // Can be change to 'click'
})
`
Auto Splating at Initialization
`ts
WebGLFluid(document.querySelector('canvas'), {
IMMEDIATE: true,
})
`
Auto Splating at Intervals
`ts
WebGLFluid(document.querySelector('canvas'), {
AUTO: true, // Whether to enable auto-splating
INTERVAL: 3000, // The time (in milliseconds) the timer should delay in between auto-splating
})
`
Set the Splats' Count
`ts
WebGLFluid(document.querySelector('canvas'), {
SPLAT_COUNT: Number.parseInt(Math.random() * 20) + 5,
})
`
Background Image
CSS
`css
canvas {
width: 100vw;
height: 100vh;
background-image: url('xxx.png');
background-size: 100% 100%;
}
`JS
`ts
WebGLFluid(document.querySelector('canvas'), {
TRANSPARENT: true
})
`
Background Color
Background color will be whitened by
13 on each RGB color values when options.BLOOM is true.
Set it to false to get pure color.
Example
$3
`vue
`$3
`vue
`$3
`html
``ts
// src/index.jsimport WebGLFluid from 'webgl-fluid'
WebGLFluid(document.querySelector('canvas'), {
// options
})
``Detailed changes for each release are documented in the release notes