\n\n \n\n## Features\n\n- Hover to activate by default, can also be click\n- Control whether to generate **configurable number** of random splats at **initialization** and at **intervals**\n- Set a custom splat color\n- Background image\n\n \n\n## Install\n\n### NPM\n\n```shell\nnpm i webgl-fluid\n```\n\n### CDN + ESM\n\n```html\n\n\n \n \n \n\n \n \n \n \n \n\n```\n\n### CDN + IIFE\n\n```html\n\n\n \n \n \n\n \n \n \n \n \n\n```\n\n \n\n## Options\n\n```ts\nWebGLFluid(document.querySelector('canvas'), {\n TRIGGER: 'hover',\n IMMEDIATE: true,\n AUTO: false,\n INTERVAL: 3000,\n SIM_RESOLUTION: 128,\n DYE_RESOLUTION: 1024,\n CAPTURE_RESOLUTION: 512,\n DENSITY_DISSIPATION: 1,\n VELOCITY_DISSIPATION: 0.3,\n PRESSURE: 0.8,\n PRESSURE_ITERATIONS: 20,\n CURL: 30,\n SPLAT_RADIUS: 0.35,\n SPLAT_FORCE: 6000,\n SPLAT_COUNT: Number.parseInt(Math.random() * 20) + 5,\n SPLAT_COLOR: undefined,\n SHADING: true,\n COLORFUL: true,\n COLOR_UPDATE_SPEED: 10,\n PAUSED: false,\n BACK_COLOR: { r: 0, g: 0, b: 0 },\n TRANSPARENT: false,\n BLOOM: true,\n BLOOM_ITERATIONS: 8,\n BLOOM_RESOLUTION: 256,\n BLOOM_INTENSITY: 0.8,\n BLOOM_THRESHOLD: 0.6,\n BLOOM_SOFT_KNEE: 0.7,\n SUNRAYS: true,\n SUNRAYS_RESOLUTION: 196,\n SUNRAYS_WEIGHT: 1.0,\n})\n```\n\n \n\n## Trigger Mode\n\n```ts\nWebGLFluid(document.querySelector('canvas'), {\n TRIGGER: 'hover', // Can be change to 'click'\n})\n```\n\n \n\n## Auto Splating at Initialization\n\n```ts\nWebGLFluid(document.querySelector('canvas'), {\n IMMEDIATE: true,\n})\n```\n\n \n\n## Auto Splating at Intervals\n\n```ts\nWebGLFluid(document.querySelector('canvas'), {\n AUTO: true, // Whether to enable auto-splating\n INTERVAL: 3000, // The time (in milliseconds) the timer should delay in between auto-splating\n})\n```\n\n \n\n## Set the Splats' Count\n\n```ts\nWebGLFluid(document.querySelector('canvas'), {\n SPLAT_COUNT: Number.parseInt(Math.random() * 20) + 5,\n})\n```\n\n \n\n## Set the Splat Color\n\n`SPLAT_COLOR` replaces the random dye color used by splats. The value should be an RGB object and is used directly as the dye color.\n\nOmit `SPLAT_COLOR` to keep the default random colors.\n\n```ts\nWebGLFluid(document.querySelector('canvas'), {\n SPLAT_COLOR: { r: 0.1, g: 0.05, b: 0.2 },\n})\n```\n\nWhen `SPLAT_COLOR` is set, it takes precedence over `COLORFUL` and disables random color changes.\n\n \n\n## Background Image\n\nCSS\n\n```css\ncanvas {\n width: 100vw;\n height: 100vh;\n background-image: url('xxx.png');\n background-size: 100% 100%;\n}\n```\n\nJS\n\n```ts\nWebGLFluid(document.querySelector('canvas'), {\n TRANSPARENT: true\n})\n```\n\n \n\n## Background Color\n\nBackground color will be whitened by `13` on each RGB color values when `options.BLOOM` is `true`.\nSet it to `false` to get pure color.\n\n \n\n## Example\n\n### Vue 3\n\n```vue\n\n\n\n \n\n\n\n```\n\n### Vue 2\n\n```vue\n\n\n\n \n\n\n\n```\n\n### Vanilla JS or Any Other Framework\n\n```html\n\n\n\n\n \n \n \n\n \n \n \n \n\n```\n\n```ts\n// src/index.js\n\nimport WebGLFluid from 'webgl-fluid'\n\nWebGLFluid(document.querySelector('canvas'), {\n // options\n})\n```\n\n \n\n## Changelog\n\nDetailed changes for each release are documented in the [release notes](https://github.com/cloydlau/webgl-fluid/releases)\n\n \n","readmeFilename":"README.md"}
![\"version\"](\"https://img.shields.io/npm/v/webgl-fluid.svg?style=flat-square&color=white&label=\")
\n \n![\"playground\"](\"https://img.shields.io/badge/Playground-blue?color=9BE4E0&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNiNDAzZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xMiA1aDMuNWE1IDUgMCAwIDEgMCAxMEgxMGwtNC4wMTUgNC4yMjdhMi4zIDIuMyAwIDAgMS0zLjkyMy0yLjAzNWwxLjYzNC04LjE3M0E1IDUgMCAwIDEgOC42IDV6Ii8+PHBhdGggZD0ibTE0IDE1bDQuMDcgNC4yODRhMi4zIDIuMyAwIDAgMCAzLjkyNS0yLjAyM2wtMS42LTguMjMyTTggOXYybS0xLTFoMm01IDBoMiIvPjwvZz48L3N2Zz4=\"){kind=icon}
![\"minzipped](\"https://img.shields.io/bundlephobia/minzip/webgl-fluid\")
![\"npm](\"https://img.shields.io/npm/dt/webgl-fluid?logo=npm&color=rgba(203,0,0,0.9)\")
![\"created](\"https://img.shields.io/github/created-at/cloydlau/webgl-fluid?&color=1C404E&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNDggNDgiPjxnIGZpbGw9Im5vbmUiPjxwYXRoIGQ9Ik04IDQwaDMyVjI0SDh6Ii8+PHBhdGggc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iNCIgZD0iTTQwIDQwSDhtMzIgMEg0aDRtMzIgMGg0bS00IDBWMjRIOHYxNiIvPjxwYXRoIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjQiIGQ9Im00MCAzNGwtNC0ybC00IDJsLTQtMmwtNCAybC00LTJsLTQgMmwtNC0ybC00IDJtMjQtMTB2LTltLTggOXYtOW0tOCA5di05bTE2LTVWOG0tOCAyVjhtLTggMlY4TTggMjR2MTZtMzItMTZ2MTYiLz48L2c+PC9zdmc+\")
![\"code](\"https://antfu.me/badge-code-style.svg\"){kind=icon}
\n ![\"conventional](\"https://img.shields.io/badge/commits-Conventional-FE5196.svg?logo=conventionalcommits\"){kind=icon}
\n ![\"semantic](\"https://img.shields.io/badge/release-semantic-e10079?logo=semantic-release\"){kind=icon}
![\"Start](\"https://developer.stackblitz.com/img/start_pr_dark_small.svg\")
\n