Allow rendering in WebWorkers

protectwise · Oct 3, 2023 · 18ae87c · 18ae87c
1 parent 55521de
commit 18ae87c
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/packages/troika-2d/src/HitTestContext.js b/packages/troika-2d/src/HitTestContext.js
@@ -6,8 +6,8 @@
  * whether an Object2DFacade is under the mouse cursor, by passing this as the context
  * to its render() method.
  */
-
-const hitTestContext = document.createElement('canvas').getContext('2d')
+const canvas = typeof document === 'undefined' ? new OffscreenCanvas() : document.createElement('canvas')
+const hitTestContext = canvas.getContext('2d')
 hitTestContext.save()
 
 /**

diff --git a/packages/troika-3d/src/facade/WorldTextureProvider.js b/packages/troika-3d/src/facade/WorldTextureProvider.js
@@ -76,7 +76,7 @@ export function makeWorldTextureProvider(WrappedFacadeClass) {
         }
         if (newWorldConfig) {
           this.worldTexture.dispose()
-          const canvas = document.createElement('canvas')
+          const canvas = typeof document === 'undefined' ? new OffscreenCanvas() : document.createElement('canvas')
           canvas.width = newWorldConfig.width
           canvas.height = newWorldConfig.height
           this.worldTexture = new CanvasTexture(canvas)

diff --git a/packages/troika-animation/src/Interpolators.js b/packages/troika-animation/src/Interpolators.js
@@ -50,7 +50,7 @@ const colorValueToNumber = (function() {
 
       // 2D canvas for evaluating string values
       if (!colorCanvas) {
-        colorCanvas = document.createElement('canvas')
+        colorCanvas = typeof document === 'undefined' ? new OffscreenCanvas() : document.createElement('canvas')
         colorCanvasCtx = colorCanvas.getContext('2d')
       }
 

diff --git a/packages/troika-three-text/src/TextBuilder.js b/packages/troika-three-text/src/TextBuilder.js
@@ -164,7 +164,7 @@ function getTextRenderInfo(args, callback) {
   const glyphsPerRow = (textureWidth / sdfGlyphSize * 4)
   let atlas = atlases[sdfGlyphSize]
   if (!atlas) {
-    const canvas = document.createElement('canvas')
+    const canvas = typeof document === 'undefined' ? new OffscreenCanvas() : document.createElement('canvas')
     canvas.width = textureWidth
     canvas.height = sdfGlyphSize * 256 / glyphsPerRow // start tall enough to fit 256 glyphs
     atlas = atlases[sdfGlyphSize] = {