├── examples
    ├── with-node
    │   ├── .npmignore
    │   ├── package.json
    │   ├── index.html
    │   ├── src
    │   │   ├── index.js
    │   │   └── index.ts
    │   ├── style.css
    │   ├── package-lock.json
    │   └── tsconfig.json
    └── with-browser
    │   ├── demo.js
    │   └── index.html
├── assets
    ├── img
    │   ├── demo.png
    │   ├── raindrop.png
    │   ├── 84765992_p0.jpg
    │   └── 87747832_p0.jpg
    └── css
    │   └── style.css
├── .gitmodules
├── bundle
    └── index.d.ts
├── .npmignore
├── dist
    ├── utils.d.ts
    ├── utils.d.ts.map
    ├── spawner.d.ts.map
    ├── blur.d.ts.map
    ├── index.d.ts.map
    ├── random.d.ts.map
    ├── spawner.d.ts
    ├── random.d.ts
    ├── index.d.ts
    ├── blur.d.ts
    ├── raindrop.d.ts.map
    ├── raindrop.d.ts
    ├── simulator.d.ts.map
    ├── renderer.d.ts.map
    ├── simulator.d.ts
    └── renderer.d.ts
├── src
    ├── utils.ts
    ├── shader
    │   ├── droplet.glsl
    │   ├── 2d-frag.glsl
    │   ├── raindrop-frag.glsl
    │   ├── bg-mist.glsl
    │   ├── erase.glsl
    │   ├── 2d-vert.glsl
    │   ├── blur.glsl
    │   ├── raindrop-vert.glsl
    │   ├── droplet-vert.glsl
    │   └── compose.glsl
    ├── loader.d.ts
    ├── spawner.ts
    ├── random.ts
    ├── blur.ts
    ├── index.ts
    ├── raindrop.ts
    ├── simulator.ts
    └── renderer.ts
├── .github
    └── workflows
    │   ├── build.yml
    │   └── npm-publish.yml
├── .vscode
    └── launch.json
├── package.json
├── LICENSE
├── index.html
├── .gitignore
├── tsconfig.json
└── README.md


/examples/with-node/.npmignore:
--------------------------------------------------------------------------------
1 | dist/


--------------------------------------------------------------------------------
/assets/img/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SardineFish/raindrop-fx/HEAD/assets/img/demo.png


--------------------------------------------------------------------------------
/assets/img/raindrop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SardineFish/raindrop-fx/HEAD/assets/img/raindrop.png


--------------------------------------------------------------------------------
/assets/img/84765992_p0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SardineFish/raindrop-fx/HEAD/assets/img/84765992_p0.jpg


--------------------------------------------------------------------------------
/assets/img/87747832_p0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SardineFish/raindrop-fx/HEAD/assets/img/87747832_p0.jpg


--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "zogra-renderer"]
2 | 	path = zogra-renderer
3 | 	url = https://github.com/SardineFish/zogra-renderer.git
4 | 


--------------------------------------------------------------------------------
/bundle/index.d.ts:
--------------------------------------------------------------------------------
1 | import RaindropFXClass from "../dist";
2 | 
3 | declare global
4 | {
5 |     const RaindropFX: typeof RaindropFXClass;
6 | }


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /.vscode
2 | node_modules
3 | /zogra-renderer
4 | /assets/img/84765992_p0.jpg
5 | /assets/img/87747832_p0.jpg
6 | /assets/img/demo.png


--------------------------------------------------------------------------------
/dist/utils.d.ts:
--------------------------------------------------------------------------------
1 | export interface Time {
2 |     dt: number;
3 |     total: number;
4 | }
5 | export declare function clamp(x: number, l: number, h: number): number;
6 | export declare function lerp(a: number, b: number, t: number): number;
7 | //# sourceMappingURL=utils.d.ts.map


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | export interface Time
 2 | {
 3 |     dt: number,
 4 |     total: number,
 5 | }
 6 | 
 7 | export function clamp(x: number, l: number, h: number)
 8 | {
 9 |     return Math.min(Math.max(x, l), h);
10 | }
11 | 
12 | export function lerp(a: number, b: number, t: number)
13 | {
14 |     return a + (b - a) * t;
15 | }


--------------------------------------------------------------------------------
/dist/utils.d.ts.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,IAAI;IAEjB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,UAGpD;AAED,wBAAgB,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,UAGnD"}


--------------------------------------------------------------------------------
/src/shader/droplet.glsl:
--------------------------------------------------------------------------------
 1 | #version 300 es
 2 | precision mediump float;
 3 | 
 4 | in vec2 vUV;
 5 | 
 6 | uniform sampler2D uMainTex;
 7 | uniform vec4 uColor;
 8 | 
 9 | out vec4 fragColor;
10 | 
11 | void main()
12 | {
13 |     vec4 color = texture(uMainTex, vUV.xy).rgba;
14 |     color.rgb *= color.a;
15 |     fragColor = vec4(color.rg, 0.0, color.a);
16 | }


--------------------------------------------------------------------------------
/src/shader/2d-frag.glsl:
--------------------------------------------------------------------------------
 1 | #version 300 es
 2 | precision mediump float;
 3 | 
 4 | in vec4 vColor;
 5 | in vec4 vPos;
 6 | in vec2 vUV;
 7 | 
 8 | uniform sampler2D uMainTex;
 9 | uniform vec4 uColor;
10 | 
11 | out vec4 fragColor;
12 | 
13 | void main()
14 | {
15 |     vec4 color = texture(uMainTex, vUV.xy).rgba;
16 |     color.rgba = color * uColor;
17 |     fragColor = color.rgba;
18 | }


--------------------------------------------------------------------------------
/src/loader.d.ts:
--------------------------------------------------------------------------------
 1 | declare module '*.png' {
 2 |     const contents: Uint8Array
 3 |     export = contents
 4 | }
 5 | declare module '*.jpg' {
 6 |     const contents: Uint8Array
 7 |     export = contents
 8 | }
 9 | declare module '*.fbx' {
10 |     const contents: string
11 |     export = contents
12 | }
13 | declare module '*.glsl' {
14 |     const contents: string
15 |     export = contents
16 | }
17 | 


--------------------------------------------------------------------------------
/src/shader/raindrop-frag.glsl:
--------------------------------------------------------------------------------
 1 | #version 300 es
 2 | precision mediump float;
 3 | 
 4 | in vec4 vColor;
 5 | in vec4 vPos;
 6 | in vec2 vUV;
 7 | in float vSize;
 8 | 
 9 | uniform sampler2D uMainTex;
10 | uniform float uSize;
11 | 
12 | out vec4 fragColor;
13 | 
14 | void main()
15 | {
16 |     vec4 color = texture(uMainTex, vUV.xy).rgba;
17 |     
18 |     fragColor = vec4(color.rg * color.a, vSize * color.a, color.a);
19 | }


--------------------------------------------------------------------------------
/src/shader/bg-mist.glsl:
--------------------------------------------------------------------------------
 1 | #version 300 es
 2 | precision mediump float;
 3 | 
 4 | in vec2 vUV;
 5 | 
 6 | uniform sampler2D uMainTex;
 7 | uniform sampler2D uMistTex;
 8 | uniform vec4 uMistColor;
 9 | 
10 | out vec4 fragColor;
11 | 
12 | void main()
13 | {
14 |     vec4 color = texture(uMainTex, vUV.xy).rgba;
15 |     color.rgb += vec3(uMistColor);
16 |     color.a = texture(uMistTex, vUV.xy).r * uMistColor.a;
17 |     fragColor = color.rgba;
18 | }


--------------------------------------------------------------------------------
/src/shader/erase.glsl:
--------------------------------------------------------------------------------
 1 | #version 300 es
 2 | precision mediump float;
 3 | 
 4 | in vec4 vColor;
 5 | in vec4 vPos;
 6 | in vec2 vUV;
 7 | 
 8 | uniform sampler2D uMainTex;
 9 | uniform vec4 uColor;
10 | uniform vec2 uEraserSmooth;
11 | 
12 | out vec4 fragColor;
13 | 
14 | void main()
15 | {
16 |     vec4 color = texture(uMainTex, vUV.xy).rgba;
17 |     color.a = smoothstep(uEraserSmooth.x, uEraserSmooth.y, color.a);
18 |     fragColor = color.rgba;
19 | }


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: Build & Test
 2 | on:
 3 |   push:
 4 |     branches: [ master ]
 5 |   pull_request:
 6 |     branches: [ master ]
 7 | 
 8 | jobs:
 9 |   build:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - uses: actions/checkout@v2
13 |       - uses: actions/setup-node@v2
14 |         with:
15 |           node-version: '15.x'
16 |           registry-url: 'https://registry.npmjs.org'
17 |       - run: npm install
18 |       - run: npm test


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     // Use IntelliSense to learn about possible attributes.
 3 |     // Hover to view descriptions of existing attributes.
 4 |     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |     "version": "0.2.0",
 6 |     "configurations": [
 7 |         {
 8 |             "name": "Attach to Chrome",
 9 |             "port": 9222,
10 |             "request": "attach",
11 |             "type": "pwa-chrome",
12 |             "webRoot": "${workspaceFolder}"
13 |         }
14 | 
15 |     ]
16 | }


--------------------------------------------------------------------------------
/examples/with-node/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "raindrop-fx-example",
 3 |   "version": "1.0.0",
 4 |   "description": "Example of raindrop-fx using with nodejs.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build": "npx esbuild --bundle --outdir=./dist --platform=browser ./src/index.js",
 8 |     "test": "npm run build && npx tsc"
 9 |   },
10 |   "author": "SardineFish",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "raindrop-fx": "file:///../.."
14 |   },
15 |   "devDependencies": {
16 |     "esbuild": "^0.9.5"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/examples/with-node/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Raindrop Effect</title>
 9 |     <link rel="stylesheet" href="../../assets/css/style.css">
10 | </head>
11 | 
12 | <body>
13 |     <div id="root">
14 |         <canvas id="canvas"></canvas>
15 |     </div>
16 |     <script src="./dist/index.js"></script>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/examples/with-node/src/index.js:
--------------------------------------------------------------------------------
 1 | const RaindropFX = require("raindrop-fx");
 2 | 
 3 | const canvas = document.querySelector("#canvas");
 4 | const rect = canvas.getBoundingClientRect();
 5 | canvas.width = rect.width;
 6 | canvas.height = rect.height;
 7 | 
 8 | const raindropFx = new RaindropFX({
 9 |     canvas: canvas,
10 |     background: "../../assets/img/84765992_p0.jpg",
11 | });
12 | 
13 | window.onresize = () =>
14 | {
15 |     const rect = canvas.getBoundingClientRect();
16 |     raindropFx.resize(rect.width, rect.height);
17 | }
18 | 
19 | raindropFx.start();


--------------------------------------------------------------------------------
/examples/with-browser/demo.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @typedef {import("../../bundle/index")}
 3 |  */
 4 | 
 5 | const canvas = document.querySelector("#canvas");
 6 | const rect = canvas.getBoundingClientRect();
 7 | canvas.width = rect.width;
 8 | canvas.height = rect.height;
 9 | 
10 | const raindropFx = new RaindropFX({
11 |     canvas: canvas,
12 |     background: "../../assets/img/84765992_p0.jpg",
13 | });
14 | 
15 | window.onresize = () =>
16 | {
17 |     const rect = canvas.getBoundingClientRect();
18 |     raindropFx.resize(rect.width, rect.height);
19 | }
20 | 
21 | raindropFx.start();


--------------------------------------------------------------------------------
/examples/with-node/src/index.ts:
--------------------------------------------------------------------------------
 1 | import RaindropFX from "raindrop-fx";
 2 | 
 3 | const canvas = document.querySelector("#canvas") as HTMLCanvasElement;
 4 | const rect = canvas.getBoundingClientRect();
 5 | canvas.width = rect.width;
 6 | canvas.height = rect.height;
 7 | 
 8 | const raindropFx = new RaindropFX({
 9 |     canvas: canvas,
10 |     background: "../../assets/img/84765992_p0.jpg",
11 | });
12 | 
13 | window.onresize = () =>
14 | {
15 |     const rect = canvas.getBoundingClientRect();
16 |     raindropFx.resize(rect.width, rect.height);
17 | }
18 | 
19 | raindropFx.start();


--------------------------------------------------------------------------------
/dist/spawner.d.ts.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"spawner.d.ts","sourceRoot":"","sources":["../src/spawner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAElE,qBAAa,OAAO;IAIhB,WAAW,SAAK;IAChB,SAAS,SAAK;IAEd,OAAO,CAAC,SAAS,CAAoB;gBAEzB,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,gBAAgB;IAMnE,IAAI,QAAQ,qBAAkD;IAC9D,IAAI,IAAI,qBAA8C;IACtD,IAAI,SAAS,SAA6C;IAE1D,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAKvB,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC;IAe/B,KAAK,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,SAAI;CAI7C"}


--------------------------------------------------------------------------------
/dist/blur.d.ts.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"blur.d.ts","sourceRoot":"","sources":["../src/blur.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4C,aAAa,EAAsB,OAAO,EAAoC,IAAI,EAAY,aAAa,EAAiB,MAAM,gBAAgB,CAAC;;AAItM,cAAM,YAAa,SAAQ,iBAA0C;IAGjE,OAAO,EAAE,OAAO,GAAG,IAAI,CAAQ;IAG/B,WAAW,EAAE,IAAI,CAAc;IAG/B,YAAY,EAAE,MAAM,CAAK;CAC5B;AAED,qBAAa,YAAY;IAErB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,aAAa,EAAE,CAAM;IAC5B,YAAY,eAAsB;gBAEtB,QAAQ,EAAE,aAAa;IAKnC,IAAI,CAAC,OAAO,EAAE,OAAO;IAYrB,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,GAAE,MAAU,EAAE,MAAM,gBAAgB;IAcpE,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM;IAwB5C,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,gBAAgB;CAuB1D"}


--------------------------------------------------------------------------------
/examples/with-node/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     margin: 0;
 3 | 
 4 |     background-position: 0px 0px,
 5 |     16px 16px;
 6 |     background-size: 32px 32px;
 7 |     background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
 8 |     linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
 9 | }
10 | 
11 | #root {
12 |     position: absolute;
13 |     width: 100vw;
14 |     height: 100vh;
15 |     display: flex;
16 |     justify-content: center;
17 |     align-items: center;
18 | }
19 | 
20 | #canvas {
21 |     width: 100%;
22 |     height: 100%;
23 | }


--------------------------------------------------------------------------------
/examples/with-browser/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Raindrop Effect</title>
 8 |     <link rel="stylesheet" href="../../assets/css/style.css">
 9 |     <script src="../../bundle/index.js"></script>
10 | </head>
11 | <body>
12 |     <div id="root">
13 |         <canvas id="canvas"></canvas>
14 |         <p id="loading">Loading...</p>
15 |     </div>
16 |     <script src="./demo.js"></script>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/dist/index.d.ts.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,WAAW,EAAQ,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGlE,UAAU,OAAQ,SAAQ,gBAAgB,EAAE,aAAa;CAExD;AAED,cAAM,UAAU;IAEL,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,SAAS,EAAE,iBAAiB,CAAC;IAEpC,OAAO,CAAC,UAAU,CAAK;gBAEX,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG;QAAC,MAAM,EAAE,iBAAiB,CAAA;KAAC;IAsD7D,KAAK;IAsBX,IAAI;IAKJ,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAQ9B,aAAa,CAAC,UAAU,EAAE,MAAM,GAAG,WAAW;IAMpD,OAAO;IAMP,OAAO,CAAC,MAAM;CAOjB;AAED,SAAS,UAAU,CAAC"}


