Fix #1214 Closes #1215 tiles-adapter: remove black bar on loading

mistic100 · Jan 25, 2024 · b8396ad · b8396ad
1 parent 71204a8
commit b8396ad
Showing 1 changed file with 38 additions and 1 deletion.
diff --git a/packages/core/src/adapters/EquirectangularAdapter.ts b/packages/core/src/adapters/EquirectangularAdapter.ts
@@ -271,7 +271,44 @@ export class EquirectangularAdapter extends AbstractAdapter<string, Texture, Pan
             }
 
             if (this.config.blur) {
-                ctx.filter = `blur(${buffer.width / 2048}px)`;
+                const blurSize = buffer.width / 2048;
+                const margin = Math.ceil(blurSize * 2);
+
+                // copy edges before applying the blur
+                if (resizedPanoData.croppedWidth === buffer.width) {
+                    ctx.drawImage(
+                        img,
+                        0, 0,
+                        margin / ratio, img.height,
+                        0, resizedPanoData.croppedY,
+                        margin, resizedPanoData.croppedHeight
+                    );
+                    ctx.drawImage(
+                        img,
+                        img.width - margin / ratio, 0,
+                        margin / ratio, img.height,
+                        buffer.width - margin, resizedPanoData.croppedY,
+                        margin, resizedPanoData.croppedHeight
+                    );
+                }
+                if (resizedPanoData.croppedHeight === buffer.height) {
+                    ctx.drawImage(
+                        img,
+                        0, 0,
+                        1, 1,
+                        resizedPanoData.croppedX, 0,
+                        resizedPanoData.croppedWidth, margin
+                    );
+                    ctx.drawImage(
+                        img,
+                        0, img.height - 1,
+                        1, 1,
+                        resizedPanoData.croppedX, buffer.height - margin,
+                        resizedPanoData.croppedWidth, margin
+                    );
+                }
+
+                ctx.filter = `blur(${blurSize }px)`;
             }
 
             ctx.drawImage(