@deck.gl/arcgis 9.4.0-alpha.1 → 9.4.0-alpha.2

package/dist/dist.dev.js

@@ -1478,7 +1478,7 @@ var __exports__ = (() => {
     setGLParameters(gl, GL_PARAMETER_DEFAULTS);
   }
   function isObjectEmpty(object) {
-    for (const key in object) {
+    for (const _key in object) {
       return false;
     }
     return true;
@@ -2191,6 +2191,7 @@ var __exports__ = (() => {
         // 'depth32float-stencil8' // GPUTextureFormat 'depth32float-stencil8'
         // optional WebGL features
         "compilation-status-async-webgl": "KHR_parallel_shader_compile",
+        "html-in-canvas": (gl) => (0, import_core5.isHTMLInCanvasSupported)() && typeof gl.texElementImage2D === "function",
         "polygon-mode-webgl": "WEBGL_polygon_mode",
         "provoking-vertex-webgl": "WEBGL_provoking_vertex",
         "shader-clip-cull-distance-webgl": "WEBGL_clip_cull_distance",
@@ -2246,7 +2247,7 @@ var __exports__ = (() => {
         /** Extract all WebGL features */
         getWebGLFeature(feature) {
           const featureInfo = WEBGL_FEATURES[feature];
-          const isSupported = typeof featureInfo === "string" ? Boolean(getWebGLExtension(this.gl, featureInfo, this.extensions)) : Boolean(featureInfo);
+          const isSupported = typeof featureInfo === "string" ? Boolean(getWebGLExtension(this.gl, featureInfo, this.extensions)) : typeof featureInfo === "function" ? featureInfo(this.gl) : Boolean(featureInfo);
           return isSupported;
         }
       };
@@ -2275,6 +2276,12 @@ var __exports__ = (() => {
         get maxBindGroups() {
           return 0;
         }
+        get maxBindGroupsPlusVertexBuffers() {
+          return 0;
+        }
+        get maxBindingsPerBindGroup() {
+          return 0;
+        }
         get maxDynamicUniformBuffersPerPipelineLayout() {
           return 0;
         }
@@ -2294,10 +2301,22 @@ var __exports__ = (() => {
           return 0;
         }
         // TBD
+        get maxStorageBuffersInVertexStage() {
+          return 0;
+        }
+        get maxStorageBuffersInFragmentStage() {
+          return 0;
+        }
         get maxStorageTexturesPerShaderStage() {
           return 0;
         }
         // TBD
+        get maxStorageTexturesInVertexStage() {
+          return 0;
+        }
+        get maxStorageTexturesInFragmentStage() {
+          return 0;
+        }
         get maxUniformBuffersPerShaderStage() {
           return this.getParameter(35375);
         }
@@ -2307,6 +2326,9 @@ var __exports__ = (() => {
         get maxStorageBufferBindingSize() {
           return 0;
         }
+        get maxBufferSize() {
+          return Number.MAX_SAFE_INTEGER;
+        }
         get minUniformBufferOffsetAlignment() {
           return this.getParameter(35380);
         }
@@ -2327,6 +2349,12 @@ var __exports__ = (() => {
         get maxInterStageShaderVariables() {
           return this.getParameter(35659);
         }
+        get maxColorAttachments() {
+          return this.getParameter(36063);
+        }
+        get maxColorAttachmentBytesPerSample() {
+          return 0;
+        }
         get maxComputeWorkgroupStorageSize() {
           return 0;
         }
@@ -2403,10 +2431,11 @@ var __exports__ = (() => {
         depthStencilAttachment = null;
         constructor(device, props) {
           super(device, props);
-          const isDefaultFramebuffer = props.handle === null;
+          const suppliedHandle = props.handle;
+          const isDefaultFramebuffer = suppliedHandle === null;
           this.device = device;
           this.gl = device.gl;
-          this.handle = this.props.handle || isDefaultFramebuffer ? this.props.handle : this.gl.createFramebuffer();
+          this.handle = suppliedHandle || isDefaultFramebuffer ? suppliedHandle : this.gl.createFramebuffer();
           if (!isDefaultFramebuffer) {
             device._setWebGLDebugMetadata(this.handle, this, { spector: this.props });
             if (!props.handle) {
@@ -2823,6 +2852,9 @@ var __exports__ = (() => {
   });
 
   // ../../node_modules/@luma.gl/webgl/dist/adapter/resources/webgl-shader.js
+  function getFirstCompilerLogLine(shaderLog) {
+    return shaderLog.split(/\r?\n/).find((line) => line.trim())?.trim();
+  }
   var import_core11, WEBGLShader;
   var init_webgl_shader = __esm({
     "../../node_modules/@luma.gl/webgl/dist/adapter/resources/webgl-shader.js"() {
@@ -2831,15 +2863,17 @@ var __exports__ = (() => {
       WEBGLShader = class extends import_core11.Shader {
         device;
         handle;
+        _compilationInfoLog = "";
         constructor(device, props) {
           super(device, props);
           this.device = device;
+          const suppliedHandle = this.props.handle;
           switch (this.props.stage) {
             case "vertex":
-              this.handle = this.props.handle || this.device.gl.createShader(35633);
+              this.handle = suppliedHandle || this.device.gl.createShader(35633);
               break;
             case "fragment":
-              this.handle = this.props.handle || this.device.gl.createShader(35632);
+              this.handle = suppliedHandle || this.device.gl.createShader(35632);
               break;
             default:
               throw new Error(this.props.stage);
@@ -2871,7 +2905,7 @@ var __exports__ = (() => {
           return this.getCompilationInfoSync();
         }
         getCompilationInfoSync() {
-          const shaderLog = this.device.gl.getShaderInfoLog(this.handle);
+          const shaderLog = this._getCompilationInfoLog();
           return shaderLog ? parseShaderCompilerLog(shaderLog) : [];
         }
         getTranslatedSource() {
@@ -2895,7 +2929,7 @@ ${source}`;
             this._getCompilationStatus();
             this.debugShader();
             if (this.compilationStatus === "error") {
-              throw new Error(`GLSL compilation errors in ${this.props.stage} shader ${this.props.id}`);
+              throw new Error(this._getCompilationErrorMessage(source));
             }
             return;
           }
@@ -2930,6 +2964,31 @@ ${source}`;
          */
         _getCompilationStatus() {
           this.compilationStatus = this.device.gl.getShaderParameter(this.handle, 35713) ? "success" : "error";
+          if (this.compilationStatus === "error") {
+            this._getCompilationInfoLog();
+          }
+        }
+        _getCompilationErrorMessage(source) {
+          const shaderDescription = `${this.props.stage} shader ${this.props.id}`;
+          const firstShaderLogLine = getFirstCompilerLogLine(this._getCompilationInfoLog());
+          const compilerMessages = this.getCompilationInfoSync();
+          const firstMessage = compilerMessages.find((message3) => message3.type === "error" && message3.message.trim()) || compilerMessages.find((message3) => message3.message.trim()) || compilerMessages.find((message3) => message3.type === "error") || compilerMessages[0];
+          if (!firstMessage) {
+            return firstShaderLogLine ? `GLSL compilation errors in ${shaderDescription}: ${firstShaderLogLine}` : `GLSL compilation errors in ${shaderDescription}: WebGL did not provide a shader compiler log`;
+          }
+          const sourceLine = firstMessage.lineNum ? source.split(/\r?\n/)[firstMessage.lineNum - 1]?.trim() : void 0;
+          const location = firstMessage.lineNum ? ` line ${firstMessage.lineNum}` : "";
+          const sourceSnippet = sourceLine ? `
+Source: ${sourceLine}` : "";
+          const message2 = firstMessage.message.trim() || firstShaderLogLine || "WebGL did not provide a shader compiler log";
+          return `GLSL compilation errors in ${shaderDescription}:${location}: ${message2}${sourceSnippet}`;
+        }
+        _getCompilationInfoLog() {
+          const shaderLog = this.device.gl.getShaderInfoLog(this.handle)?.trim();
+          if (shaderLog) {
+            this._compilationInfoLog = shaderLog;
+          }
+          return this._compilationInfoLog;
         }
       };
     }
@@ -3160,7 +3219,7 @@ ${source}`;
   }
   function isObjectEmpty2(obj) {
     let isEmpty = true;
-    for (const key in obj) {
+    for (const _key in obj) {
       isEmpty = false;
       break;
     }
@@ -3325,7 +3384,7 @@ ${source}`;
     return value;
   }
   function isObjectEmpty3(object) {
-    for (const key in object) {
+    for (const _key in object) {
       return false;
     }
     return true;
@@ -3472,32 +3531,39 @@ ${source}`;
           this.glFormat = formatInfo.format;
           this.glType = formatInfo.type;
           this.compressed = formatInfo.compressed;
+          if (this.isHandleBorrowed && this.props.handle === void 0) {
+            throw new Error("Borrowed WebGL textures require a texture handle");
+          }
           this.handle = this.props.handle || this.gl.createTexture();
           this.device._setWebGLDebugMetadata(this.handle, this, { spector: this.props });
-          this.gl.bindTexture(this.glTarget, this.handle);
-          const { dimension, width, height, depth, mipLevels, glTarget, glInternalFormat } = this;
-          if (!this.compressed) {
-            switch (dimension) {
-              case "2d":
-              case "cube":
-                this.gl.texStorage2D(glTarget, mipLevels, glInternalFormat, width, height);
-                break;
-              case "2d-array":
-              case "3d":
-                this.gl.texStorage3D(glTarget, mipLevels, glInternalFormat, width, height, depth);
-                break;
-              default:
-                throw new Error(dimension);
+          if (!this.isHandleBorrowed) {
+            this.gl.bindTexture(this.glTarget, this.handle);
+            const { dimension, width, height, depth, mipLevels, glTarget, glInternalFormat } = this;
+            if (!this.compressed) {
+              switch (dimension) {
+                case "2d":
+                case "cube":
+                  this.gl.texStorage2D(glTarget, mipLevels, glInternalFormat, width, height);
+                  break;
+                case "2d-array":
+                case "3d":
+                  this.gl.texStorage3D(glTarget, mipLevels, glInternalFormat, width, height, depth);
+                  break;
+                default:
+                  throw new Error(dimension);
+              }
             }
+            this.gl.bindTexture(this.glTarget, null);
+            this._initializeData(props.data);
           }
-          this.gl.bindTexture(this.glTarget, null);
-          this._initializeData(props.data);
-          if (!this.props.handle) {
+          if (this.ownsHandle) {
             this.trackAllocatedMemory(this.getAllocatedByteLength(), "Texture");
           } else {
             this.trackReferencedMemory(this.getAllocatedByteLength(), "Texture");
           }
-          this.setSampler(this.props.sampler);
+          if (!this.isHandleBorrowed) {
+            this.setSampler(this.props.sampler);
+          }
           this.view = new WEBGLTextureView(this.device, { ...this.props, texture: this });
           Object.seal(this);
         }
@@ -3507,7 +3573,7 @@ ${source}`;
             this._framebuffer = null;
             this._framebufferAttachmentKey = null;
             this.removeStats();
-            if (!this.props.handle) {
+            if (this.ownsHandle) {
               this.gl.deleteTexture(this.handle);
               this.trackDeallocatedMemory("Texture");
             } else {
@@ -3519,12 +3585,20 @@ ${source}`;
         createView(props) {
           return new WEBGLTextureView(this.device, { ...props, texture: this });
         }
+        clone(size) {
+          if (this.isHandleBorrowed && size && (size.width !== this.width || size.height !== this.height)) {
+            throw new Error(`Cannot resize borrowed read-only ${this}`);
+          }
+          return super.clone(size);
+        }
         setSampler(sampler = {}) {
+          this._assertWritable("set sampler parameters on");
           super.setSampler(sampler);
           const parameters = convertSamplerParametersToWebGL(this.sampler.props);
           this._setSamplerParameters(parameters);
         }
         copyExternalImage(options_) {
+          this._assertWritable("copy external image data into");
           const options = this._normalizeCopyExternalImageOptions(options_);
           if (options.sourceX || options.sourceY) {
             throw new Error("WebGL does not support sourceX/sourceY)");
@@ -3550,6 +3624,37 @@ ${source}`;
           this.gl.bindTexture(this.glTarget, null);
           return { width: options.width, height: options.height };
         }
+        copyElementImage(options_) {
+          this._assertWritable("copy element image data into");
+          const options = this._normalizeCopyElementImageOptions(options_);
+          const { glFormat } = this;
+          const { element, depth, mipLevel, sourceX, sourceY, sourceWidth, sourceHeight, x, y, z, width, height } = options;
+          const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, z);
+          const glParameters = options.flipY ? { [37440]: true } : {};
+          const gl = this.gl;
+          if (depth !== 1 || this.dimension !== "2d" && this.dimension !== "cube") {
+            throw new Error(`${this} copyElementImage only supports 2d and cube textures on WebGL`);
+          }
+          if (mipLevel !== 0 || x !== 0 || y !== 0) {
+            throw new Error(`${this} copyElementImage only supports full base-level uploads on WebGL`);
+          }
+          if (typeof gl.texElementImage2D !== "function") {
+            throw new Error(`${this} copyElementImage is not supported by this WebGL implementation`);
+          }
+          this.gl.bindTexture(this.glTarget, this.handle);
+          withGLParameters(this.gl, glParameters, () => {
+            gl.texElementImage2D?.(glTarget, glFormat, element, {
+              sx: sourceX,
+              sy: sourceY,
+              swidth: sourceWidth ?? width,
+              sheight: sourceHeight ?? height,
+              width,
+              height
+            });
+          });
+          this.gl.bindTexture(this.glTarget, null);
+          return { width: options.width, height: options.height };
+        }
         copyImageData(options_) {
           super.copyImageData(options_);
         }
@@ -3584,6 +3689,7 @@ ${source}`;
           throw new Error(`${this} readDataAsync is deprecated; use readBuffer() with an explicit destination buffer or DynamicTexture.readAsync()`);
         }
         writeBuffer(buffer, options_ = {}) {
+          this._assertWritable("write buffer data into");
           const options = this._normalizeTextureWriteOptions(options_);
           const { width, height, depthOrArrayLayers, mipLevel, byteOffset, x, y, z } = options;
           const { glFormat, glType, compressed } = this;
@@ -3617,6 +3723,7 @@ ${source}`;
           this.gl.bindTexture(this.glTarget, null);
         }
         writeData(data, options_ = {}) {
+          this._assertWritable("write data into");
           const options = this._normalizeTextureWriteOptions(options_);
           const typedArray = ArrayBuffer.isView(data) ? data : new Uint8Array(data);
           const { width, height, depthOrArrayLayers, mipLevel, x, y, z, byteOffset } = options;
@@ -3764,6 +3871,7 @@ ${source}`;
          * @note - this is used by the DynamicTexture class to generate mipmaps on WebGL
          */
         generateMipmapsWebGL(options) {
+          this._assertWritable("generate mipmaps for");
           const isFilterableAndRenderable = this.device.isTextureFormatRenderable(this.props.format) && this.device.isTextureFormatFilterable(this.props.format);
           if (!isFilterableAndRenderable) {
             import_core15.log.warn(`${this} is not renderable or filterable, may not be able to generate mipmaps`)();
@@ -3838,6 +3946,11 @@ ${source}`;
           gl.bindTexture(this.glTarget, null);
           return _textureUnit;
         }
+        _assertWritable(operation) {
+          if (this.isHandleBorrowed) {
+            throw new Error(`Cannot ${operation} borrowed read-only ${this}`);
+          }
+        }
       };
     }
   });
@@ -3931,44 +4044,6 @@ ${source}`;
     }
   });
 
-  // ../../node_modules/@luma.gl/webgl/dist/adapter/helpers/webgl-topology-utils.js
-  function getGLDrawMode(topology) {
-    switch (topology) {
-      case "point-list":
-        return 0;
-      case "line-list":
-        return 1;
-      case "line-strip":
-        return 3;
-      case "triangle-list":
-        return 4;
-      case "triangle-strip":
-        return 5;
-      default:
-        throw new Error(topology);
-    }
-  }
-  function getGLPrimitive(topology) {
-    switch (topology) {
-      case "point-list":
-        return 0;
-      case "line-list":
-        return 1;
-      case "line-strip":
-        return 1;
-      case "triangle-list":
-        return 4;
-      case "triangle-strip":
-        return 4;
-      default:
-        throw new Error(topology);
-    }
-  }
-  var init_webgl_topology_utils = __esm({
-    "../../node_modules/@luma.gl/webgl/dist/adapter/helpers/webgl-topology-utils.js"() {
-    }
-  });
-
   // ../../node_modules/@luma.gl/webgl/dist/adapter/resources/webgl-render-pipeline.js
   function mergeShaderLayout(baseLayout, overrideLayout) {
     const mergedLayout = {
@@ -4005,13 +4080,11 @@ ${source}`;
   var init_webgl_render_pipeline = __esm({
     "../../node_modules/@luma.gl/webgl/dist/adapter/resources/webgl-render-pipeline.js"() {
       import_core16 = __toESM(require_core2(), 1);
-      init_device_parameters();
       init_set_uniform();
       init_webgl_buffer();
       init_webgl_framebuffer();
       init_webgl_texture();
       init_webgl_texture_view();
-      init_webgl_topology_utils();
       WEBGLRenderPipeline = class extends import_core16.RenderPipeline {
         /** The WebGL device that created this render pipeline */
         device;
@@ -4057,10 +4130,7 @@ ${source}`;
           }
           this.destroyResource();
         }
-        /**
-         * Compatibility shim for code paths that still set bindings on the pipeline.
-         * Shared-model draws pass bindings per draw and do not rely on this state.
-         */
+        /** @deprecated Set bindings on RenderPass instead. Will be removed in the next major release. */
         setBindings(bindings, options) {
           const flatBindings = (0, import_core16.flattenBindingsByGroup)((0, import_core16.normalizeBindingsByGroup)(this.shaderLayout, bindings));
           for (const [name, value] of Object.entries(flatBindings)) {
@@ -4100,66 +4170,25 @@ ${source}`;
          * This function unifies those ways into a single call using common parameters with sane defaults
          */
         draw(options) {
-          this._syncLinkStatus();
+          const webglRenderPass = options.renderPass;
           const drawBindings = options.bindGroups ? (0, import_core16.flattenBindingsByGroup)(options.bindGroups) : options.bindings || this.bindings;
-          const {
-            renderPass,
-            parameters = this.props.parameters,
-            topology = this.props.topology,
-            vertexArray,
-            vertexCount,
-            // indexCount,
-            instanceCount,
-            isInstanced = false,
-            firstVertex = 0,
-            // firstIndex,
-            // firstInstance,
-            // baseVertex,
-            transformFeedback,
-            uniforms = this.uniforms
-          } = options;
-          const glDrawMode = getGLDrawMode(topology);
-          const isIndexed = Boolean(vertexArray.indexBuffer);
-          const glIndexType = vertexArray.indexBuffer?.glIndexType;
-          if (this.linkStatus !== "success") {
-            import_core16.log.info(2, `RenderPipeline:${this.id}.draw() aborted - waiting for shader linking`)();
-            return false;
-          }
-          if (!this._areTexturesRenderable(drawBindings)) {
-            import_core16.log.info(2, `RenderPipeline:${this.id}.draw() aborted - textures not yet loaded`)();
-            return false;
-          }
-          this.device.gl.useProgram(this.handle);
-          vertexArray.bindBeforeRender(renderPass);
-          if (transformFeedback) {
-            transformFeedback.begin(this.props.topology);
-          }
-          this._applyBindings(drawBindings, { disableWarnings: this.props.disableWarnings });
-          this._applyUniforms(uniforms);
-          const webglRenderPass = renderPass;
-          withDeviceAndGLParameters(this.device, parameters, webglRenderPass.glParameters, () => {
-            if (isIndexed && isInstanced) {
-              this.device.gl.drawElementsInstanced(
-                glDrawMode,
-                vertexCount || 0,
-                // indexCount?
-                glIndexType,
-                firstVertex,
-                instanceCount || 0
-              );
-            } else if (isIndexed) {
-              this.device.gl.drawElements(glDrawMode, vertexCount || 0, glIndexType, firstVertex);
-            } else if (isInstanced) {
-              this.device.gl.drawArraysInstanced(glDrawMode, firstVertex, vertexCount || 0, instanceCount || 0);
-            } else {
-              this.device.gl.drawArrays(glDrawMode, firstVertex, vertexCount || 0);
-            }
-            if (transformFeedback) {
-              transformFeedback.end();
-            }
+          webglRenderPass.setPipeline(this);
+          webglRenderPass.setBindings(drawBindings);
+          webglRenderPass.setVertexArray(options.vertexArray);
+          return webglRenderPass.draw({
+            parameters: options.parameters,
+            topology: options.topology,
+            isInstanced: options.isInstanced,
+            vertexCount: options.vertexCount,
+            indexCount: options.indexCount,
+            instanceCount: options.instanceCount,
+            firstVertex: options.firstVertex,
+            firstIndex: options.firstIndex,
+            firstInstance: options.firstInstance,
+            baseVertex: options.baseVertex,
+            transformFeedback: options.transformFeedback,
+            uniforms: options.uniforms
           });
-          vertexArray.unbindAfterRender(renderPass);
-          return true;
         }
         /**
          * Checks if all texture-values uniforms are renderable (i.e. loaded)
@@ -4707,7 +4736,22 @@ ${source}`;
     device.gl.bindBuffer(36663, null);
   }
   function _copyBufferToTexture(_device, _options) {
-    throw new Error("copyBufferToTexture is not supported in WebGL");
+    const { sourceBuffer, byteOffset = 0, destinationTexture, mipLevel = 0, origin = [0, 0, 0], aspect = "all", bytesPerRow, rowsPerImage, size } = _options;
+    if (aspect !== "all") {
+      throw new Error("copyBufferToTexture aspect is not supported in WebGL");
+    }
+    destinationTexture.writeBuffer(sourceBuffer, {
+      byteOffset,
+      bytesPerRow,
+      rowsPerImage,
+      mipLevel,
+      x: origin[0] ?? 0,
+      y: origin[1] ?? 0,
+      z: origin[2] ?? 0,
+      width: size[0],
+      height: size[1],
+      depthOrArrayLayers: size[2]
+    });
   }
   function _copyTextureToBuffer(device, options) {
     const { sourceTexture, mipLevel = 0, aspect = "all", width = options.sourceTexture.width, height = options.sourceTexture.height, depthOrArrayLayers, origin = [0, 0, 0], destinationBuffer, byteOffset = 0, bytesPerRow, rowsPerImage } = options;
@@ -4865,6 +4909,44 @@ ${source}`;
     }
   });
 
+  // ../../node_modules/@luma.gl/webgl/dist/adapter/helpers/webgl-topology-utils.js
+  function getGLDrawMode(topology) {
+    switch (topology) {
+      case "point-list":
+        return 0;
+      case "line-list":
+        return 1;
+      case "line-strip":
+        return 3;
+      case "triangle-list":
+        return 4;
+      case "triangle-strip":
+        return 5;
+      default:
+        throw new Error(topology);
+    }
+  }
+  function getGLPrimitive(topology) {
+    switch (topology) {
+      case "point-list":
+        return 0;
+      case "line-list":
+        return 1;
+      case "line-strip":
+        return 1;
+      case "triangle-list":
+        return 4;
+      case "triangle-strip":
+        return 4;
+      default:
+        throw new Error(topology);
+    }
+  }
+  var init_webgl_topology_utils = __esm({
+    "../../node_modules/@luma.gl/webgl/dist/adapter/helpers/webgl-topology-utils.js"() {
+    }
+  });
+
   // ../../node_modules/@luma.gl/webgl/dist/adapter/resources/webgl-render-pass.js
   var import_core20, COLOR_CHANNELS, WEBGLRenderPass;
   var init_webgl_render_pass = __esm({
@@ -4872,12 +4954,21 @@ ${source}`;
       import_core20 = __toESM(require_core2(), 1);
       init_with_parameters();
       init_unified_parameter_api();
+      init_webgl_topology_utils();
+      init_device_parameters();
       COLOR_CHANNELS = [1, 2, 4, 8];
       WEBGLRenderPass = class extends import_core20.RenderPass {
         device;
         handle = null;
         /** Parameters that should be applied before each draw call */
         glParameters = {};
+        /** Pipeline used by subsequent draw commands. */
+        pipeline = null;
+        /** Complete binding set used by subsequent draw commands. */
+        bindings = {};
+        bindingsPipeline = null;
+        /** Vertex array used by subsequent draw commands. */
+        vertexArray = null;
         constructor(device, props) {
           super(device, props);
           this.device = device;
@@ -4929,7 +5020,10 @@ ${source}`;
         }
         // beginOcclusionQuery(queryIndex: number): void;
         // endOcclusionQuery(): void;
-        // executeBundles(bundles: Iterable<GPURenderBundle>): void;
+        /** @throws Always throws because WebGL does not support render bundles. */
+        executeBundles(_bundles) {
+          throw new Error("Render bundles are only supported in WebGPU");
+        }
         /**
          * Maps RenderPass parameters to GL parameters
          */
@@ -4969,6 +5063,78 @@ ${source}`;
           this.glParameters = glParameters;
           setGLParameters(this.device.gl, glParameters);
         }
+        setPipeline(pipeline) {
+          this.pipeline = pipeline;
+        }
+        setBindings(bindings, _options) {
+          if (!this.pipeline) {
+            throw new Error("RenderPass.setPipeline() must be called before setBindings()");
+          }
+          this.bindings = (0, import_core20.flattenBindingsByGroup)((0, import_core20.normalizeBindingsByGroup)(this.pipeline.shaderLayout, bindings));
+          this.bindingsPipeline = this.pipeline;
+        }
+        setVertexArray(vertexArray) {
+          this.vertexArray = vertexArray;
+        }
+        draw(options) {
+          const pipeline = this.pipeline;
+          const vertexArray = this.vertexArray;
+          if (!pipeline) {
+            throw new Error("RenderPass.setPipeline() must be called before draw()");
+          }
+          if (!vertexArray) {
+            throw new Error("RenderPass.setVertexArray() must be called before draw()");
+          }
+          if (pipeline.shaderLayout.bindings.length > 0 && this.bindingsPipeline !== pipeline) {
+            throw new Error("RenderPass.setBindings() must be called after setPipeline() before draw()");
+          }
+          pipeline._syncLinkStatus();
+          const { parameters = pipeline.props.parameters, topology = pipeline.props.topology, vertexCount, indexCount, instanceCount, isInstanced = false, firstVertex = 0, transformFeedback, uniforms = pipeline.uniforms } = options;
+          const glDrawMode = getGLDrawMode(topology);
+          const isIndexed = Boolean(vertexArray.indexBuffer);
+          const glIndexType = vertexArray.indexBuffer?.glIndexType;
+          const indexedDrawCount = indexCount ?? vertexCount ?? 0;
+          if (pipeline.linkStatus !== "success") {
+            import_core20.log.info(2, `RenderPipeline:${pipeline.id}.draw() aborted - waiting for shader linking`)();
+            return false;
+          }
+          if (!pipeline._areTexturesRenderable(this.bindings)) {
+            import_core20.log.info(2, `RenderPipeline:${pipeline.id}.draw() aborted - textures not yet loaded`)();
+            return false;
+          }
+          this.device.gl.useProgram(pipeline.handle);
+          vertexArray.bindBeforeRender(this);
+          const webglTransformFeedback = transformFeedback;
+          if (webglTransformFeedback) {
+            webglTransformFeedback.begin(pipeline.props.topology);
+          }
+          pipeline._applyBindings(this.bindings, { disableWarnings: pipeline.props.disableWarnings });
+          pipeline._applyUniforms(uniforms);
+          withDeviceAndGLParameters(this.device, parameters, this.glParameters, () => {
+            if (isIndexed && isInstanced) {
+              this.device.gl.drawElementsInstanced(glDrawMode, indexedDrawCount, glIndexType, firstVertex, instanceCount || 0);
+            } else if (isIndexed) {
+              this.device.gl.drawElements(glDrawMode, indexedDrawCount, glIndexType, firstVertex);
+            } else if (isInstanced) {
+              this.device.gl.drawArraysInstanced(glDrawMode, firstVertex, vertexCount || 0, instanceCount || 0);
+            } else {
+              this.device.gl.drawArrays(glDrawMode, firstVertex, vertexCount || 0);
+            }
+            if (webglTransformFeedback) {
+              webglTransformFeedback.end();
+            }
+          });
+          vertexArray.unbindAfterRender(this);
+          return true;
+        }
+        /** @throws Always throws because WebGL does not expose indirect drawing. */
+        drawIndirect(_indirectBuffer, _indirectByteOffset = 0) {
+          throw new Error("Indirect drawing is only supported in WebGPU");
+        }
+        /** @throws Always throws because WebGL does not expose indirect drawing. */
+        drawIndexedIndirect(_indirectBuffer, _indirectByteOffset = 0) {
+          throw new Error("Indirect drawing is only supported in WebGPU");
+        }
         beginOcclusionQuery(queryIndex) {
           const webglQuerySet = this.props.occlusionQuerySet;
           webglQuerySet?.beginOcclusionQuery();
@@ -5053,17 +5219,14 @@ ${source}`;
           super(device, props);
           this.device = device;
           this.commandBuffer = new WEBGLCommandBuffer(device, {
-            id: `${this.props.id}-command-buffer`
+            id: this.id,
+            userData: this.userData
           });
         }
         destroy() {
           this.destroyResource();
         }
-        finish(props) {
-          if (props?.id && this.commandBuffer.id !== props.id) {
-            this.commandBuffer.id = props.id;
-            this.commandBuffer.props.id = props.id;
-          }
+        finish() {
           this.destroy();
           return this.commandBuffer;
         }
@@ -5161,18 +5324,32 @@ ${source}`;
         }
         device;
         handle;
+        /** Attribute accessors indexed by shader location for WebGL pointer setup. */
+        attributeInfosByLocation;
         /** Attribute 0 buffer constant */
         buffer = null;
         bufferValue = null;
-        /** * Attribute 0 can not be disable on most desktop OpenGL based browsers */
+        /**
+         * Reports whether attribute location 0 may be disabled without fallback handling.
+         * @param device The device that owns the vertex array.
+         * @returns `true` when constant attribute 0 is supported on the current browser.
+         */
         static isConstantAttributeZeroSupported(device) {
           return getBrowser() === "Chrome";
         }
-        // Create a VertexArray
+        /**
+         * Creates a WebGL vertex array and caches per-location accessor metadata.
+         * @param device The device that owns the vertex array.
+         * @param props Vertex-array initialization properties.
+         */
         constructor(device, props) {
           super(device, props);
           this.device = device;
           this.handle = this.device.gl.createVertexArray();
+          this.attributeInfosByLocation = new Array(this.maxVertexAttributes).fill(null);
+          for (const attributeInfo of Object.values((0, import_core22.getAttributeInfosFromLayouts)(props.shaderLayout, props.bufferLayout))) {
+            this.attributeInfosByLocation[attributeInfo.location] = attributeInfo;
+          }
         }
         destroy() {
           super.destroy();
@@ -5200,7 +5377,11 @@ ${source}`;
           this.indexBuffer = buffer;
           this.device.gl.bindVertexArray(null);
         }
-        /** Set a location in vertex attributes array to a buffer, enables the location, sets divisor */
+        /**
+         * Binds a buffer to one shader attribute location and configures the WebGL pointer state.
+         * @param location Shader attribute location.
+         * @param attributeBuffer Buffer supplying the attribute data.
+         */
         setBuffer(location, attributeBuffer) {
           const buffer = attributeBuffer;
           if (buffer.glTarget === 34963) {
@@ -5220,7 +5401,11 @@ ${source}`;
           this.attributes[location] = buffer;
           this.device.gl.bindVertexArray(null);
         }
-        /** Set a location in vertex attributes array to a constant value, disables the location */
+        /**
+         * Stores a constant value for one shader attribute location.
+         * @param location Shader attribute location.
+         * @param value Constant attribute value.
+         */
         setConstantWebGL(location, value) {
           this._enable(location, false);
           this.attributes[location] = value;
@@ -5262,9 +5447,13 @@ ${source}`;
         //   }
         //   this.device.gl.vertexAttribDivisor(location, divisor || 0);
         // }
-        /** Get an accessor from the  */
+        /**
+         * Returns the cached accessor description for one shader attribute location.
+         * @param location Shader attribute location.
+         * @returns WebGL pointer state derived from the shared attribute metadata.
+         */
         _getAccessor(location) {
-          const attributeInfo = this.attributeInfos[location];
+          const attributeInfo = this.attributeInfosByLocation[location];
           if (!attributeInfo) {
             throw new Error(`Unknown attribute location ${location}`);
           }
@@ -6126,8 +6315,9 @@ ${source}`;
               reason: "destroyed",
               message: "Entered sleep mode, or too many apps or browser tabs are using the GPU."
             }),
-            // eslint-disable-next-line no-console
-            onContextRestored: (event) => console.log("WebGL context restored")
+            onContextRestored: (_event) => {
+              console.log("WebGL context restored");
+            }
           }, webglContextAttributes);
           if (!gl) {
             throw new Error("WebGL context creation failed");
@@ -6205,8 +6395,8 @@ ${source}`;
         createTexture(props) {
           return new WEBGLTexture(this, props);
         }
-        createExternalTexture(props) {
-          throw new Error("createExternalTexture() not implemented");
+        createExternalTexture(_props) {
+          throw new Error("ExternalTexture is not available on WebGL");
         }
         createSampler(props) {
           return new WEBGLSampler(this, props);
@@ -6238,6 +6428,10 @@ ${source}`;
         createComputePipeline(props) {
           throw new Error("ComputePipeline not supported in WebGL");
         }
+        /** @throws Always throws because WebGL does not support render bundles. */
+        createRenderBundleEncoder(_props) {
+          throw new Error("Render bundles are only supported in WebGPU");
+        }
         createCommandEncoder(props = {}) {
           return new WEBGLCommandEncoder(this, props);
         }
@@ -6263,6 +6457,9 @@ ${source}`;
             commandBuffer.destroy();
           }
         }
+        writeBufferViaCommandEncoder(_commandEncoder, destinationBuffer, data, byteOffset = 0) {
+          destinationBuffer.write(data, byteOffset);
+        }
         _finalizeDefaultCommandEncoderForSubmit() {
           const submittedCommandEncoder = this.commandEncoder;
           const commandBuffer = submittedCommandEncoder.finish();
@@ -11868,19 +12065,6 @@ void main(void) {
     RecognizerState2[RecognizerState2["Failed"] = 32] = "Failed";
   })(RecognizerState || (RecognizerState = {}));
 
-  // ../../node_modules/mjolnir.js/dist/hammerjs/touchaction/touchaction-Consts.js
-  var TOUCH_ACTION_MANIPULATION = "manipulation";
-  var TOUCH_ACTION_NONE = "none";
-  var TOUCH_ACTION_PAN_X = "pan-x";
-  var TOUCH_ACTION_PAN_Y = "pan-y";
-
-  // ../../node_modules/mjolnir.js/dist/hammerjs/input/get-distance.js
-  function getPointDistance(p1, p2) {
-    const x = p2.x - p1.x;
-    const y = p2.y - p1.y;
-    return Math.sqrt(x * x + y * y);
-  }
-
   // ../../node_modules/mjolnir.js/dist/hammerjs/inputs/pointerevent.js
   var POINTER_INPUT_MAP = {
     pointerdown: InputEvent.Start,
@@ -11890,603 +12074,6 @@ void main(void) {
     pointerout: InputEvent.Cancel
   };
 
-  // ../../node_modules/mjolnir.js/dist/hammerjs/utils/unique-id.js
-  var _uniqueId = 1;
-  function uniqueId() {
-    return _uniqueId++;
-  }
-
-  // ../../node_modules/mjolnir.js/dist/hammerjs/recognizer/state-str.js
-  function stateStr(state) {
-    if (state & RecognizerState.Cancelled) {
-      return "cancel";
-    } else if (state & RecognizerState.Ended) {
-      return "end";
-    } else if (state & RecognizerState.Changed) {
-      return "move";
-    } else if (state & RecognizerState.Began) {
-      return "start";
-    }
-    return "";
-  }
-
-  // ../../node_modules/mjolnir.js/dist/hammerjs/recognizer/recognizer.js
-  var Recognizer = class {
-    constructor(options) {
-      this.options = options;
-      this.id = uniqueId();
-      this.state = RecognizerState.Possible;
-      this.simultaneous = {};
-      this.requireFail = [];
-    }
-    /**
-     * set options
-     */
-    set(options) {
-      Object.assign(this.options, options);
-      this.manager.touchAction.update();
-      return this;
-    }
-    /**
-     * recognize simultaneous with an other recognizer.
-     */
-    recognizeWith(recognizerOrName) {
-      if (Array.isArray(recognizerOrName)) {
-        for (const item of recognizerOrName) {
-          this.recognizeWith(item);
-        }
-        return this;
-      }
-      let otherRecognizer;
-      if (typeof recognizerOrName === "string") {
-        otherRecognizer = this.manager.get(recognizerOrName);
-        if (!otherRecognizer) {
-          throw new Error(`Cannot find recognizer ${recognizerOrName}`);
-        }
-      } else {
-        otherRecognizer = recognizerOrName;
-      }
-      const { simultaneous } = this;
-      if (!simultaneous[otherRecognizer.id]) {
-        simultaneous[otherRecognizer.id] = otherRecognizer;
-        otherRecognizer.recognizeWith(this);
-      }
-      return this;
-    }
-    /**
-     * drop the simultaneous link. it doesnt remove the link on the other recognizer.
-     */
-    dropRecognizeWith(recognizerOrName) {
-      if (Array.isArray(recognizerOrName)) {
-        for (const item of recognizerOrName) {
-          this.dropRecognizeWith(item);
-        }
-        return this;
-      }
-      let otherRecognizer;
-      if (typeof recognizerOrName === "string") {
-        otherRecognizer = this.manager.get(recognizerOrName);
-      } else {
-        otherRecognizer = recognizerOrName;
-      }
-      if (otherRecognizer) {
-        delete this.simultaneous[otherRecognizer.id];
-      }
-      return this;
-    }
-    /**
-     * recognizer can only run when an other is failing
-     */
-    requireFailure(recognizerOrName) {
-      if (Array.isArray(recognizerOrName)) {
-        for (const item of recognizerOrName) {
-          this.requireFailure(item);
-        }
-        return this;
-      }
-      let otherRecognizer;
-      if (typeof recognizerOrName === "string") {
-        otherRecognizer = this.manager.get(recognizerOrName);
-        if (!otherRecognizer) {
-          throw new Error(`Cannot find recognizer ${recognizerOrName}`);
-        }
-      } else {
-        otherRecognizer = recognizerOrName;
-      }
-      const { requireFail } = this;
-      if (requireFail.indexOf(otherRecognizer) === -1) {
-        requireFail.push(otherRecognizer);
-        otherRecognizer.requireFailure(this);
-      }
-      return this;
-    }
-    /**
-     * drop the requireFailure link. it does not remove the link on the other recognizer.
-     */
-    dropRequireFailure(recognizerOrName) {
-      if (Array.isArray(recognizerOrName)) {
-        for (const item of recognizerOrName) {
-          this.dropRequireFailure(item);
-        }
-        return this;
-      }
-      let otherRecognizer;
-      if (typeof recognizerOrName === "string") {
-        otherRecognizer = this.manager.get(recognizerOrName);
-      } else {
-        otherRecognizer = recognizerOrName;
-      }
-      if (otherRecognizer) {
-        const index = this.requireFail.indexOf(otherRecognizer);
-        if (index > -1) {
-          this.requireFail.splice(index, 1);
-        }
-      }
-      return this;
-    }
-    /**
-     * has require failures boolean
-     */
-    hasRequireFailures() {
-      return Boolean(this.requireFail.find((recognier) => recognier.options.enable));
-    }
-    /**
-     * if the recognizer can recognize simultaneous with an other recognizer
-     */
-    canRecognizeWith(otherRecognizer) {
-      return Boolean(this.simultaneous[otherRecognizer.id]);
-    }
-    /**
-     * You should use `tryEmit` instead of `emit` directly to check
-     * that all the needed recognizers has failed before emitting.
-     */
-    emit(input) {
-      if (!input)
-        return;
-      const { state } = this;
-      if (state < RecognizerState.Ended) {
-        this.manager.emit(this.options.event + stateStr(state), input);
-      }
-      this.manager.emit(this.options.event, input);
-      if (input.additionalEvent) {
-        this.manager.emit(input.additionalEvent, input);
-      }
-      if (state >= RecognizerState.Ended) {
-        this.manager.emit(this.options.event + stateStr(state), input);
-      }
-    }
-    /**
-     * Check that all the require failure recognizers has failed,
-     * if true, it emits a gesture event,
-     * otherwise, setup the state to FAILED.
-     */
-    tryEmit(input) {
-      if (this.canEmit()) {
-        this.emit(input);
-      } else {
-        this.state = RecognizerState.Failed;
-      }
-    }
-    /**
-     * can we emit?
-     */
-    canEmit() {
-      let i = 0;
-      while (i < this.requireFail.length) {
-        if (!(this.requireFail[i].state & (RecognizerState.Failed | RecognizerState.Possible))) {
-          return false;
-        }
-        i++;
-      }
-      return true;
-    }
-    /**
-     * update the recognizer
-     */
-    recognize(inputData) {
-      const inputDataClone = { ...inputData };
-      if (!this.options.enable) {
-        this.reset();
-        this.state = RecognizerState.Failed;
-        return;
-      }
-      if (this.state & (RecognizerState.Recognized | RecognizerState.Cancelled | RecognizerState.Failed)) {
-        this.state = RecognizerState.Possible;
-      }
-      this.state = this.process(inputDataClone);
-      if (this.state & (RecognizerState.Began | RecognizerState.Changed | RecognizerState.Ended | RecognizerState.Cancelled)) {
-        this.tryEmit(inputDataClone);
-      }
-    }
-    /**
-     * return the event names that are emitted by this recognizer
-     */
-    getEventNames() {
-      return [this.options.event];
-    }
-    /**
-     * called when the gesture isn't allowed to recognize
-     * like when another is being recognized or it is disabled
-     */
-    reset() {
-    }
-  };
-
-  // ../../node_modules/mjolnir.js/dist/hammerjs/recognizers/attribute.js
-  var AttrRecognizer = class extends Recognizer {
-    /**
-     * Used to check if it the recognizer receives valid input, like input.distance > 10.
-     */
-    attrTest(input) {
-      const optionPointers = this.options.pointers;
-      return optionPointers === 0 || input.pointers.length === optionPointers;
-    }
-    /**
-     * Process the input and return the state for the recognizer
-     */
-    process(input) {
-      const { state } = this;
-      const { eventType } = input;
-      const isRecognized = state & (RecognizerState.Began | RecognizerState.Changed);
-      const isValid = this.attrTest(input);
-      if (isRecognized && (eventType & InputEvent.Cancel || !isValid)) {
-        return state | RecognizerState.Cancelled;
-      } else if (isRecognized || isValid) {
-        if (eventType & InputEvent.End) {
-          return state | RecognizerState.Ended;
-        } else if (!(state & RecognizerState.Began)) {
-          return RecognizerState.Began;
-        }
-        return state | RecognizerState.Changed;
-      }
-      return RecognizerState.Failed;
-    }
-  };
-
-  // ../../node_modules/mjolnir.js/dist/hammerjs/recognizers/double-click-drag.js
-  var EVENT_NAMES = ["", "start", "move", "end", "cancel"];
-  var DoubleClickDragRecognizer = class extends Recognizer {
-    constructor(options = {}) {
-      super({
-        enable: true,
-        event: "doubleclickdrag",
-        pointers: 1,
-        interval: 500,
-        time: 350,
-        threshold: 28,
-        dragThreshold: 1,
-        pixelsPerScale: 120,
-        ...options
-      });
-      this._tapStart = null;
-      this._lastTap = null;
-      this._drag = null;
-      this._emittedStart = false;
-    }
-    getTouchAction() {
-      return [TOUCH_ACTION_MANIPULATION];
-    }
-    getEventNames() {
-      return EVENT_NAMES.map((suffix) => this.options.event + suffix);
-    }
-    process(input) {
-      const { options } = this;
-      const validPointers = input.pointers.length === options.pointers;
-      if (!validPointers) {
-        this.reset();
-        return RecognizerState.Failed;
-      }
-      if (input.eventType & InputEvent.Start) {
-        return this._handleStart(input);
-      }
-      if (input.eventType & InputEvent.Move) {
-        return this._handleMove(input);
-      }
-      if (input.eventType & InputEvent.Cancel) {
-        return this._handleEnd(input, true);
-      }
-      if (input.eventType & InputEvent.End) {
-        return this._handleEnd(input, false);
-      }
-      return RecognizerState.Failed;
-    }
-    reset() {
-      this._tapStart = null;
-      this._lastTap = null;
-      this._drag = null;
-      this._emittedStart = false;
-    }
-    emit(input) {
-      if (!input) {
-        return;
-      }
-      if (this.state === RecognizerState.Began) {
-        if (!this._drag?.active || this._emittedStart) {
-          return;
-        }
-        this._emittedStart = true;
-        this.manager.emit(`${this.options.event}start`, input);
-        this.manager.emit(this.options.event, input);
-        return;
-      }
-      if (this.state === RecognizerState.Changed) {
-        if (!this._emittedStart) {
-          return;
-        }
-        this.manager.emit(`${this.options.event}move`, input);
-        this.manager.emit(this.options.event, input);
-        return;
-      }
-      if (this.state === RecognizerState.Ended) {
-        if (!this._emittedStart) {
-          return;
-        }
-        this.manager.emit(this.options.event, input);
-        this.manager.emit(`${this.options.event}end`, input);
-        this._emittedStart = false;
-        return;
-      }
-      if (this.state === RecognizerState.Cancelled) {
-        if (!this._emittedStart) {
-          return;
-        }
-        this.manager.emit(this.options.event, input);
-        this.manager.emit(`${this.options.event}cancel`, input);
-        this._emittedStart = false;
-      }
-    }
-    _handleStart(input) {
-      const pointerId = this._getPointerId(input);
-      if (this._lastTap && this._isTapMatch(input, this._lastTap)) {
-        this._tapStart = null;
-        this._lastTap = null;
-        this._drag = {
-          startCenter: input.center,
-          pointerId,
-          active: false
-        };
-        this._emittedStart = false;
-        return RecognizerState.Began;
-      }
-      this._tapStart = {
-        center: input.center,
-        timeStamp: input.timeStamp,
-        pointerId
-      };
-      this._lastTap = null;
-      this._drag = null;
-      this._emittedStart = false;
-      return RecognizerState.Failed;
-    }
-    _handleMove(input) {
-      if (!this._drag || !this._isSamePointer(input, this._drag.pointerId)) {
-        return RecognizerState.Failed;
-      }
-      const dy = this._drag.startCenter.y - input.center.y;
-      if (!this._drag.active && Math.abs(dy) < this.options.dragThreshold) {
-        return RecognizerState.Began;
-      }
-      this._drag.active = true;
-      input.scale = Math.pow(2, dy / this.options.pixelsPerScale);
-      return this._emittedStart ? RecognizerState.Changed : RecognizerState.Began;
-    }
-    _handleEnd(input, cancelled) {
-      if (this._drag && this._isSamePointer(input, this._drag.pointerId)) {
-        const { active, startCenter } = this._drag;
-        this._drag = null;
-        this._tapStart = null;
-        this._lastTap = null;
-        if (!active) {
-          this._emittedStart = false;
-          return RecognizerState.Failed;
-        }
-        const dy = startCenter.y - input.center.y;
-        input.scale = Math.pow(2, dy / this.options.pixelsPerScale);
-        return cancelled ? RecognizerState.Cancelled : RecognizerState.Ended;
-      }
-      if (!this._tapStart || !this._isSamePointer(input, this._tapStart.pointerId)) {
-        if (cancelled) {
-          this.reset();
-        }
-        return RecognizerState.Failed;
-      }
-      if (this._isValidTap(input)) {
-        this._lastTap = {
-          center: input.center,
-          timeStamp: input.timeStamp,
-          pointerId: this._tapStart.pointerId
-        };
-      } else {
-        this._lastTap = null;
-      }
-      this._tapStart = null;
-      return RecognizerState.Failed;
-    }
-    _isTapMatch(input, tap) {
-      return input.timeStamp - tap.timeStamp <= this.options.interval && getPointDistance(input.center, tap.center) <= this.options.threshold;
-    }
-    _isValidTap(input) {
-      return input.deltaTime <= this.options.time && input.distance <= this.options.threshold;
-    }
-    _getPointerId(input) {
-      return "pointerId" in input.srcEvent ? input.srcEvent.pointerId : null;
-    }
-    _isSamePointer(input, pointerId) {
-      return pointerId === null || this._getPointerId(input) === pointerId;
-    }
-  };
-
-  // ../../node_modules/mjolnir.js/dist/hammerjs/recognizers/tap.js
-  var TapRecognizer = class extends Recognizer {
-    constructor(options = {}) {
-      super({
-        enable: true,
-        event: "tap",
-        pointers: 1,
-        taps: 1,
-        interval: 300,
-        time: 250,
-        threshold: 9,
-        posThreshold: 10,
-        ...options
-      });
-      this.pTime = null;
-      this.pCenter = null;
-      this._timer = null;
-      this._input = null;
-      this.count = 0;
-    }
-    getTouchAction() {
-      return [TOUCH_ACTION_MANIPULATION];
-    }
-    process(input) {
-      const { options } = this;
-      const validPointers = input.pointers.length === options.pointers;
-      const validMovement = input.distance < options.threshold;
-      const validTouchTime = input.deltaTime < options.time;
-      this.reset();
-      if (input.eventType & InputEvent.Start && this.count === 0) {
-        return this.failTimeout();
-      }
-      if (validMovement && validTouchTime && validPointers) {
-        if (input.eventType !== InputEvent.End) {
-          return this.failTimeout();
-        }
-        const validInterval = this.pTime ? input.timeStamp - this.pTime < options.interval : true;
-        const validMultiTap = !this.pCenter || getPointDistance(this.pCenter, input.center) < options.posThreshold;
-        this.pTime = input.timeStamp;
-        this.pCenter = input.center;
-        if (!validMultiTap || !validInterval) {
-          this.count = 1;
-        } else {
-          this.count += 1;
-        }
-        this._input = input;
-        const tapCount = this.count % options.taps;
-        if (tapCount === 0) {
-          if (!this.hasRequireFailures()) {
-            return RecognizerState.Recognized;
-          }
-          this._timer = setTimeout(() => {
-            this.state = RecognizerState.Recognized;
-            this.tryEmit(this._input);
-          }, options.interval);
-          return RecognizerState.Began;
-        }
-      }
-      return RecognizerState.Failed;
-    }
-    failTimeout() {
-      this._timer = setTimeout(() => {
-        this.state = RecognizerState.Failed;
-      }, this.options.interval);
-      return RecognizerState.Failed;
-    }
-    reset() {
-      clearTimeout(this._timer);
-    }
-    emit(input) {
-      if (this.state === RecognizerState.Recognized) {
-        input.tapCount = this.count;
-        this.manager.emit(this.options.event, input);
-      }
-    }
-  };
-
-  // ../../node_modules/mjolnir.js/dist/hammerjs/recognizers/pan.js
-  var EVENT_NAMES2 = ["", "start", "move", "end", "cancel", "up", "down", "left", "right"];
-  var PanRecognizer = class extends AttrRecognizer {
-    constructor(options = {}) {
-      super({
-        enable: true,
-        pointers: 1,
-        event: "pan",
-        threshold: 10,
-        direction: InputDirection.All,
-        ...options
-      });
-      this.pX = null;
-      this.pY = null;
-    }
-    getTouchAction() {
-      const { options: { direction } } = this;
-      const actions = [];
-      if (direction & InputDirection.Horizontal) {
-        actions.push(TOUCH_ACTION_PAN_Y);
-      }
-      if (direction & InputDirection.Vertical) {
-        actions.push(TOUCH_ACTION_PAN_X);
-      }
-      return actions;
-    }
-    getEventNames() {
-      return EVENT_NAMES2.map((suffix) => this.options.event + suffix);
-    }
-    directionTest(input) {
-      const { options } = this;
-      let hasMoved = true;
-      let { distance: distance4 } = input;
-      let { direction } = input;
-      const x = input.deltaX;
-      const y = input.deltaY;
-      if (!(direction & options.direction)) {
-        if (options.direction & InputDirection.Horizontal) {
-          direction = x === 0 ? InputDirection.None : x < 0 ? InputDirection.Left : InputDirection.Right;
-          hasMoved = x !== this.pX;
-          distance4 = Math.abs(input.deltaX);
-        } else {
-          direction = y === 0 ? InputDirection.None : y < 0 ? InputDirection.Up : InputDirection.Down;
-          hasMoved = y !== this.pY;
-          distance4 = Math.abs(input.deltaY);
-        }
-      }
-      input.direction = direction;
-      return hasMoved && distance4 > options.threshold && Boolean(direction & options.direction);
-    }
-    attrTest(input) {
-      return super.attrTest(input) && (Boolean(this.state & RecognizerState.Began) || !(this.state & RecognizerState.Began) && this.directionTest(input));
-    }
-    emit(input) {
-      this.pX = input.deltaX;
-      this.pY = input.deltaY;
-      const direction = InputDirection[input.direction].toLowerCase();
-      if (direction) {
-        input.additionalEvent = this.options.event + direction;
-      }
-      super.emit(input);
-    }
-  };
-
-  // ../../node_modules/mjolnir.js/dist/hammerjs/recognizers/pinch.js
-  var EVENT_NAMES3 = ["", "start", "move", "end", "cancel", "in", "out"];
-  var PinchRecognizer = class extends AttrRecognizer {
-    constructor(options = {}) {
-      super({
-        enable: true,
-        event: "pinch",
-        threshold: 0,
-        pointers: 2,
-        ...options
-      });
-    }
-    getTouchAction() {
-      return [TOUCH_ACTION_NONE];
-    }
-    getEventNames() {
-      return EVENT_NAMES3.map((suffix) => this.options.event + suffix);
-    }
-    attrTest(input) {
-      return super.attrTest(input) && (Math.abs(input.scale - 1) > this.options.threshold || Boolean(this.state & RecognizerState.Began));
-    }
-    emit(input) {
-      if (input.scale !== 1) {
-        const inOut = input.scale < 1 ? "in" : "out";
-        input.additionalEvent = this.options.event + inOut;
-      }
-      super.emit(input);
-    }
-  };
-
   // ../../node_modules/mjolnir.js/dist/utils/globals.js
   var userAgent = typeof navigator !== "undefined" && navigator.userAgent ? navigator.userAgent.toLowerCase() : "";
   var window_2 = typeof window !== "undefined" ? window : global;
@@ -12546,14 +12133,6 @@ void main(void) {
      */
     IDENTITY: 0
   };
-  var RECOGNIZERS = {
-    multipan: [PanRecognizer, { threshold: 10, direction: InputDirection.Vertical, pointers: 2 }],
-    pinch: [PinchRecognizer, {}, null, ["multipan"]],
-    pan: [PanRecognizer, { threshold: 1 }, ["pinch"], ["multipan"]],
-    dblclick: [TapRecognizer, { event: "dblclick", taps: 2, enable: false }],
-    dblclickdrag: [DoubleClickDragRecognizer, { event: "dblclickdrag", enable: false }, ["dblclick"], null],
-    click: [TapRecognizer, { event: "click" }, ["dblclickdrag"], ["dblclick", "dblclickdrag"]]
-  };
 
   // ../core/src/viewports/viewport.ts
   var DEGREES_TO_RADIANS4 = Math.PI / 180;
@@ -13594,6 +13173,8 @@ void main(void) {
       this._customEvents = [];
       this._eventStartBlocked = null;
       this._panMove = false;
+      this._multiPanMode = null;
+      this._multiPanStartCenter = null;
       this._doubleClickDragAnchor = null;
       this._suppressDoubleClickUntil = 0;
       this.invertPan = false;
@@ -13606,6 +13187,8 @@ void main(void) {
       this.doubleClickDragZoom = true;
       this.touchZoom = true;
       this.touchRotate = false;
+      this.multiTouchDrag = null;
+      this.trackpadGesture = false;
       this.keyboard = true;
       this.transitionManager = new TransitionManager({
         ...opts,
@@ -13652,11 +13235,11 @@ void main(void) {
         case "panend":
           return this._onPanEnd(event);
         case "pinchstart":
-          return eventStartBlocked ? false : this._onPinchStart(event);
+          return eventStartBlocked || !this._isTrackpadGestureAllowed(event) ? false : this._onPinchStart(event);
         case "pinchmove":
-          return this._onPinch(event);
+          return this._isTrackpadGestureAllowed(event) ? this._onPinch(event) : false;
         case "pinchend":
-          return this._onPinchEnd(event);
+          return this._isTrackpadGestureAllowed(event) ? this._onPinchEnd(event) : false;
         case "multipanstart":
           return eventStartBlocked ? false : this._onMultiPanStart(event);
         case "multipanmove":
@@ -13747,13 +13330,18 @@ void main(void) {
         doubleClickDragZoom = false,
         touchZoom = true,
         touchRotate = false,
+        multiTouchDrag = touchRotate ? "rotate" : null,
+        trackpadGesture = false,
         keyboard = true
       } = props;
       const isInteractive = Boolean(this.onViewStateChange);
       this.toggleEvents(EVENT_TYPES.WHEEL, isInteractive && scrollZoom);
       this.toggleEvents(EVENT_TYPES.PAN, isInteractive);
-      this.toggleEvents(EVENT_TYPES.PINCH, isInteractive && (touchZoom || touchRotate));
-      this.toggleEvents(EVENT_TYPES.MULTI_PAN, isInteractive && touchRotate);
+      this.toggleEvents(
+        EVENT_TYPES.PINCH,
+        isInteractive && (touchZoom || multiTouchDrag === "rotate")
+      );
+      this.toggleEvents(EVENT_TYPES.MULTI_PAN, isInteractive && Boolean(multiTouchDrag));
       this.toggleEvents(EVENT_TYPES.DOUBLE_CLICK, isInteractive && doubleClickZoom);
       this.toggleEvents(EVENT_TYPES.DOUBLE_CLICK_DRAG, isInteractive && doubleClickDragZoom);
       this.toggleEvents(EVENT_TYPES.KEYBOARD, isInteractive && keyboard);
@@ -13763,7 +13351,9 @@ void main(void) {
       this.doubleClickZoom = doubleClickZoom;
       this.doubleClickDragZoom = doubleClickDragZoom;
       this.touchZoom = touchZoom;
-      this.touchRotate = touchRotate;
+      this.touchRotate = multiTouchDrag === "rotate";
+      this.multiTouchDrag = multiTouchDrag;
+      this.trackpadGesture = trackpadGesture;
       this.keyboard = keyboard;
       const dimensionChanged = !oldProps || oldProps.height !== props.height || oldProps.width !== props.width || oldProps.maxBounds !== props.maxBounds;
       if (dimensionChanged && props.maxBounds) {
@@ -13938,6 +13528,9 @@ void main(void) {
       if (!this.scrollZoom) {
         return false;
       }
+      if (this.trackpadGesture && event.device !== "mouse") {
+        return false;
+      }
       const pos = this.getCenter(event);
       if (!this.isPointInBounds(pos, event)) {
         return false;
@@ -13965,60 +13558,73 @@ void main(void) {
       return true;
     }
     _onMultiPanStart(event) {
-      const pos = this.getCenter(event);
-      if (!this.isPointInBounds(pos, event)) {
+      const { multiTouchDrag } = this;
+      if (!multiTouchDrag || !this._isMultiPanEventAllowed(event, multiTouchDrag)) {
         return false;
       }
-      const newControllerState = this.controllerState.rotateStart({ pos });
+      const currentCenter = event.offsetCenter;
+      if (!this.isPointInBounds(this.getCenter(event), event)) {
+        return false;
+      }
+      const isTrackpad = event.pointerType === "trackpad";
+      const startCenter = {
+        x: currentCenter.x - (isTrackpad ? 0 : event.deltaX),
+        y: currentCenter.y - (isTrackpad ? 0 : event.deltaY)
+      };
+      const startEvent = { ...event, offsetCenter: startCenter };
+      const pos = this.getCenter(startEvent);
+      const newControllerState = multiTouchDrag === "pan" ? this.controllerState.panStart({ pos }) : this.controllerState.rotateStart({ pos });
+      this._multiPanMode = multiTouchDrag;
+      this._multiPanStartCenter = startCenter;
       this.updateViewport(newControllerState, NO_TRANSITION_PROPS, { isDragging: true });
       return true;
     }
     _onMultiPan(event) {
-      if (!this.touchRotate) {
-        return false;
-      }
-      if (!this.isDragging()) {
+      const { mode, event: panEvent } = this._getMultiPanEvent(event);
+      if (!mode || !panEvent || !this.isDragging()) {
         return false;
       }
-      const pos = this.getCenter(event);
-      pos[0] -= event.deltaX;
-      const newControllerState = this.controllerState.rotate({ pos });
-      this.updateViewport(newControllerState, NO_TRANSITION_PROPS, {
-        isDragging: true,
-        isRotating: true
-      });
-      return true;
+      return mode === "pan" ? this._onPanMove(panEvent) : this._onPanRotate(panEvent);
     }
     _onMultiPanEnd(event) {
-      if (!this.isDragging()) {
+      const { mode, event: panEvent } = this._getMultiPanEvent(event);
+      if (!mode || !panEvent || !this.isDragging()) {
+        this._resetMultiPan();
         return false;
       }
-      const { inertia } = this;
-      if (this.touchRotate && inertia && event.velocityY) {
-        const pos = this.getCenter(event);
-        const endPos = [pos[0], pos[1] += event.velocityY * inertia / 2];
-        const newControllerState = this.controllerState.rotate({ pos: endPos });
-        this.updateViewport(
-          newControllerState,
-          {
-            ...this._getTransitionProps(),
-            transitionDuration: inertia,
-            transitionEasing: INERTIA_EASING
-          },
-          {
-            isDragging: false,
-            isRotating: true
-          }
-        );
-        this.blockEvents(inertia);
-      } else {
-        const newControllerState = this.controllerState.rotateEnd();
-        this.updateViewport(newControllerState, null, {
-          isDragging: false,
-          isRotating: false
-        });
+      const handled = mode === "pan" ? this._onPanMoveEnd(panEvent) : this._onPanRotateEnd(panEvent);
+      this._resetMultiPan();
+      return handled;
+    }
+    _isTrackpadGestureAllowed(event) {
+      return event.pointerType !== "trackpad" || this.trackpadGesture;
+    }
+    _isMultiPanEventAllowed(event, mode) {
+      if (event.pointerType === "trackpad") {
+        return this.trackpadGesture && (mode === "pan" ? this.dragPan : this.dragRotate);
       }
-      return true;
+      return event.pointerType === "touch" && (mode === "pan" ? this.dragPan : this.dragRotate);
+    }
+    _getMultiPanEvent(event) {
+      const mode = this._multiPanMode;
+      const startCenter = this._multiPanStartCenter;
+      if (!mode || !startCenter) {
+        return { mode: null, event: null };
+      }
+      return {
+        mode,
+        event: {
+          ...event,
+          offsetCenter: {
+            x: startCenter.x + event.deltaX,
+            y: startCenter.y + event.deltaY
+          }
+        }
+      };
+    }
+    _resetMultiPan() {
+      this._multiPanMode = null;
+      this._multiPanStartCenter = null;
     }
     // Default handler for the `pinchstart` event.
     _onPinchStart(event) {