--------------------------------------------------------------------------------
/dist/random.d.ts.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"random.d.ts","sourceRoot":"","sources":["../src/random.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,IAAI,EAAE,IAAI,EAAiB,MAAM,gBAAgB,CAAC;AAE1E,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;IAEpE,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,CAAC,CAAC;CACb;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAYlF;AACD,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAG7C;AAQD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,UAG/C;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAIhD;AAED;;GAEG;AACH,wBAAgB,MAAM,WAGrB;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,UAGnD"}


--------------------------------------------------------------------------------
/dist/spawner.d.ts:
--------------------------------------------------------------------------------
 1 | import { Rect, vec2 } from "zogra-renderer";
 2 | import { RainDrop } from "./raindrop";
 3 | import { RaindropSimulator, SimulatorOptions } from "./simulator";
 4 | export declare class Spawner {
 5 |     currentTime: number;
 6 |     nextSpawn: number;
 7 |     private simulator;
 8 |     constructor(simulator: RaindropSimulator, options: SimulatorOptions);
 9 |     get interval(): [number, number];
10 |     get size(): [number, number];
11 |     get spawnRect(): Rect;
12 |     update(dt: number): this;
13 |     trySpawn(): Iterable<RainDrop>;
14 |     spawn(pos: vec2, size: number, density?: number): RainDrop;
15 | }
16 | //# sourceMappingURL=spawner.d.ts.map


--------------------------------------------------------------------------------
/src/shader/2d-vert.glsl:
--------------------------------------------------------------------------------
 1 | #version 300 es
 2 | precision mediump float;
 3 | 
 4 | in vec3 aPos;
 5 | in vec4 aColor;
 6 | in vec2 aUV;
 7 | in vec3 aNormal;
 8 | 
 9 | uniform mat4 uTransformM;
10 | uniform mat4 uTransformVP;
11 | uniform mat4 uTransformMVP;
12 | uniform mat4 uTransformM_IT;
13 | 
14 | out vec4 vColor;
15 | out vec4 vPos;
16 | out vec2 vUV;
17 | out vec3 vNormal;
18 | out vec3 vWorldPos;
19 | 
20 | void main()
21 | {
22 |     gl_Position = uTransformMVP * vec4(aPos, 1);
23 |     vPos = gl_Position;
24 |     vColor = aColor;
25 |     vUV = aUV;
26 |     vNormal = (uTransformM_IT *  vec4(aNormal, 0)).xyz;
27 |     vWorldPos = (uTransformM * vec4(aPos, 1)).xyz;
28 |     
29 | }


--------------------------------------------------------------------------------
/src/shader/blur.glsl:
--------------------------------------------------------------------------------
 1 | #version 300 es
 2 | precision mediump float;
 3 | 
 4 | in vec4 vColor;
 5 | in vec4 vPos;
 6 | in vec2 vUV;
 7 | 
 8 | uniform sampler2D uMainTex;
 9 | uniform vec4 uTexSize; // (w, h, 1/w, 1/h)
10 | uniform float uSampleOffset;
11 | 
12 | out vec4 fragColor;
13 | 
14 | void main()
15 | {
16 |     vec2 delta = vec2(-uSampleOffset, uSampleOffset);
17 |     vec4 color = 
18 |       texture(uMainTex, clamp(vUV.xy + uTexSize.zw * delta.xx, vec2(0), vec2(1)))
19 |     + texture(uMainTex, clamp(vUV.xy + uTexSize.zw * delta.yx, vec2(0), vec2(1)))
20 |     + texture(uMainTex, clamp(vUV.xy + uTexSize.zw * delta.yy, vec2(0), vec2(1)))
21 |     + texture(uMainTex, clamp(vUV.xy + uTexSize.zw * delta.xy, vec2(0), vec2(1)));
22 | 
23 |     color /= vec4(4.0);
24 | 
25 |     fragColor = color.rgba;
26 | }


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     margin: 0;
 3 | 
 4 |     background-position: 0px 0px,
 5 |     16px 16px;
 6 |     background-size: 32px 32px;
 7 |     background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
 8 |     linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
 9 | }
10 | 
11 | #root {
12 |     position: absolute;
13 |     width: 100vw;
14 |     height: 100vh;
15 |     display: flex;
16 |     justify-content: center;
17 |     align-items: center;
18 | }
19 | 
20 | #canvas {
21 |     width: 100%;
22 |     height: 100%;
23 | }
24 | 
25 | #loading {
26 |     position: absolute;
27 |     z-index: -1;
28 |     font-family: 'Segoe UI', Roboto, Tahoma, Geneva, Verdana, sans-serif;
29 |     font-size: 2em;
30 |     color: gray;
31 | }


--------------------------------------------------------------------------------
/dist/random.d.ts:
--------------------------------------------------------------------------------
 1 | import { Rect, vec2 } from "zogra-renderer";
 2 | export interface JitterOption<T extends number | vec2 | [number, number]> {
 3 |     base: T;
 4 |     jitter: T;
 5 | }
 6 | export declare function randomJittered<T extends number | vec2>(option: JitterOption<T>): T;
 7 | export declare function randomInRect(rect: Rect): vec2;
 8 | /**
 9 |  * Generate noise in [-1, 1]
10 |  * @param xy Should be non zero integer
11 |  * @param seed Non zero integer
12 |  */
13 | export declare function goldNoise(xy: vec2, seed: number): number;
14 | export declare function tentNoise(t: number, seed: number): void;
15 | /**
16 |  * Get random value in (-1, 1)
17 |  */
18 | export declare function random(): number;
19 | export declare function randomRange(min: number, max: number): number;
20 | //# sourceMappingURL=random.d.ts.map


--------------------------------------------------------------------------------
/src/shader/raindrop-vert.glsl:
--------------------------------------------------------------------------------
 1 | #version 300 es
 2 | precision mediump float;
 3 | 
 4 | in vec3 aPos;
 5 | in vec4 aColor;
 6 | in vec2 aUV;
 7 | in vec3 aNormal;
 8 | 
 9 | in float aSize;
10 | in mat4 aModelMatrix;
11 | 
12 | uniform mat4 uTransformM;
13 | uniform mat4 uTransformVP;
14 | uniform mat4 uTransformMVP;
15 | uniform mat4 uTransformM_IT;
16 | 
17 | out vec4 vColor;
18 | out vec4 vPos;
19 | out vec2 vUV;
20 | out vec3 vNormal;
21 | out vec3 vWorldPos;
22 | out float vSize;
23 | 
24 | void main()
25 | {
26 |     mat4 mvp = uTransformVP * aModelMatrix;
27 |     gl_Position = mvp * vec4(aPos, 1);
28 |     vPos = gl_Position;
29 |     vColor = aColor;
30 |     vUV = aUV;
31 |     vNormal = (uTransformM_IT *  vec4(aNormal, 0)).xyz;
32 |     vWorldPos = (uTransformM * vec4(aPos, 1)).xyz;
33 |     vSize = aSize;
34 | }


--------------------------------------------------------------------------------
/dist/index.d.ts:
--------------------------------------------------------------------------------
 1 | import { TextureData } from "zogra-renderer";
 2 | import { RaindropRenderer, RenderOptions } from "./renderer";
 3 | import { RaindropSimulator, SimulatorOptions } from "./simulator";
 4 | interface Options extends SimulatorOptions, RenderOptions {
 5 | }
 6 | declare class RaindropFX {
 7 |     options: Options;
 8 |     renderer: RaindropRenderer;
 9 |     simulator: RaindropSimulator;
10 |     private animHandle;
11 |     constructor(options: Partial<Options> & {
12 |         canvas: HTMLCanvasElement;
13 |     });
14 |     start(): Promise<void>;
15 |     stop(): void;
16 |     resize(width: number, height: number): void;
17 |     setBackground(background: string | TextureData): Promise<void>;
18 |     destroy(): void;
19 |     private update;
20 | }
21 | export = RaindropFX;
22 | //# sourceMappingURL=index.d.ts.map


--------------------------------------------------------------------------------
/dist/blur.d.ts:
--------------------------------------------------------------------------------
 1 | import { RenderTexture, Texture, vec4, ZograRenderer } from "zogra-renderer";
 2 | declare const MaterialBlur_base: new (gl?: WebGL2RenderingContext | undefined) => import("zogra-renderer").Material<import("zogra-renderer").DefaultVertexStruct>;
 3 | declare class MaterialBlur extends MaterialBlur_base {
 4 |     texture: Texture | null;
 5 |     textureSize: vec4;
 6 |     sampleOffset: number;
 7 | }
 8 | export declare class BlurRenderer {
 9 |     renderer: ZograRenderer;
10 |     steps: RenderTexture[];
11 |     mateiralBlur: MaterialBlur;
12 |     constructor(renderer: ZograRenderer);
13 |     init(texture: Texture): void;
14 |     blur(texture: Texture, iteration?: number, output?: RenderTexture): RenderTexture;
15 |     downSample(input: Texture, iteration: number): void;
16 |     upSample(iteration: number, finalOutput?: RenderTexture): RenderTexture;
17 | }
18 | export {};
19 | //# sourceMappingURL=blur.d.ts.map


--------------------------------------------------------------------------------
/dist/raindrop.d.ts.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"raindrop.d.ts","sourceRoot":"","sources":["../src/raindrop.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAQ,IAAI,EAAE,MAAM,SAAS,CAAC;AAErC,qBAAa,QAAQ;IAEjB,GAAG,EAAE,IAAI,CAAC;IACV,OAAO,EAAE,MAAM,CAAK;IACpB,QAAQ,EAAE,IAAI,CAAe;IAC7B,MAAM,EAAE,IAAI,CAAC;IACb,SAAS,UAAS;IAClB,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,SAAS,CAAoB;IACrC,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,YAAY,CAAO;IAC3B,OAAO,CAAC,iBAAiB,CAAS;IAElC,OAAO,CAAC,cAAc,CAAK;gBAEf,SAAS,EAAE,iBAAiB,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,SAAI;IAc9E,IAAI,IAAI,IACI,MAAM,CADe;IACjC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAOjB;IAED,IAAI,IAAI,IAAI,IAAI,CAGf;IAED,IAAI,aAAa,WAGhB;IAED,IAAI,OAAO,2CAAoC;IAE/C,cAAc,CAAC,IAAI,EAAE,IAAI;IA+BzB,KAAK;IAgBL,YAAY;IAOZ,KAAK,CAAC,MAAM,EAAE,QAAQ;CAQzB"}


