@luma.gl/core 9.0.0-alpha.9 → 9.0.0-beta.2

package/LICENSE

@@ -1,4 +1,6 @@
-Copyright (c) 2020 Urban Computing Foundation
+luma.gl is provided under the MIT license
+
+Copyright (c) 2020 vis.gl contributors
 
 This software includes parts initially developed by Uber and open sourced under MIT license.
 Copyright (c) 2015 Uber Technologies, Inc.

package/README.md

@@ -1,14 +1,14 @@
-# luma.gl
+# @luma.gl/core
 
 <h1 align="center">luma.gl | <a href="https://luma.gl">Docs</a></h1>
 
-<h5 align="center">luma.gl: WebGL2 Components for  Visualization</h5>
+<h5 align="center">luma.gl: WebGPU and WebGL2 Components for GPU Visualization and Compute</h5>
 
 ## Overview
 
-luma.gl is a set of WebGL2 components for high-performance GPU-based rendering and computation in the browser.
+luma.gl is a set of WebGPU and WebGL2 components for high-performance GPU-based rendering and computation in the browser.
 
-It is the engine that powers applications and frameworks like
+luma.gl is the GPU engine that powers applications and frameworks like
 
 - [kepler.gl](https://github.com/keplergl/kepler.gl) WebGL based visualization overlays
 - [deck.gl](https://github.com/visgl/deck.gl) WebGL based visualization overlays

package/dist/adapter/attribute-utils/get-attribute-from-layouts.d.ts

@@ -0,0 +1,52 @@
+import type { ShaderLayout } from '../types/shader-layout';
+import type { BufferLayout } from '../types/buffer-layout';
+import type { ShaderDataType, ShaderAttributeType } from '../types/shader-types';
+import type { VertexFormat, VertexType } from '../types/vertex-formats';
+/** Resolved info for a buffer / attribute combination to help backend configure it correctly */
+export type AttributeInfo = {
+    /** Attribute name */
+    attributeName: string;
+    /** Location in shader */
+    location: number;
+    /** Type / precision used in shader (buffer values may be converted) */
+    shaderType: ShaderAttributeType;
+    /** Calculations are done in this type in the shader's attribute declaration */
+    shaderDataType: ShaderDataType;
+    /** Components refer to the number of components in the shader's attribute declaration */
+    shaderComponents: 1 | 2 | 3 | 4;
+    /** It is the shader attribute declaration that determines whether GPU will process as integer or float */
+    integer: boolean;
+    /** BufferName */
+    bufferName: string;
+    /** Format of buffer data */
+    vertexFormat: VertexFormat;
+    /** Memory data type refers to the data type in the buffer */
+    bufferDataType: VertexType;
+    /** Components refer to the number of components in the buffer's vertex format */
+    bufferComponents: 1 | 2 | 3 | 4;
+    /** Normalization is encoded in the buffer layout's vertex format... */
+    normalized: boolean;
+    /** If not specified, the step mode is inferred from the attribute name in the shader (contains string instance) */
+    stepMode: 'vertex' | 'instance';
+    /** The byteOffset is encoded in or calculated from the buffer layout */
+    byteOffset: number;
+    /** The byteStride is encoded in or calculated from the buffer layout */
+    byteStride: number;
+};
+/**
+ * Map from "attribute names" to "resolved attribute infos"
+ * containing information about both buffer layouts and shader attribute declarations
+ */
+export declare function getAttributeInfosFromLayouts(shaderLayout: ShaderLayout, bufferLayout: BufferLayout[]): Record<string, AttributeInfo>;
+/**
+ * Array indexed by "location" holding "resolved attribute infos"
+ */
+export declare function getAttributeInfosByLocation(shaderLayout: ShaderLayout, bufferLayout: BufferLayout[], maxVertexAttributes?: number): AttributeInfo[];
+/**
+ * Merges an provided shader layout into a base shader layout
+ * In WebGL, this allows the auto generated shader layout to be overridden by the application
+ * Typically to change the format of the vertex attributes (from float32x4 to uint8x4 etc).
+ * @todo Drop this? Aren't all use cases covered by mergeBufferLayout()?
+ */
+export declare function mergeShaderLayout(baseLayout: ShaderLayout, overrideLayout: ShaderLayout): ShaderLayout;
+//# sourceMappingURL=get-attribute-from-layouts.d.ts.map

package/dist/adapter/attribute-utils/get-attribute-from-layouts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-attribute-from-layouts.d.ts","sourceRoot":"","sources":["../../../src/adapter/attribute-utils/get-attribute-from-layouts.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,YAAY,EAAuB,MAAM,wBAAwB,CAAC;AAC/E,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAC;AACzD,OAAO,KAAK,EAAC,cAAc,EAAE,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE/E,OAAO,KAAK,EAAC,YAAY,EAAE,UAAU,EAAC,MAAM,yBAAyB,CAAC;AAGtE,gGAAgG;AAChG,MAAM,MAAM,aAAa,GAAG;IAC1B,qBAAqB;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,UAAU,EAAE,mBAAmB,CAAC;IAChC,+EAA+E;IAC/E,cAAc,EAAE,cAAc,CAAC;IAC/B,yFAAyF;IACzF,gBAAgB,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChC,0GAA0G;IAC1G,OAAO,EAAE,OAAO,CAAC;IAEjB,iBAAiB;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,YAAY,EAAE,YAAY,CAAC;IAC3B,6DAA6D;IAC7D,cAAc,EAAE,UAAU,CAAC;IAC3B,iFAAiF;IACjF,gBAAgB,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChC,uEAAuE;IACvE,UAAU,EAAE,OAAO,CAAC;IAEpB,mHAAmH;IACnH,QAAQ,EAAE,QAAQ,GAAG,UAAU,CAAC;IAEhC,wEAAwE;IACxE,UAAU,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAWF;;;GAGG;AACH,wBAAgB,4BAA4B,CAC1C,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAAE,GAC3B,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAU/B;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAAE,EAC5B,mBAAmB,GAAE,MAAW,GAC/B,aAAa,EAAE,CAOjB;AAgJD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,YAAY,EACxB,cAAc,EAAE,YAAY,GAC3B,YAAY,CAiBd"}

package/dist/adapter/attribute-utils/get-attribute-from-layouts.js

@@ -0,0 +1,130 @@
+import { log } from "../../utils/log.js";
+import { decodeShaderAttributeType } from "../type-utils/decode-attribute-type.js";
+import { decodeVertexFormat } from "../type-utils/decode-vertex-format.js";
+export function getAttributeInfosFromLayouts(shaderLayout, bufferLayout) {
+  const attributeInfos = {};
+  for (const attribute of shaderLayout.attributes) {
+    attributeInfos[attribute.name] = getAttributeInfoFromLayouts(shaderLayout, bufferLayout, attribute.name);
+  }
+  return attributeInfos;
+}
+export function getAttributeInfosByLocation(shaderLayout, bufferLayout) {
+  let maxVertexAttributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 16;
+  const attributeInfos = getAttributeInfosFromLayouts(shaderLayout, bufferLayout);
+  const locationInfos = new Array(maxVertexAttributes).fill(null);
+  for (const attributeInfo of Object.values(attributeInfos)) {
+    locationInfos[attributeInfo.location] = attributeInfo;
+  }
+  return locationInfos;
+}
+function getAttributeInfoFromLayouts(shaderLayout, bufferLayout, name) {
+  const shaderDeclaration = getAttributeFromShaderLayout(shaderLayout, name);
+  const bufferMapping = getAttributeFromBufferLayout(bufferLayout, name);
+  if (!shaderDeclaration) {
+    return null;
+  }
+  const attributeTypeInfo = decodeShaderAttributeType(shaderDeclaration.type);
+  const vertexFormat = (bufferMapping === null || bufferMapping === void 0 ? void 0 : bufferMapping.vertexFormat) || attributeTypeInfo.defaultVertexFormat;
+  const vertexFormatInfo = decodeVertexFormat(vertexFormat);
+  return {
+    attributeName: (bufferMapping === null || bufferMapping === void 0 ? void 0 : bufferMapping.attributeName) || shaderDeclaration.name,
+    bufferName: (bufferMapping === null || bufferMapping === void 0 ? void 0 : bufferMapping.bufferName) || shaderDeclaration.name,
+    location: shaderDeclaration.location,
+    shaderType: shaderDeclaration.type,
+    shaderDataType: attributeTypeInfo.dataType,
+    shaderComponents: attributeTypeInfo.components,
+    vertexFormat,
+    bufferDataType: vertexFormatInfo.type,
+    bufferComponents: vertexFormatInfo.components,
+    normalized: vertexFormatInfo.normalized,
+    integer: attributeTypeInfo.integer,
+    stepMode: (bufferMapping === null || bufferMapping === void 0 ? void 0 : bufferMapping.stepMode) || shaderDeclaration.stepMode,
+    byteOffset: (bufferMapping === null || bufferMapping === void 0 ? void 0 : bufferMapping.byteOffset) || 0,
+    byteStride: (bufferMapping === null || bufferMapping === void 0 ? void 0 : bufferMapping.byteStride) || 0
+  };
+}
+function getAttributeFromShaderLayout(shaderLayout, name) {
+  const attribute = shaderLayout.attributes.find(attr => attr.name === name);
+  if (!attribute) {
+    log.warn(`shader layout attribute "${name}" not present in shader`);
+  }
+  return attribute || null;
+}
+function getAttributeFromBufferLayout(bufferLayouts, name) {
+  checkBufferLayouts(bufferLayouts);
+  let bufferLayoutInfo = getAttributeFromShortHand(bufferLayouts, name);
+  if (bufferLayoutInfo) {
+    return bufferLayoutInfo;
+  }
+  bufferLayoutInfo = getAttributeFromAttributesList(bufferLayouts, name);
+  if (bufferLayoutInfo) {
+    return bufferLayoutInfo;
+  }
+  log.warn(`layout for attribute "${name}" not present in buffer layout`);
+  return null;
+}
+function checkBufferLayouts(bufferLayouts) {
+  for (const bufferLayout of bufferLayouts) {
+    if (bufferLayout.attributes && bufferLayout.format || !bufferLayout.attributes && !bufferLayout.format) {
+      log.warn(`BufferLayout ${name} must have either 'attributes' or 'format' field`);
+    }
+  }
+}
+function getAttributeFromShortHand(bufferLayouts, name) {
+  for (const bufferLayout of bufferLayouts) {
+    if (bufferLayout.format && bufferLayout.name === name) {
+      return {
+        attributeName: bufferLayout.name,
+        bufferName: name,
+        stepMode: bufferLayout.stepMode,
+        vertexFormat: bufferLayout.format,
+        byteOffset: 0,
+        byteStride: bufferLayout.byteStride || 0
+      };
+    }
+  }
+  return null;
+}
+function getAttributeFromAttributesList(bufferLayouts, name) {
+  for (const bufferLayout of bufferLayouts) {
+    var _bufferLayout$attribu;
+    let byteStride = bufferLayout.byteStride;
+    if (typeof bufferLayout.byteStride !== 'number') {
+      for (const attributeMapping of bufferLayout.attributes || []) {
+        const info = decodeVertexFormat(attributeMapping.format);
+        byteStride += info.byteLength;
+      }
+    }
+    const attributeMapping = (_bufferLayout$attribu = bufferLayout.attributes) === null || _bufferLayout$attribu === void 0 ? void 0 : _bufferLayout$attribu.find(mapping => mapping.attribute === name);
+    if (attributeMapping) {
+      return {
+        attributeName: attributeMapping.attribute,
+        bufferName: bufferLayout.name,
+        stepMode: bufferLayout.stepMode,
+        vertexFormat: attributeMapping.format,
+        byteOffset: attributeMapping.byteOffset,
+        byteStride
+      };
+    }
+  }
+  return null;
+}
+export function mergeShaderLayout(baseLayout, overrideLayout) {
+  const mergedLayout = {
+    ...baseLayout,
+    attributes: baseLayout.attributes.map(attribute => ({
+      ...attribute
+    }))
+  };
+  for (const attribute of (overrideLayout === null || overrideLayout === void 0 ? void 0 : overrideLayout.attributes) || []) {
+    const baseAttribute = mergedLayout.attributes.find(attr => attr.name === attribute.name);
+    if (!baseAttribute) {
+      log.warn(`shader layout attribute ${attribute.name} not present in shader`);
+    } else {
+      baseAttribute.type = attribute.type || baseAttribute.type;
+      baseAttribute.stepMode = attribute.stepMode || baseAttribute.stepMode;
+    }
+  }
+  return mergedLayout;
+}
+//# sourceMappingURL=get-attribute-from-layouts.js.map

package/dist/adapter/attribute-utils/get-attribute-from-layouts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-attribute-from-layouts.js","names":["log","decodeShaderAttributeType","decodeVertexFormat","getAttributeInfosFromLayouts","shaderLayout","bufferLayout","attributeInfos","attribute","attributes","name","getAttributeInfoFromLayouts","getAttributeInfosByLocation","maxVertexAttributes","arguments","length","undefined","locationInfos","Array","fill","attributeInfo","Object","values","location","shaderDeclaration","getAttributeFromShaderLayout","bufferMapping","getAttributeFromBufferLayout","attributeTypeInfo","type","vertexFormat","defaultVertexFormat","vertexFormatInfo","attributeName","bufferName","shaderType","shaderDataType","dataType","shaderComponents","components","bufferDataType","bufferComponents","normalized","integer","stepMode","byteOffset","byteStride","find","attr","warn","bufferLayouts","checkBufferLayouts","bufferLayoutInfo","getAttributeFromShortHand","getAttributeFromAttributesList","format","_bufferLayout$attribu","attributeMapping","info","byteLength","mapping","mergeShaderLayout","baseLayout","overrideLayout","mergedLayout","map","baseAttribute"],"sources":["../../../src/adapter/attribute-utils/get-attribute-from-layouts.ts"],"sourcesContent":["// luma.gl, MIT license\n// Copyright (c) vis.gl contributors\n\nimport {log} from '../../utils/log';\nimport type {ShaderLayout, AttributeDeclaration} from '../types/shader-layout';\nimport type {BufferLayout} from '../types/buffer-layout';\nimport type {ShaderDataType, ShaderAttributeType} from '../types/shader-types';\nimport {decodeShaderAttributeType} from '../type-utils/decode-attribute-type';\nimport type {VertexFormat, VertexType} from '../types/vertex-formats';\nimport {decodeVertexFormat} from '../type-utils/decode-vertex-format';\n\n/** Resolved info for a buffer / attribute combination to help backend configure it correctly */\nexport type AttributeInfo = {\n  /** Attribute name */\n  attributeName: string;\n  /** Location in shader */\n  location: number;\n  /** Type / precision used in shader (buffer values may be converted) */\n  shaderType: ShaderAttributeType;\n  /** Calculations are done in this type in the shader's attribute declaration */\n  shaderDataType: ShaderDataType;\n  /** Components refer to the number of components in the shader's attribute declaration */\n  shaderComponents: 1 | 2 | 3 | 4;\n  /** It is the shader attribute declaration that determines whether GPU will process as integer or float */\n  integer: boolean;\n\n  /** BufferName */\n  bufferName: string;\n  /** Format of buffer data */\n  vertexFormat: VertexFormat;\n  /** Memory data type refers to the data type in the buffer */\n  bufferDataType: VertexType;\n  /** Components refer to the number of components in the buffer's vertex format */\n  bufferComponents: 1 | 2 | 3 | 4;\n  /** Normalization is encoded in the buffer layout's vertex format... */\n  normalized: boolean;\n\n  /** If not specified, the step mode is inferred from the attribute name in the shader (contains string instance) */\n  stepMode: 'vertex' | 'instance';\n\n  /** The byteOffset is encoded in or calculated from the buffer layout */\n  byteOffset: number;\n  /** The byteStride is encoded in or calculated from the buffer layout */\n  byteStride: number;\n};\n\ntype BufferAttributeInfo = {\n  attributeName: string;\n  bufferName: string;\n  stepMode?: 'vertex' | 'instance';\n  vertexFormat: VertexFormat;\n  byteOffset: number;\n  byteStride: number;\n};\n\n/** \n * Map from \"attribute names\" to \"resolved attribute infos\" \n * containing information about both buffer layouts and shader attribute declarations\n */\nexport function getAttributeInfosFromLayouts(\n  shaderLayout: ShaderLayout,\n  bufferLayout: BufferLayout[]\n): Record<string, AttributeInfo> {\n  const attributeInfos: Record<string, AttributeInfo> = {};\n  for (const attribute of shaderLayout.attributes) {\n    attributeInfos[attribute.name] = getAttributeInfoFromLayouts(\n      shaderLayout,\n      bufferLayout,\n      attribute.name\n    );\n  }\n  return attributeInfos;\n}\n\n/** \n * Array indexed by \"location\" holding \"resolved attribute infos\" \n */\nexport function getAttributeInfosByLocation(\n  shaderLayout: ShaderLayout,\n  bufferLayout: BufferLayout[],\n  maxVertexAttributes: number = 16\n): AttributeInfo[] {\n  const attributeInfos = getAttributeInfosFromLayouts(shaderLayout, bufferLayout);\n  const locationInfos: AttributeInfo[] = new Array(maxVertexAttributes).fill(null);\n  for (const attributeInfo of Object.values(attributeInfos)) {\n    locationInfos[attributeInfo.location] = attributeInfo;\n  }\n  return locationInfos;\n}\n\n/**\n * Get the combined information from a shader layout and a buffer layout for a specific attribute\n */\nfunction getAttributeInfoFromLayouts(\n  shaderLayout: ShaderLayout,\n  bufferLayout: BufferLayout[],\n  name: string\n): AttributeInfo | null {\n  const shaderDeclaration = getAttributeFromShaderLayout(shaderLayout, name);\n  const bufferMapping: BufferAttributeInfo = getAttributeFromBufferLayout(bufferLayout, name);\n\n  // TODO should no longer happen\n  if (!shaderDeclaration) {\n    //  || !bufferMapping\n    return null;\n  }\n\n  const attributeTypeInfo = decodeShaderAttributeType(shaderDeclaration.type);\n  const vertexFormat = bufferMapping?.vertexFormat || attributeTypeInfo.defaultVertexFormat;\n  const vertexFormatInfo = decodeVertexFormat(vertexFormat);\n\n  return {\n    attributeName: bufferMapping?.attributeName || shaderDeclaration.name,\n    bufferName: bufferMapping?.bufferName || shaderDeclaration.name,\n    location: shaderDeclaration.location,\n    shaderType: shaderDeclaration.type,\n    shaderDataType: attributeTypeInfo.dataType,\n    shaderComponents: attributeTypeInfo.components,\n    vertexFormat,\n    bufferDataType: vertexFormatInfo.type,\n    bufferComponents: vertexFormatInfo.components,\n    // normalized is a property of the buffer's vertex format\n    normalized: vertexFormatInfo.normalized,\n    // integer is a property of the shader declaration\n    integer: attributeTypeInfo.integer,\n    stepMode: bufferMapping?.stepMode || shaderDeclaration.stepMode,\n    byteOffset: bufferMapping?.byteOffset || 0,\n    byteStride: bufferMapping?.byteStride || 0\n  };\n}\n\nfunction getAttributeFromShaderLayout(\n  shaderLayout: ShaderLayout,\n  name: string\n): AttributeDeclaration | null {\n  const attribute = shaderLayout.attributes.find(attr => attr.name === name);\n  if (!attribute) {\n    log.warn(`shader layout attribute \"${name}\" not present in shader`);\n  }\n  return attribute || null;\n}\n\nfunction getAttributeFromBufferLayout(\n  bufferLayouts: BufferLayout[],\n  name: string\n): BufferAttributeInfo | null {\n  // Check that bufferLayouts are valid (each either has format or attribute)\n  checkBufferLayouts(bufferLayouts);\n\n  let bufferLayoutInfo = getAttributeFromShortHand(bufferLayouts, name);\n  if (bufferLayoutInfo) {\n    return bufferLayoutInfo;\n  }\n\n  bufferLayoutInfo = getAttributeFromAttributesList(bufferLayouts, name);\n  if (bufferLayoutInfo) {\n    return bufferLayoutInfo;\n  }\n\n  // Didn't find...\n  log.warn(`layout for attribute \"${name}\" not present in buffer layout`);\n  return null;\n}\n\n/** Check that bufferLayouts are valid (each either has format or attribute) */\nfunction checkBufferLayouts(bufferLayouts: BufferLayout[]) {\n  for (const bufferLayout of bufferLayouts) {\n    if (\n      (bufferLayout.attributes && bufferLayout.format) ||\n      (!bufferLayout.attributes && !bufferLayout.format)\n    ) {\n      log.warn(`BufferLayout ${name} must have either 'attributes' or 'format' field`);\n    }\n  }\n}\n\n/** Get attribute from format shorthand if specified */\nfunction getAttributeFromShortHand(\n  bufferLayouts: BufferLayout[],\n  name: string\n): BufferAttributeInfo | null {\n  for (const bufferLayout of bufferLayouts) {\n    if (bufferLayout.format && bufferLayout.name === name) {\n      return {\n        attributeName: bufferLayout.name,\n        bufferName: name,\n        stepMode: bufferLayout.stepMode,\n        vertexFormat: bufferLayout.format,\n        // If offset is needed, use `attributes` field.\n        byteOffset: 0,\n        byteStride: bufferLayout.byteStride || 0\n      };\n    }\n  }\n  return null;\n}\n\n/**\n * Search attribute mappings (e.g. interleaved attributes) for buffer mapping.\n * Not the name of the buffer might be the same as one of the interleaved attributes.\n */\nfunction getAttributeFromAttributesList(\n  bufferLayouts: BufferLayout[],\n  name: string\n): BufferAttributeInfo | null {\n  for (const bufferLayout of bufferLayouts) {\n    let byteStride: number | undefined = bufferLayout.byteStride;\n\n    // Calculate a default byte stride if not provided\n    if (typeof bufferLayout.byteStride !== 'number') {\n      for (const attributeMapping of bufferLayout.attributes || []) {\n        const info = decodeVertexFormat(attributeMapping.format);\n        byteStride += info.byteLength;\n      }\n    }\n\n    const attributeMapping = bufferLayout.attributes?.find(mapping => mapping.attribute === name);\n    if (attributeMapping) {\n      return {\n        attributeName: attributeMapping.attribute,\n        bufferName: bufferLayout.name,\n        stepMode: bufferLayout.stepMode,\n        vertexFormat: attributeMapping.format,\n        byteOffset: attributeMapping.byteOffset,\n        byteStride\n      };\n    }\n  }\n\n  return null;\n}\n\n/**\n * Merges an provided shader layout into a base shader layout\n * In WebGL, this allows the auto generated shader layout to be overridden by the application\n * Typically to change the format of the vertex attributes (from float32x4 to uint8x4 etc).\n * @todo Drop this? Aren't all use cases covered by mergeBufferLayout()?\n */\nexport function mergeShaderLayout(\n  baseLayout: ShaderLayout,\n  overrideLayout: ShaderLayout\n): ShaderLayout {\n  // Deep clone the base layout\n  const mergedLayout: ShaderLayout = {\n    ...baseLayout,\n    attributes: baseLayout.attributes.map(attribute => ({...attribute}))\n  };\n  // Merge the attributes\n  for (const attribute of overrideLayout?.attributes || []) {\n    const baseAttribute = mergedLayout.attributes.find(attr => attr.name === attribute.name);\n    if (!baseAttribute) {\n      log.warn(`shader layout attribute ${attribute.name} not present in shader`);\n    } else {\n      baseAttribute.type = attribute.type || baseAttribute.type;\n      baseAttribute.stepMode = attribute.stepMode || baseAttribute.stepMode;\n    }\n  }\n  return mergedLayout;\n}\n"],"mappings":"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"}

package/dist/adapter/canvas-context.d.ts

@@ -0,0 +1,109 @@
+import type { Device } from './device';
+import type { Framebuffer } from './resources/framebuffer';
+/** Properties for a CanvasContext */
+export type CanvasContextProps = {
+    /** If canvas not supplied, will be created and added to the DOM. If string, will be looked up in the DOM */
+    canvas?: HTMLCanvasElement | OffscreenCanvas | string | null;
+    /** If new canvas is created, it will be created in the specified container, otherwise appended to body */
+    container?: HTMLElement | string | null;
+    /** Width in pixels of the canvas */
+    width?: number;
+    /** Height in pixels of the canvas */
+    height?: number;
+    /** Whether to apply a device pixels scale factor (`true` uses browser DPI) */
+    useDevicePixels?: boolean | number;
+    /** Whether to track resizes (if not ) */
+    autoResize?: boolean;
+    /** Visibility (only used if new canvas is created). */
+    visible?: boolean;
+    /** WebGPU only https://www.w3.org/TR/webgpu/#canvas-configuration */
+    colorSpace?: 'srgb';
+    /** WebGPU only https://www.w3.org/TR/webgpu/#canvas-configuration */
+    alphaMode?: 'opaque' | 'premultiplied';
+};
+/**
+ * Manages a canvas. Supports both HTML or offscreen canvas
+ * - Creates a new canvas or looks up a canvas from the DOM
+ * - Provides check for DOM loaded
+ * @todo commit(): https://github.com/w3ctag/design-reviews/issues/288
+ * @todo transferControlToOffscreen: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/transferControlToOffscreen
+ */
+export declare abstract class CanvasContext {
+    abstract readonly device: Device;
+    readonly id: string;
+    readonly props: Required<CanvasContextProps>;
+    readonly canvas: HTMLCanvasElement | OffscreenCanvas;
+    readonly htmlCanvas?: HTMLCanvasElement;
+    readonly offscreenCanvas?: OffscreenCanvas;
+    readonly type: 'html-canvas' | 'offscreen-canvas' | 'node';
+    width: number;
+    height: number;
+    readonly resizeObserver: ResizeObserver | undefined;
+    /** State used by luma.gl classes: TODO - move to canvasContext*/
+    readonly _canvasSizeInfo: {
+        clientWidth: number;
+        clientHeight: number;
+        devicePixelRatio: number;
+    };
+    /** Check if the DOM is loaded */
+    static get isPageLoaded(): boolean;
+    /**
+     * Get a 'lazy' promise that resolves when the DOM is loaded.
+     * @note Since there may be limitations on number of `load` event listeners,
+     * it is recommended avoid calling this function until actually needed.
+     * I.e. don't call it until you know that you will be looking up a string in the DOM.
+     */
+    static pageLoaded: Promise<void>;
+    constructor(props?: CanvasContextProps);
+    /** Returns a framebuffer with properly resized current 'swap chain' textures */
+    abstract getCurrentFramebuffer(): Framebuffer;
+    /**
+     * Returns the current DPR, if props.useDevicePixels is true
+     * Device refers to physical
+     */
+    getDevicePixelRatio(useDevicePixels?: boolean | number): number;
+    /**
+     * Returns the size of drawing buffer in device pixels.
+     * @note This can be different from the 'CSS' size of a canvas, and also from the
+     * canvas' internal drawing buffer size (.width, .height).
+     * This is the size required to cover the canvas, adjusted for DPR
+     */
+    getPixelSize(): [number, number];
+    getAspect(): number;
+    /**
+     * Returns multiplier need to convert CSS size to Device size
+     */
+    cssToDeviceRatio(): number;
+    /**
+     * Maps CSS pixel position to device pixel position
+     */
+    cssToDevicePixels(cssPixel: number[], yInvert?: boolean): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * Use devicePixelRatio to set canvas width and height
+     * @note this is a raw port of luma.gl v8 code. Might be worth a review
+     */
+    setDevicePixelRatio(devicePixelRatio: number, options?: {
+        width?: number;
+        height?: number;
+    }): void;
+    /** @todo Major hack done to port the CSS methods above, base canvas context should not depend on WebGL */
+    getDrawingBufferSize(): [number, number];
+    abstract resize(options?: {
+        width?: number;
+        height?: number;
+        useDevicePixels?: boolean | number;
+    }): void;
+    /** Perform platform specific updates (WebGPU vs WebGL) */
+    protected abstract update(): void;
+    /**
+     * Allows subclass constructor to override the canvas id for auto created canvases.
+     * This can really help when debugging DOM in apps that create multiple devices
+     */
+    protected _setAutoCreatedCanvasId(id: string): void;
+}
+//# sourceMappingURL=canvas-context.d.ts.map

package/dist/adapter/canvas-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-context.d.ts","sourceRoot":"","sources":["../../src/adapter/canvas-context.ts"],"names":[],"mappings":"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"}

package/dist/adapter/canvas-context.js

@@ -0,0 +1,254 @@
+import { isBrowser } from '@probe.gl/env';
+import { log } from "../utils/log.js";
+const isPage = isBrowser() && typeof document !== 'undefined';
+const isPageLoaded = () => isPage && document.readyState === 'complete';
+const DEFAULT_CANVAS_CONTEXT_PROPS = {
+  canvas: null,
+  width: 800,
+  height: 600,
+  useDevicePixels: true,
+  autoResize: true,
+  container: null,
+  visible: true,
+  colorSpace: 'srgb',
+  alphaMode: 'opaque'
+};
+export class CanvasContext {
+  static get isPageLoaded() {
+    return isPageLoaded();
+  }
+  constructor(props) {
+    this.device = void 0;
+    this.id = void 0;
+    this.props = void 0;
+    this.canvas = void 0;
+    this.htmlCanvas = void 0;
+    this.offscreenCanvas = void 0;
+    this.type = void 0;
+    this.width = 1;
+    this.height = 1;
+    this.resizeObserver = void 0;
+    this._canvasSizeInfo = {
+      clientWidth: 0,
+      clientHeight: 0,
+      devicePixelRatio: 1
+    };
+    this.props = {
+      ...DEFAULT_CANVAS_CONTEXT_PROPS,
+      ...props
+    };
+    props = this.props;
+    if (!isBrowser()) {
+      this.id = 'node-canvas-context';
+      this.type = 'node';
+      this.width = this.props.width;
+      this.height = this.props.height;
+      this.canvas = null;
+      return;
+    }
+    if (!props.canvas) {
+      var _props, _props2;
+      const canvas = createCanvas(props);
+      const container = getContainer(((_props = props) === null || _props === void 0 ? void 0 : _props.container) || null);
+      container.insertBefore(canvas, container.firstChild);
+      this.canvas = canvas;
+      if (!((_props2 = props) !== null && _props2 !== void 0 && _props2.visible)) {
+        this.canvas.style.visibility = 'hidden';
+      }
+    } else if (typeof props.canvas === 'string') {
+      this.canvas = getCanvasFromDOM(props.canvas);
+    } else {
+      this.canvas = props.canvas;
+    }
+    if (this.canvas instanceof HTMLCanvasElement) {
+      this.id = this.canvas.id;
+      this.type = 'html-canvas';
+      this.htmlCanvas = this.canvas;
+    } else {
+      this.id = 'offscreen-canvas';
+      this.type = 'offscreen-canvas';
+      this.offscreenCanvas = this.canvas;
+    }
+    if (this.canvas instanceof HTMLCanvasElement && props.autoResize) {
+      this.resizeObserver = new ResizeObserver(entries => {
+        for (const entry of entries) {
+          if (entry.target === this.canvas) {
+            this.update();
+          }
+        }
+      });
+      this.resizeObserver.observe(this.canvas);
+    }
+  }
+  getDevicePixelRatio(useDevicePixels) {
+    if (typeof OffscreenCanvas !== 'undefined' && this.canvas instanceof OffscreenCanvas) {
+      return 1;
+    }
+    useDevicePixels = useDevicePixels === undefined ? this.props.useDevicePixels : useDevicePixels;
+    if (!useDevicePixels || useDevicePixels <= 0) {
+      return 1;
+    }
+    if (useDevicePixels === true) {
+      const dpr = typeof window !== 'undefined' && window.devicePixelRatio;
+      return dpr || 1;
+    }
+    return useDevicePixels;
+  }
+  getPixelSize() {
+    switch (this.type) {
+      case 'node':
+        return [this.width, this.height];
+      case 'offscreen-canvas':
+        return [this.canvas.width, this.canvas.height];
+      case 'html-canvas':
+        const dpr = this.getDevicePixelRatio();
+        const canvas = this.canvas;
+        return canvas.parentElement ? [canvas.clientWidth * dpr, canvas.clientHeight * dpr] : [this.canvas.width, this.canvas.height];
+      default:
+        throw new Error(this.type);
+    }
+  }
+  getAspect() {
+    const [width, height] = this.getPixelSize();
+    return width / height;
+  }
+  cssToDeviceRatio() {
+    try {
+      const [drawingBufferWidth] = this.getDrawingBufferSize();
+      const {
+        clientWidth
+      } = this._canvasSizeInfo;
+      return clientWidth ? drawingBufferWidth / clientWidth : 1;
+    } catch {
+      return 1;
+    }
+  }
+  cssToDevicePixels(cssPixel) {
+    let yInvert = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    const ratio = this.cssToDeviceRatio();
+    const [width, height] = this.getDrawingBufferSize();
+    return scalePixels(cssPixel, ratio, width, height, yInvert);
+  }
+  setDevicePixelRatio(devicePixelRatio) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (!this.htmlCanvas) {
+      return;
+    }
+    let clientWidth = 'width' in options ? options.width : this.htmlCanvas.clientWidth;
+    let clientHeight = 'height' in options ? options.height : this.htmlCanvas.clientHeight;
+    if (!clientWidth || !clientHeight) {
+      log.log(1, 'Canvas clientWidth/clientHeight is 0')();
+      devicePixelRatio = 1;
+      clientWidth = this.htmlCanvas.width || 1;
+      clientHeight = this.htmlCanvas.height || 1;
+    }
+    const cachedSize = this._canvasSizeInfo;
+    if (cachedSize.clientWidth !== clientWidth || cachedSize.clientHeight !== clientHeight || cachedSize.devicePixelRatio !== devicePixelRatio) {
+      let clampedPixelRatio = devicePixelRatio;
+      const canvasWidth = Math.floor(clientWidth * clampedPixelRatio);
+      const canvasHeight = Math.floor(clientHeight * clampedPixelRatio);
+      this.htmlCanvas.width = canvasWidth;
+      this.htmlCanvas.height = canvasHeight;
+      const [drawingBufferWidth, drawingBufferHeight] = this.getDrawingBufferSize();
+      if (drawingBufferWidth !== canvasWidth || drawingBufferHeight !== canvasHeight) {
+        clampedPixelRatio = Math.min(drawingBufferWidth / clientWidth, drawingBufferHeight / clientHeight);
+        this.htmlCanvas.width = Math.floor(clientWidth * clampedPixelRatio);
+        this.htmlCanvas.height = Math.floor(clientHeight * clampedPixelRatio);
+        log.warn('Device pixel ratio clamped')();
+      }
+      this._canvasSizeInfo.clientWidth = clientWidth;
+      this._canvasSizeInfo.clientHeight = clientHeight;
+      this._canvasSizeInfo.devicePixelRatio = devicePixelRatio;
+    }
+  }
+  getDrawingBufferSize() {
+    const gl = this.device.gl;
+    if (!gl) {
+      throw new Error('canvas size');
+    }
+    return [gl.drawingBufferWidth, gl.drawingBufferHeight];
+  }
+  _setAutoCreatedCanvasId(id) {
+    var _this$htmlCanvas;
+    if (((_this$htmlCanvas = this.htmlCanvas) === null || _this$htmlCanvas === void 0 ? void 0 : _this$htmlCanvas.id) === 'lumagl-auto-created-canvas') {
+      this.htmlCanvas.id = id;
+    }
+  }
+}
+CanvasContext.pageLoaded = getPageLoadPromise();
+function getPageLoadPromise() {
+  if (isPageLoaded() || typeof window === 'undefined') {
+    return Promise.resolve();
+  }
+  return new Promise(resolve => {
+    window.addEventListener('load', () => resolve());
+  });
+}
+function getContainer(container) {
+  if (typeof container === 'string') {
+    const element = document.getElementById(container);
+    if (!element && !isPageLoaded()) {
+      throw new Error(`Accessing '${container}' before page was loaded`);
+    }
+    if (!element) {
+      throw new Error(`${container} is not an HTML element`);
+    }
+    return element;
+  } else if (container) {
+    return container;
+  }
+  return document.body;
+}
+function getCanvasFromDOM(canvasId) {
+  const canvas = document.getElementById(canvasId);
+  if (!canvas && !isPageLoaded()) {
+    throw new Error(`Accessing '${canvasId}' before page was loaded`);
+  }
+  if (!(canvas instanceof HTMLCanvasElement)) {
+    throw new Error('Object is not a canvas element');
+  }
+  return canvas;
+}
+function createCanvas(props) {
+  const {
+    width,
+    height
+  } = props;
+  const targetCanvas = document.createElement('canvas');
+  targetCanvas.id = 'lumagl-auto-created-canvas';
+  targetCanvas.width = width || 1;
+  targetCanvas.height = height || 1;
+  targetCanvas.style.width = Number.isFinite(width) ? `${width}px` : '100%';
+  targetCanvas.style.height = Number.isFinite(height) ? `${height}px` : '100%';
+  return targetCanvas;
+}
+function scalePixels(pixel, ratio, width, height, yInvert) {
+  const point = pixel;
+  const x = scaleX(point[0], ratio, width);
+  let y = scaleY(point[1], ratio, height, yInvert);
+  let t = scaleX(point[0] + 1, ratio, width);
+  const xHigh = t === width - 1 ? t : t - 1;
+  t = scaleY(point[1] + 1, ratio, height, yInvert);
+  let yHigh;
+  if (yInvert) {
+    t = t === 0 ? t : t + 1;
+    yHigh = y;
+    y = t;
+  } else {
+    yHigh = t === height - 1 ? t : t - 1;
+  }
+  return {
+    x,
+    y,
+    width: Math.max(xHigh - x + 1, 1),
+    height: Math.max(yHigh - y + 1, 1)
+  };
+}
+function scaleX(x, ratio, width) {
+  const r = Math.min(Math.round(x * ratio), width - 1);
+  return r;
+}
+function scaleY(y, ratio, height, yInvert) {
+  return yInvert ? Math.max(0, height - 1 - Math.round(y * ratio)) : Math.min(Math.round(y * ratio), height - 1);
+}
+//# sourceMappingURL=canvas-context.js.map