SardineFish · SardineFish · May 5, 2021
diff --git a/bundle/index.js b/bundle/index.js
diff --git a/bundle/index.js.map b/bundle/index.js.map
diff --git a/dist/index.d.ts.map b/dist/index.d.ts.map
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/renderer.d.ts b/dist/renderer.d.ts
@@ -6,6 +6,11 @@ export interface RenderOptions {
     width: number;
     height: number;
     background: TextureData | string;
+    /**
+     * Render only raindrops layer on transparent background.
+     * Useful for custom background blending with HTML elements.
+     */
+    raindropLayerOnly: boolean;
     /**
      * Background blur steps used for background & raindrop refract image.
      * Value should be integer from 0 to log2(backgroundSize).

diff --git a/dist/renderer.d.ts.map b/dist/renderer.d.ts.map
diff --git a/examples/detached-background/index.html b/examples/detached-background/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Raindrop Effect</title>
+    <link rel="stylesheet" href="./style.css">
+    <script src="/bundle/index.js"></script>
+</head>
+
+<body>
+    <div id="root">
+        <canvas id="canvas"></canvas>
+        <div id="background"></div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/examples/detached-background/script.js b/examples/detached-background/script.js
@@ -0,0 +1,30 @@
+/**
+ * @typedef {import("../../bundle/index")}
+ */
+
+const canvas = document.querySelector("#canvas");
+const rect = canvas.getBoundingClientRect();
+canvas.width = rect.width;
+canvas.height = rect.height;
+
+const raindropFx = new RaindropFX({
+    canvas: canvas,
+    background: "/assets/img/84765992_p0.jpg",
+    raindropLayerOnly: true,
+});
+
+window.onresize = () =>
+{
+    const rect = canvas.getBoundingClientRect();
+    raindropFx.resize(rect.width, rect.height);
+}
+window.addEventListener("mousemove", (ev) =>
+{
+    const offsetX = ev.clientX - window.innerWidth / 2;
+    const offsetY = ev.clientY - window.innerHeight / 2;
+    const background = document.querySelector("#background");
+    background.style.transform = `translate(${offsetX * 0.02}px, ${offsetY * 0.02}px)`;
+
+})
+
+raindropFx.start();
diff --git a/examples/detached-background/style.css b/examples/detached-background/style.css
@@ -0,0 +1,50 @@
+body {
+    margin: 0;
+
+    background-position: 0px 0px,
+        16px 16px;
+    background-size: 32px 32px;
+    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
+        linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
+}
+
+#root {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: grey;
+    overflow: hidden;
+}
+
+#canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+}
+
+#background {
+    background-image: url("/assets/img/84765992_p0.jpg");
+    background-size: cover;
+    background-position: center;
+    width: 110vw;
+    height: 110vh;
+    position: absolute;
+    left: -5vw;
+    top: -5vh;
+    z-index: 0;
+    filter: blur(16px);
+}
+
+#loading {
+    position: absolute;
+    z-index: -1;
+    font-family: 'Segoe UI', Roboto, Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 2em;
+    color: gray;
+}
diff --git a/src/index.ts b/src/index.ts
@@ -43,6 +43,7 @@ class RaindropFX
             xShifting: [0, 0.1],
 
             // Rendering options
+            raindropLayerOnly: false,
             backgroundBlurSteps: 3,
             mist: true,
             mistColor: [0.01, 0.01, 0.01, 1],

diff --git a/src/renderer.ts b/src/renderer.ts
@@ -132,6 +132,11 @@ export interface RenderOptions
     width: number;
     height: number;
     background: TextureData | string;
+    /**
+     * Render only raindrops layer on transparent background.
+     * Useful for custom background blending with HTML elements.
+     */
+    raindropLayerOnly: boolean;
     /**
      * Background blur steps used for background & raindrop refract image.
      * Value should be integer from 0 to log2(backgroundSize).
@@ -349,9 +354,21 @@ export class RaindropRenderer
         this.drawRaindrops(raindrops);
 
         this.renderer.setRenderTarget(RenderTarget.CanvasTarget);
-        this.renderer.clear(Color.black);
+        this.renderer.clear(Color.black.transparent());
 
-        this.drawBackground();
+        if (this.options.raindropLayerOnly)
+        {
+            if (this.options.mist)
+            {
+                this.matrlMistCompose.mistTex = this.mistTexture;
+                this.matrlMistCompose.texture = null;
+                this.matrlMistCompose.mistColor = new Color(...this.options.mistColor);
+                this.matrlMistCompose.mistColor.a = 0.1;
+                this.renderer.blit(this.mistBackground, RenderTarget.CanvasTarget, this.matrlMistCompose);
+            }
+        }
+        else
+            this.drawBackground();
 
         this.matrlCompose.background = this.blurryBackground;
         this.matrlCompose.backgroundSize = vec4(this.options.width, this.options.height, 1 / this.options.width, 1 / this.options.height);