@deck.gl-community/layers 9.2.8 → 9.3.1-alpha.0

package/dist/index.cjs

@@ -25,13 +25,13 @@ var __publicField = (obj, key, value) => {
 var dist_exports = {};
 __export(dist_exports, {
   PathMarkerLayer: () => PathMarkerLayer,
-  PathOutlineLayer: () => PathOutlineLayer
+  PathOutlineLayer: () => PathOutlineLayer,
+  SkyboxLayer: () => SkyboxLayer
 });
 module.exports = __toCommonJS(dist_exports);
 
 // dist/path-outline-layer/path-outline-layer.js
 var import_layers = require("@deck.gl/layers");
-var import_constants = require("@luma.gl/constants");
 
 // dist/path-outline-layer/outline.js
 var INITIAL_STATE = {
@@ -81,8 +81,6 @@ in float outline_vzLevel;
 // in vec2 outline_vUV;
 in vec4 outline_vPosition;
 
-out vec4 fragColor;
-
 const float OUTLINE_Z_LEVEL_ERROR = 0.01;
 
 // Return a darker color in shadowmap
@@ -95,12 +93,12 @@ vec4 outline_filterDarkenColor(vec4 color) {
   if (outline_uEnabled) {
     float maxZLevel;
     if (outline_vPosition.q > 0.0) {
-      maxZLevel = texture2DProj(outline_uShadowmap, outline_vPosition).r * 255.;
+      maxZLevel = textureProj(outline_uShadowmap, outline_vPosition).r * 255.;
     } else {
       discard;
     }
     if (maxZLevel < outline_vzLevel + OUTLINE_Z_LEVEL_ERROR) {
-      vec4(color.rgb * 0.5, color.a);
+      return vec4(color.rgb * 0.5, color.a);
     } else {
       discard;
     }
@@ -175,25 +173,54 @@ var PathOutlineLayer = class extends import_layers.PathLayer {
   // @ts-expect-error PathLayer is missing LayerContext arg
   initializeState(context) {
     super.initializeState();
+    const attributeManager = this.getAttributeManager();
+    if (!attributeManager) {
+      throw new Error("PathOutlineLayer requires an attribute manager during initialization.");
+    }
     const outlineFramebuffer = context.device.createFramebuffer({
-      colorAttachments: ["rgba8unorm"]
+      colorAttachments: [
+        context.device.createTexture({
+          format: "rgba8unorm",
+          width: 1,
+          height: 1,
+          mipLevels: 1
+        })
+      ]
     });
-    this.setState({
-      outlineFramebuffer
-    });
-    this.state.attributeManager.addInstanced({
+    attributeManager.addInstanced({
       instanceZLevel: {
         size: 1,
-        type: 5121,
+        type: "uint8",
         accessor: "getZLevel"
       }
     });
+    this.setState({
+      outlineFramebuffer,
+      model: this._getModel()
+    });
   }
-  // Override draw to add render module
-  draw({ moduleParameters = {}, parameters, uniforms, context }) {
+  finalizeState(context) {
     var _a;
+    (_a = this.state.outlineFramebuffer) == null ? void 0 : _a.destroy();
+    super.finalizeState(context);
+  }
+  // Override draw to add render module
+  draw() {
+    const model = this.state.model;
+    const outlineFramebuffer = this.state.outlineFramebuffer;
+    if (!model || !outlineFramebuffer) {
+      return;
+    }
+    const viewport = this.context.viewport;
+    const viewportWidth = Math.max(1, Math.ceil(viewport.width));
+    const viewportHeight = Math.max(1, Math.ceil(viewport.height));
+    outlineFramebuffer.resize({ width: viewportWidth, height: viewportHeight });
+    const shadowmapTexture = getFramebufferTexture(outlineFramebuffer);
+    if (!shadowmapTexture) {
+      return;
+    }
     const { jointRounded, capRounded, billboard, miterLimit, widthUnits, widthScale, widthMinPixels, widthMaxPixels } = this.props;
-    uniforms = Object.assign({}, uniforms, {
+    const basePathProps = {
       jointType: Number(jointRounded),
       capType: Number(capRounded),
       billboard,
@@ -202,49 +229,55 @@ var PathOutlineLayer = class extends import_layers.PathLayer {
       miterLimit,
       widthMinPixels,
       widthMaxPixels
+    };
+    this.setShaderModuleProps({
+      outline: {
+        outlineEnabled: true,
+        outlineRenderShadowmap: true,
+        outlineShadowmap: shadowmapTexture
+      }
     });
-    const { outlineFramebuffer } = this.state;
-    if (context == null ? void 0 : context.viewport) {
-      const viewportWidth = Math.max(1, Math.ceil(context.viewport.width));
-      const viewportHeight = Math.max(1, Math.ceil(context.viewport.height));
-      outlineFramebuffer.resize({ width: viewportWidth, height: viewportHeight });
-    } else {
-      outlineFramebuffer.resize();
-    }
-    const shadowmapTexture = (_a = outlineFramebuffer.colorAttachments[0]) == null ? void 0 : _a.texture;
-    if (!shadowmapTexture) {
-      return;
-    }
-    this.state.model.updateModuleSettings({
-      outlineEnabled: true,
-      outlineRenderShadowmap: true,
-      outlineShadowmap: shadowmapTexture
-    });
-    this.state.model.draw({
-      uniforms: Object.assign({}, uniforms, {
+    model.shaderInputs.setProps({
+      path: {
+        ...basePathProps,
         jointType: 0,
-        widthScale: this.props.widthScale * 1.3
-      }),
-      parameters: OUTLINE_SHADOWMAP_PARAMETERS,
-      framebuffer: outlineFramebuffer
+        widthScale: widthScale * 1.3
+      }
     });
-    this.state.model.updateModuleSettings({
-      outlineEnabled: true,
-      outlineRenderShadowmap: false,
-      outlineShadowmap: shadowmapTexture
+    model.setParameters(OUTLINE_SHADOWMAP_PARAMETERS);
+    const shadowRenderPass = this.context.device.beginRenderPass({
+      id: `${this.props.id}-outline-shadowmap`,
+      framebuffer: outlineFramebuffer,
+      parameters: { viewport: [0, 0, viewportWidth, viewportHeight] },
+      clearColor: [0, 0, 0, 0],
+      clearDepth: 1,
+      clearStencil: 0
     });
-    this.state.model.draw({
-      uniforms: Object.assign({}, uniforms, {
-        jointType: Number(jointRounded),
-        capType: Number(capRounded),
-        widthScale: this.props.widthScale
-      }),
-      parameters: OUTLINE_RENDER_PARAMETERS
+    model.draw(shadowRenderPass);
+    shadowRenderPass.end();
+    this.setShaderModuleProps({
+      outline: {
+        outlineEnabled: true,
+        outlineRenderShadowmap: false,
+        outlineShadowmap: shadowmapTexture
+      }
     });
+    model.shaderInputs.setProps({
+      path: basePathProps
+    });
+    model.setParameters(OUTLINE_RENDER_PARAMETERS);
+    model.draw(this.context.renderPass);
   }
 };
 __publicField(PathOutlineLayer, "layerName", "PathOutlineLayer");
 __publicField(PathOutlineLayer, "defaultProps", defaultProps);
+function getFramebufferTexture(framebuffer) {
+  const colorAttachment = framebuffer.colorAttachments[0];
+  if (!colorAttachment) {
+    return null;
+  }
+  return "texture" in colorAttachment ? colorAttachment.texture : colorAttachment;
+}
 
 // dist/path-marker-layer/path-marker-layer.js
 var import_core3 = require("@deck.gl/core");
@@ -526,4 +559,306 @@ var PathMarkerLayer = class extends import_core3.CompositeLayer {
 };
 __publicField(PathMarkerLayer, "layerName", "PathMarkerLayer");
 __publicField(PathMarkerLayer, "defaultProps", defaultProps2);
+
+// dist/skybox-layer/skybox-layer.js
+var import_core4 = require("@loaders.gl/core");
+var import_textures = require("@loaders.gl/textures");
+var import_core5 = require("@deck.gl/core");
+var import_core6 = require("@math.gl/core");
+var import_engine2 = require("@luma.gl/engine");
+
+// dist/skybox-layer/cubemap-utils.js
+var CUBE_FACES = ["+X", "-X", "+Y", "-Y", "+Z", "-Z"];
+function createCubemapLoadOptions(cubemap, loadOptions) {
+  var _a;
+  if (!loadOptions) {
+    return void 0;
+  }
+  if (typeof cubemap === "string" || ((_a = loadOptions.core) == null ? void 0 : _a.baseUrl) || !loadOptions.baseUrl) {
+    return loadOptions;
+  }
+  return {
+    ...loadOptions,
+    core: {
+      ...loadOptions.core,
+      baseUrl: loadOptions.baseUrl
+    }
+  };
+}
+function convertLoadedCubemapToTextureData(texture) {
+  if (texture.type !== "cube" || !Array.isArray(texture.data) || texture.data.length !== 6) {
+    throw new Error("SkyboxLayer expected a cubemap texture with six faces.");
+  }
+  return Object.fromEntries(CUBE_FACES.map((face, index) => [face, normalizeTextureSlice(texture.data[index], face)]));
+}
+function normalizeTextureSlice(faceData, face) {
+  if (Array.isArray(faceData)) {
+    if (faceData.length === 0) {
+      throw new Error(`SkyboxLayer received an empty mip chain for face ${face}.`);
+    }
+    return faceData.map((level, mipLevel) => normalizeTextureLevel(level, face, mipLevel));
+  }
+  return normalizeTextureLevel(faceData, face, 0);
+}
+function normalizeTextureLevel(faceData, face, mipLevel) {
+  if (typeof ImageBitmap !== "undefined" && faceData instanceof ImageBitmap) {
+    return faceData;
+  }
+  const level = faceData;
+  if (level == null ? void 0 : level.imageBitmap) {
+    return level.imageBitmap;
+  }
+  if (level && ArrayBuffer.isView(level.data) && level.width && level.height) {
+    return {
+      data: level.data,
+      width: level.width,
+      height: level.height,
+      format: typeof level.textureFormat === "string" ? level.textureFormat : typeof level.format === "string" ? level.format : "rgba8unorm"
+    };
+  }
+  throw new Error(`SkyboxLayer could not normalize cubemap face ${face} mip ${mipLevel}.`);
+}
+
+// dist/skybox-layer/skybox-layer.js
+var app = {
+  name: "app",
+  uniformTypes: {
+    modelMatrix: "mat4x4<f32>",
+    viewMatrix: "mat4x4<f32>",
+    projectionMatrix: "mat4x4<f32>"
+  }
+};
+var SKYBOX_PARAMETERS = {
+  cullMode: "front",
+  depthWriteEnabled: false,
+  depthCompare: "less-equal"
+};
+var SKYBOX_SCALE = new import_core6.Matrix4().scale([2, 2, 2]);
+var defaultProps3 = {
+  cubemap: null,
+  loadOptions: null,
+  orientation: "default"
+};
+var SkyboxLayer = class extends import_core5.Layer {
+  state = void 0;
+  /** Initializes the cube model and starts loading the cubemap texture. */
+  initializeState() {
+    const attributeManager = this.getAttributeManager();
+    attributeManager == null ? void 0 : attributeManager.remove(["instancePickingColors"]);
+    const shaderInputs = new import_engine2.ShaderInputs(createShaderInputModules(this.context.defaultShaderModules), {
+      disableWarnings: true
+    });
+    const model = this._getModel(shaderInputs);
+    this.setState({
+      cubemapTexture: null,
+      loadCount: 0,
+      model,
+      shaderInputs
+    });
+    this._loadCubemap().catch(() => {
+    });
+  }
+  /** Reloads the cubemap when its source manifest or load options change. */
+  updateState({ props, oldProps }) {
+    if (props.cubemap !== oldProps.cubemap || props.loadOptions !== oldProps.loadOptions) {
+      this._loadCubemap().catch(() => {
+      });
+    }
+  }
+  /** Releases GPU resources owned by the layer. */
+  finalizeState() {
+    var _a, _b;
+    (_a = this.state.cubemapTexture) == null ? void 0 : _a.destroy();
+    (_b = this.state.model) == null ? void 0 : _b.destroy();
+  }
+  /** Draws the skybox cube for the current viewport. */
+  draw() {
+    const { model, cubemapTexture, shaderInputs } = this.state;
+    if (!model || !cubemapTexture || !shaderInputs) {
+      return;
+    }
+    const viewport = this.context.viewport;
+    shaderInputs.setProps({
+      app: {
+        modelMatrix: getSkyboxModelMatrix(this.props.orientation),
+        viewMatrix: getSkyboxViewMatrix(viewport),
+        projectionMatrix: viewport.projectionMatrix
+      }
+    });
+    model.draw(this.context.renderPass);
+  }
+  /** Creates the luma.gl model used to render the skybox cube. */
+  _getModel(shaderInputs) {
+    var _a;
+    return new import_engine2.Model(this.context.device, {
+      ...this.getShaders(),
+      id: this.props.id,
+      bufferLayout: ((_a = this.getAttributeManager()) == null ? void 0 : _a.getBufferLayouts()) || [],
+      geometry: new import_engine2.CubeGeometry({ indices: true }),
+      shaderInputs,
+      isInstanced: false,
+      parameters: SKYBOX_PARAMETERS
+    });
+  }
+  /** Returns the WGSL/GLSL shader pair used by the layer. */
+  getShaders() {
+    return {
+      source: SKYBOX_WGSL,
+      vs: SKYBOX_VS,
+      fs: SKYBOX_FS
+    };
+  }
+  /** Starts an asynchronous cubemap load for the current props. */
+  async _loadCubemap() {
+    const { cubemap, loadOptions } = this.props;
+    const nextLoadCount = this.state.loadCount + 1;
+    this.setState({ loadCount: nextLoadCount });
+    if (!cubemap) {
+      this._setCubemapTexture(null);
+      return;
+    }
+    try {
+      const loadedTexture = await loadCubemapSource(cubemap, loadOptions);
+      if (this.state.loadCount !== nextLoadCount || !this.state.model) {
+        return;
+      }
+      const cubemapData = convertLoadedCubemapToTextureData(loadedTexture);
+      this._setCubemapTexture(createCubemapTexture(this.context.device, cubemapData));
+    } catch (error) {
+      if (this.state.loadCount === nextLoadCount) {
+        this.raiseError(error, "SkyboxLayer failed to load cubemap");
+      }
+    }
+  }
+  /** Swaps the active GPU cubemap texture and updates model bindings. */
+  _setCubemapTexture(texture) {
+    const { cubemapTexture, model } = this.state;
+    if (cubemapTexture === texture) {
+      return;
+    }
+    cubemapTexture == null ? void 0 : cubemapTexture.destroy();
+    this.setState({ cubemapTexture: texture });
+    if (texture && model) {
+      model.setBindings({ cubeTexture: texture });
+    }
+    this.setNeedsRedraw();
+  }
+};
+__publicField(SkyboxLayer, "defaultProps", defaultProps3);
+__publicField(SkyboxLayer, "layerName", "SkyboxLayer");
+async function loadCubemapSource(cubemap, loadOptions) {
+  const normalizedLoadOptions = createCubemapLoadOptions(cubemap, loadOptions);
+  if (typeof cubemap === "string") {
+    return await (0, import_core4.load)(cubemap, import_textures.TextureCubeLoader, normalizedLoadOptions);
+  }
+  return await import_textures.TextureCubeLoader.parseText(JSON.stringify(cubemap), normalizedLoadOptions);
+}
+function createCubemapTexture(device, data) {
+  return new import_engine2.DynamicTexture(device, {
+    dimension: "cube",
+    data,
+    mipmaps: true,
+    sampler: {
+      addressModeU: "clamp-to-edge",
+      addressModeV: "clamp-to-edge",
+      addressModeW: "clamp-to-edge",
+      magFilter: "linear",
+      minFilter: "linear",
+      mipmapFilter: "linear"
+    }
+  });
+}
+function getSkyboxViewMatrix(viewport) {
+  const viewMatrix = new import_core6.Matrix4(viewport.viewMatrixUncentered || viewport.viewMatrix);
+  viewMatrix[12] = 0;
+  viewMatrix[13] = 0;
+  viewMatrix[14] = 0;
+  return viewMatrix;
+}
+function getSkyboxModelMatrix(orientation = "default") {
+  if (orientation === "y-up") {
+    return new import_core6.Matrix4().rotateX(Math.PI / 2).scale([2, 2, 2]);
+  }
+  return new import_core6.Matrix4(SKYBOX_SCALE);
+}
+function createShaderInputModules(defaultShaderModules) {
+  return Object.fromEntries([app, ...defaultShaderModules].map((module2) => [module2.name, module2]));
+}
+var SKYBOX_WGSL = (
+  /* wgsl */
+  `
+struct appUniforms {
+  modelMatrix: mat4x4<f32>,
+  viewMatrix: mat4x4<f32>,
+  projectionMatrix: mat4x4<f32>,
+};
+
+@group(0) @binding(auto) var<uniform> app : appUniforms;
+@group(0) @binding(auto) var cubeTexture : texture_cube<f32>;
+@group(0) @binding(auto) var cubeTextureSampler : sampler;
+
+struct VertexInputs {
+  @location(0) positions : vec3<f32>,
+};
+
+struct VertexOutputs {
+  @builtin(position) position : vec4<f32>,
+  @location(0) direction : vec3<f32>,
+};
+
+@vertex
+fn vertexMain(inputs: VertexInputs) -> VertexOutputs {
+  var outputs : VertexOutputs;
+  let clipPosition =
+    app.projectionMatrix *
+    app.viewMatrix *
+    app.modelMatrix *
+    vec4<f32>(inputs.positions, 1.0);
+  outputs.position = vec4<f32>(clipPosition.x, clipPosition.y, clipPosition.w, clipPosition.w);
+  outputs.direction = inputs.positions;
+  return outputs;
+}
+
+@fragment
+fn fragmentMain(inputs: VertexOutputs) -> @location(0) vec4<f32> {
+  return textureSample(cubeTexture, cubeTextureSampler, normalize(inputs.direction));
+}
+`
+);
+var SKYBOX_VS = (
+  /* glsl */
+  `#version 300 es
+in vec3 positions;
+
+uniform appUniforms {
+  mat4 modelMatrix;
+  mat4 viewMatrix;
+  mat4 projectionMatrix;
+} app;
+
+out vec3 vDirection;
+
+void main(void) {
+  vec4 clipPosition =
+    app.projectionMatrix * app.viewMatrix * app.modelMatrix * vec4(positions, 1.0);
+  gl_Position = clipPosition.xyww;
+  vDirection = positions;
+}
+`
+);
+var SKYBOX_FS = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+
+uniform samplerCube cubeTexture;
+
+in vec3 vDirection;
+out vec4 fragColor;
+
+void main(void) {
+  fragColor = texture(cubeTexture, normalize(vDirection));
+}
+`
+);
 //# sourceMappingURL=index.cjs.map