Optimised raindrop effect on glass with WebGL2
Inspired by https://github.com/codrops/RainEffect
Check the live demo: https://sardinefish.github.io/raindrop-fx/
Background image from https://www.pixiv.net/artworks/84765992
You might need some bundle tools to run it in browser. eg. esbuild or webpack
$ npm install raindrop-fxconst RaindropFX = require("raindrop-fx");
const canvas = document.querySelector("#canvas");
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
const raindropFx = new RaindropFX({
canvas: canvas,
background: "path/to/background/image",
});
window.onresize = () =>
{
const rect = canvas.getBoundingClientRect();
raindropFx.resize(rect.width, rect.height);
}
raindropFx.start();For directly use in browser, download the pre-bundled script at /bundle/index.js
and embed with your Web page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Raindrop Effect</title>
<link rel="stylesheet" href="assets/css/style.css">
<script src="./bundle/index.js"></script>
</head>
<body>
<div id="root">
<canvas id="canvas"></canvas>
</div>
<script src="./script.js"></script>
</body>
</html>style.css
body {
margin: 0;
}
#root {
position: absolute;
width: 100vw;
height: 100vh;
}
#canvas {
width: 100%;
height: 100%;
}script.js
const canvas = document.querySelector("#canvas");
// Set canvas size to fit the real size
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
const raindropFx = new RaindropFX({
canvas: canvas,
background: "path/to/backgroundImage",
});
raindropFx.start();
// Resize the effect renderer
window.onresize = () =>
{
const rect = canvas.getBoundingClientRect();
raindropFx.resize(rect.width, rect.height);
}
All options except canvas element are optional at initialize.
// Minimal startup script with a dark opacity background
const raindropFx = new RaindropFX({
canvas: canvas,
});All options can be set dynamically by raindropFx.options.xxx=xx except renderer size and background image
Example:
// At initialize
const raindropFx = new RaindropFX({
canvas: canvas,
spawnSize = [30, 80],
spawnInterval = [0.1, 0.2],
mistBlurStep: 5,
dropletsPerSecond: 1000,
});
await raindropFx.start();
// Or set directly
raindropFx.options.spawnSize = [30, 150];
raindropFx.options.spawnInterval = [0.01, 0.05];
raindropFx.options.mistBlurStep = 5;
raindropFx.options.dropletsPerSecond = 1000;Call raindropFx.resize to properly reszie.
raindropFx.resize(someWidth, someHeight);Background image must be set by calling to raindropFx.setBackground.
Background image source could be a url string, HTMLCanvasElement, HTMLImageElement, ArrayBuffer and other types that implemented interface TexImageSource and ArrayBufferView.
await raindropFx.setBackground("background image url");
// Set background image from HTMLImageElement
const img = new Image();
// ...
await raindropFx.setBackground(img);
// Set background image from another HTMLCanvasElement
const anotherCanvas = document.querySelector("#another-canvas");
await raindropFx.setBackground(anotherCanvas);interface SimulationOptions
{
spawnInterval: [number, number],
/**
* Random size range when spawn a new raindrop
*/
spawnSize: [number, number],
/**
* Maximal amount of spawned raindrops.
* Recommend less than 2000
*/
spawnLimit: number,
/**
* Recommend in range (0..1), other value should be ok.
*/
slipRate: number,
/**
* Describe how often a raindrop change its motion state
*/
motionInterval: [number, number],
/**
* Random velocity x relative to velocity y.
* Recommend in range (0..0.1)
*/
xShifting: [number, number],
/**
* Relative size for collision check.
* Recommend in range (0.6..1.2)
*/
colliderSize: number,
/**
* Mass density of the slipping trail raindrop.
* Recommend in range (0.1..0.3)
*
* A large value cause a raindrop quickly lose its size during slipping.
*/
trailDropDensity: number,
/**
* Random size range of slipping trail drop.
* Recommend in range (0.3..0.5)
*/
trailDropSize: [number, number],
/**
* Random distance range between two slipping trail drop.
* Recommend in range (20..40)
*/
trailDistance: [number, number],
/**
* Vertical spread of a new spawned slipping trail drop.
* Recommend in range (0.4..0.6)
*/
trailSpread: number,
/**
* Spread rate when a new spawned raindrop hit the screen.
* Recommend in range (0.4..0.7)
*/
initialSpread: number,
/**
* Spread shrink rate per seconds.
* Recommend in range (0.01..0.02)
*/
shrinkRate: number,
/**
* Spread rate by velocity Y.
* Recommend in range (0.2..0.4)
*
* Raindrop with higher fall speed looks more narrow.
*/
velocitySpread: number,
/**
* Mass lose per second.
* Recommend in range (10..30)
*/
evaporate: number,
/**
* Gravity acceleration in pixels/s.
* Recommend 2400
*/
gravity: number,
}interface RenderingOptions
{
/**
* Background blur steps used for background & raindrop refract image.
* Value should be integer from 0 to log2(backgroundSize).
* Recommend 3 or 4
*/
backgroundBlurSteps: number,
/**
* Enable blurry mist effect
*/
mist: boolean,
/**
* [r, g, b, a] mist color, each component in range (0..1).
* The alpha is used for whole mist layer.
* Recommend [0.01, 0.01, 0.01, 1]
*/
mistColor: [number, number, number, number],
/**
* Describe how long takes mist alpha from 0 to 1
*/
mistTime: number,
/**
* Background blur steps used for mist.
* Value should be integer from 0 to log2(backgroundSize).
* Recommended value = backgroundBlurSteps + 1
*/
mistBlurStep: number,
/**
* Tiny droplet spawn rate.
*/
dropletsPerSeconds: number,
/**
* Random size range of tiny drplets.
* Recommend [10, 30]
*/
dropletSize: [number, number],
/**
* Smooth range [a, b] of raindrop edge.
* Recommend [0.96, 1.0]
*
* Larger range of (b - a) have smoother edge.
*
* Lower value b makes raindrop larger with a distort edge
*/
smoothRaindrop: [number, number],
/**
* Refract uv scale of minimal raindrop.
* Recommend in range (0.2, 0.6)
*/
refractBase: number,
/**
* Refract uv scaled by raindrop size.
* Rocommend in range (0.4, 0.8)
*/
refractScale: number,
/**
* Describe how raindrops are composed.
*
* - `smoother` compose raindrops normal with 'exclusion' blend mode
*
* - `harder` compose raindrops normal with 'normal' blend mode
*/
raindropCompose: "smoother" | "harder"
/**
* Screen space (0..1) light direction or position.
* Recommend [-1, 1, 2, 0]
*
* - Use [x, y, z, 0] to indicate a direction
*
* - Use [x, y, z, 1] to indicate a position
*/
raindropLightPos: [number, number, number, number],
/**
* Lambertian diffuse lighting Color.
* Recommend [0.3, 0.3, 0.3]
*/
raindropDiffuseLight: [number, number, number],
/**
* Higher value makes more shadow.
* Recommend in range (0.6..0.8)
*/
raindropShadowOffset: number,
/**
* Similar to `smoothRaindrop`. Used to erase droplets & mist.
* Recommended value [0.93, 1.0]
*/
raindropEraserSize: [number, number],
/**
* Specular light clor.
* Recommend disable it with [0, 0, 0] :)
*/
raindropSpecularLight: [number, number, number],
/**
* Blinn-Phong exponent representing shininess.
* Value from 0 to 1024 is ok
*/
raindropSpecularShininess: number,
/**
* Will apply to calculate screen space normal for lighting.
* Larger value makes raindrops looks more flat.
* Recommend in range (0.3..1)
*/
raindropLightBump: number,
}On Windows Chrome 88. It takes about 6ms to update each frame with 2000 raindrops.
On Android (Mi 10) Chrome 87. It takes about 6.5ms to update each frame with 2000 raindrops.
By default settins on a 1920x1080 screen, there are up to 600 raindrops on the screen, which taks 2~3ms to update each frame.