--------------------------------------------------------------------------------
/dist/raindrop.d.ts:
--------------------------------------------------------------------------------
 1 | import { vec2 } from "zogra-renderer";
 2 | import { CollisionGrid, RaindropSimulator } from "./simulator";
 3 | import { Time } from "./utils";
 4 | export declare class RainDrop {
 5 |     pos: vec2;
 6 |     density: number;
 7 |     velocity: vec2;
 8 |     spread: vec2;
 9 |     destroied: boolean;
10 |     parent?: RainDrop;
11 |     grid?: CollisionGrid;
12 |     gridIdx?: number;
13 |     private _mass;
14 |     private _size;
15 |     private simulator;
16 |     private resistance;
17 |     private shifting;
18 |     private lastTrailPos;
19 |     private nextTrailDistance;
20 |     private nextRandomTime;
21 |     constructor(simulator: RaindropSimulator, pos: vec2, size: number, density?: number);
22 |     get mass(): number;
23 |     set mass(m: number);
24 |     get size(): vec2;
25 |     get mergeDistance(): number;
26 |     get options(): import("./simulator").SimulatorOptions;
27 |     updateRaindrop(time: Time): void;
28 |     split(): void;
29 |     randomMotion(): void;
30 |     merge(target: RainDrop): void;
31 | }
32 | //# sourceMappingURL=raindrop.d.ts.map


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "raindrop-fx",
 3 |   "version": "1.0.8",
 4 |   "description": "Rain drop effect with WebGL",
 5 |   "main": "dist/index.js",
 6 |   "scripts": {
 7 |     "build": "npm run build:ts && npm run build:node && npm run build:browser",
 8 |     "build:watch": "node ./build/build-browser.js --dev -w",
 9 |     "build:browser": "node ./build/build-browser.js",
10 |     "build:node": "node ./build/build-node.js",
11 |     "build:ts": "npx tsc",
12 |     "start": "npx esbuild --serve=0.0.0.0:8000 --servedir=./",
13 |     "test": "npm run build && npm run test:examples",
14 |     "test:examples": "cd examples/with-node && npm i && npm test"
15 |   },
16 |   "keywords": [
17 |     "webgl",
18 |     "raindrop",
19 |     "rain",
20 |     "visual",
21 |     "effect",
22 |     "vfx"
23 |   ],
24 |   "author": "SardineFish",
25 |   "license": "MIT",
26 |   "dependencies": {
27 |     "zogra-renderer": "^1.3.5"
28 |   },
29 |   "devDependencies": {
30 |     "esbuild": "^0.8.50",
31 |     "typescript": "^4.1.5"
32 |   },
33 |   "repository": {
34 |     "type": "git",
35 |     "url": "git+https://github.com/SardineFish/raindrop-fx.git"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 SardineFish
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Raindrop Effect</title>
 9 |     <link rel="stylesheet" href="./assets/css/style.css">
10 |     <script src="./bundle/index.js"></script>
11 | </head>
12 | 
13 | <body>
14 |     <div id="root">
15 |         <canvas id="canvas"></canvas>
16 |         <p id="loading">Loading...</p>
17 |     </div>
18 |     <script>
19 |         const canvas = document.querySelector("#canvas");
20 |         const rect = canvas.getBoundingClientRect();
21 |         canvas.width = rect.width;
22 |         canvas.height = rect.height;
23 | 
24 |         const raindropFx = new RaindropFX({
25 |             canvas: canvas,
26 |             background: "assets/img/84765992_p0.jpg",
27 |         });
28 | 
29 |         window.onresize = () =>
30 |         {
31 |             const rect = canvas.getBoundingClientRect();
32 |             raindropFx.resize(rect.width, rect.height);
33 |         }
34 | 
35 |         raindropFx.start();
36 |     </script>
37 | </body>
38 | 
39 | </html>


--------------------------------------------------------------------------------
/src/spawner.ts:
--------------------------------------------------------------------------------
 1 | import { Rect, vec2 } from "zogra-renderer";
 2 | import { RainDrop } from "./raindrop";
 3 | import { randomJittered, JitterOption, randomInRect, randomRange } from "./random";
 4 | import { RaindropSimulator, SimulatorOptions } from "./simulator";
 5 | 
 6 | export class Spawner
 7 | {
 8 | 
 9 | 
10 |     currentTime = 0;
11 |     nextSpawn = 0;
12 | 
13 |     private simulator: RaindropSimulator;
14 | 
15 |     constructor(simulator: RaindropSimulator, options: SimulatorOptions)
16 |     {
17 | 
18 |         this.simulator = simulator;
19 |     }
20 |     
21 |     get interval() { return this.simulator.options.spawnInterval }
22 |     get size() { return this.simulator.options.spawnSize }
23 |     get spawnRect() { return this.simulator.options.viewport }
24 | 
25 |     update(dt: number): this
26 |     {
27 |         this.currentTime += dt;
28 |         return this;
29 |     }
30 |     *trySpawn(): Iterable<RainDrop>
31 |     {
32 |         while (this.currentTime >= this.nextSpawn)
33 |         {
34 |             const size = randomRange(...this.size);
35 |             const pos = randomInRect(this.spawnRect);
36 |             this.nextSpawn += randomRange(...this.interval);
37 |             yield new RainDrop(this.simulator, pos, size);
38 |         }
39 |         if (this.currentTime >= this.nextSpawn)
40 |         {
41 | 
42 |         }
43 |         return undefined;
44 |     }
45 |     spawn(pos: vec2, size: number, density = 1)
46 |     {
47 |         return new RainDrop(this.simulator, pos, size, density);
48 |     }
49 | }


--------------------------------------------------------------------------------
/src/shader/droplet-vert.glsl:
--------------------------------------------------------------------------------
 1 | #version 300 es
 2 | precision mediump float;
 3 | 
 4 | in vec3 aPos;
 5 | in vec2 aUV;
 6 | 
 7 | uniform mat4 uTransformVP;
 8 | 
 9 | uniform float uSeed;
10 | uniform vec4 uSpawnRect; // (xmin, ymin, xsize, ysize)
11 | uniform vec2 uSizeRange; 
12 | 
13 | out vec2 vUV;
14 | 
15 | // Gold Noise ©2015 dcerisano@standard3d.com
16 | // - based on the Golden Ratio
17 | // - uniform normalized distribution
18 | // - fastest static noise generator function (also runs at low precision)
19 | // Ref: https://www.shadertoy.com/view/ltB3zD
20 | const float PHI = 1.61803398874989484820459; // Φ = Golden Ratio 
21 | 
22 | float gold_noise(in vec2 xy, in float seed)
23 | {
24 |     return fract(tan(distance(xy*PHI, xy)*seed)*xy.x);
25 | }
26 | 
27 | vec2 lerp(vec2 a, vec2 b, vec2 t)
28 | {
29 |     return a + (b - a) * t;
30 | }
31 | 
32 | void main()
33 | {
34 |     int id = gl_InstanceID + 1;
35 |     vec2 pos = uSpawnRect.xy + uSpawnRect.zw * vec2(
36 |         gold_noise(vec2(1, id), uSeed + 1.0),
37 |         gold_noise(vec2(id, 1), uSeed + 2.0));
38 | 
39 |     vec2 size = vec2(
40 |         gold_noise(vec2(1, id), uSeed + 3.0),
41 |         gold_noise(vec2(id, 1), uSeed + 4.0));
42 |     size = lerp(vec2(uSizeRange.x), vec2(uSizeRange.y), size);
43 |     
44 |     mat4 model = mat4(size.x, 0.0, 0.0, 0.0,  
45 |                       0.0, size.x, 0.0, 0.0,  
46 |                       0.0, 0.0, 1, 0.0,  
47 |                       pos.x, pos.y, 0.0, 1.0); 
48 |     mat4 mvp = uTransformVP * model;
49 |     gl_Position = mvp * vec4(aPos, 1);
50 |     vUV = aUV;
51 | }


--------------------------------------------------------------------------------
/dist/simulator.d.ts.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"simulator.d.ts","sourceRoot":"","sources":["../src/simulator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,IAAI,EAAQ,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,WAAW,gBAAgB;IAE7B,QAAQ,EAAE,IAAI,CAAC;IACf;;OAEG;IACH,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC;;OAEG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC;;OAEG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,gBAAgB,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC;;OAEG;IACH,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,qBAAa,aAAc,SAAQ,KAAK,CAAC,QAAQ,CAAC;IAE9C,iBAAiB;IACjB,IAAI,CAAC,GAAG,IAAI,EAAE,QAAQ,EAAE;IAIxB,GAAG,CAAC,QAAQ,EAAE,QAAQ;IAMtB,MAAM,CAAC,QAAQ,EAAE,QAAQ;CAQ5B;AAED,qBAAa,iBAAiB;IAE1B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAM;IAC3B,IAAI,EAAE,aAAa,EAAE,CAAM;gBACf,OAAO,EAAE,gBAAgB;IAQrC,IAAI,QAAQ,WAA6C;IAEzD,MAAM;IAaN,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAUnC,cAAc,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAInC,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;IAMnD,GAAG,CAAC,QAAQ,EAAE,QAAQ;IAYtB,MAAM,CAAC,IAAI,EAAE,IAAI;IAwBjB,cAAc,CAAC,IAAI,EAAE,IAAI;IA4BzB,eAAe;CAgDlB"}


--------------------------------------------------------------------------------
/examples/with-node/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "raindrop-fx-example",
 3 |   "version": "1.0.0",
 4 |   "lockfileVersion": 2,
 5 |   "requires": true,
 6 |   "packages": {
 7 |     "": {
 8 |       "name": "raindrop-fx-example",
 9 |       "version": "1.0.0",
10 |       "license": "MIT",
11 |       "dependencies": {
12 |         "raindrop-fx": "file:///../.."
13 |       },
14 |       "devDependencies": {
15 |         "esbuild": "^0.9.5"
16 |       }
17 |     },
18 |     "../..": {
19 |       "version": "1.0.1",
20 |       "license": "MIT",
21 |       "dependencies": {
22 |         "@sardinefish/zogra-renderer": "^1.2.0"
23 |       },
24 |       "devDependencies": {
25 |         "esbuild": "^0.8.50",
26 |         "typescript": "^4.1.5"
27 |       }
28 |     },
29 |     "node_modules/esbuild": {
30 |       "version": "0.9.5",
31 |       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.9.5.tgz",
32 |       "integrity": "sha512-ZBOtZX9HxgSdwkAroVifEUgylWqbOjqbu1i1ohRvhoaYt6aj81dxbizODx419gwDAupqut44ehFVwUq7WRN/OA==",
33 |       "dev": true,
34 |       "hasInstallScript": true,
35 |       "bin": {
36 |         "esbuild": "bin/esbuild"
37 |       }
38 |     },
39 |     "node_modules/raindrop-fx": {
40 |       "resolved": "../..",
41 |       "link": true
42 |     }
43 |   },
44 |   "dependencies": {
45 |     "esbuild": {
46 |       "version": "0.9.5",
47 |       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.9.5.tgz",
48 |       "integrity": "sha512-ZBOtZX9HxgSdwkAroVifEUgylWqbOjqbu1i1ohRvhoaYt6aj81dxbizODx419gwDAupqut44ehFVwUq7WRN/OA==",
49 |       "dev": true
50 |     },
51 |     "raindrop-fx": {
52 |       "version": "file:../..",
53 |       "requires": {
54 |         "@sardinefish/zogra-renderer": "^1.2.0",
55 |         "esbuild": "^0.8.50",
56 |         "typescript": "^4.1.5"
57 |       }
58 |     }
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/random.ts:
--------------------------------------------------------------------------------
 1 | import { distance, mul, Rect, vec2, vec3, Vector2 } from "zogra-renderer";
 2 | 
 3 | export interface JitterOption<T extends number | vec2 | [number, number]>
 4 | {
 5 |     base: T;
 6 |     jitter: T;
 7 | }
 8 | 
 9 | export function randomJittered<T extends number | vec2>(option: JitterOption<T>): T
10 | {
11 |     if (typeof (option.base) === "number")
12 |         return option.base + (option.jitter as number) * (Math.random() * 2 - 1) as T;
13 |     else
14 |     {
15 |         let opt = option as JitterOption<[number, number]>;
16 |         return vec2(
17 |             opt.base[0] + (opt.jitter[0]) * (Math.random() * 2 - 1),
18 |             opt.base[1] + (opt.jitter[1]) * (Math.random() * 2 - 1)
19 |         ) as T;
20 |     }
21 | }
22 | export function randomInRect(rect: Rect): vec2
23 | {
24 |     return vec2(Math.random(), Math.random()).mul(rect.size).plus(rect.min);
25 | }
26 | 
27 | // https://www.shadertoy.com/view/ltB3zD
28 | const PHI = 1.61803398874989484820459; // Φ = Golden Ratio 
29 | function fract(x: number)
30 | {
31 |     return x - Math.floor(x);
32 | }
33 | /**
34 |  * Generate noise in [-1, 1]
35 |  * @param xy Should be non zero integer
36 |  * @param seed Non zero integer
37 |  */
38 | export function goldNoise(xy: vec2, seed: number)
39 | {
40 |     return fract(Math.tan(distance(mul(xy, vec2(PHI)), xy) * seed) * xy.x);
41 | }
42 | 
43 | export function tentNoise(t: number, seed: number)
44 | {
45 |     let frac = fract(t);
46 |     let grid = Math.floor(t += seed);
47 | }
48 | 
49 | /**
50 |  * Get random value in (-1, 1)
51 |  */
52 | export function random()
53 | {
54 |     return Math.random() * 2 - 1;
55 | }
56 | 
57 | export function randomRange(min: number, max: number)
58 | {
59 |     return Math.random() * (max - min) + min;
60 | }


--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
 1 | name: Publish to npm
 2 | on:
 3 |   push:
 4 |     tags:
 5 |       - "v*"
 6 | jobs:
 7 |   release:
 8 |     runs-on: ubuntu-latest
 9 |     steps:
10 |       - uses: actions/checkout@v2
11 |       - uses: actions/setup-node@v2
12 |         with:
13 |           node-version: '15.x'
14 |           registry-url: 'https://registry.npmjs.org'
15 |       - run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
16 |       - run: npm install
17 |       - run: npm run build
18 |       - run: zip -j raindrop-fx README.md LICENSE bundle/index.js
19 |       - name: Create Release
20 |         id: create_release
21 |         uses: actions/create-release@v1
22 |         env:
23 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
24 |         with:
25 |           tag_name: ${{ github.ref }}
26 |           release_name: Release ${{ github.ref }}
27 |           draft: false
28 |           prerelease: false
29 |       - name: Upload Release Asset
30 |         id: upload-release-asset 
31 |         uses: actions/upload-release-asset@v1
32 |         env:
33 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
34 |         with:
35 |           upload_url: ${{ steps.create_release.outputs.upload_url }}
36 |           asset_path: ./raindrop-fx.zip
37 |           asset_name: raindrop-fx-${{ env.RELEASE_VERSION }}.zip
38 |           asset_content_type: application/zip
39 | 
40 |   publish:
41 |     runs-on: ubuntu-latest
42 |     steps:
43 |       - uses: actions/checkout@v2
44 |       - uses: actions/setup-node@v2
45 |         with:
46 |           node-version: '15.x'
47 |           registry-url: 'https://registry.npmjs.org'
48 |       - run: npm install
49 |       - run: npm run build
50 |       - run: npm publish
51 |         env:
52 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}


--------------------------------------------------------------------------------
/dist/renderer.d.ts.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA,OACA,EAEkG,WAAW,EAC5C,aAAa,EAC7E,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAWtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAmH/B,MAAM,WAAW,aAAa;IAE1B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,WAAW,GAAG,MAAM,CAAC;IACjC;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,kBAAkB,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAClD;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;;;OAIG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B;;;;;;;OAOG;IACH,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;;OAMG;IACH,eAAe,EAAE,UAAU,GAAG,QAAQ,CAAA;IACtC;;;;;;;OAOG;IACH,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnD;;;OAGG;IACH,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C;;;OAGG;IACH,oBAAoB,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,kBAAkB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC;;;OAGG;IACH,qBAAqB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD;;;OAGG;IACH,yBAAyB,EAAE,MAAM,CAAC;IAClC;;;;OAIG;IACH,iBAAiB,EAAE,MAAM,CAAC;CAE7B;AAED,qBAAa,gBAAgB;IAEzB,QAAQ,EAAE,aAAa,CAAC;IACxB,OAAO,EAAE,aAAa,CAAC;IAEvB,OAAO,CAAC,WAAW,CAA0B;IAC7C,OAAO,CAAC,kBAAkB,CAA0B;IACpD,OAAO,CAAC,UAAU,CAAgB;IAClC,OAAO,CAAC,kBAAkB,CAAgB;IAC1C,OAAO,CAAC,cAAc,CAAgB;IACtC,OAAO,CAAC,WAAW,CAAgB;IACnC,OAAO,CAAC,gBAAgB,CAAgB;IACxC,OAAO,CAAC,cAAc,CAAgB;IACtC,OAAO,CAAC,YAAY,CAAe;IAEnC,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,aAAa,CAA0B;IAC/C,OAAO,CAAC,YAAY,CAAyB;IAC7C,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,SAAS,CAAwB;IACzC,OAAO,CAAC,gBAAgB,CAA+B;IAEvD,OAAO,CAAC,gBAAgB,CAAO;IAC/B,OAAO,CAAC,IAAI,CAAO;IAEnB,OAAO,CAAC,cAAc,CAAmD;gBAI7D,OAAO,EAAE,aAAa;IAmB5B,UAAU;IAaV,gBAAgB;IAmCtB,MAAM;IAmBN,MAAM,CAAC,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI;IA0BxC,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,aAAa;IAwCrB,OAAO,CAAC,WAAW;CAStB"}


--------------------------------------------------------------------------------
/src/shader/compose.glsl:
--------------------------------------------------------------------------------
 1 | #version 300 es
 2 | precision mediump float;
 3 | 
 4 | in vec4 vColor;
 5 | in vec4 vPos;
 6 | in vec2 vUV;
 7 | 
 8 | uniform sampler2D uMainTex;
 9 | uniform vec4 uBackgroundSize; // (x, y, 1/x, 1/y)
10 | uniform sampler2D uRaindropTex;
11 | uniform sampler2D uDropletTex;
12 | uniform sampler2D uMistTex;
13 | uniform vec4 uColor;
14 | uniform vec2 uSmoothRaindrop;
15 | uniform vec2 uRefractParams; // (refractBase, refractScale)
16 | uniform vec4 uLightPos;
17 | uniform vec4 uDiffuseColor; // (color.rgb, shadowOffset)
18 | uniform vec4 uSpecularParams; // (color.rgb, exponent)
19 | uniform float uBump;
20 | 
21 | out vec4 fragColor;
22 | 
23 | void main()
24 | {
25 |     // vec3 lightPos = vec3(0.5, 1, 1);
26 | 
27 |     vec4 raindrop = texture(uRaindropTex, vUV.xy).rgba;
28 |     vec4 droplet = texture(uDropletTex, vUV.xy).rgba;
29 |     float mist = texture(uMistTex, vUV.xy).r;
30 | 
31 |     vec4 compose = vec4(raindrop.rgb + droplet.rgb - vec3(2.0) * raindrop.rgb * droplet.rgb, max(droplet.a, raindrop.a));
32 | 
33 |     float mask = smoothstep(uSmoothRaindrop.x, uSmoothRaindrop.y, compose.a);
34 |     
35 |     vec2 uv = vUV.xy + -(compose.xy - vec2(0.5)) * vec2(compose.b * uRefractParams.y + uRefractParams.x);
36 |     vec3 normal = normalize(vec3((compose.xy - vec2(0.5)) * vec2(2), 1.0));
37 | 
38 |     // vec3 lightDir = lightPos - vec3(vUV, 0);
39 |     vec3 lightDir = uLightPos.xyz - uLightPos.w * vec3(vUV.xy, 0.0);
40 |     vec3 viewDir = vec3(0, 0, 1);
41 |     vec3 halfDir = normalize(lightDir + viewDir);
42 |     float lambertian = clamp(dot(normalize(lightDir), normal), 0.0, 1.0);
43 |     float blinnPhon = pow(max(dot(normal, halfDir), 0.0), uSpecularParams.a);
44 | 
45 | 
46 |     // offset = pow(offset, vec2(2));
47 |     vec4 color = texture(uMainTex, uv.xy).rgba;
48 |     vec3 diffuse = vec3((lambertian - uDiffuseColor.a) * uDiffuseColor.rgb);
49 | 
50 |     color.rgb += vec3((lambertian - uDiffuseColor.a) * uDiffuseColor.rgb);
51 |     color.rgb += vec3(blinnPhon) * uSpecularParams.rgb;
52 |     
53 | 
54 |     // fragColor = vec4(mask, mask, mask, 1);
55 |     // color = color * vec3(uColor);
56 | 
57 |     fragColor = vec4(color.rgb, mask);// vec4(color.rgb, mask);
58 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # Snowpack dependency directory (https://snowpack.dev/)
 45 | web_modules/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | .parcel-cache
 78 | 
 79 | # Next.js build output
 80 | .next
 81 | out
 82 | 
 83 | # Nuxt.js build / generate output
 84 | .nuxt
 85 | # dist
 86 | 
 87 | # Gatsby files
 88 | .cache/
 89 | # Comment in the public line in if your project uses Gatsby and not Next.js
 90 | # https://nextjs.org/blog/next-9-1#public-directory-support
 91 | # public
 92 | 
 93 | # vuepress build output
 94 | .vuepress/dist
 95 | 
 96 | # Serverless directories
 97 | .serverless/
 98 | 
 99 | # FuseBox cache
100 | .fusebox/
101 | 
102 | # DynamoDB Local files
103 | .dynamodb/
104 | 
105 | # TernJS port file
106 | .tern-port
107 | 
108 | # Stores VSCode versions used for testing VSCode extensions
109 | .vscode-test
110 | 
111 | # yarn v2
112 | .yarn/cache
113 | .yarn/unplugged
114 | .yarn/build-state.yml
115 | .yarn/install-state.gz
116 | .pnp.*
117 | 


--------------------------------------------------------------------------------
/dist/simulator.d.ts:
--------------------------------------------------------------------------------
  1 | import { Rect } from "zogra-renderer";
  2 | import { RainDrop } from "./raindrop";
  3 | import { Spawner } from "./spawner";
  4 | import { Time } from "./utils";
  5 | export interface SimulatorOptions {
  6 |     viewport: Rect;
  7 |     /**
  8 |      * Time range between two raindrop spwan.
  9 |      */
 10 |     spawnInterval: [number, number];
 11 |     /**
 12 |      * Random size range when spawn a new raindrop
 13 |      */
 14 |     spawnSize: [number, number];
 15 |     /**
 16 |      * Maximal amount of spawned raindrops.
 17 |      * Recommend less than 2000
 18 |      */
 19 |     spawnLimit: number;
 20 |     /**
 21 |      * Recommend in range (0..1), other value should be ok.
 22 |      */
 23 |     slipRate: number;
 24 |     /**
 25 |      * Describe how often a raindrop change its motion state
 26 |      */
 27 |     motionInterval: [number, number];
 28 |     /**
 29 |      * Random velociy x relative to velocity y. Recommend in range (0..0.1)
 30 |      */
 31 |     xShifting: [number, number];
 32 |     /**
 33 |      * Relative size for collision check. Recommend in range (0.6..1.2)
 34 |      */
 35 |     colliderSize: number;
 36 |     /**
 37 |      * Mass density of the slipping trail raindrop.
 38 |      * Recommend in range (0.1..0.3)
 39 |      *
 40 |      * A large value cause a raindrop quickly lose its size during slipping.
 41 |      */
 42 |     trailDropDensity: number;
 43 |     /**
 44 |      * Random size range of slipping trail drop. Recommend in range (0.3..0.5)
 45 |      */
 46 |     trailDropSize: [number, number];
 47 |     /**
 48 |      * Random distance range between two slipping trail drop. Recommend in range (20..40)
 49 |      */
 50 |     trailDistance: [number, number];
 51 |     /**
 52 |      * Vertical spread of a new spawned slipping trail drop. Recommend in range (0.4..0.6)
 53 |      */
 54 |     trailSpread: number;
 55 |     /**
 56 |      * Spread rate when a new spawned raindrop hit the screen. Recommend in range (0.4..0.7)
 57 |      */
 58 |     initialSpread: number;
 59 |     /**
 60 |      * Spread shrink rate per seconds. Recommend in range (0.01..0.02)
 61 |      */
 62 |     shrinkRate: number;
 63 |     /**
 64 |      * Spread rate by velocity Y. Recommend in range (0.2..0.4)
 65 |      *
 66 |      * Raindrop with higher fall speed looks more narrow.
 67 |      */
 68 |     velocitySpread: number;
 69 |     /**
 70 |      * Mass lose per second. Recommend in range (10..30)
 71 |      */
 72 |     evaporate: number;
 73 |     /**
 74 |      * Gravity acceleration in pixels/s. Recommend 2400
 75 |      */
 76 |     gravity: number;
 77 | }
 78 | export declare class CollisionGrid extends Array<RainDrop> {
 79 |     /**@deprecated */
 80 |     push(...item: RainDrop[]): number;
 81 |     add(raindrop: RainDrop): void;
 82 |     delete(raindrop: RainDrop): void;
 83 | }
 84 | export declare class RaindropSimulator {
 85 |     options: SimulatorOptions;
 86 |     spawner: Spawner;
 87 |     raindrops: RainDrop[];
 88 |     grid: CollisionGrid[];
 89 |     constructor(options: SimulatorOptions);
 90 |     get gridSize(): number;
 91 |     resize(): void;
 92 |     gridAt(gridX: number, gridY: number): CollisionGrid | undefined;
 93 |     gridAtWorldPos(x: number, y: number): CollisionGrid | undefined;
 94 |     worldToGrid(x: number, y: number): [number, number];
 95 |     add(raindrop: RainDrop): void;
 96 |     update(time: Time): void;
 97 |     raindropUpdate(time: Time): void;
 98 |     collisionUpdate(): void;
 99 | }
100 | //# sourceMappingURL=simulator.d.ts.map


--------------------------------------------------------------------------------
/src/blur.ts:
--------------------------------------------------------------------------------
  1 | import { div, FilterMode, MaterialFromShader, mul, RenderTexture, Shader, shaderProp, Texture, Texture2D, TextureResizing, vec2, vec4, WrapMode, ZograRenderer, TextureFormat } from "zogra-renderer";
  2 | import vert from "./shader/2d-vert.glsl";
  3 | import frag from "./shader/blur.glsl";
  4 | 
  5 | class MaterialBlur extends MaterialFromShader(new Shader(vert, frag))
  6 | {
  7 |     @shaderProp("uMainTex", "tex2d")
  8 |     texture: Texture | null = null;
  9 | 
 10 |     @shaderProp("uTexSize", "vec4")
 11 |     textureSize: vec4 = vec4.one();
 12 | 
 13 |     @shaderProp("uSampleOffset", "float")
 14 |     sampleOffset: number = 1;
 15 | }
 16 | 
 17 | export class BlurRenderer
 18 | {
 19 |     renderer: ZograRenderer;
 20 |     steps: RenderTexture[] = [];
 21 |     mateiralBlur = new MaterialBlur();
 22 | 
 23 |     constructor(renderer: ZograRenderer)
 24 |     {
 25 |         this.renderer = renderer;
 26 |     }
 27 | 
 28 |     init(texture: Texture)
 29 |     {
 30 |         if (!this.steps[0])
 31 |         {
 32 |             this.steps[0] = new RenderTexture(texture.width, texture.height, false, texture.format, texture.filterMode);
 33 |             this.steps[0].wrapMode = WrapMode.Clamp;
 34 |             this.steps[0].updateParameters();
 35 |         }
 36 |         if (this.steps[0].width !== texture.width || this.steps[0].height !== texture.height)
 37 |             this.steps[0].resize(texture.width, texture.height, TextureResizing.Discard);
 38 |     }
 39 | 
 40 |     blur(texture: Texture, iteration: number = 4, output = this.steps[0])
 41 |     {
 42 |         if (!this.steps[0])
 43 |             this.steps[0] = new RenderTexture(texture.width, texture.height, false, texture.format, texture.filterMode);   
 44 |         output = output || this.steps[0];
 45 | 
 46 |         if (this.steps[0].width !== texture.width || this.steps[0].height !== texture.height)
 47 |             this.steps[0].resize(texture.width, texture.height, TextureResizing.Discard);
 48 |         
 49 |         this.downSample(texture, iteration);
 50 | 
 51 |         return this.upSample(iteration, output);
 52 |     }
 53 | 
 54 |     downSample(input: Texture, iteration: number)
 55 |     {
 56 |         for (let i = 1; i <= iteration; i++)
 57 |         {
 58 |             const downSize = vec2.floor(div(input.size, vec2(2)));
 59 |             if (!this.steps[i])
 60 |             {
 61 |                 this.steps[i] = new RenderTexture(downSize.x, downSize.y, false, TextureFormat.RGBA, FilterMode.Linear);
 62 |                 this.steps[i].wrapMode = WrapMode.Clamp;
 63 |                 this.steps[i].updateParameters();
 64 |             }
 65 | 
 66 |             const output = this.steps[i];
 67 |             if (output.width !== downSize.x || output.height !== downSize.y)
 68 |                 output.resize(downSize.x, downSize.y, TextureResizing.Discard);
 69 | 
 70 |             this.mateiralBlur.texture = input;
 71 |             this.mateiralBlur.textureSize = vec4(input.width, input.height, 1 / input.width, 1 / input.height);
 72 |             this.mateiralBlur.sampleOffset = 1;
 73 |             this.renderer.blit(input, output, this.mateiralBlur);
 74 |             input = output;
 75 |         }
 76 |     }
 77 | 
 78 |     upSample(iteration: number, finalOutput = this.steps[0])
 79 |     {
 80 |         let input = this.steps[iteration];
 81 |         for (let i = iteration - 1; i >= 0; i--)
 82 |         {
 83 |             const upSize = mul(input.size, vec2(2));
 84 |             if (!this.steps[i])
 85 |             {
 86 |                 this.steps[i] = new RenderTexture(upSize.x, upSize.y, false, TextureFormat.RGBA, FilterMode.Linear);
 87 |                 this.steps[i].wrapMode = WrapMode.Clamp;
 88 |                 this.steps[i].updateParameters();
 89 |             }
 90 | 
 91 |             const output = i === 0 ? finalOutput : this.steps[i];
 92 | 
 93 |             this.mateiralBlur.texture = input;
 94 |             this.mateiralBlur.textureSize = vec4(input.width, input.height, 1 / input.width, 1 / input.height);
 95 |             this.mateiralBlur.sampleOffset = 1;
 96 |             this.renderer.blit(input, output, this.mateiralBlur);
 97 |             input = output;
 98 |         }
 99 |         return input;
100 |     }
101 | }


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
  1 | import { Rect, TextureData, vec2 } from "zogra-renderer";
  2 | import { RaindropRenderer, RenderOptions } from "./renderer";
  3 | import { RaindropSimulator, SimulatorOptions } from "./simulator";
  4 | import { Time } from "./utils";
  5 | 
  6 | interface Options extends SimulatorOptions, RenderOptions
  7 | {
  8 | }
  9 | 
 10 | class RaindropFX
 11 | {
 12 |     public options: Options;
 13 |     public renderer: RaindropRenderer;
 14 |     public simulator: RaindropSimulator;
 15 | 
 16 |     private animHandle = 0;
 17 | 
 18 |     constructor(options: Partial<Options> & {canvas: HTMLCanvasElement})
 19 |     {
 20 |         const canvas = options.canvas;
 21 |         const defaultOptions: Options = {
 22 |             // Simulator options
 23 |             spawnInterval: [0.1, 0.1],
 24 |             spawnSize: [60, 100],
 25 |             spawnLimit: 2000,
 26 |             viewport: new Rect(vec2.zero(), vec2(canvas.width, canvas.height)),
 27 |             canvas: canvas,
 28 |             width: canvas.width,
 29 |             height: canvas.height,
 30 |             background: "",
 31 |             gravity: 2400,
 32 |             slipRate: 0,
 33 |             motionInterval: [0.1, 0.4],
 34 |             colliderSize: 1,
 35 |             trailDropDensity: 0.2,
 36 |             trailDistance: [20, 30],
 37 |             trailDropSize: [0.3, 0.5],
 38 |             trailSpread: 0.6,
 39 |             initialSpread: 0.5,
 40 |             shrinkRate: 0.01,
 41 |             velocitySpread: 0.3,
 42 |             evaporate: 10,
 43 |             xShifting: [0, 0.1],
 44 | 
 45 |             // Rendering options
 46 |             backgroundBlurSteps: 3,
 47 |             backgroundWrapMode: "clamp",
 48 |             mist: true,
 49 |             mistColor: [0.01, 0.01, 0.01, 1],
 50 |             mistBlurStep: 4,
 51 |             mistTime: 10,
 52 |             dropletsPerSeconds: 500,
 53 |             dropletSize: [10, 30],
 54 |             smoothRaindrop: [0.96, 0.99],
 55 |             refractBase: 0.4,
 56 |             refractScale: 0.6,
 57 |             raindropCompose: "smoother",
 58 |             raindropLightPos: [-1, 1, 2, 0],
 59 |             raindropDiffuseLight: [0.2, 0.2, 0.2],
 60 |             raindropShadowOffset: 0.8,
 61 |             raindropEraserSize: [0.93, 1.0],
 62 |             raindropSpecularLight: [0, 0, 0],
 63 |             raindropSpecularShininess: 256,
 64 |             raindropLightBump: 1,
 65 |         };
 66 |         this.options = { ...defaultOptions, ...options };
 67 | 
 68 |         this.simulator = new RaindropSimulator(this.options);
 69 |         this.renderer = new RaindropRenderer(this.options);
 70 |     }
 71 |     
 72 |     async start()
 73 |     {
 74 |         await this.renderer.loadAssets();
 75 | 
 76 |         let lastFrameTime = 0;
 77 |         const update = (delay: number) =>
 78 |         {
 79 |             const dt = (delay - lastFrameTime) / 1000;
 80 |             lastFrameTime = delay;
 81 |             const time = <Time>{
 82 |                 dt: 0.03,
 83 |                 total: delay / 1000
 84 |             };
 85 | 
 86 |             this.update(time);
 87 | 
 88 |             this.animHandle = requestAnimationFrame(update);
 89 |         };
 90 | 
 91 |         this.animHandle =  requestAnimationFrame(update);
 92 |     }
 93 |     
 94 |     stop()
 95 |     {
 96 |         cancelAnimationFrame(this.animHandle);
 97 |     }
 98 | 
 99 |     resize(width: number, height: number)
100 |     {
101 |         this.options.width = width;
102 |         this.options.height = height;
103 |         this.options.viewport = new Rect(vec2.zero(), vec2(width, height));
104 |         this.renderer.resize();
105 |     }
106 | 
107 |     async setBackground(background: string | TextureData)
108 |     {
109 |         this.renderer.options.background = background;
110 |         await this.renderer.reloadBackground();
111 |     }
112 | 
113 |     destroy()
114 |     {
115 |         this.stop();
116 |         this.renderer.renderer.destroy();
117 |     }
118 |     
119 |     private update(time: Time)
120 |     {
121 |         this.simulator.update(time);
122 | 
123 |         this.renderer.render(this.simulator.raindrops, time);
124 |     }
125 | 
126 | }
127 | 
128 | export = RaindropFX;


--------------------------------------------------------------------------------
/src/raindrop.ts:
--------------------------------------------------------------------------------
  1 | import { div, mul, plus, vec2, Vector2 } from "zogra-renderer";
  2 | import { random, randomRange } from "./random";
  3 | import { CollisionGrid, RaindropSimulator } from "./simulator";
  4 | import { lerp, Time } from "./utils";
  5 | 
  6 | export class RainDrop
  7 | {
  8 |     pos: vec2;
  9 |     density: number = 1;
 10 |     velocity: vec2 = vec2.zero();
 11 |     spread: vec2;
 12 |     destroied = false;
 13 |     parent?: RainDrop;
 14 |     grid?: CollisionGrid;
 15 |     gridIdx?: number;
 16 | 
 17 |     private _mass: number = 0;
 18 |     private _size: vec2 = vec2.zero();
 19 |     private simulator: RaindropSimulator;
 20 |     private resistance = 0;
 21 |     private shifting = 0;
 22 |     private lastTrailPos: vec2;
 23 |     private nextTrailDistance: number;
 24 | 
 25 |     private nextRandomTime = 0;
 26 | 
 27 |     constructor(simulator: RaindropSimulator, pos: vec2, size: number, density = 1)
 28 |     {
 29 |         this.pos = pos;
 30 |         this.simulator = simulator;
 31 |         this.density = density;
 32 | 
 33 |         this.lastTrailPos = pos.clone();
 34 |         this.nextTrailDistance = randomRange(...simulator.options.trailDistance);
 35 | 
 36 |         this.spread = vec2(simulator.options.initialSpread);
 37 | 
 38 |         this.mass = (size * density) ** 2;
 39 |     }
 40 | 
 41 |     get mass() { return this._mass; }
 42 |     set mass(m: number)
 43 |     {
 44 |         this._mass = m;
 45 |         const sqrtM = Math.sqrt(m) / this.density;
 46 |         this._size.x = (this.spread.x + 1) * sqrtM;
 47 |         this._size.y = (this.spread.y + 1) * sqrtM;
 48 |         // this._size = mul(plus(this.spread, vec2.one()), Math.sqrt(m));
 49 |     }
 50 |     
 51 |     get size(): vec2
 52 |     {
 53 |         return this._size;
 54 |     }
 55 | 
 56 |     get mergeDistance()
 57 |     {
 58 |         return this.size.x * (1 + this.spread.x) * 0.16 * this.simulator.options.colliderSize;
 59 |     }
 60 | 
 61 |     get options() { return this.simulator.options }
 62 | 
 63 |     updateRaindrop(time: Time)
 64 |     {
 65 |         if (this.nextRandomTime <= time.total)
 66 |         {
 67 |             this.nextRandomTime = time.total + randomRange(...this.simulator.options.motionInterval)
 68 |             this.randomMotion();
 69 |         }
 70 | 
 71 |         this.mass -= this.simulator.options.evaporate * time.dt;
 72 |         const force = this.options.gravity * this.mass - this.resistance;
 73 |         const acceleration = force / this.mass;
 74 |         this.velocity.y -= acceleration * time.dt;
 75 |         if (this.velocity.y > 0)
 76 |             this.velocity.y = 0;
 77 |         this.velocity.x = Math.abs(this.velocity.y) * this.shifting;
 78 |         this.pos.x += this.velocity.x * time.dt;
 79 |         this.pos.y += this.velocity.y * time.dt;
 80 |         // this.pos.plus(mul(this.velocity, vec2(time.dt)));
 81 | 
 82 |         const spreadByVelocity = this.simulator.options.velocitySpread * 2 * Math.atan(Math.abs(this.velocity.y * 0.005)) / Math.PI;
 83 |         this.spread.y = Math.max(this.spread.y, spreadByVelocity);
 84 |         this.spread.x *= Math.pow(this.simulator.options.shrinkRate, time.dt);
 85 |         this.spread.y *= Math.pow(this.simulator.options.shrinkRate, time.dt);
 86 |         // this.spread.y +=  Math.abs(this.velocity.y) * 0.0001;
 87 | 
 88 |         if (Vector2.distanceSquared(this.lastTrailPos, this.pos) > this.nextTrailDistance * this.nextTrailDistance)
 89 |         {
 90 |             this.split();
 91 |         }
 92 |     }
 93 | 
 94 |     split()
 95 |     {
 96 |         // return;
 97 |         if (this.mass < 1000)
 98 |             return;
 99 |         let size = this.size.x * randomRange(...this.simulator.options.trailDropSize);
100 |         const pos = plus(vec2(randomRange(-5, 5), this.size.y / 4), this.pos);
101 |         let trailDrop = this.simulator.spawner.spawn(pos.clone(), size, this.simulator.options.trailDropDensity);
102 |         trailDrop.spread = vec2(0.1, Math.abs(this.velocity.y) * 0.01 * this.options.trailSpread);
103 |         trailDrop.parent = this;
104 |         this.mass -= trailDrop.mass;
105 |         this.simulator.add(trailDrop);
106 |         this.lastTrailPos = this.pos.clone();
107 |         this.nextTrailDistance = randomRange(...this.simulator.options.trailDistance);
108 |     }
109 | 
110 |     randomMotion()
111 |     {
112 |         const maxResistance = lerp(...this.simulator.options.spawnSize, 1 - this.simulator.options.slipRate) ** 2 * 4;
113 |         this.resistance = randomRange(0, 1) * this.options.gravity * maxResistance;
114 |         this.shifting = random() * randomRange(...this.simulator.options.xShifting);
115 |     }
116 | 
117 |     merge(target: RainDrop)
118 |     {
119 |         const selfMomentum = mul(this.velocity, this.mass);
120 |         const targetMomentum = mul(target.velocity, target.mass);
121 |         const momentum = plus(selfMomentum, targetMomentum);
122 |         this.mass += target.mass;
123 |         this.velocity = div(momentum, this.mass);
124 |     }
125 | }


--------------------------------------------------------------------------------
/dist/renderer.d.ts:
--------------------------------------------------------------------------------
  1 | import { TextureData, ZograRenderer } from "zogra-renderer";
  2 | import { RainDrop } from "./raindrop";
  3 | import { Time } from "./utils";
  4 | export interface RenderOptions {
  5 |     canvas: HTMLCanvasElement;
  6 |     width: number;
  7 |     height: number;
  8 |     background: TextureData | string;
  9 |     /**
 10 |      * Background blur steps used for background & raindrop refract image.
 11 |      * Value should be integer from 0 to log2(backgroundSize).
 12 |      * Recommend 3 or 4
 13 |      */
 14 |     backgroundBlurSteps: number;
 15 |     /**
 16 |      * WrapMode for background texture used during sampling raindrop refrection.
 17 |      */
 18 |     backgroundWrapMode: "clamp" | "repeat" | "mirror";
 19 |     /**
 20 |      * Enable blurry mist effect
 21 |      */
 22 |     mist: boolean;
 23 |     /**
 24 |      * [r, g, b, a] mist color, each component in range (0..1).
 25 |      * The alpha is used for whole mist layer.
 26 |      * Recommend [0.01, 0.01, 0.01, 1]
 27 |      */
 28 |     mistColor: [number, number, number, number];
 29 |     /**
 30 |      * Describe how long takes mist alpha from 0 to 1
 31 |      */
 32 |     mistTime: number;
 33 |     /**
 34 |      * Background blur steps used for mist.
 35 |      * Value should be integer from 0 to log2(backgroundSize).
 36 |      * Recommended value = backgroundBlurSteps + 1
 37 |      */
 38 |     mistBlurStep: number;
 39 |     /**
 40 |      * Tiny droplet spawn rate.
 41 |      */
 42 |     dropletsPerSeconds: number;
 43 |     /**
 44 |      * Random size range of tiny drplets.
 45 |      * Recommend [10, 30]
 46 |      */
 47 |     dropletSize: [number, number];
 48 |     /**
 49 |      * Smooth range [a, b] of raindrop edge.
 50 |      * Recommend [0.96, 1.0]
 51 |      *
 52 |      * Larger range of (b - a) have smoother edge.
 53 |      *
 54 |      * Lower value b makes raindrop larger with a distort edge
 55 |      */
 56 |     smoothRaindrop: [number, number];
 57 |     /**
 58 |      * Refract uv scale of minimal raindrop.
 59 |      * Recommend in range (0.2, 0.6)
 60 |      */
 61 |     refractBase: number;
 62 |     /**
 63 |      * Refract uv scaled by raindrop size.
 64 |      * Rocommend in range (0.4, 0.8)
 65 |      */
 66 |     refractScale: number;
 67 |     /**
 68 |      * Describe how raindrops are composed.
 69 |      *
 70 |      * - `smoother` compose raindrops normal with 'exclusion' blend mode
 71 |      *
 72 |      * - `harder` compose raindrops normal with 'normal' blend mode
 73 |      */
 74 |     raindropCompose: "smoother" | "harder";
 75 |     /**
 76 |      * Screen space (0..1) light direction or position.
 77 |      * Recommend [-1, 1, 2, 0]
 78 |      *
 79 |      * - Use [x, y, z, 0] to indicate a direction
 80 |      *
 81 |      * - Use [x, y, z, 1] to indicate a position
 82 |      */
 83 |     raindropLightPos: [number, number, number, number];
 84 |     /**
 85 |      * Lambertian diffuse lighting Color.
 86 |      * Recommend [0.3, 0.3, 0.3]
 87 |      */
 88 |     raindropDiffuseLight: [number, number, number];
 89 |     /**
 90 |      * Higher value makes more shadow.
 91 |      * Recommend in range (0.6..0.8)
 92 |      */
 93 |     raindropShadowOffset: number;
 94 |     /**
 95 |      * Similar to `smoothRaindrop`. Used to erase droplets & mist.
 96 |      * Recommended value [0.93, 1.0]
 97 |      */
 98 |     raindropEraserSize: [number, number];
 99 |     /**
100 |      * Specular light clor.
101 |      * Recommend disable it with [0, 0, 0] :)
102 |      */
103 |     raindropSpecularLight: [number, number, number];
104 |     /**
105 |      * Blinn-Phong exponent representing shininess.
106 |      * Value from 0 to 1024 is ok
107 |      */
108 |     raindropSpecularShininess: number;
109 |     /**
110 |      * Will apply to calculate screen space normal for lighting.
111 |      * Larger value makes raindrops looks more flat.
112 |      * Recommend in range (0.3..1)
113 |      */
114 |     raindropLightBump: number;
115 | }
116 | export declare class RaindropRenderer {
117 |     renderer: ZograRenderer;
118 |     options: RenderOptions;
119 |     private raindropTex;
120 |     private originalBackground;
121 |     private background;
122 |     private raindropComposeTex;
123 |     private dropletTexture;
124 |     private mistTexture;
125 |     private blurryBackground;
126 |     private mistBackground;
127 |     private blurRenderer;
128 |     private matrlCompose;
129 |     private matrlRaindrop;
130 |     private matrlDroplet;
131 |     private matrlErase;
132 |     private matrlMist;
133 |     private matrlMistCompose;
134 |     private projectionMatrix;
135 |     private mesh;
136 |     private raindropBuffer;
137 |     constructor(options: RenderOptions);
138 |     loadAssets(): Promise<void>;
139 |     reloadBackground(): Promise<void>;
140 |     resize(): void;
141 |     render(raindrops: RainDrop[], time: Time): void;
142 |     private blurBackground;
143 |     private drawMist;
144 |     private drawBackground;
145 |     private drawRaindrops;
146 |     private drawDroplet;
147 | }
148 | //# sourceMappingURL=renderer.d.ts.map


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     /* Visit https://aka.ms/tsconfig.json to read more about this file */
 4 | 
 5 |     /* Basic Options */
 6 |     // "incremental": true,                   /* Enable incremental compilation */
 7 |     "target": "ESNext",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
 8 |     "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
 9 |     "lib": ["DOM", "ESNext"],                             /* Specify library files to be included in the compilation. */
10 |     // "allowJs": true,                       /* Allow javascript files to be compiled. */
11 |     // "checkJs": true,                       /* Report errors in .js files. */
12 |     // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
13 |     "declaration": true,                   /* Generates corresponding '.d.ts' file. */
14 |     "emitDeclarationOnly": true,
15 |     "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
16 |     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
17 |     // "outFile": "./",                       /* Concatenate and emit output to single file. */
18 |     "outDir": "./dist",                        /* Redirect output structure to the directory. */
19 |     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
20 |     // "composite": true,                     /* Enable project compilation */
21 |     // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
22 |     // "removeComments": true,                /* Do not emit comments to output. */
23 |     // "noEmit": true,                        /* Do not emit outputs. */
24 |     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
25 |     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
26 |     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
27 | 
28 |     /* Strict Type-Checking Options */
29 |     "strict": true,                           /* Enable all strict type-checking options. */
30 |     // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
31 |     // "strictNullChecks": true,              /* Enable strict null checks. */
32 |     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
33 |     // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
34 |     // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
35 |     // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
36 |     // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
37 | 
38 |     /* Additional Checks */
39 |     // "noUnusedLocals": true,                /* Report errors on unused locals. */
40 |     // "noUnusedParameters": true,            /* Report errors on unused parameters. */
41 |     // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
42 |     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
43 |     // "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
44 | 
45 |     /* Module Resolution Options */
46 |     // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
47 |     // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
48 |     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
49 |     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
50 |     // "typeRoots": [],                       /* List of folders to include type definitions from. */
51 |     // "types": [],                           /* Type declaration files to be included in compilation. */
52 |     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
53 |     "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
54 |     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
55 |     // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
56 | 
57 |     /* Source Map Options */
58 |     // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
59 |     // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
60 |     // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
61 |     // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
62 | 
63 |     /* Experimental Options */
64 |     "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
65 |     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
66 | 
67 |     /* Advanced Options */
68 |     "skipLibCheck": true,                     /* Skip type checking of declaration files. */
69 |     "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
70 |   },
71 |   "include": [
72 |     "src/**/*"
73 |   ]
74 | }
75 | 


