diff --git a/packages/lesson_008/src/drawcalls/SDF.ts b/packages/lesson_008/src/drawcalls/SDF.ts index 00ebacb..5c55fea 100644 --- a/packages/lesson_008/src/drawcalls/SDF.ts +++ b/packages/lesson_008/src/drawcalls/SDF.ts @@ -79,12 +79,19 @@ export class SDF extends Drawcall { this.#inputLayout.destroy(); this.#pipeline.destroy(); } + + const diagnosticDerivativeUniformityHeader = + this.device.queryVendorInfo().platformString === 'WebGPU' + ? 'diagnostic(off,derivative_uniformity);' + : ''; + this.#program = this.device.createProgram({ vertex: { glsl: defines + vert, }, fragment: { glsl: defines + frag, + postprocess: (fs) => diagnosticDerivativeUniformityHeader + fs, }, }); diff --git a/packages/lesson_009/src/drawcalls/SDF.ts b/packages/lesson_009/src/drawcalls/SDF.ts index 38e8d38..a2f1261 100644 --- a/packages/lesson_009/src/drawcalls/SDF.ts +++ b/packages/lesson_009/src/drawcalls/SDF.ts @@ -79,12 +79,19 @@ export class SDF extends Drawcall { this.#inputLayout.destroy(); this.#pipeline.destroy(); } + + const diagnosticDerivativeUniformityHeader = + this.device.queryVendorInfo().platformString === 'WebGPU' + ? 'diagnostic(off,derivative_uniformity);' + : ''; + this.#program = this.device.createProgram({ vertex: { glsl: defines + vert, }, fragment: { glsl: defines + frag, + postprocess: (fs) => diagnosticDerivativeUniformityHeader + fs, }, }); diff --git a/packages/lesson_010/examples/main.ts b/packages/lesson_010/examples/main.ts index 5efa93c..0c82327 100644 --- a/packages/lesson_010/examples/main.ts +++ b/packages/lesson_010/examples/main.ts @@ -1,4 +1,4 @@ -import { Canvas, Circle, Ellipse, Rect } from '../src'; +import { Canvas, Circle } from '../src'; const $canvas = document.getElementById('canvas') as HTMLCanvasElement; const resize = (width: number, height: number) => { @@ -14,7 +14,7 @@ resize(window.innerWidth, window.innerHeight); const canvas = await new Canvas({ canvas: $canvas, - // renderer: 'webgpu', + renderer: 'webgpu', shaderCompilerPath: 'https://unpkg.com/@antv/g-device-api@1.6.8/dist/pkg/glsl_wgsl_compiler_bg.wasm', }).initialized; @@ -38,65 +38,6 @@ for (let i = 0; i < 1; i++) { }); canvas.appendChild(circle); - const ellipse = new Ellipse({ - // cx: Math.random() * 1000, - // cy: Math.random() * 1000, - // rx: Math.random() * 20, - // ry: Math.random() * 20, - cx: 100, - cy: 300, - rx: 50, - ry: 100, - stroke: 'black', - // strokeWidth: 20, - // strokeOpacity: 0.5, - fillOpacity: 0.5, - fill: 'red', - }); - canvas.appendChild(ellipse); - - const rect = new Rect({ - x: 0, - y: 0, - width: 400, - height: 100, - fill: 'red', - // fillOpacity: 0.5, - // strokeWidth: 10, - // stroke: 'black', - // strokeOpacity: 0.5, - cornerRadius: 50, - batchable: false, - dropShadowColor: 'black', - dropShadowOffsetX: 10, - dropShadowOffsetY: 10, - dropShadowBlurRadius: 10, - }); - canvas.appendChild(rect); - - const rect2 = new Rect({ - x: 50, - y: 50, - width: 400, - height: 100, - fill: 'red', - // fillOpacity: 0.5, - // strokeWidth: 10, - // stroke: 'black', - // strokeOpacity: 0.5, - // batchable: false, - cornerRadius: 50, - // dropShadowColor: 'black', - // dropShadowOffsetX: 10, - // dropShadowOffsetY: 10, - // dropShadowBlurRadius: 10, - innerShadowColor: 'blue', - innerShadowOffsetX: 10, - innerShadowOffsetY: 10, - innerShadowBlurRadius: 10, - }); - canvas.appendChild(rect2); - // circle.addEventListener('pointerenter', () => { // circle.fill = 'red'; // }); @@ -105,33 +46,6 @@ for (let i = 0; i < 1; i++) { // }); } -// for (let i = 0; i < 100; i++) { -// const fill = `rgb(${Math.floor(Math.random() * 255)},${Math.floor( -// Math.random() * 255, -// )},${Math.floor(Math.random() * 255)})`; -// const rect = new Rect({ -// x: Math.random() * 1000, -// y: Math.random() * 1000, -// fill, -// batchable: false, -// dropShadowColor: 'black', -// dropShadowOffsetX: Math.random() * 5, -// dropShadowOffsetY: Math.random() * 5, -// dropShadowBlurRadius: Math.random() * 10, -// }); -// rect.width = Math.random() * 40; -// rect.height = Math.random() * 40; -// rect.cornerRadius = Math.min(rect.width / 2, rect.height / 2); -// canvas.appendChild(rect); - -// rect.addEventListener('pointerenter', () => { -// rect.fill = 'red'; -// }); -// rect.addEventListener('pointerleave', () => { -// rect.fill = fill; -// }); -// } - const animate = () => { canvas.render(); requestAnimationFrame(animate); diff --git a/packages/lesson_010/package.json b/packages/lesson_010/package.json index df797d1..3377ebb 100644 --- a/packages/lesson_010/package.json +++ b/packages/lesson_010/package.json @@ -37,13 +37,15 @@ }, "dependencies": { "@antv/g-device-api": "^1.6.12", + "@lit/context": "^1.1.2", + "@loaders.gl/core": "^4.2.2", + "@loaders.gl/images": "^4.2.2", "@pixi/math": "^7.4.2", "bezier-easing": "^2.1.0", "d3-color": "^3.1.0", "eventemitter3": "^5.0.1", "gl-matrix": "^3.4.3", "lit": "^3.1.3", - "@lit/context": "latest", "rbush": "^3.0.1" }, "devDependencies": { diff --git a/packages/lesson_010/src/drawcalls/SDF.ts b/packages/lesson_010/src/drawcalls/SDF.ts index 38e8d38..a2f1261 100644 --- a/packages/lesson_010/src/drawcalls/SDF.ts +++ b/packages/lesson_010/src/drawcalls/SDF.ts @@ -79,12 +79,19 @@ export class SDF extends Drawcall { this.#inputLayout.destroy(); this.#pipeline.destroy(); } + + const diagnosticDerivativeUniformityHeader = + this.device.queryVendorInfo().platformString === 'WebGPU' + ? 'diagnostic(off,derivative_uniformity);' + : ''; + this.#program = this.device.createProgram({ vertex: { glsl: defines + vert, }, fragment: { glsl: defines + frag, + postprocess: (fs) => diagnosticDerivativeUniformityHeader + fs, }, }); diff --git a/packages/lesson_010/src/shapes/mixins/Renderable.ts b/packages/lesson_010/src/shapes/mixins/Renderable.ts index 881921b..1410c4e 100644 --- a/packages/lesson_010/src/shapes/mixins/Renderable.ts +++ b/packages/lesson_010/src/shapes/mixins/Renderable.ts @@ -40,8 +40,12 @@ export interface IRenderable { /** * It's a presentation attribute that defines the color used to paint the element. * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill + * + * Enhanced with the following features: + * * base64 image is also supported. + * * HTMLImageElement is also supported. */ - fill: string; + fill: string | HTMLImageElement; /** * It is a presentation attribute defining the color used to paint the outline of the shape. @@ -141,7 +145,7 @@ export function Renderable(Base: TBase) { boundsDirtyFlag = true; globalRenderOrder: number; - #fill: string; + #fill: string | HTMLImageElement; #fillRGB: d3.RGBColor; #stroke: string; #strokeRGB: d3.RGBColor; @@ -214,10 +218,19 @@ export function Renderable(Base: TBase) { get fill() { return this.#fill; } - set fill(fill: string) { + set fill(fill: string | HTMLImageElement) { if (this.#fill !== fill) { this.#fill = fill; - this.#fillRGB = d3.rgb(fill); + + if (fill instanceof HTMLImageElement) { + if (!fill.complete) { + fill.onload = () => { + this.renderDirtyFlag = true; + }; + } + } else { + this.#fillRGB = d3.rgb(fill); + } this.renderDirtyFlag = true; } } diff --git a/packages/site/docs/guide/lesson-009.md b/packages/site/docs/guide/lesson-009.md index 50ab09e..93bff94 100644 --- a/packages/site/docs/guide/lesson-009.md +++ b/packages/site/docs/guide/lesson-009.md @@ -98,7 +98,7 @@ float sdf_rounded_box(vec2 p, vec2 b, float r) { } ``` -Referencing Figma's naming, we use `cornerRadius`, but SDF alone cannot achieve the `smoothing` effect, see [Adjust corner radius and smoothing] for details. In addition, it is also possible to support different corner radii for each corner, refer to [Zed Blade WGSL], which is a Shader written by Zed based on [blade] renderer, using WGSL syntax. +Referencing Figma's naming, we use `cornerRadius`, but SDF alone cannot achieve the `smoothing` effect, see [Adjust corner radius and smoothing] and [Desperately seeking squircles] for details. In addition, it is also possible to support different corner radii for each corner, refer to [Zed Blade WGSL], which is a Shader written by Zed based on [blade] renderer, using WGSL syntax. ```js eval code=false $icCanvas2 = call(() => { @@ -808,6 +808,7 @@ function isPointInRoundedRectangle( Hyperellipsoid] - [Fast Rounded Rectangle Shadows] - [Blurred rounded rectangles] +- [Desperately seeking squircles] [Lesson 2]: /guide/lesson-002 [2D distance functions]: https://iquilezles.org/articles/distfunctions2d/ @@ -839,3 +840,4 @@ function isPointInRoundedRectangle( [tailwindcss - Drop Shadow]: https://tailwindcss.com/docs/drop-shadow [Drop shadow of rounded rect]: https://www.shadertoy.com/view/NtVSW1 [Inner shadow of rounded rect]: https://www.shadertoy.com/view/mssGzn +[Desperately seeking squircles]: https://www.figma.com/blog/desperately-seeking-squircles/ diff --git a/packages/site/docs/zh/guide/lesson-009.md b/packages/site/docs/zh/guide/lesson-009.md index d6bc398..136c73d 100644 --- a/packages/site/docs/zh/guide/lesson-009.md +++ b/packages/site/docs/zh/guide/lesson-009.md @@ -98,7 +98,7 @@ float sdf_rounded_box(vec2 p, vec2 b, float r) { } ``` -参考 Figma 的命名我们使用 `cornerRadius`，但仅凭 SDF 无法实现 `smoothing` 效果，详见 [Adjust corner radius and smoothing]。另外也可以支持四个角不同的圆角半径，可以参考 [Zed Blade WGSL]，这是 Zed 基于 [blade] 渲染器编写的 Shader，使用 WGSL 语法。 +参考 Figma 的命名我们使用 `cornerRadius`，但仅凭 SDF 无法实现 `smoothing` 效果，详见 [Adjust corner radius and smoothing] 和 [Desperately seeking squircles]。另外也可以支持四个角不同的圆角半径，可以参考 [Zed Blade WGSL]，这是 Zed 基于 [blade] 渲染器编写的 Shader，使用 WGSL 语法。 ```js eval code=false $icCanvas2 = call(() => { @@ -810,6 +810,7 @@ function isPointInRoundedRectangle( Hyperellipsoid] - [Fast Rounded Rectangle Shadows] - [Blurred rounded rectangles] +- [Desperately seeking squircles] [课程 2]: /zh/guide/lesson-002 [2D distance functions]: https://iquilezles.org/articles/distfunctions2d/ @@ -841,3 +842,4 @@ function isPointInRoundedRectangle( [tailwindcss - Drop Shadow]: https://tailwindcss.com/docs/drop-shadow [Drop shadow of rounded rect]: https://www.shadertoy.com/view/NtVSW1 [Inner shadow of rounded rect]: https://www.shadertoy.com/view/mssGzn +[Desperately seeking squircles]: https://www.figma.com/blog/desperately-seeking-squircles/ diff --git a/packages/site/docs/zh/guide/lesson-010.md b/packages/site/docs/zh/guide/lesson-010.md index 5d3f188..f808763 100644 --- a/packages/site/docs/zh/guide/lesson-010.md +++ b/packages/site/docs/zh/guide/lesson-010.md @@ -7,10 +7,10 @@ outline: deep 图片导入导出在无限画布中是一个非常重要的功能，通过图片产物可以和其他工具打通。因此虽然目前我们的画布绘制能力还很有限，但不妨提前考虑和图片相关的问题。在这节课中你将学习到以下内容： - 将画布内容导出成 PNG，JPEG 和 SVG 格式的图片，并支持 PDF -- 导入图片到画布中 +- 在画布中渲染图片 - 拓展 SVG 的能力，以 stroke 为例 -## 导出图片 {#export-image} +## 将画布内容导出成图片 {#export-image} 首先我们来看如何将画布内容导出成图片。[Export from Figma] 一文介绍了在 Figma 中如何通过切片工具将画布内容导出成包括 PNG 在内的多种格式图片。 @@ -282,7 +282,7 @@ call(() => { 最后还有一点需要注意，在我们的场景图中任意图形都可以添加子节点，但 SVG 中只有 `` 才可以添加子元素，`` 是无法拥有子元素的。解决办法也很简单，对于拥有子节点的非 Group 元素，生成 SVG 时在外面套一个 ``，将原本应用在本身的 `transform` 应用在它上面。假设后续我们支持了渲染文本，一个拥有文本子节点的 Circle 对应的 SVG 如下： -```svg +```html @@ -291,11 +291,98 @@ call(() => { ### 导出 PDF {#to-pdf} -## 渲染图片 +现在像素和矢量图都有了，如果还想导出成 PDF 可以使用 [jsPDF]，它提供了添加图片的 API，限于篇幅这里就不介绍了。 -## Enhanced SVG: Stroke alignment +下面让我们来看另一个话题，如何在画布中渲染一张图片。 -最后我们来引入一个有趣的话题。 +## 在画布中渲染图片 {#render-image} + +在 WebGL / WebGPU 中通常需要加载图片并将其作为纹理使用，由于加载不同类型的资源是一个复杂的异步过程，大部分渲染引擎都会提供一个资源加载器。通常还会支持除不同类型图片之外的其他数据类型，例如音频、JSON、glTF 等。下面是 [PIXI Assets] 的使用例子： + +```ts +import { Sprite, Assets } from 'pixi.js'; +// load the texture we need +const texture = await Assets.load('bunny.png'); + +// This creates a texture from a 'bunny.png' image +const bunny = new Sprite(texture); +``` + +那么如何实现一个资源加载器呢？ + +### 图片加载器 {#image-loader} + +[loaders.gl] 针对不同类型的资源提供了一系列加载器，例如： + +- 可视化应用中常用的 JSON、CSV、GeoJSON、地理信息瓦片等 +- 3D 模型格式例如 glTF 等 +- 各种压缩纹理格式，使用 [CompressedTextureLoader] 在 WebWorker 中进行加载解析 + +这些加载器为上层应用的开发提供了极大便利，我们可以直接使用 [ImageLoader]，它支持这些图片格式：PNG, JPEG, GIF, WEBP, AVIF, BMP, SVG。使用方式如下，这里也能看出 [loaders.gl] 的设计思路，`@loaders.gl/core` 保证了 API 调用方式的统一以及不同类型加载器的可扩展性： + +```ts +import { ImageLoader } from '@loaders.gl/images'; +import { load } from '@loaders.gl/core'; + +const image = await load(url, ImageLoader, options); +``` + +### API 设计 {#image-api} + +回到我们的 API 设计部分，我们当然可以仿照之前的 Circle / Ellipse / Rect 为图片新增一种图形，对应 SVG 的 [\]： + +```ts +const image = new Image({ + x: 0, + y: 0, + width: 100, + height: 100, + src: 'data:image...', +}); +``` + +但仔细想想 Image 应该拥有 Rect 的全部能力，例如描边、圆角、阴影等等。有趣的是在 Figma 中如果我们选择向画布中插入一张原尺寸 1920 \* 1920 的图片并导出成 SVG，会得到一个 `` 元素，它的结构如下（省略部分属性值），`fill` 属性引用了一个 [\]，间接使用了图片平铺填充： + +```html + + + + + + transform="matrix(0.000520833 0 0 0.000527058 0 -0.0059761)" /> + + + + +``` + +这给了我们一点启发，图片没必要以图形的形式单独存在，只要其他图形的 `fill` 属性支持贴图就好了，这样 Circle / Rect 等都可以使用图片作为填充。试想我们需要实现一个带描边的圆形图标需求，按照原本的设计需要一个 Image 图形搭配类似 [\] 才能实现，现在只需要在已有 Circle 图形上填充图片： + +```ts +circle.fill = image; +circle.stroke = 'black'; +``` + +### 实现 {#implementation} + +因此第一步 + +```ts +export interface IRenderable { + fill: string; // [!code --] + fill: string | HTMLImageElement; // [!code ++] +} +``` + +## 增强 SVG: Stroke alignment {#stroke-alignment} + +最后我们来引入一个有趣的话题。我们可以实现目前 SVG 规范还不支持的特性。 `opacity` `stroke-opacity` 和 `fill-opacity` 的区别： @@ -324,6 +411,13 @@ Figma 中的 Stroke 取值包括 `Center / Inside / Outside` [网格]: /zh/guide/lesson-005 [SVG Element]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element [\]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg +[\]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image +[\]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern +[\]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath [setAttribute]: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute [Creating inner shadow in svg]: https://stackoverflow.com/questions/69799051/creating-inner-shadow-in-svg [jsPDF]: https://github.com/parallax/jsPDF +[loaders.gl]: https://github.com/visgl/loaders.gl +[ImageLoader]: https://loaders.gl/docs/modules/images/api-reference/image-loader +[CompressedTextureLoader]: https://loaders.gl/docs/modules/textures/api-reference/compressed-texture-loader +[PIXI Assets]: https://pixijs.download/release/docs/assets.html diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 852fa3f..97962d3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -290,8 +290,14 @@ importers: specifier: ^1.6.12 version: 1.6.12 '@lit/context': - specifier: latest + specifier: ^1.1.2 version: 1.1.2 + '@loaders.gl/core': + specifier: ^4.2.2 + version: 4.2.2 + '@loaders.gl/images': + specifier: ^4.2.2 + version: 4.2.2(@loaders.gl/core@4.2.2) '@pixi/math': specifier: ^7.4.2 version: 7.4.2 @@ -784,6 +790,29 @@ packages: '@lit/reactive-element@2.0.4': resolution: {integrity: sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==} + '@loaders.gl/core@4.2.2': + resolution: {integrity: sha512-d3YElSsqL29MaiOwzGB97v994SPotbTvJnooCqoQsYGoYYrECdIetv1/zlfDsh5UB2Wl/NaUMJrzyOqlLmDz5Q==} + + '@loaders.gl/images@4.2.2': + resolution: {integrity: sha512-R53rkexvVT0i4YXt++r8gLq3reB6kWTLvdJL81J3R4YJbM5+kNSe40jJOA94LFYlsTN+oirF4lkLTe5YXGZPYQ==} + peerDependencies: + '@loaders.gl/core': ^4.0.0 + + '@loaders.gl/loader-utils@4.2.2': + resolution: {integrity: sha512-5udJQhFx1KNIcRBYkFMi8QZitAsK+m3PkZ9GejM8VpOSsJUHD2Yal3wBHOPTRsOjQ0zXG/nqM7BHOojjeetNTg==} + peerDependencies: + '@loaders.gl/core': ^4.0.0 + + '@loaders.gl/schema@4.2.2': + resolution: {integrity: sha512-vrQ6vlGWWptJXDP1DrL5x/j70xmyt2l36QZcGyDYptrohTGvQLc3yrOEHuD5v96fXX5WR619pT3zSYhuf1FnIg==} + peerDependencies: + '@loaders.gl/core': ^4.0.0 + + '@loaders.gl/worker-utils@4.2.2': + resolution: {integrity: sha512-7Ad83VS/PmS0T3LXo+LB6cq5oHhAUW3GvYWizm4OfeuBDQRtYK7iRehgC13/BomkNtWIn0y7iAphlQMVrNdvhQ==} + peerDependencies: + '@loaders.gl/core': ^4.0.0 + '@nodelib/fs.scandir@2.1.5': resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -806,6 +835,15 @@ packages: '@pixi/math@7.4.2': resolution: {integrity: sha512-7jHmCQoYk6e0rfSKjdNFOPl0wCcdgoraxgteXJTTHv3r0bMNx2pHD9FJ0VvocEUG7XHfj55O3+u7yItOAx0JaQ==} + '@probe.gl/env@4.0.9': + resolution: {integrity: sha512-AOmVMD0/j78mX+k4+qX7ZhE0sY9H+EaJgIO6trik0BwV6VcrwxTGCGFAeuRsIGhETDnye06tkLXccYatYxAYwQ==} + + '@probe.gl/log@4.0.9': + resolution: {integrity: sha512-ebuZaodSRE9aC+3bVC7cKRHT8garXeT1jTbj1R5tQRqQYc9iGeT3iemVOHx5bN9Q6gAs/0j54iPI+1DvWMAW4A==} + + '@probe.gl/stats@4.0.9': + resolution: {integrity: sha512-Q9Xt/sJUQaMsbjRKjOscv2t7wXIymTrOEJ4a3da4FTCn7bkKvcdxdyFAQySCrtPxE+YZ5I5lXpWPgv9BwmpE1g==} + '@rollup/rollup-android-arm-eabi@4.16.4': resolution: {integrity: sha512-GkhjAaQ8oUTOKE4g4gsZ0u8K/IHU1+2WQSgS1TwTcYvL+sjbaQjNHFXbOJ6kgqGHIO1DfUhI/Sphi9GkRT9K+Q==} cpu: [arm] @@ -911,6 +949,9 @@ packages: '@types/estree@1.0.5': resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} + '@types/geojson@7946.0.14': + resolution: {integrity: sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==} + '@types/gl-matrix@3.2.0': resolution: {integrity: sha512-CY4JAtSOGQX7rVgqVuOk7ZfaLv8VeadDMPj3smMOy8Hp/YiHONa3Mr0mEUgbo0eEwV7+Owpf6BwspcA7hv4NXg==} deprecated: This is a stub types definition. gl-matrix provides its own type definitions, so you do not need this installed. @@ -3337,6 +3378,34 @@ snapshots: dependencies: '@lit-labs/ssr-dom-shim': 1.2.0 + '@loaders.gl/core@4.2.2': + dependencies: + '@loaders.gl/loader-utils': 4.2.2(@loaders.gl/core@4.2.2) + '@loaders.gl/schema': 4.2.2(@loaders.gl/core@4.2.2) + '@loaders.gl/worker-utils': 4.2.2(@loaders.gl/core@4.2.2) + '@probe.gl/log': 4.0.9 + + '@loaders.gl/images@4.2.2(@loaders.gl/core@4.2.2)': + dependencies: + '@loaders.gl/core': 4.2.2 + '@loaders.gl/loader-utils': 4.2.2(@loaders.gl/core@4.2.2) + + '@loaders.gl/loader-utils@4.2.2(@loaders.gl/core@4.2.2)': + dependencies: + '@loaders.gl/core': 4.2.2 + '@loaders.gl/schema': 4.2.2(@loaders.gl/core@4.2.2) + '@loaders.gl/worker-utils': 4.2.2(@loaders.gl/core@4.2.2) + '@probe.gl/stats': 4.0.9 + + '@loaders.gl/schema@4.2.2(@loaders.gl/core@4.2.2)': + dependencies: + '@loaders.gl/core': 4.2.2 + '@types/geojson': 7946.0.14 + + '@loaders.gl/worker-utils@4.2.2(@loaders.gl/core@4.2.2)': + dependencies: + '@loaders.gl/core': 4.2.2 + '@nodelib/fs.scandir@2.1.5': dependencies: '@nodelib/fs.stat': 2.0.5 @@ -3360,6 +3429,14 @@ snapshots: '@pixi/math@7.4.2': {} + '@probe.gl/env@4.0.9': {} + + '@probe.gl/log@4.0.9': + dependencies: + '@probe.gl/env': 4.0.9 + + '@probe.gl/stats@4.0.9': {} + '@rollup/rollup-android-arm-eabi@4.16.4': optional: true @@ -3436,6 +3513,8 @@ snapshots: '@types/estree@1.0.5': {} + '@types/geojson@7946.0.14': {} + '@types/gl-matrix@3.2.0': dependencies: gl-matrix: 3.4.3