Fix black screen with large textures on Firefox

mistic100 · Oct 19, 2024 · 2928053 · 2928053
1 parent 7fc1a03
commit 2928053
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 18 deletions.
diff --git a/packages/core/src/adapters/EquirectangularAdapter.ts b/packages/core/src/adapters/EquirectangularAdapter.ts
@@ -236,9 +236,7 @@ export class EquirectangularAdapter extends AbstractAdapter<string | Equirectang
         if (this.config.blur || img.width > SYSTEM.maxTextureWidth) {
             const ratio = Math.min(1, SYSTEM.maxCanvasWidth / img.width);
 
-            const buffer = document.createElement('canvas');
-            buffer.width = img.width * ratio;
-            buffer.height = img.height * ratio;
+            const buffer = new OffscreenCanvas(Math.floor(img.width * ratio), Math.floor(img.height * ratio));
 
             const ctx = buffer.getContext('2d');
 

diff --git a/packages/core/src/utils/psv.ts b/packages/core/src/utils/psv.ts
@@ -330,7 +330,7 @@ export function parseAngle(angle: string | number, zeroCenter = false, halfCircl
 /**
  * Creates a THREE texture from an image
  */
-export function createTexture(img: HTMLImageElement | HTMLCanvasElement, mimaps = false): Texture {
+export function createTexture(img: TexImageSource, mimaps = false): Texture {
     const texture = new Texture(img);
     texture.needsUpdate = true;
     texture.minFilter = mimaps ? LinearMipmapLinearFilter : LinearFilter;

diff --git a/packages/cubemap-adapter/src/CubemapAdapter.ts b/packages/cubemap-adapter/src/CubemapAdapter.ts
@@ -232,9 +232,7 @@ export class CubemapAdapter extends AbstractAdapter<CubemapPanorama, CubemapData
         if (this.config.blur || img.width > SYSTEM.maxTextureWidth) {
             const ratio = Math.min(1, SYSTEM.maxCanvasWidth / img.width);
 
-            const buffer = document.createElement('canvas');
-            buffer.width = img.width * ratio;
-            buffer.height = img.height * ratio;
+            const buffer = new OffscreenCanvas(Math.floor(img.width * ratio), Math.floor(img.height * ratio));
 
             const ctx = buffer.getContext('2d');
 
@@ -267,14 +265,12 @@ export class CubemapAdapter extends AbstractAdapter<CubemapPanorama, CubemapData
         }
 
         const ratio = Math.min(1, SYSTEM.maxCanvasWidth / img.height);
-        const tileWidth = img.height * ratio;
+        const tileWidth = Math.floor(img.height * ratio);
 
         const textures = {} as { [K in CubemapFaces]: Texture };
 
         for (let i = 0; i < 6; i++) {
-            const buffer = document.createElement('canvas');
-            buffer.width = tileWidth;
-            buffer.height = tileWidth;
+            const buffer = new OffscreenCanvas(tileWidth, tileWidth);
 
             const ctx = buffer.getContext('2d');
 
@@ -313,7 +309,7 @@ export class CubemapAdapter extends AbstractAdapter<CubemapPanorama, CubemapData
         }
 
         const ratio = Math.min(1, SYSTEM.maxCanvasWidth / (img.width / 4));
-        const tileWidth = (img.width / 4) * ratio;
+        const tileWidth = Math.floor((img.width / 4) * ratio);
 
         const pts = [
             [0, 1 / 3], // left
@@ -327,9 +323,7 @@ export class CubemapAdapter extends AbstractAdapter<CubemapPanorama, CubemapData
         const textures: Texture[] = [];
 
         for (let i = 0; i < 6; i++) {
-            const buffer = document.createElement('canvas');
-            buffer.width = tileWidth;
-            buffer.height = tileWidth;
+            const buffer = new OffscreenCanvas(tileWidth, tileWidth);
 
             const ctx = buffer.getContext('2d');
 

diff --git a/packages/shared/tiles-utils.ts b/packages/shared/tiles-utils.ts
@@ -35,9 +35,7 @@ export function getTileIndexByZoomLevel<T extends { zoomRange: [number, number]
  * @internal
  */
 export function buildErrorMaterial(): MeshBasicMaterial {
-    const canvas = document.createElement('canvas');
-    canvas.width = 512;
-    canvas.height = 512;
+    const canvas = new OffscreenCanvas(512, 512);
 
     const ctx = canvas.getContext('2d');