--------------------------------------------------------------------------------
/examples/with-node/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     /* Visit https://aka.ms/tsconfig.json to read more about this file */
 4 | 
 5 |     /* Basic Options */
 6 |     // "incremental": true,                   /* Enable incremental compilation */
 7 |     "target": "ESNext",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
 8 |     "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
 9 |     "lib": ["DOM", "ESNext"],                             /* Specify library files to be included in the compilation. */
10 |     // "allowJs": true,                       /* Allow javascript files to be compiled. */
11 |     // "checkJs": true,                       /* Report errors in .js files. */
12 |     // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
13 |     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
14 |     // "emitDeclarationOnly": true,
15 |     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
16 |     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
17 |     // "outFile": "./",                       /* Concatenate and emit output to single file. */
18 |     "outDir": "./dist",                        /* Redirect output structure to the directory. */
19 |     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
20 |     // "composite": true,                     /* Enable project compilation */
21 |     // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
22 |     // "removeComments": true,                /* Do not emit comments to output. */
23 |     "noEmit": true,                        /* Do not emit outputs. */
24 |     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
25 |     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
26 |     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
27 | 
28 |     /* Strict Type-Checking Options */
29 |     "strict": true,                           /* Enable all strict type-checking options. */
30 |     // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
31 |     // "strictNullChecks": true,              /* Enable strict null checks. */
32 |     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
33 |     // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
34 |     // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
35 |     // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
36 |     // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
37 | 
38 |     /* Additional Checks */
39 |     // "noUnusedLocals": true,                /* Report errors on unused locals. */
40 |     // "noUnusedParameters": true,            /* Report errors on unused parameters. */
41 |     // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
42 |     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
43 |     // "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
44 | 
45 |     /* Module Resolution Options */
46 |     // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
47 |     // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
48 |     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
49 |     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
50 |     // "typeRoots": [],                       /* List of folders to include type definitions from. */
51 |     // "types": [],                           /* Type declaration files to be included in compilation. */
52 |     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
53 |     "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
54 |     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
55 |     // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
56 | 
57 |     /* Source Map Options */
58 |     // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
59 |     // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
60 |     // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
61 |     // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
62 | 
63 |     /* Experimental Options */
64 |     "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
65 |     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
66 | 
67 |     /* Advanced Options */
68 |     "skipLibCheck": true,                     /* Skip type checking of declaration files. */
69 |     "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
70 |   },
71 |   "include": [
72 |     "src/**/*"
73 |   ]
74 | }
75 | 


--------------------------------------------------------------------------------
/src/simulator.ts:
--------------------------------------------------------------------------------
  1 | import { minus, Rect, vec2 } from "zogra-renderer";
  2 | import { RainDrop } from "./raindrop";
  3 | import { JitterOption } from "./random";
  4 | import { Spawner } from "./spawner";
  5 | import { Time } from "./utils";
  6 | 
  7 | export interface SimulatorOptions
  8 | {
  9 |     viewport: Rect;
 10 |     /**
 11 |      * Time range between two raindrop spwan.
 12 |      */
 13 |     spawnInterval: [number, number];
 14 |     /**
 15 |      * Random size range when spawn a new raindrop
 16 |      */
 17 |     spawnSize: [number, number];
 18 |     /**
 19 |      * Maximal amount of spawned raindrops.
 20 |      * Recommend less than 2000
 21 |      */
 22 |     spawnLimit: number;
 23 |     /**
 24 |      * Recommend in range (0..1), other value should be ok.
 25 |      */
 26 |     slipRate: number;
 27 |     /**
 28 |      * Describe how often a raindrop change its motion state
 29 |      */
 30 |     motionInterval: [number, number];
 31 |     /**
 32 |      * Random velociy x relative to velocity y. Recommend in range (0..0.1)
 33 |      */
 34 |     xShifting: [number, number];
 35 |     /**
 36 |      * Relative size for collision check. Recommend in range (0.6..1.2)
 37 |      */
 38 |     colliderSize: number;
 39 |     /**
 40 |      * Mass density of the slipping trail raindrop. 
 41 |      * Recommend in range (0.1..0.3)
 42 |      * 
 43 |      * A large value cause a raindrop quickly lose its size during slipping.
 44 |      */
 45 |     trailDropDensity: number;
 46 |     /**
 47 |      * Random size range of slipping trail drop. Recommend in range (0.3..0.5)
 48 |      */
 49 |     trailDropSize: [number, number];
 50 |     /**
 51 |      * Random distance range between two slipping trail drop. Recommend in range (20..40)
 52 |      */
 53 |     trailDistance: [number, number];
 54 |     /**
 55 |      * Vertical spread of a new spawned slipping trail drop. Recommend in range (0.4..0.6)
 56 |      */
 57 |     trailSpread: number
 58 |     /**
 59 |      * Spread rate when a new spawned raindrop hit the screen. Recommend in range (0.4..0.7)
 60 |      */
 61 |     initialSpread: number;
 62 |     /**
 63 |      * Spread shrink rate per seconds. Recommend in range (0.01..0.02)
 64 |      */
 65 |     shrinkRate: number;
 66 |     /**
 67 |      * Spread rate by velocity Y. Recommend in range (0.2..0.4)
 68 |      * 
 69 |      * Raindrop with higher fall speed looks more narrow.
 70 |      */
 71 |     velocitySpread: number;
 72 |     /**
 73 |      * Mass lose per second. Recommend in range (10..30)
 74 |      */
 75 |     evaporate: number;
 76 |     /**
 77 |      * Gravity acceleration in pixels/s. Recommend 2400
 78 |      */
 79 |     gravity: number;
 80 | }
 81 | 
 82 | export class CollisionGrid extends Array<RainDrop>
 83 | {
 84 |     /**@deprecated */
 85 |     push(...item :RainDrop[])
 86 |     {
 87 |         return super.push(...item);
 88 |     }
 89 |     add(raindrop: RainDrop)
 90 |     {
 91 |         const len = super.push(raindrop);
 92 |         raindrop.gridIdx = len - 1;
 93 |         raindrop.grid = this;
 94 |     }
 95 |     delete(raindrop: RainDrop)
 96 |     {
 97 |         this[raindrop.gridIdx as number] = this[this.length - 1];
 98 |         this[raindrop.gridIdx as number].gridIdx = raindrop.gridIdx;
 99 |         this.length--;
100 |         raindrop.gridIdx = -1;
101 |         raindrop.grid = undefined;
102 |     }
103 | }
104 | 
105 | export class RaindropSimulator
106 | {
107 |     options: SimulatorOptions;
108 |     spawner: Spawner;
109 |     raindrops: RainDrop[] = [];
110 |     grid: CollisionGrid[] = [];
111 |     constructor(options: SimulatorOptions)
112 |     {
113 |         this.options = options;
114 | 
115 |         this.spawner = new Spawner(this, options);
116 | 
117 |         this.resize();
118 |     }
119 |     get gridSize() { return this.options.spawnSize[1] * 0.3 } // max collide distance
120 | 
121 |     resize()
122 |     {
123 |         const w = Math.ceil(this.options.viewport.size.x / this.gridSize);
124 |         const h = Math.ceil(this.options.viewport.size.y / this.gridSize);
125 |         let base = 0;
126 |         if (this.grid.length < w * h)
127 |         {
128 |             base = this.grid.length;
129 |             this.grid.length = w * h;
130 |         }
131 |         for (let i = base; i < this.grid.length; i++)
132 |             this.grid[i] = new CollisionGrid();
133 |     }
134 |     gridAt(gridX: number, gridY: number)
135 |     {
136 |         if (gridX < 0 || gridY < 0)
137 |             return undefined;
138 |         const gridWidth = Math.ceil((this.options.viewport.xMax - this.options.viewport.xMin) / this.gridSize);
139 |         const idx = gridY * gridWidth + gridX;
140 |         if (idx >= this.grid.length)
141 |             return undefined;
142 |         return this.grid[idx];
143 |     }
144 |     gridAtWorldPos(x: number, y: number)
145 |     {
146 |         return this.gridAt(...this.worldToGrid(x, y));
147 |     }
148 |     worldToGrid(x: number, y: number): [number, number]
149 |     {
150 |         const gridX = Math.floor(x / this.gridSize);
151 |         const gridY = Math.floor(y / this.gridSize);
152 |         return [gridX, gridY];
153 |     }
154 |     add(raindrop: RainDrop)
155 |     {
156 | 
157 |         this.raindrops.push(raindrop);
158 |         let grid = this.gridAtWorldPos(raindrop.pos.x, raindrop.pos.y);
159 |         if (grid)
160 |         {
161 |             grid.add(raindrop);
162 |             raindrop.gridIdx = grid.length - 1;
163 |         }
164 |     }
165 | 
166 |     update(time: Time)
167 |     {
168 |         if (this.raindrops.length <= this.options.spawnLimit)
169 |         {
170 |             for (const newDrop of this.spawner.update(time.dt).trySpawn())
171 |             {
172 |                 this.raindrops.push(newDrop); 
173 |             }
174 |         }
175 | 
176 |         this.raindropUpdate(time);
177 |         this.collisionUpdate();
178 | 
179 |         for (let i = 0; i < this.raindrops.length; i++)
180 |         {
181 |             if (this.raindrops[i].destroied)
182 |             {
183 |                 this.raindrops[i].grid?.delete(this.raindrops[i]);
184 |                 this.raindrops[i] = this.raindrops[this.raindrops.length - 1];
185 |                 this.raindrops.length--;
186 |             }
187 |         }
188 |     }
189 | 
190 |     raindropUpdate(time: Time)
191 |     {
192 |         for (let i = 0; i < this.raindrops.length; i++)
193 |         {
194 |             const raindrop = this.raindrops[i];
195 |             if (raindrop.destroied)
196 |                 continue;
197 |             
198 |             raindrop.updateRaindrop(time);
199 |             if (raindrop.pos.y < -100)
200 |                 raindrop.destroied = true;
201 |             
202 | 
203 |             if (raindrop.destroied)
204 |                 continue;
205 | 
206 | 
207 |             const [gridX, gridY] = this.worldToGrid(raindrop.pos.x, raindrop.pos.y);
208 |             const grid = this.gridAt(gridX, gridY);
209 |             if (grid !== raindrop.grid)
210 |             {
211 |                 raindrop.grid?.delete(raindrop);
212 |                 grid?.add(raindrop);
213 |                 raindrop.grid = grid;
214 |             }
215 |         }
216 |     }
217 | 
218 |     collisionUpdate()
219 |     {
220 |         for (let i = 0; i < this.raindrops.length; i++)
221 |         {
222 |             const raindrop = this.raindrops[i];
223 | 
224 |             if (raindrop.destroied)
225 |                 continue;
226 |             
227 |             const [gridX, gridY] = this.worldToGrid(raindrop.pos.x, raindrop.pos.y);
228 | 
229 |             for (let x = -1; x <= 1; x++)
230 |             {
231 |                 for (let y = -1; y <= 1; y++)
232 |                 {
233 |                     const grid = this.gridAt(gridX + x, gridY + y);
234 |                     if (!grid)
235 |                         continue;
236 | 
237 |                     for (const other of grid)
238 |                     {
239 |                         const isSame = other === raindrop;
240 |                         const isParent = other.parent === raindrop || raindrop.parent === other;
241 |                         const isAdjacent = raindrop.parent && (raindrop.parent === other.parent);
242 |                         if (other.destroied || isParent || isAdjacent || isSame)
243 |                             continue;
244 | 
245 |                         let dx = raindrop.pos.x - other.pos.x;
246 |                         let dy = raindrop.pos.y - other.pos.y;
247 |                         let distance = Math.sqrt(dx * dx + dy * dy);
248 |                         if (distance - raindrop.mergeDistance - other.mergeDistance < 0)
249 |                         {
250 |                             if (raindrop.mass >= other.mass)
251 |                             {
252 |                                 raindrop.merge(other);
253 |                                 other.destroied = true;
254 |                             }
255 |                             else
256 |                             {
257 |                                 other.merge(raindrop);
258 |                                 raindrop.destroied = true;
259 |                             }
260 |                         }
261 |                     }
262 |                 }
263 |             }
264 |         }
265 |     }
266 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Raindrop FX
  2 | [![GitHub](https://img.shields.io/github/license/SardineFish/raindrop-fx)](https://github.com/SardineFish/raindrop-fx/blob/master/LICENSE)
  3 | [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/SardineFish/raindrop-fx/Build%20&%20Test)](https://github.com/SardineFish/raindrop-fx/actions/workflows/build.yml)
  4 | [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/SardineFish/raindrop-fx/Publish%20to%20npm?label=publish)](https://github.com/SardineFish/raindrop-fx/actions/workflows/npm-publish.yml)
  5 | [![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/SardineFish/raindrop-fx?label=latest)](https://github.com/SardineFish/raindrop-fx/releases)
  6 | [![npm](https://img.shields.io/npm/v/raindrop-fx)](https://www.npmjs.com/package/raindrop-fx)
  7 | [![GitHub file size in bytes](https://img.shields.io/github/size/SardineFish/raindrop-fx/bundle/index.js?label=bundle%20size)](https://github.com/SardineFish/raindrop-fx/blob/master/bundle/index.js)
  8 | 
  9 | 
 10 | Optimised raindrop effect on glass with WebGL2
 11 | 
 12 | Inspired by <https://github.com/codrops/RainEffect>
 13 | 
 14 | Check the live demo: <https://sardinefish.github.io/raindrop-fx/>
 15 | 
 16 | ![](./assets/img/demo.png)
 17 | 
 18 | Background image from <https://www.pixiv.net/artworks/84765992>
 19 | 
 20 | ## Usage
 21 | 
 22 | ### Use as npm package
 23 | 
 24 | You might need some bundle tools to run it in browser. eg. `esbuild` or `webpack`
 25 | 
 26 | ```shell
 27 | $ npm install raindrop-fx
 28 | ```
 29 | 
 30 | ```javascript
 31 | const RaindropFX = require("raindrop-fx");
 32 | 
 33 | const canvas = document.querySelector("#canvas");
 34 | const rect = canvas.getBoundingClientRect();
 35 | canvas.width = rect.width;
 36 | canvas.height = rect.height;
 37 | 
 38 | const raindropFx = new RaindropFX({
 39 |     canvas: canvas,
 40 |     background: "path/to/background/image",
 41 | });
 42 | 
 43 | window.onresize = () =>
 44 | {
 45 |     const rect = canvas.getBoundingClientRect();
 46 |     raindropFx.resize(rect.width, rect.height);
 47 | }
 48 | 
 49 | raindropFx.start();
 50 | ```
 51 | 
 52 | 
 53 | ### In Browser
 54 | For directly use in browser, download the pre-bundled script at `/bundle/index.js` 
 55 | and embed with your Web page.
 56 | ```html
 57 | <!DOCTYPE html>
 58 | <html lang="en">
 59 | <head>
 60 |     <title>Raindrop Effect</title>
 61 |     <link rel="stylesheet" href="assets/css/style.css">
 62 |     <script src="./bundle/index.js"></script>
 63 | </head>
 64 | <body>
 65 |     <div id="root">
 66 |         <canvas id="canvas"></canvas>
 67 |     </div>
 68 |     <script src="./script.js"></script>
 69 | </body>
 70 | </html>
 71 | ```
 72 | `style.css`
 73 | ```css
 74 | body {
 75 |     margin: 0;
 76 | }
 77 | 
 78 | #root {
 79 |     position: absolute;
 80 |     width: 100vw;
 81 |     height: 100vh;
 82 | }
 83 | 
 84 | #canvas {
 85 |     width: 100%;
 86 |     height: 100%;
 87 | }
 88 | ```
 89 | `script.js`
 90 | ```javascript
 91 | 
 92 | const canvas = document.querySelector("#canvas");
 93 | 
 94 | // Set canvas size to fit the real size
 95 | const rect = canvas.getBoundingClientRect();
 96 | canvas.width = rect.width;
 97 | canvas.height = rect.height;
 98 | 
 99 | const raindropFx = new RaindropFX({
100 |     canvas: canvas,
101 |     background: "path/to/backgroundImage",
102 | });
103 | raindropFx.start();
104 | 
105 | // Resize the effect renderer
106 | window.onresize = () =>
107 | {
108 |     const rect = canvas.getBoundingClientRect();
109 |     raindropFx.resize(rect.width, rect.height);
110 | }
111 | 
112 | ```
113 | 
114 | 
115 | ## Configuration
116 | 
117 | All options except canvas element are optional at initialize.
118 | 
119 | ```javascript
120 | // Minimal startup script with a dark opacity background
121 | const raindropFx = new RaindropFX({
122 |     canvas: canvas,
123 | });
124 | ```
125 | 
126 | All options can be set dynamically by `raindropFx.options.xxx=xx` except renderer size and background image
127 | Example: 
128 | ```javascript
129 | // At initialize
130 | const raindropFx = new RaindropFX({
131 |     canvas: canvas,
132 |     spawnSize = [30, 80],
133 |     spawnInterval = [0.1, 0.2],
134 |     mistBlurStep: 5,
135 |     dropletsPerSecond: 1000,
136 | });
137 | 
138 | await raindropFx.start();
139 | 
140 | // Or set directly
141 | raindropFx.options.spawnSize = [30, 150];
142 | raindropFx.options.spawnInterval = [0.01, 0.05];
143 | raindropFx.options.mistBlurStep = 5;
144 | raindropFx.options.dropletsPerSecond = 1000;
145 | ```
146 | 
147 | ### Resize
148 | Call `raindropFx.resize` to properly reszie.
149 | ```javascript
150 | raindropFx.resize(someWidth, someHeight);
151 | ```
152 | 
153 | ### Background
154 | Background image must be set by calling to `raindropFx.setBackground`.
155 | 
156 | Background image source could be a url string, `HTMLCanvasElement`, `HTMLImageElement`, `ArrayBuffer` and other types that implemented interface `TexImageSource` and `ArrayBufferView`.
157 | ```javascript
158 | await raindropFx.setBackground("background image url");
159 | 
160 | // Set background image from HTMLImageElement
161 | const img = new Image();
162 | // ... 
163 | await raindropFx.setBackground(img);
164 | 
165 | // Set background image from another HTMLCanvasElement
166 | const anotherCanvas = document.querySelector("#another-canvas");
167 | await raindropFx.setBackground(anotherCanvas);
168 | ```
169 | 
170 | ### Raindrop Simulation Options
171 | 
172 | ```typescript
173 | interface SimulationOptions
174 | {
175 |     spawnInterval: [number, number],
176 |     /**
177 |      * Random size range when spawn a new raindrop
178 |      */
179 |     spawnSize: [number, number],
180 |     /**
181 |      * Maximal amount of spawned raindrops.
182 |      * Recommend less than 2000
183 |      */
184 |     spawnLimit: number,
185 |     /**
186 |      * Recommend in range (0..1), other value should be ok.
187 |      */
188 |     slipRate: number,
189 |     /**
190 |      * Describe how often a raindrop change its motion state
191 |      */
192 |     motionInterval: [number, number],
193 |     /**
194 |      * Random velocity x relative to velocity y. 
195 |      * Recommend in range (0..0.1)
196 |      */
197 |     xShifting: [number, number],
198 |     /**
199 |      * Relative size for collision check. 
200 |      * Recommend in range (0.6..1.2)
201 |      */
202 |     colliderSize: number,
203 |     /**
204 |      * Mass density of the slipping trail raindrop. 
205 |      * Recommend in range (0.1..0.3)
206 |      * 
207 |      * A large value cause a raindrop quickly lose its size during slipping.
208 |      */
209 |     trailDropDensity: number,
210 |     /**
211 |      * Random size range of slipping trail drop. 
212 |      * Recommend in range (0.3..0.5)
213 |      */
214 |     trailDropSize: [number, number],
215 |     /**
216 |      * Random distance range between two slipping trail drop. 
217 |      * Recommend in range (20..40)
218 |      */
219 |     trailDistance: [number, number],
220 |     /**
221 |      * Vertical spread of a new spawned slipping trail drop. 
222 |      * Recommend in range (0.4..0.6)
223 |      */
224 |     trailSpread: number,
225 |     /**
226 |      * Spread rate when a new spawned raindrop hit the screen. 
227 |      * Recommend in range (0.4..0.7)
228 |      */
229 |     initialSpread: number,
230 |     /**
231 |      * Spread shrink rate per seconds. 
232 |      * Recommend in range (0.01..0.02)
233 |      */
234 |     shrinkRate: number,
235 |     /**
236 |      * Spread rate by velocity Y. 
237 |      * Recommend in range (0.2..0.4)
238 |      * 
239 |      * Raindrop with higher fall speed looks more narrow.
240 |      */
241 |     velocitySpread: number,
242 |     /**
243 |      * Mass lose per second. 
244 |      * Recommend in range (10..30)
245 |      */
246 |     evaporate: number,
247 |     /**
248 |      * Gravity acceleration in pixels/s. 
249 |      * Recommend 2400
250 |      */
251 |     gravity: number,
252 | }
253 | ```
254 | 
255 | ### Rendering Options
256 | ```typescript
257 | interface RenderingOptions
258 | {
259 |     /**
260 |      * Background blur steps used for background & raindrop refract image.
261 |      * Value should be integer from 0 to log2(backgroundSize).
262 |      * Recommend 3 or 4
263 |      */
264 |     backgroundBlurSteps: number,
265 |     /**
266 |      * WrapMode for background texture used during sampling raindrop refrection.
267 |      */
268 |     backgroundWrapMode: "clamp" | "repeat" | "mirror";
269 |     /**
270 |      * Enable blurry mist effect
271 |      */
272 |     mist: boolean,
273 |     /**
274 |      * [r, g, b, a] mist color, each component in range (0..1). 
275 |      * The alpha is used for whole mist layer.
276 |      * Recommend [0.01, 0.01, 0.01, 1]
277 |      */
278 |     mistColor: [number, number, number, number],
279 |     /**
280 |      * Describe how long takes mist alpha from 0 to 1
281 |      */
282 |     mistTime: number,
283 |     /**
284 |      * Background blur steps used for mist.
285 |      * Value should be integer from 0 to log2(backgroundSize).
286 |      * Recommended value = backgroundBlurSteps + 1
287 |      */
288 |     mistBlurStep: number,
289 |     /**
290 |      * Tiny droplet spawn rate.
291 |      */
292 |     dropletsPerSeconds: number,
293 |     /**
294 |      * Random size range of tiny drplets.
295 |      * Recommend [10, 30]
296 |      */
297 |     dropletSize: [number, number],
298 |     /**
299 |      * Smooth range [a, b] of raindrop edge.
300 |      * Recommend [0.96, 1.0]
301 |      * 
302 |      * Larger range of (b - a) have smoother edge.
303 |      * 
304 |      * Lower value b makes raindrop larger with a distort edge
305 |      */
306 |     smoothRaindrop: [number, number],
307 |     /**
308 |      * Refract uv scale of minimal raindrop.
309 |      * Recommend in range (0.2, 0.6)
310 |      */
311 |     refractBase: number,
312 |     /**
313 |      * Refract uv scaled by raindrop size.
314 |      * Rocommend in range (0.4, 0.8)
315 |      */
316 |     refractScale: number,
317 |     /**
318 |      * Describe how raindrops are composed.
319 |      * 
320 |      * - `smoother` compose raindrops normal with 'exclusion' blend mode
321 |      * 
322 |      * - `harder` compose raindrops normal with 'normal' blend mode
323 |      */
324 |     raindropCompose: "smoother" | "harder"
325 |     /**
326 |      * Screen space (0..1) light direction or position.
327 |      * Recommend [-1, 1, 2, 0]
328 |      * 
329 |      * - Use [x, y, z, 0] to indicate a direction
330 |      * 
331 |      * - Use [x, y, z, 1] to indicate a position
332 |      */
333 |     raindropLightPos: [number, number, number, number],
334 |     /**
335 |      * Lambertian diffuse lighting Color.
336 |      * Recommend [0.3, 0.3, 0.3]
337 |      */
338 |     raindropDiffuseLight: [number, number, number],
339 |     /**
340 |      * Higher value makes more shadow.
341 |      * Recommend in range (0.6..0.8)
342 |      */
343 |     raindropShadowOffset: number,
344 |     /**
345 |      * Similar to `smoothRaindrop`. Used to erase droplets & mist.
346 |      * Recommended value [0.93, 1.0]
347 |      */
348 |     raindropEraserSize: [number, number],
349 |     /**
350 |      * Specular light clor.
351 |      * Recommend disable it with [0, 0, 0] :)
352 |      */
353 |     raindropSpecularLight: [number, number, number],
354 |     /**
355 |      * Blinn-Phong exponent representing shininess.
356 |      * Value from 0 to 1024 is ok
357 |      */
358 |     raindropSpecularShininess: number,
359 |     /**
360 |      * Will apply to calculate screen space normal for lighting.
361 |      * Larger value makes raindrops looks more flat.
362 |      * Recommend in range (0.3..1)
363 |      */
364 |     raindropLightBump: number,
365 | }
366 | ```
367 | 
368 | ## Performance
369 | - On Windows Chrome 88. It takes about 6ms to update each frame with 2000 raindrops.
370 | 
371 | - On Android (Mi 10) Chrome 87. It takes about 6.5ms to update each frame with 2000 raindrops.
372 | 
373 | By default settins on a 1920x1080 screen, there are up to 600 raindrops on the screen, which taks 2~3ms to update each frame.
374 | 


--------------------------------------------------------------------------------
/src/renderer.ts:
--------------------------------------------------------------------------------
  1 | import
  2 | {
  3 |     Blending, Color, DepthTest, mat4, MaterialFromShader, MeshBuilder, quat, RenderBuffer,
  4 |     GLArrayBuffer, RenderTexture, Shader, shaderProp, SimpleTexturedMaterial, Texture, Texture2D, TextureData,
  5 |     TextureFormat, TextureImporter, Utils, vec2, vec4, WrapMode, ZograRenderer, FrameBuffer, BufferStructure, DefaultVertexData, Mesh
  6 | } from "zogra-renderer";
  7 | import raindropTexture from "../assets/img/raindrop.png";
  8 | import { BlurRenderer } from "./blur";
  9 | import { RainDrop } from "./raindrop";
 10 | import { randomRange } from "./random";
 11 | import defaultFrag from "./shader/2d-frag.glsl";
 12 | import defaultVert from "./shader/2d-vert.glsl";
 13 | import mistBackground from "./shader/bg-mist.glsl";
 14 | import composeFrag from "./shader/compose.glsl";
 15 | import dropletVert from "./shader/droplet-vert.glsl";
 16 | import dropletFrag from "./shader/droplet.glsl";
 17 | import raindropErase from "./shader/erase.glsl";
 18 | import raindropFrag from "./shader/raindrop-frag.glsl";
 19 | import raindropVert from "./shader/raindrop-vert.glsl";
 20 | import { Time } from "./utils";
 21 | 
 22 | 
 23 | const RaindropInstanceStruct = BufferStructure({
 24 |     size: "float",
 25 |     modelMatrix: "mat4"
 26 | });
 27 | 
 28 | class RaindropMaterial extends MaterialFromShader(new Shader(raindropVert, raindropFrag, {
 29 |     blendRGB: [Blending.OneMinusDstColor, Blending.OneMinusSrcColor],
 30 |     depth: DepthTest.Disable,
 31 |     zWrite: false,
 32 |     attributes: {
 33 |         size: "aSize",
 34 |         modelMatrix: "aModelMatrix",
 35 |     }
 36 | }))
 37 | {
 38 |     @shaderProp("uMainTex", "tex2d")
 39 |     texture: Texture | null = null;
 40 | 
 41 |     @shaderProp("uSize", "float")
 42 |     size: number = 0;
 43 | }
 44 | 
 45 | class DropletMaterial extends MaterialFromShader(new Shader(dropletVert, dropletFrag, {
 46 |     vertexStructure: DefaultVertexData,
 47 |     blendRGB: [Blending.OneMinusDstColor, Blending.OneMinusSrcColor],
 48 |     depth: DepthTest.Disable,
 49 |     zWrite: false,
 50 |     attributes: {
 51 |         size: "aSize",
 52 |         modelMatrix: "aModelMatrix",
 53 |     }
 54 | }))
 55 | {
 56 |     @shaderProp("uMainTex", "tex2d")
 57 |     texture: Texture | null = null;
 58 | 
 59 |     @shaderProp("uSpawnRect", "vec4")
 60 |     spawnRect: vec4 = vec4(0, 0, 1, 1);
 61 | 
 62 |     @shaderProp("uSizeRange", "vec2")
 63 |     sizeRange: vec2 = vec2(10, 20);
 64 | 
 65 |     @shaderProp("uSeed", "float")
 66 |     seed: number = 1;
 67 | }
 68 | 
 69 | class FinalCompose extends MaterialFromShader(new Shader(defaultVert, composeFrag, {
 70 |     blend: [Blending.SrcAlpha, Blending.OneMinusSrcAlpha],
 71 |     depth: DepthTest.Disable,
 72 |     zWrite: false
 73 | }))
 74 | {
 75 |     @shaderProp("uMainTex", "tex2d")
 76 |     background: Texture | null = null;
 77 | 
 78 |     @shaderProp("uBackgroundSize", "vec4")
 79 |     backgroundSize: vec4 = vec4.one();
 80 | 
 81 |     @shaderProp("uRaindropTex", "tex2d")
 82 |     raindropTex: Texture | null = null;
 83 | 
 84 |     @shaderProp("uDropletTex", "tex2d")
 85 |     dropletTex: Texture | null = null;
 86 | 
 87 |     @shaderProp("uMistTex", "tex2d")
 88 |     mistTex: Texture | null = null;
 89 | 
 90 |     @shaderProp("uSmoothRaindrop", "vec2")
 91 |     smoothRaindrop: vec2 = vec2(0.95, 1.0);
 92 | 
 93 |     @shaderProp("uRefractParams", "vec2")
 94 |     refractParams: vec2 = vec2(0.4, 0.6);
 95 | 
 96 |     @shaderProp("uLightPos", "vec4")
 97 |     lightPos: vec4 = vec4(.5, .5, 2, 1);
 98 | 
 99 |     @shaderProp("uDiffuseColor", "color")
100 |     diffuseLight: Color = new Color(0.3, 0.3, 0.3, 0.8);
101 | 
102 |     @shaderProp("uSpecularParams", "vec4")
103 |     specularParams: vec4 = vec4(1, 1, 1, 32);
104 | 
105 |     @shaderProp("uBump", "float")
106 |     bump: number = 1;
107 | }
108 | 
109 | class RaindropErase extends SimpleTexturedMaterial(new Shader(defaultVert, raindropErase, {
110 |     // blend: [Blending.Zero, Blending.OneMinusSrcAlpha],
111 |     blendRGB: [Blending.Zero, Blending.OneMinusSrcAlpha],
112 |     blendAlpha: [Blending.Zero, Blending.OneMinusSrcAlpha],
113 | }))
114 | {
115 |     @shaderProp("uEraserSmooth", "vec2")
116 |     eraserSize: vec2 = vec2(0.93, 1.0);
117 | }
118 | 
119 | const MistAccumulate = SimpleTexturedMaterial(new Shader(defaultVert, defaultFrag, {
120 |     blend: [Blending.One, Blending.One]
121 | }));
122 | 
123 | class MistBackgroundCompose extends SimpleTexturedMaterial(new Shader(defaultVert, mistBackground, {
124 |     blend: [Blending.SrcAlpha, Blending.OneMinusSrcAlpha]
125 | }))
126 | {
127 |     @shaderProp("uMistColor", "color")
128 |     mistColor: Color = new Color(0.01, 0.01, 0.01, 1);
129 | 
130 |     @shaderProp("uMistTex", "tex2d")
131 |     mistTex: Texture | null = null;
132 | }
133 | 
134 | 
135 | export interface RenderOptions
136 | {
137 |     canvas: HTMLCanvasElement;
138 |     width: number;
139 |     height: number;
140 |     background: TextureData | string;
141 |     /**
142 |      * Background blur steps used for background & raindrop refract image.
143 |      * Value should be integer from 0 to log2(backgroundSize).
144 |      * Recommend 3 or 4
145 |      */
146 |     backgroundBlurSteps: number;
147 |     /**
148 |      * WrapMode for background texture used during sampling raindrop refrection.
149 |      */
150 |     backgroundWrapMode: "clamp" | "repeat" | "mirror";
151 |     /**
152 |      * Enable blurry mist effect
153 |      */
154 |     mist: boolean;
155 |     /**
156 |      * [r, g, b, a] mist color, each component in range (0..1). 
157 |      * The alpha is used for whole mist layer.
158 |      * Recommend [0.01, 0.01, 0.01, 1]
159 |      */
160 |     mistColor: [number, number, number, number];
161 |     /**
162 |      * Describe how long takes mist alpha from 0 to 1
163 |      */
164 |     mistTime: number;
165 |     /**
166 |      * Background blur steps used for mist.
167 |      * Value should be integer from 0 to log2(backgroundSize).
168 |      * Recommended value = backgroundBlurSteps + 1
169 |      */
170 |     mistBlurStep: number;
171 |     /**
172 |      * Tiny droplet spawn rate.
173 |      */
174 |     dropletsPerSeconds: number;
175 |     /**
176 |      * Random size range of tiny drplets.
177 |      * Recommend [10, 30]
178 |      */
179 |     dropletSize: [number, number];
180 |     /**
181 |      * Smooth range [a, b] of raindrop edge.
182 |      * Recommend [0.96, 1.0]
183 |      * 
184 |      * Larger range of (b - a) have smoother edge.
185 |      * 
186 |      * Lower value b makes raindrop larger with a distort edge
187 |      */
188 |     smoothRaindrop: [number, number];
189 |     /**
190 |      * Refract uv scale of minimal raindrop.
191 |      * Recommend in range (0.2, 0.6)
192 |      */
193 |     refractBase: number,
194 |     /**
195 |      * Refract uv scaled by raindrop size.
196 |      * Rocommend in range (0.4, 0.8)
197 |      */
198 |     refractScale: number,
199 |     /**
200 |      * Describe how raindrops are composed.
201 |      * 
202 |      * - `smoother` compose raindrops normal with 'exclusion' blend mode
203 |      * 
204 |      * - `harder` compose raindrops normal with 'normal' blend mode
205 |      */
206 |     raindropCompose: "smoother" | "harder"
207 |     /**
208 |      * Screen space (0..1) light direction or position.
209 |      * Recommend [-1, 1, 2, 0]
210 |      * 
211 |      * - Use [x, y, z, 0] to indicate a direction
212 |      * 
213 |      * - Use [x, y, z, 1] to indicate a position
214 |      */
215 |     raindropLightPos: [number, number, number, number];
216 |     /**
217 |      * Lambertian diffuse lighting Color.
218 |      * Recommend [0.3, 0.3, 0.3]
219 |      */
220 |     raindropDiffuseLight: [number, number, number];
221 |     /**
222 |      * Higher value makes more shadow.
223 |      * Recommend in range (0.6..0.8)
224 |      */
225 |     raindropShadowOffset: number;
226 |     /**
227 |      * Similar to `smoothRaindrop`. Used to erase droplets & mist.
228 |      * Recommended value [0.93, 1.0]
229 |      */
230 |     raindropEraserSize: [number, number];
231 |     /**
232 |      * Specular light clor.
233 |      * Recommend disable it with [0, 0, 0] :)
234 |      */
235 |     raindropSpecularLight: [number, number, number];
236 |     /**
237 |      * Blinn-Phong exponent representing shininess.
238 |      * Value from 0 to 1024 is ok
239 |      */
240 |     raindropSpecularShininess: number;
241 |     /**
242 |      * Will apply to calculate screen space normal for lighting.
243 |      * Larger value makes raindrops looks more flat.
244 |      * Recommend in range (0.3..1)
245 |      */
246 |     raindropLightBump: number,
247 | 
248 | }
249 | 
250 | export class RaindropRenderer
251 | {
252 |     renderer: ZograRenderer;
253 |     options: RenderOptions;
254 | 
255 |     private raindropTex: Texture2D = null as any;
256 |     private originalBackground: Texture2D = null as any;
257 |     private background: RenderTexture;
258 |     private raindropComposeTex: RenderTexture;
259 |     private dropletTexture: RenderTexture;
260 |     private mistTexture: RenderTexture;
261 |     private blurryBackground: RenderTexture;
262 |     private mistBackground: RenderTexture;
263 |     private blurRenderer: BlurRenderer;
264 | 
265 |     private matrlCompose = new FinalCompose();
266 |     private matrlRaindrop = new RaindropMaterial();
267 |     private matrlDroplet = new DropletMaterial();
268 |     private matrlErase = new RaindropErase();
269 |     private matrlMist = new MistAccumulate();
270 |     private matrlMistCompose = new MistBackgroundCompose();
271 | 
272 |     private projectionMatrix: mat4;
273 |     private mesh: Mesh;
274 | 
275 |     private raindropBuffer = new GLArrayBuffer(RaindropInstanceStruct, 3000);
276 | 
277 |     // deubg: DebugLayerRenderer = new DebugLayerRenderer();
278 | 
279 |     constructor(options: RenderOptions)
280 |     {
281 |         this.renderer = new ZograRenderer(options.canvas);
282 |         this.renderer.gl.getExtension("EXT_color_buffer_float");
283 |         this.options = options;
284 | 
285 |         this.projectionMatrix = mat4.ortho(0, options.width, 0, options.height, 1, -1);
286 |         this.raindropComposeTex = new RenderTexture(options.width, options.height, false);
287 |         this.background = new RenderTexture(options.width, options.height, false);
288 |         this.dropletTexture = new RenderTexture(options.width, options.height, false);
289 |         this.blurryBackground = new RenderTexture(options.width, options.height, false);
290 |         this.mistBackground = new RenderTexture(options.width, options.height, false);
291 |         this.mistTexture = new RenderTexture(options.width, options.height, false, TextureFormat.R16F);
292 | 
293 |         this.blurRenderer = new BlurRenderer(this.renderer);
294 |         this.mesh = MeshBuilder.quad();
295 | 
296 |         this.renderer.setViewProjection(mat4.identity(), this.projectionMatrix);
297 |     }
298 |     async loadAssets()
299 |     {
300 |         // this.renderer.blit(null, RenderTarget.CanvasTarget);
301 |         this.raindropTex = await TextureImporter
302 |             .buffer(raindropTexture)
303 |             .then(t=>t.tex2d());
304 | 
305 |         this.matrlRaindrop.texture = this.raindropTex;
306 |         this.matrlDroplet.texture = this.raindropTex;
307 | 
308 |         await this.reloadBackground();
309 | 
310 |     }
311 |     async reloadBackground()
312 |     {
313 |         this.originalBackground?.destroy();
314 |         if (typeof (this.options.background) === "string")
315 |         {
316 |             this.originalBackground = await TextureImporter
317 |                 .url(this.options.background)
318 |                 .then(t => t.tex2d({ wrapMpde: WrapMode.Clamp }));
319 | 
320 |             this.originalBackground.wrapMode = WrapMode.Clamp;
321 |             this.originalBackground.updateParameters();
322 |         }
323 |         else
324 |         {
325 |             this.originalBackground = new Texture2D();
326 |             this.originalBackground.setData(this.options.background);
327 |             this.originalBackground.updateParameters();
328 |         }
329 | 
330 |         const [srcRect, dstRect] = Utils.imageResize(this.originalBackground.size, this.background.size, Utils.ImageSizing.Cover);
331 |         this.renderer.blit(this.originalBackground, this.background, this.renderer.assets.materials.blitCopy, srcRect, dstRect);
332 |         this.background.generateMipmap();
333 | 
334 |         this.blurBackground();
335 | 
336 | 
337 |         const wrapMode = {
338 |             "clamp": WrapMode.Clamp,
339 |             "mirror": WrapMode.Mirror,
340 |             "repeat": WrapMode.Repeat,
341 |         };
342 |         this.background.wrapMode = this.blurryBackground.wrapMode = wrapMode[this.options.backgroundWrapMode];
343 |         this.background.updateParameters();
344 |         this.blurryBackground.updateParameters();
345 |     }
346 |     resize()
347 |     {
348 |         this.renderer.setSize(this.options.width, this.options.height);
349 |         this.projectionMatrix = mat4.ortho(0, this.options.width, 0, this.options.height, 1, -1);
350 |         this.renderer.setViewProjection(mat4.identity(), this.projectionMatrix);
351 | 
352 |         this.raindropComposeTex.resize(this.options.width, this.options.height);
353 |         this.background.resize(this.options.width, this.options.height);
354 |         this.dropletTexture.resize(this.options.width, this.options.height);
355 |         this.blurryBackground.resize(this.options.width, this.options.height);
356 |         this.mistBackground.resize(this.options.width, this.options.height);
357 |         this.mistTexture.resize(this.options.width, this.options.height);
358 | 
359 |         const [srcRect, dstRect] = Utils.imageResize(this.originalBackground.size, this.background.size, Utils.ImageSizing.Cover);
360 |         this.renderer.blit(this.originalBackground, this.background, this.renderer.assets.materials.blitCopy, srcRect, dstRect);
361 |         this.background.generateMipmap();
362 | 
363 |         this.blurBackground();
364 |     }
365 |     render(raindrops: RainDrop[], time: Time)
366 |     {
367 |         this.drawDroplet(time);
368 |         this.drawMist(time.dt);
369 |         this.drawRaindrops(raindrops);
370 | 
371 |         this.renderer.setFramebuffer(FrameBuffer.CanvasBuffer);
372 |         this.renderer.clear(Color.black);
373 | 
374 |         this.drawBackground();
375 | 
376 |         this.matrlCompose.background = this.blurryBackground;
377 |         this.matrlCompose.backgroundSize = vec4(this.options.width, this.options.height, 1 / this.options.width, 1 / this.options.height);
378 |         this.matrlCompose.raindropTex = this.raindropComposeTex;
379 |         this.matrlCompose.dropletTex = this.dropletTexture;
380 |         this.matrlCompose.mistTex = this.mistTexture;
381 |         this.matrlCompose.smoothRaindrop = vec2(...this.options.smoothRaindrop);
382 |         this.matrlCompose.refractParams = vec2(this.options.refractBase, this.options.refractScale);
383 |         this.matrlCompose.lightPos = vec4(...this.options.raindropLightPos);
384 |         this.matrlCompose.diffuseLight = new Color(...this.options.raindropDiffuseLight, this.options.raindropShadowOffset);
385 |         this.matrlCompose.specularParams = vec4(...this.options.raindropSpecularLight, this.options.raindropSpecularShininess);
386 |         this.matrlCompose.bump = this.options.raindropLightBump;
387 | 
388 |         this.renderer.blit(null, FrameBuffer.CanvasBuffer, this.matrlCompose);
389 |     }
390 | 
391 |     private blurBackground()
392 |     {
393 |         // Blur background with N steps downsample + N steps upsample
394 |         if (!this.options.mist)
395 |         {
396 |             this.blurRenderer.blur(this.background, this.options.backgroundBlurSteps, this.blurryBackground);
397 |         }
398 |         else
399 |         {
400 |             // Downsample to max steps
401 |             // Then upsample from a larger texture before smaller texture to avoid override
402 |             this.blurRenderer.init(this.background);
403 |             this.blurRenderer.downSample(this.background, Math.max(this.options.backgroundBlurSteps, this.options.mistBlurStep));
404 | 
405 |             if (this.options.backgroundBlurSteps === this.options.mistBlurStep)
406 |             {
407 |                 this.blurRenderer.upSample(this.options.backgroundBlurSteps, this.blurryBackground);
408 |                 this.renderer.blit(this.blurryBackground, this.mistBackground);
409 |             }
410 |             else if (this.options.mistBlurStep > this.options.backgroundBlurSteps)
411 |             {
412 |                 this.blurRenderer.upSample(this.options.backgroundBlurSteps, this.blurryBackground);
413 |                 this.blurRenderer.upSample(this.options.mistBlurStep, this.mistBackground);
414 |             }
415 |             else
416 |             {
417 |                 this.blurRenderer.upSample(this.options.mistBlurStep, this.mistBackground);
418 |                 this.blurRenderer.upSample(this.options.backgroundBlurSteps, this.blurryBackground);
419 |             }
420 |         }
421 |     }
422 | 
423 |     private drawMist(dt: number)
424 |     {
425 |         if (!this.options.mist)
426 |             return;
427 |         this.matrlMist.color.r = dt / this.options.mistTime;
428 |         this.renderer.blit(this.renderer.assets.textures.default, this.mistTexture, this.matrlMist);
429 |     }
430 | 
431 |     private drawBackground()
432 |     {
433 |         this.renderer.blit(this.blurryBackground, FrameBuffer.CanvasBuffer);
434 | 
435 |         if (this.options.mist)
436 |         {
437 |             this.matrlMistCompose.mistTex = this.mistTexture;
438 |             this.matrlMistCompose.texture = this.mistBackground;
439 |             this.matrlMistCompose.mistColor = new Color(...this.options.mistColor);
440 |             this.renderer.blit(this.mistBackground, FrameBuffer.CanvasBuffer, this.matrlMistCompose);
441 |         }
442 | 
443 |     }
444 | 
445 |     private drawRaindrops(raindrops: RainDrop[])
446 |     {
447 |         if (raindrops.length > this.raindropBuffer.length)
448 |             this.raindropBuffer.resize(this.raindropBuffer.length * 2);
449 |         this.renderer.setFramebuffer(this.raindropComposeTex);
450 |         this.renderer.clear(Color.black.transparent());
451 |         for (let i = 0; i < raindrops.length; i++)
452 |         {
453 |             const raindrop = raindrops[i];
454 |             const model = mat4.rts(quat.identity(), raindrop.pos.toVec3(), raindrop.size.toVec3(1));
455 |             this.raindropBuffer[i].modelMatrix.set(model);
456 |             this.raindropBuffer[i].size[0] = raindrop.size.x / 100;
457 |         }
458 |         this.raindropBuffer.markDirty();
459 |         switch (this.options.raindropCompose)
460 |         {
461 |             case "smoother":
462 |                 this.matrlRaindrop.setPipelineStateOverride({
463 |                     blendRGB: [Blending.OneMinusDstColor, Blending.OneMinusSrcColor]
464 |                 });
465 |                 this.matrlDroplet.setPipelineStateOverride({
466 |                     blendRGB: [Blending.OneMinusDstColor, Blending.OneMinusSrcColor],
467 |                 });
468 |                 break;
469 |             case "harder":
470 |                 this.matrlRaindrop.setPipelineStateOverride({
471 |                     blendRGB: [Blending.One, Blending.OneMinusSrcAlpha]
472 |                 });
473 |                 this.matrlDroplet.setPipelineStateOverride({
474 |                     blendRGB: [Blending.One, Blending.OneMinusSrcAlpha],
475 |                 });
476 |                 break;
477 |         }
478 |         this.renderer.drawMeshInstance(this.mesh, this.raindropBuffer, this.matrlRaindrop, raindrops.length);
479 |         this.matrlErase.eraserSize = vec2(...this.options.raindropEraserSize);
480 |         this.renderer.blit(this.raindropComposeTex, this.dropletTexture, this.matrlErase);
481 |         if (this.options.mist)
482 |             this.renderer.blit(this.raindropComposeTex, this.mistTexture, this.matrlErase);
483 |     }
484 | 
485 |     private drawDroplet(time: Time)
486 |     {
487 |         this.renderer.setFramebuffer(this.dropletTexture);
488 |         const count = this.options.dropletsPerSeconds * time.dt;
489 |         this.matrlDroplet.spawnRect = vec4(0, 0, this.options.width, this.options.height);
490 |         this.matrlDroplet.sizeRange = vec2(...this.options.dropletSize);
491 |         this.matrlDroplet.seed = randomRange(0, 133);
492 |         this.renderer.drawMeshProceduralInstance(this.mesh, this.matrlDroplet, count);
493 |     }
494 | }


--------------------------------------------------------------------------------