From 593ef2bd04b6b37a376e7366b55f29e40a371293 Mon Sep 17 00:00:00 2001 From: XanthosXanthopoulos <38084549+XanthosXanthopoulos@users.noreply.github.com> Date: Wed, 25 Sep 2024 18:13:38 +0300 Subject: [PATCH] Custom polygon material (#168) * Bumb BabylonJS version to 7.24 Remove material plugins and add custom material for polygon meshes * Replace number literals with named constants, remove commented code --- package.json | 8 - packages/common/package.json | 2 +- packages/core/package.json | 18 +- packages/core/src/base/base.ts | 10 +- .../pipelines/high-quality-splats.ts | 10 +- .../src/point-cloud/utils/particle-shader.ts | 4 +- packages/core/src/tile/constants.ts | 4 + .../materials/plugins/categoricalPlugin.ts | 165 --------------- .../tile/materials/plugins/selectionPlugin.ts | 78 ------- .../src/tile/materials/pointShaderMaterial.ts | 18 +- .../tile/materials/polygonShaderMaterial.ts | 199 ++++++++++++++++-- .../core/src/tile/model/3d/3DTileContent.ts | 5 +- .../tile/model/geometry/geometryContent.ts | 92 ++++---- .../tile/model/geometry/geometryManager.ts | 79 ++++--- .../core/src/tile/model/image/imageManager.ts | 1 + .../core/src/tile/model/point/pointContent.ts | 7 +- .../core/src/tile/model/point/pointManager.ts | 11 +- .../pipelines/minimapPostProcessWebGPU.ts | 12 +- packages/core/src/tile/tileImage.ts | 2 +- packages/core/src/tile/utils/helpers.ts | 6 +- .../utils/metadata-utils/metadata-utils.ts | 16 +- .../pointcloud-metadata-utils.ts | 10 +- yarn.lock | 109 +++++----- 23 files changed, 425 insertions(+), 441 deletions(-) create mode 100644 packages/core/src/tile/constants.ts delete mode 100644 packages/core/src/tile/materials/plugins/categoricalPlugin.ts delete mode 100644 packages/core/src/tile/materials/plugins/selectionPlugin.ts diff --git a/package.json b/package.json index 42ac296d..f3a6823b 100644 --- a/package.json +++ b/package.json @@ -51,14 +51,6 @@ "typescript": "4.7.4", "vite-plugin-dts": "^3.3.1" }, - "dependenciesMeta": { - "@babylonjs/core@5.42.0": { - "unplugged": true - }, - "@babylonjs/materials@5.42.0": { - "unplugged": true - } - }, "dependencies": { "node-sass": "^9.0.0", "svelte-preprocess": "^5.0.4" diff --git a/packages/common/package.json b/packages/common/package.json index 6666032a..321e6ed1 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -35,7 +35,7 @@ "lint:fix": "yarn g:eslint './src/**/*.{ts,tsx}' --fix" }, "dependencies": { - "@babylonjs/core": "7.0.0", + "@babylonjs/core": "^7.26.0", "@tiledb-inc/tiledb-cloud": "1.0.15-alpha.1" }, "devDependencies": { diff --git a/packages/core/package.json b/packages/core/package.json index cb9db3fc..d4d8d82e 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -39,20 +39,20 @@ "lint:fix": "yarn g:eslint './src/**/*.{ts,tsx}' --fix" }, "dependencies": { - "@babylonjs/core": "7.0.0", - "@babylonjs/gui": "7.0.0", - "@babylonjs/gui-editor": "7.0.0", - "@babylonjs/inspector": "7.0.0", - "@babylonjs/loaders": "7.0.0", - "@babylonjs/materials": "7.0.0", - "@babylonjs/serializers": "7.0.0", + "@babylonjs/core": "^7.26.0", + "@babylonjs/gui": "^7.26.0", + "@babylonjs/gui-editor": "^7.26.0", + "@babylonjs/inspector": "^7.26.0", + "@babylonjs/loaders": "^7.26.0", + "@babylonjs/materials": "^7.26.0", + "@babylonjs/serializers": "^7.26.0", "@tiledb-inc/tiledb-cloud": "1.0.15-alpha.1", "@tiledb-inc/viz-common": "workspace:packages/common", "@tiledb-inc/viz-components": "workspace:packages/components", "@tiledb-inc/wkx": "https://github.com/TileDB-Inc/wkx", "axios": "^0.21.1", - "babylonjs-gui": "7.0.0", - "babylonjs-materials": "7.0.0", + "babylonjs-gui": "^7.26.0", + "babylonjs-materials": "^7.26.0", "earcut": "2.2.4", "geometry-extrude": "0.2.1", "idb": "^7.0.2", diff --git a/packages/core/src/base/base.ts b/packages/core/src/base/base.ts index f1f7d09e..63e60339 100644 --- a/packages/core/src/base/base.ts +++ b/packages/core/src/base/base.ts @@ -1,4 +1,10 @@ -import { Engine, Scene, SceneLoader, WebGPUEngine } from '@babylonjs/core'; +import { + AbstractEngine, + Engine, + Scene, + SceneLoader, + WebGPUEngine +} from '@babylonjs/core'; import '@babylonjs/loaders/glTF'; import '@babylonjs/core/Debug/debugLayer'; import '@babylonjs/inspector'; @@ -39,7 +45,7 @@ export class TileDBVisualization { width: string; height: string; canvas?: HTMLCanvasElement; - engine?: Engine; + engine?: AbstractEngine; wheelPrecision: number; moveSpeed: number; inspector?: boolean; diff --git a/packages/core/src/point-cloud/pipelines/high-quality-splats.ts b/packages/core/src/point-cloud/pipelines/high-quality-splats.ts index 9f86e35d..74ef6282 100644 --- a/packages/core/src/point-cloud/pipelines/high-quality-splats.ts +++ b/packages/core/src/point-cloud/pipelines/high-quality-splats.ts @@ -25,8 +25,8 @@ export class SPSHighQualitySplats { const depthRenderTarget = new RenderTargetTexture( 'LinearDepthRenderTarget', { - width: this.scene.getEngine()._gl.canvas.width, - height: this.scene.getEngine()._gl.canvas.height + width: this.scene.getEngine().getRenderWidth(), + height: this.scene.getEngine().getRenderHeight() }, this.scene, { @@ -41,8 +41,8 @@ export class SPSHighQualitySplats { const additiveColorRenderTarget = new RenderTargetTexture( 'additiveColorRenderTarget', { - width: this.scene.getEngine()._gl.canvas.width, - height: this.scene.getEngine()._gl.canvas.height + width: this.scene.getEngine().getRenderWidth(), + height: this.scene.getEngine().getRenderHeight() }, this.scene, { @@ -63,7 +63,7 @@ export class SPSHighQualitySplats { throw new Error('Render target initialization failed'); } - depthRenderTarget.renderTarget._shareDepth( + depthRenderTarget.renderTarget.shareDepth( additiveColorRenderTarget.renderTarget ); diff --git a/packages/core/src/point-cloud/utils/particle-shader.ts b/packages/core/src/point-cloud/utils/particle-shader.ts index e8cd6040..f959d3ba 100644 --- a/packages/core/src/point-cloud/utils/particle-shader.ts +++ b/packages/core/src/point-cloud/utils/particle-shader.ts @@ -1,6 +1,6 @@ import { + AbstractEngine, Effect, - Engine, PostProcess, Scene, ShaderMaterial @@ -155,7 +155,7 @@ class ParticleShaderMaterial { scene: Scene, model: ArrayModel, options: TileDBPointCloudOptions, - engine?: Engine + engine?: AbstractEngine ) { if (scene.activeCameras) { if (engine) { diff --git a/packages/core/src/tile/constants.ts b/packages/core/src/tile/constants.ts new file mode 100644 index 00000000..ed6f6140 --- /dev/null +++ b/packages/core/src/tile/constants.ts @@ -0,0 +1,4 @@ +export const HIGHLIGHTED_STATE = 1; +export const SELECTED_STATE = 2; +export const COLOR_GROUPS = 32; +export const MAX_CATEGORIES = 192; diff --git a/packages/core/src/tile/materials/plugins/categoricalPlugin.ts b/packages/core/src/tile/materials/plugins/categoricalPlugin.ts deleted file mode 100644 index 1c150638..00000000 --- a/packages/core/src/tile/materials/plugins/categoricalPlugin.ts +++ /dev/null @@ -1,165 +0,0 @@ -import { - MaterialPluginBase, - Material, - AbstractMesh, - Scene, - Nullable, - MaterialDefines, - Engine, - SubMesh, - UniformBuffer -} from '@babylonjs/core'; -import { Feature, FeatureType } from '@tiledb-inc/viz-common'; - -export class CategoricalMaterialPlugin extends MaterialPluginBase { - private _isEnabled = false; - private _feature?: Feature; - private _colorScheme: Float32Array; - private _groupMap: Float32Array; - - public get colorScheme(): Float32Array { - return this._colorScheme; - } - - public set colorScheme(value: Float32Array) { - this._colorScheme = value; - } - - public get groupMap(): Float32Array { - return this._groupMap; - } - - public set groupMap(value: Float32Array) { - this._groupMap = value; - } - - public get feature(): Feature | undefined { - return this._feature; - } - - public set feature(value: Feature | undefined) { - this._feature = value; - - this.markAllDefinesAsDirty(); - } - - constructor(material: Material) { - super(material, 'Categorical', 199, { - FEATURE_TYPE: FeatureType.NON_RENDERABLE - }); - - this._colorScheme = new Float32Array(128).fill(1); - this._groupMap = new Float32Array(512).fill(32); - } - - getUniforms(): { - ubo?: - | { - name: string; - size?: number | undefined; - type?: string | undefined; - arraySize?: number | undefined; - }[] - | undefined; - vertex?: string | undefined; - fragment?: string | undefined; - } { - return { - ubo: [ - { name: 'colorScheme', size: 4, type: 'vec4', arraySize: 32 }, - { name: 'groupMap', size: 4, type: 'vec4', arraySize: 192 } - // Arbitrary upper limit to conform with 896 minimum. Deprecating WebGL2 will result in removing that limit - // Workaround for alignment issue with float/int array - ] - }; - } - - getClassName(): string { - return 'CategoricalMaterialPlugin'; - } - - getAttributes(attributes: string[], scene: Scene, mesh: AbstractMesh): void { - attributes.push('group'); - } - - prepareDefinesBeforeAttributes( - defines: MaterialDefines, - scene: Scene, - mesh: AbstractMesh - ): void { - defines['FEATURE_TYPE'] = this._feature?.type ?? FeatureType.NON_RENDERABLE; - } - - getCustomCode(shaderType: string): Nullable<{ [pointName: string]: string }> { - switch (shaderType) { - case 'vertex': - return { - CUSTOM_VERTEX_DEFINITIONS: ` - #if (FEATURE_TYPE == ${FeatureType.CATEGORICAL}) - attribute int group; - - flat varying vec4 vColor; - #endif - `, - CUSTOM_VERTEX_MAIN_END: ` - #if (FEATURE_TYPE == ${FeatureType.CATEGORICAL}) - int category = int(groupMap[group / 4][group % 4]); - if (category > 31) { - vColor = vec4(0.0); - } - else { - vColor = colorScheme[category]; - } - #endif - ` - }; - case 'fragment': - return { - CUSTOM_FRAGMENT_DEFINITIONS: ` - #if (FEATURE_TYPE == ${FeatureType.CATEGORICAL}) - flat varying vec4 vColor; - #endif - `, - CUSTOM_FRAGMENT_UPDATE_DIFFUSE: ` - #if (FEATURE_TYPE == ${FeatureType.CATEGORICAL}) - if (vColor.a == 0.0) { - discard; - } - - diffuseColor = vColor.rgb; - #endif - ` - }; - default: - return null; - } - } - - bindForSubMesh( - uniformBuffer: UniformBuffer, - scene: Scene, - engine: Engine, - subMesh: SubMesh - ): void { - if (!this._isEnabled) { - return; - } - - uniformBuffer.updateFloatArray('colorScheme', this._colorScheme); - uniformBuffer.updateFloatArray('groupMap', this._groupMap); - } - - get isEnabled(): boolean { - return this._isEnabled; - } - - set isEnabled(enabled: boolean) { - if (this._isEnabled === enabled) { - return; - } - this._isEnabled = enabled; - // when it's changed, we need to mark the material as dirty so the shader is rebuilt. - this.markAllDefinesAsDirty(); - this._enable(this._isEnabled); - } -} diff --git a/packages/core/src/tile/materials/plugins/selectionPlugin.ts b/packages/core/src/tile/materials/plugins/selectionPlugin.ts deleted file mode 100644 index a9102492..00000000 --- a/packages/core/src/tile/materials/plugins/selectionPlugin.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { - MaterialPluginBase, - Material, - AbstractMesh, - Scene, - Nullable -} from '@babylonjs/core'; - -export class SelectionMaterialPlugin extends MaterialPluginBase { - private _isEnabled = false; - private isWebGPU = false; - - constructor(material: Material) { - super(material, 'Selection', 200); - - this.isWebGPU = material.getScene().getEngine().isWebGPU; - } - - getClassName(): string { - return 'SelectionMaterialPlugin'; - } - - getAttributes(attributes: string[], scene: Scene, mesh: AbstractMesh): void { - attributes.push('state'); - } - - getCustomCode(shaderType: string): Nullable<{ [pointName: string]: string }> { - switch (shaderType) { - case 'vertex': - return { - CUSTOM_VERTEX_DEFINITIONS: ` - attribute ${this.isWebGPU ? 'uint' : 'float'} state; - - const vec4 selectionColor = vec4(0.0, 1.0, 0.0, 1.0); - const vec4 pickColor = vec4(1.0, 0.0, 0.0, 1.0); - - flat varying vec4 vColor; - `, - CUSTOM_VERTEX_MAIN_END: ` - if (state == ${this.isWebGPU ? '1u' : '1.0'}) { - vColor = selectionColor; - } - else if (state == ${this.isWebGPU ? '2u' : '2.0'}) { - vColor = pickColor; - } - else { - vColor = vec4(0.0); - } - ` - }; - case 'fragment': - return { - CUSTOM_FRAGMENT_DEFINITIONS: ` - flat varying vec4 vColor; - `, - CUSTOM_FRAGMENT_UPDATE_DIFFUSE: ` - diffuseColor = mix(diffuseColor, vColor.rgb, vColor.a); - ` - }; - default: - return null; - } - } - - get isEnabled(): boolean { - return this._isEnabled; - } - - set isEnabled(enabled: boolean) { - if (this._isEnabled === enabled) { - return; - } - this._isEnabled = enabled; - // when it's changed, we need to mark the material as dirty so the shader is rebuilt. - this.markAllDefinesAsDirty(); - this._enable(this._isEnabled); - } -} diff --git a/packages/core/src/tile/materials/pointShaderMaterial.ts b/packages/core/src/tile/materials/pointShaderMaterial.ts index 14a1fbec..5d4ecd36 100644 --- a/packages/core/src/tile/materials/pointShaderMaterial.ts +++ b/packages/core/src/tile/materials/pointShaderMaterial.ts @@ -7,6 +7,12 @@ import { } from '@babylonjs/core'; import { FeatureType } from '@tiledb-inc/viz-common'; import { PointShape } from '../types'; +import { + COLOR_GROUPS, + HIGHLIGHTED_STATE, + MAX_CATEGORIES, + SELECTED_STATE +} from '../constants'; export function PointCloudMaterialWebGPU( scene: Scene, @@ -58,9 +64,9 @@ export function PointCloudMaterialWebGPU( struct PointOptions { pointSize: f32, color: vec4, - colorScheme: array, 32>, + colorScheme: array, ${COLOR_GROUPS.toFixed(0)}>, pointOpacity: f32, - groupMap: array, 192> + groupMap: array, ${MAX_CATEGORIES.toFixed(0)}> }; var pointOptions : PointOptions; @@ -144,9 +150,9 @@ export function PointCloudMaterial(scene: Scene): ShaderMaterial { layout(std140) uniform pointOptions { float pointSize; vec4 color; - vec4 colorScheme[32]; + vec4 colorScheme[${COLOR_GROUPS.toFixed(0)}]; float pointOpacity; - vec4 groupMap[192]; + vec4 groupMap[${MAX_CATEGORIES.toFixed(0)}]; }; flat out vec4 vColor; @@ -172,10 +178,10 @@ export function PointCloudMaterial(scene: Scene): ShaderMaterial { vColor = color; #endif - if (state == 1.0) { + if (state == ${HIGHLIGHTED_STATE.toFixed(1)}) { vColor = selectionColor; } - else if (state == 2.0) { + else if (state == ${SELECTED_STATE.toFixed(1)}) { vColor = pickColor; } } diff --git a/packages/core/src/tile/materials/polygonShaderMaterial.ts b/packages/core/src/tile/materials/polygonShaderMaterial.ts index b99b6ad5..d790c28f 100644 --- a/packages/core/src/tile/materials/polygonShaderMaterial.ts +++ b/packages/core/src/tile/materials/polygonShaderMaterial.ts @@ -1,56 +1,221 @@ -import { Scene, Effect, ShaderMaterial } from '@babylonjs/core'; +import { + Scene, + Effect, + ShaderMaterial, + ShaderStore, + ShaderLanguage +} from '@babylonjs/core'; +import { FeatureType } from '@tiledb-inc/viz-common'; +import { + COLOR_GROUPS, + HIGHLIGHTED_STATE, + MAX_CATEGORIES, + SELECTED_STATE +} from '../constants'; -export function PolygonShaderMaterial( - name: string, - scene: Scene +export function PolygonShaderMaterialWebGPU( + scene: Scene, + featureType: FeatureType ): ShaderMaterial { + let attributeName: string | undefined = undefined; + let attributeType: string | undefined = undefined; + let coloring: string | undefined = undefined; + + switch (featureType) { + case FeatureType.RGB: + attributeName = 'colorAttr'; + attributeType = 'vec3'; + coloring = + 'vertexOutputs.vColor = vec4(vertexInputs.colorAttr, polygonOptions.opacity);'; + break; + case FeatureType.CATEGORICAL: + attributeName = 'group'; + attributeType = 'i32'; + coloring = ` + let category: i32 = i32(polygonOptions.groupMap[vertexInputs.group / 4][vertexInputs.group % 4]); + vertexOutputs.vColor = mix(vec4(polygonOptions.colorScheme[category].rgb, polygonOptions.opacity), vec4(0), f32(category > 31));`; + break; + } + + ShaderStore.ShadersStoreWGSL[`PolygonFT${featureType}VertexShader`] = ` + #include + #include + + attribute position : vec3; + attribute state : u32; + ${attributeName ? `attribute ${attributeName}: ${attributeType};` : ''} + + const stateColorMap = array( + vec4(0.0), + vec4(0.0, 1.0, 0.0, 1.0), + vec4(0.0, 0.0, 1.0, 1.0), + ); + + struct PolygonOptions { + color: vec4, + opacity: f32, + colorScheme: array, ${COLOR_GROUPS.toFixed(0)}>, + groupMap: array, ${MAX_CATEGORIES.toFixed(0)}> + }; + + var polygonOptions : PolygonOptions; + + varying vColor: vec4; + + @vertex + fn main(input: VertexInputs) -> FragmentInputs + { + vertexOutputs.position = scene.viewProjection * mesh.world * vec4(vertexInputs.position, 1.0); + + ${ + attributeName + ? coloring + : 'vertexOutputs.vColor = vec4(polygonOptions.color.rgb, polygonOptions.opacity);' + } + + vertexOutputs.vColor = mix(vertexOutputs.vColor, stateColorMap[vertexInputs.state], f32(vertexInputs.state)); + } + `; + + ShaderStore.ShadersStoreWGSL[`PolygonFT${featureType}FragmentShader`] = ` + varying vColor: vec4; + + @fragment + fn main(input : FragmentInputs) -> FragmentOutputs { + fragmentOutputs.color = fragmentInputs.vColor; + } +`; + + const material = new ShaderMaterial( + 'PolygonSimpleShader', + scene, + { + vertex: `PolygonFT${featureType}`, + fragment: `PolygonFT${featureType}` + }, + { + attributes: attributeName + ? ['position', 'state', attributeName] + : ['position', 'state'], + uniformBuffers: ['Scene', 'Mesh', 'polygonOptions'], + shaderLanguage: ShaderLanguage.WGSL, + needAlphaBlending: true + } + ); + + material.backFaceCulling = false; + + return material; +} + +export function PolygonShaderMaterialWebGL(scene: Scene): ShaderMaterial { Effect.ShadersStore['PolygonVertexShader'] = ` precision highp float; precision highp int; + #include + in vec3 position; - in uvec2 id; + in float state; + + const vec4 selectionColor = vec4(0.0, 1.0, 0.0, 1.0); + const vec4 pickColor = vec4(1.0, 0.0, 0.0, 1.0); + + #if (FEATURE_TYPE == ${FeatureType.RGB}) + in vec3 colorAttr; + #elif (FEATURE_TYPE == ${FeatureType.CATEGORICAL}) + in int group; + #endif uniform mat4 worldViewProjection; uniform mat4 world; uniform mat4 viewProjection; - flat out uvec2 vId; + layout(std140) uniform polygonOptions { + vec4 color; + float opacity; + vec4 colorScheme[${COLOR_GROUPS.toFixed(0)}]; + vec4 groupMap[${MAX_CATEGORIES.toFixed(0)}]; + }; + + flat out vec4 vColor; void main(void) { - vec4 worldPos = world * vec4(position, 1.0); - - vId = id; - gl_Position = viewProjection * worldPos; + gl_Position = worldViewProjection * vec4(position, 1.0); + + #include + + #if (FEATURE_TYPE == ${FeatureType.RGB}) + vColor = vec4(colorAttr, 1.0); + #elif (FEATURE_TYPE == ${FeatureType.CATEGORICAL}) + int category = int(groupMap[group / 4][group % 4]); + if (category > 31) { + vColor = vec4(0.0); + } + else { + vColor = colorScheme[category]; + } + #elif (FEATURE_TYPE == ${FeatureType.FLAT_COLOR}) + vColor = color; + #endif + + if (state == ${HIGHLIGHTED_STATE.toFixed(1)}) { + vColor = selectionColor; + } + else if (state == ${SELECTED_STATE.toFixed(1)}) { + vColor = pickColor; + } } `; Effect.ShadersStore['PolygonFragmentShader'] = ` precision highp float; - precision highp int; + + #include + + layout(std140) uniform polygonOptions { + vec4 color; + float opacity; + vec4 colorScheme[${COLOR_GROUPS.toFixed(0)}]; + vec4 groupMap[${MAX_CATEGORIES.toFixed(0)}]; + }; - layout(location = 0) out uvec4 color; - flat in uvec2 vId; + flat in vec4 vColor; void main() { - color = uvec4(vId, 0u, 1u); + #include + + #if (FEATURE_TYPE == ${FeatureType.CATEGORICAL}) + if (vColor.a == 0.0) { + discard; + } + #endif + + glFragColor = vec4(vColor.rgb, opacity); } `; const material = new ShaderMaterial( - name, + 'PolygonSimpleShader', scene, { vertex: 'Polygon', fragment: 'Polygon' }, { - attributes: ['position', 'id'], - uniforms: ['world', 'worldViewProjection', 'viewProjection'] + attributes: ['position', 'colorAttr', 'group', 'state'], + uniforms: ['world', 'worldViewProjection', 'viewProjection'], + uniformBuffers: ['polygonOptions'], + defines: ['FEATURE_TYPE'], + shaderLanguage: ShaderLanguage.GLSL, + useClipPlane: true, + needAlphaBlending: true } ); + material.backFaceCulling = false; + return material; } diff --git a/packages/core/src/tile/model/3d/3DTileContent.ts b/packages/core/src/tile/model/3d/3DTileContent.ts index f0fea49e..c3351a71 100644 --- a/packages/core/src/tile/model/3d/3DTileContent.ts +++ b/packages/core/src/tile/model/3d/3DTileContent.ts @@ -6,7 +6,8 @@ import { TransformNode, UniformBuffer, VertexBuffer, - Matrix as BJSMatrix + Matrix as BJSMatrix, + WebGPUEngine } from '@babylonjs/core'; import { TileContent, TileUpdateOptions } from '../tileContent'; import { Tile } from '../tile'; @@ -111,7 +112,7 @@ export class TDB3DTileContent extends TileContent { const positions = mesh.getVerticesData(VertexBuffer.PositionKind); const positionBuffer = new StorageBuffer( - this.scene.getEngine(), + this.scene.getEngine() as WebGPUEngine, (positions as Float32Array).byteLength ); positionBuffer.update(positions as Float32Array); diff --git a/packages/core/src/tile/model/geometry/geometryContent.ts b/packages/core/src/tile/model/geometry/geometryContent.ts index ed413fb2..9bdec4d2 100644 --- a/packages/core/src/tile/model/geometry/geometryContent.ts +++ b/packages/core/src/tile/model/geometry/geometryContent.ts @@ -1,21 +1,25 @@ import { - Color3, Color4, Mesh, + Nullable, Scene, - StandardMaterial, + ShaderMaterial, UniformBuffer, + Vector4, VertexBuffer, VertexData } from '@babylonjs/core'; import { ISelectable, TileContent, TileUpdateOptions } from '../tileContent'; import { GeometryStyle, Feature, FeatureType } from '@tiledb-inc/viz-common'; -import { CategoricalMaterialPlugin } from '../../materials/plugins/categoricalPlugin'; import { Tile } from '../tile'; import { GeometryDataContent } from '../../../types'; import { TypedArray } from '../../types'; import { GeometryIntersector } from './geometryIntersector'; -import { SelectionMaterialPlugin } from '../../materials/plugins/selectionPlugin'; +import { + PolygonShaderMaterialWebGL, + PolygonShaderMaterialWebGPU +} from '../../materials/polygonShaderMaterial'; +import { HIGHLIGHTED_STATE, SELECTED_STATE } from '../../constants'; type GeometryData = { position: Float32Array; @@ -32,19 +36,15 @@ type GeometrySelection = { type GeometryStyleOptions = { style?: GeometryStyle; outlineThickness?: number; - outline?: Color3; + outline?: Vector4; renderingGroup?: number; }; export type GeometryUpdateOptions = TileUpdateOptions & { data?: GeometryData; UBO?: UniformBuffer; - fillOpacity?: number; - fill?: Color3; styleOptions?: GeometryStyleOptions; feature?: Feature; - colorScheme?: Float32Array; - groupMap?: Float32Array; selection?: GeometrySelection; }; @@ -52,22 +52,12 @@ export class GeometryContent extends TileContent implements ISelectable { - private material: StandardMaterial; - private categoricalPlugin: CategoricalMaterialPlugin; - private selectionPlugin: SelectionMaterialPlugin; + private material: Nullable; constructor(scene: Scene, tile: Tile) { super(scene, tile); - this.material = new StandardMaterial(tile.id.toString(), this.scene); - this.material.backFaceCulling = false; - - this.categoricalPlugin = new CategoricalMaterialPlugin(this.material); - this.categoricalPlugin.isEnabled = true; - - this.selectionPlugin = new SelectionMaterialPlugin(this.material); - this.selectionPlugin.isEnabled = true; - + this.material = null; this.intersector = new GeometryIntersector(this); } @@ -79,7 +69,27 @@ export class GeometryContent } if (options.feature) { - this.onFeatureUpdate(options); + this.onFeatureUpdate(options.feature); + + if (this.scene.getEngine().isWebGPU) { + this.material = PolygonShaderMaterialWebGPU( + this.scene, + options.feature.type + ); + } else { + if (!this.material) { + this.material = PolygonShaderMaterialWebGL(this.scene); + } + + this.material.setDefine( + 'FEATURE_TYPE', + options.feature.type.toString() + ); + } + + for (const mesh of this.meshes) { + mesh.material = this.material; + } } if (options.styleOptions) { @@ -90,19 +100,12 @@ export class GeometryContent this.onSelectionUpdate(options.selection); } - this.material.diffuseColor = options.fill ?? this.material.diffuseColor; - this.material.alpha = options.fillOpacity ?? this.material.alpha; - - this.categoricalPlugin.colorScheme = - options.colorScheme ?? this.categoricalPlugin.colorScheme; - this.categoricalPlugin.groupMap = - options.groupMap ?? this.categoricalPlugin.groupMap; + if (options.UBO) { + this.material?.setUniformBuffer('polygonOptions', options.UBO); + } } - onFeatureUpdate(options: GeometryUpdateOptions) { - const feature = options.feature!; - this.categoricalPlugin.feature = feature; - + onFeatureUpdate(feature: Feature) { switch (feature.type) { case FeatureType.FLAT_COLOR: for (const mesh of this.meshes) { @@ -157,19 +160,20 @@ export class GeometryContent mesh.setVerticesBuffer( new VertexBuffer(this.scene.getEngine(), this.buffers['state'], 'state', { + size: 1, stride: 1, - updatable: true, - type: VertexBuffer.UNSIGNED_BYTE + instanced: false, + type: VertexBuffer.UNSIGNED_BYTE, + updatable: true }) ); - mesh.material = this.material; mesh.layerMask = this.tile.mask; this.meshes.push(mesh); } private onStyleUpdate(options: GeometryStyleOptions) { - if (options.style) { + if (options.style && this.material) { this.material.disableColorWrite = !(options.style & GeometryStyle.FILLED); } @@ -186,10 +190,10 @@ export class GeometryContent } } - mesh.renderingGroupId = options.renderingGroup ?? 1; - mesh.edgesColor = options.outline - ? Color4.FromColor3(options.outline) - : mesh.edgesColor; + mesh.renderingGroupId = options.renderingGroup ?? mesh.renderingGroupId; + if (options.outline) { + Color4.FromArrayToRef(options.outline.asArray(), 0, mesh.edgesColor); + } mesh.edgesWidth = options.outlineThickness ?? mesh.edgesWidth; } } @@ -212,7 +216,7 @@ export class GeometryContent } for (const idx of selection.indices ?? []) { - state[idx] = 1; + state[idx] = HIGHLIGHTED_STATE; } if (selection.pick) { @@ -221,7 +225,7 @@ export class GeometryContent idx < selection.pick.current[1]; ++idx ) { - state[indices[idx]] = 2; + state[indices[idx]] = SELECTED_STATE; } for ( @@ -229,7 +233,7 @@ export class GeometryContent idx < selection.pick.previous[1]; ++idx ) { - state[indices[idx]] = 1; + state[indices[idx]] = HIGHLIGHTED_STATE; } } diff --git a/packages/core/src/tile/model/geometry/geometryManager.ts b/packages/core/src/tile/model/geometry/geometryManager.ts index df46f790..9fded439 100644 --- a/packages/core/src/tile/model/geometry/geometryManager.ts +++ b/packages/core/src/tile/model/geometry/geometryManager.ts @@ -6,7 +6,7 @@ import { GeometryMetadata, GeometryResponse } from '../../types'; -import { Scene, Color3 } from '@babylonjs/core'; +import { Scene, UniformBuffer, Vector4 } from '@babylonjs/core'; import { WorkerPool } from '../../worker/tiledb.worker.pool'; import { Manager } from '../manager'; import { @@ -32,6 +32,7 @@ import { GeometryContent, GeometryUpdateOptions } from './geometryContent'; import { Tile } from '../tile'; import { GeometryDataContent, SceneOptions } from '../../../types'; import { GeometryFetcher } from './geometryFetcher'; +import { COLOR_GROUPS, MAX_CATEGORIES } from '../../constants'; interface GeometryOptions { arrayID: string; @@ -44,20 +45,20 @@ export class GeometryManager extends Manager< Tile > { private workerPool: WorkerPool; + private polygonOptions!: UniformBuffer; private metadata: GeometryMetadata; private styleOptions = { style: GeometryStyle.FILLED, - fillOpacity: 1, - fill: new Color3(0, 0, 1), + fill: new Vector4(0, 0, 1, 1), outlineThickness: 1, - outline: new Color3(1, 0, 0), + outline: new Vector4(1, 0, 0, 1), renderingGroup: 1, // This array is shared by reference so changing a value // should automatically update the uniform value colorScheme: Float32Array.from( colorScheme - .map(x => [...Object.values(hexToRgb(x)!), 255]) + .map(x => [...Object.values(hexToRgb(x)), 255]) .flatMap(x => x) .map(x => x / 255) ), @@ -93,6 +94,8 @@ export class GeometryManager extends Manager< this.scene.getEngine().getRenderHeight() ); + this.initializeUniformBuffer(); + this.registerEventListeners(); } @@ -100,6 +103,27 @@ export class GeometryManager extends Manager< return this.metadata.crs; } + private initializeUniformBuffer() { + // To maintain support for WebGL devices the minimum limits for uniform buffers need to be respected. + // The miminum number of uniform vec4 is 224 for fragment shaders so the 32 and 192 limits on color scheme + // and group map are there to enforce these minimum limits. + this.polygonOptions = new UniformBuffer(this.scene.getEngine()); + + this.polygonOptions.addUniform('color', 4, 0); + this.polygonOptions.addUniform('opacity', 1, 0); + this.polygonOptions.addUniform('colorScheme', 4, COLOR_GROUPS); + this.polygonOptions.addUniform('groupMap', 4, MAX_CATEGORIES); + + this.polygonOptions.updateVector4('color', this.styleOptions.fill); + this.polygonOptions.updateFloat('opacity', 1); + this.polygonOptions.updateFloatArray( + 'colorScheme', + this.styleOptions.colorScheme + ); + + this.polygonOptions.update(); + } + public registerEventListeners(): void { window.addEventListener( Events.BUTTON_CLICK, @@ -187,10 +211,8 @@ export class GeometryManager extends Manager< attributes: data.attributes }, feature: this.activeFeature, - fill: this.styleOptions.fill, - fillOpacity: this.styleOptions.fillOpacity, styleOptions: this.styleOptions, - colorScheme: this.styleOptions.colorScheme + UBO: this.polygonOptions }); } @@ -207,11 +229,14 @@ export class GeometryManager extends Manager< if (target[1] === 'fill' || target[1] === 'outline') { const color: { r: number; g: number; b: number } = event.detail.props.data; - this.styleOptions[target[1]] = new Color3( + Vector4.FromFloatsToRef( color.r / 255, color.g / 255, - color.b / 255 + color.b / 255, + 1, + this.styleOptions[target[1]] ); + this.polygonOptions.updateVector4('color', this.styleOptions.fill); } else { const groupIndex = Number.parseInt(target[1]); const color: { r: number; g: number; b: number } = @@ -220,12 +245,17 @@ export class GeometryManager extends Manager< this.styleOptions.colorScheme[4 * groupIndex] = color.r / 255; this.styleOptions.colorScheme[4 * groupIndex + 1] = color.g / 255; this.styleOptions.colorScheme[4 * groupIndex + 2] = color.b / 255; + + this.polygonOptions.updateFloatArray( + 'colorScheme', + this.styleOptions.colorScheme + ); } + this.polygonOptions.update(); + for (const tile of this.visibleTiles.values()) { tile.data?.update({ - fill: this.styleOptions.fill, - colorScheme: this.styleOptions.colorScheme, styleOptions: { outline: this.styleOptions.outline } @@ -237,18 +267,15 @@ export class GeometryManager extends Manager< { let state = this.styleOptions.groupMap.get(this.activeFeature.name); if (!state) { - state = new Float32Array(768).fill(32); + state = new Float32Array(MAX_CATEGORIES * 4).fill(32); this.styleOptions.groupMap.set(this.activeFeature.name, state); } state[event.detail.props.data.category] = event.detail.props.data.group; - for (const tile of this.visibleTiles.values()) { - tile.data?.update({ - groupMap: state - }); - } + this.polygonOptions.updateFloatArray('groupMap', state); + this.polygonOptions.update(); } break; default: @@ -274,13 +301,15 @@ export class GeometryManager extends Manager< { this.activeFeature = this.metadata.features[event.detail.props.value]; updateOptions.feature = this.activeFeature; - updateOptions.colorScheme = this.styleOptions.colorScheme; + updateOptions.UBO = this.polygonOptions; + let state = this.styleOptions.groupMap.get(this.activeFeature.name); if (!state) { - state = new Float32Array(768).fill(32); + state = new Float32Array(MAX_CATEGORIES * 4).fill(32); this.styleOptions.groupMap.set(this.activeFeature.name, state); } - updateOptions.groupMap = state; + this.polygonOptions.updateFloatArray('groupMap', state); + this.polygonOptions.update(); } break; case 'renderingGroup': @@ -307,10 +336,11 @@ export class GeometryManager extends Manager< switch (target[1]) { case 'fillOpacity': - this.styleOptions.fillOpacity = Math.max( - event.detail.props.value ?? 1, - 0.01 + this.polygonOptions.updateFloat( + 'opacity', + event.detail.props.value ?? 1 ); + this.polygonOptions.update(); break; case 'outlineWidth': this.styleOptions.outlineThickness = event.detail.props.value ?? 1; @@ -319,7 +349,6 @@ export class GeometryManager extends Manager< for (const tile of this.visibleTiles.values()) { tile.data?.update({ - fillOpacity: this.styleOptions.fillOpacity, styleOptions: { outlineThickness: this.styleOptions.outlineThickness } diff --git a/packages/core/src/tile/model/image/imageManager.ts b/packages/core/src/tile/model/image/imageManager.ts index 6a9409e1..0b911c03 100644 --- a/packages/core/src/tile/model/image/imageManager.ts +++ b/packages/core/src/tile/model/image/imageManager.ts @@ -278,6 +278,7 @@ export class ImageManager extends Manager< const index = Number(target[2]); + this.intensityRanges[4 * index] = event.detail.props.range[0]; this.intensityRanges[4 * index + 1] = event.detail.props.range[1]; this.tileOptions.updateFloatArray('ranges', this.intensityRanges); this.tileOptions.update(); diff --git a/packages/core/src/tile/model/point/pointContent.ts b/packages/core/src/tile/model/point/pointContent.ts index a82f64f4..9cc13b74 100644 --- a/packages/core/src/tile/model/point/pointContent.ts +++ b/packages/core/src/tile/model/point/pointContent.ts @@ -21,6 +21,7 @@ import { FeatureType } from '@tiledb-inc/viz-common'; import { PointShape } from '@tiledb-inc/viz-common'; import { TypedArray } from '../../types'; import { PointIntersector } from './pointIntersector'; +import { HIGHLIGHTED_STATE, SELECTED_STATE } from '../../constants'; type PointCloudData = { position: Float32Array; @@ -295,16 +296,16 @@ export class PointTileContent } for (const idx of selection.indices ?? []) { - state[idx] = 1; + state[idx] = HIGHLIGHTED_STATE; } if (selection.pick) { if (selection.pick.current >= 0) { - state[selection.pick.current] = 2; + state[selection.pick.current] = SELECTED_STATE; } if (selection.pick.previous >= 0) { - state[selection.pick.previous] = 1; + state[selection.pick.previous] = HIGHLIGHTED_STATE; } } diff --git a/packages/core/src/tile/model/point/pointManager.ts b/packages/core/src/tile/model/point/pointManager.ts index 14a6337a..26403863 100644 --- a/packages/core/src/tile/model/point/pointManager.ts +++ b/packages/core/src/tile/model/point/pointManager.ts @@ -32,6 +32,7 @@ import { Tile } from '../tile'; import { PointDataContent, SceneOptions } from '../../../types'; import { PointCloudUpdateOptions, PointTileContent } from './pointContent'; import { PointCloudFetcher } from './pointFetcher'; +import { COLOR_GROUPS, MAX_CATEGORIES } from '../../constants'; interface PointOptions { metadata: PointCloudMetadata; @@ -58,7 +59,7 @@ export class PointManager extends Manager< // should automatically update the uniform value colorScheme: Float32Array.from( colorScheme - .map(x => [...Object.values(hexToRgb(x)!), 255]) + .map(x => [...Object.values(hexToRgb(x)), 255]) .flatMap(x => x) .map(x => x / 255) ), @@ -190,7 +191,7 @@ export class PointManager extends Manager< let state = this.styleOptions.groupMap.get(this.activeFeature.name); if (!state) { - state = new Float32Array(768).fill(32); + state = new Float32Array(MAX_CATEGORIES * 4).fill(32); this.styleOptions.groupMap.set(this.activeFeature.name, state); } this.pointOptions.updateFloatArray('groupMap', state); @@ -281,7 +282,7 @@ export class PointManager extends Manager< { let state = this.styleOptions.groupMap.get(this.activeFeature.name); if (!state) { - state = new Float32Array(768).fill(32); + state = new Float32Array(MAX_CATEGORIES * 4).fill(32); this.styleOptions.groupMap.set(this.activeFeature.name, state); } @@ -302,9 +303,9 @@ export class PointManager extends Manager< this.pointOptions.addUniform('pointSize', 1, 0); this.pointOptions.addUniform('color', 4, 0); - this.pointOptions.addUniform('colorScheme', 4, 32); + this.pointOptions.addUniform('colorScheme', 4, COLOR_GROUPS); this.pointOptions.addUniform('pointOpacity', 1, 0); - this.pointOptions.addUniform('groupMap', 4, 192); + this.pointOptions.addUniform('groupMap', 4, MAX_CATEGORIES); this.pointOptions.updateFloat('pointSize', this.styleOptions.pointSize); this.pointOptions.updateVector4('color', this.styleOptions.color); diff --git a/packages/core/src/tile/pipelines/minimapPostProcessWebGPU.ts b/packages/core/src/tile/pipelines/minimapPostProcessWebGPU.ts index 866e6d31..dd1699d4 100644 --- a/packages/core/src/tile/pipelines/minimapPostProcessWebGPU.ts +++ b/packages/core/src/tile/pipelines/minimapPostProcessWebGPU.ts @@ -6,7 +6,8 @@ import { ArcRotateCamera, ShaderStore, ShaderLanguage, - StorageBuffer + StorageBuffer, + WebGPUEngine } from '@babylonjs/core'; import { getCamera } from '../utils/camera-utils'; import { getViewArea } from '../utils/helpers'; @@ -81,7 +82,10 @@ export class MinimapPipelineWebGPU { ); this.postProcess.enablePixelPerfectMode = true; - const buffer = new StorageBuffer(this.scene.getEngine(), 16); + const buffer = new StorageBuffer( + this.scene.getEngine() as WebGPUEngine, + 16 + ); this.postProcess.onApplyObservable.add((effect: Effect) => { const mainCamera = getCamera(this.scene, 'Main') as ArcRotateCamera; @@ -90,7 +94,7 @@ export class MinimapPipelineWebGPU { return; } - effect.setTextureSampler( + (effect.getEngine() as WebGPUEngine).setTextureSampler( 'textureSamplerSampler', this.postProcess.inputTexture.texture ); @@ -119,7 +123,7 @@ export class MinimapPipelineWebGPU { right = Math.max(Math.min(this.baseWidth, right), 0) / this.baseWidth; buffer.update(new Float32Array([left, 1 - top, right, 1 - bottom])); - effect.setStorageBuffer('options', buffer); + (effect.getEngine() as WebGPUEngine).setStorageBuffer('options', buffer); }); } } diff --git a/packages/core/src/tile/tileImage.ts b/packages/core/src/tile/tileImage.ts index 10d78fc1..ed63f512 100644 --- a/packages/core/src/tile/tileImage.ts +++ b/packages/core/src/tile/tileImage.ts @@ -219,7 +219,7 @@ export class TileDBTileImageVisualization extends TileDBVisualization { }); // Force enable uniform buffers for the material to work properly - this.scene.getEngine().disableUniformBuffers = false; + // this.scene.getEngine().disableUniformBuffers = false; if (this.options.geometryArrayID) { for (const [ diff --git a/packages/core/src/tile/utils/helpers.ts b/packages/core/src/tile/utils/helpers.ts index f59a0efe..58c66c81 100644 --- a/packages/core/src/tile/utils/helpers.ts +++ b/packages/core/src/tile/utils/helpers.ts @@ -2,9 +2,7 @@ export function range(start: number, end: number): Array { return new Array(end - start).fill(0).map((_, k) => k + start); } -export function hexToRgb( - hex: string -): { r: number; g: number; b: number } | null { +export function hexToRgb(hex: string): { r: number; g: number; b: number } { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { @@ -12,7 +10,7 @@ export function hexToRgb( g: parseInt(result[2], 16), b: parseInt(result[3], 16) } - : null; + : { r: 255, g: 255, b: 255 }; } export function getViewArea( diff --git a/packages/core/src/utils/metadata-utils/metadata-utils.ts b/packages/core/src/utils/metadata-utils/metadata-utils.ts index 95c4dfff..e2c3d594 100644 --- a/packages/core/src/utils/metadata-utils/metadata-utils.ts +++ b/packages/core/src/utils/metadata-utils/metadata-utils.ts @@ -450,7 +450,13 @@ async function getArrayMetadata( await writeToCache(options.arrayID, 'arrayMetadata', arrayMetadata); } - return [arrayMetadata!, [options.arrayID]]; + if (!arrayMetadata) { + throw new Error( + `Failed to load array metadata for array ${options.arrayID}` + ); + } + + return [arrayMetadata, [options.arrayID]]; } async function getGroupMetadata( @@ -497,7 +503,13 @@ async function getGroupMetadata( await writeToCache(options.groupID, 'memberUris', memberUris); } - return [groupMetadata!, memberUris!]; + if (!groupMetadata || !memberUris) { + throw new Error( + `Failed to load group metadata for group ${options.groupID}` + ); + } + + return [groupMetadata, memberUris]; } export async function getGeometryMetadata( diff --git a/packages/core/src/utils/metadata-utils/pointcloud-metadata-utils.ts b/packages/core/src/utils/metadata-utils/pointcloud-metadata-utils.ts index ac28c201..a5bb1a51 100644 --- a/packages/core/src/utils/metadata-utils/pointcloud-metadata-utils.ts +++ b/packages/core/src/utils/metadata-utils/pointcloud-metadata-utils.ts @@ -316,5 +316,13 @@ function constructPointCloudTileset( tileDictionary.set(tile.index[0], tile); } - return tileDictionary.get(encode3D(0, 0, 0, 0))!; + const root = tileDictionary.get(encode3D(0, 0, 0, 0)); + + if (!root) { + throw new Error( + 'Point cloud tileset construction failed. Missing root node.' + ); + } + + return root; } diff --git a/yarn.lock b/yarn.lock index b2cf4d07..0d9f7ec6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1726,37 +1726,37 @@ __metadata: languageName: node linkType: hard -"@babylonjs/core@npm:7.0.0": - version: 7.0.0 - resolution: "@babylonjs/core@npm:7.0.0" - checksum: 2a90c85bdf26113b6676a209cb955c706a63f9f48b7a822764a79647433f5294c2918c52b1e7b9ad48d34b4f6d9640f70a9977992b1801b20bd06bdc6ff75476 +"@babylonjs/core@npm:^7.26.0": + version: 7.26.3 + resolution: "@babylonjs/core@npm:7.26.3" + checksum: da6a2566b25ea774a2621fbeb82d7c6bdf9eb5703cb4d9788730e68846f8622c50c53fe47ab900b7502d521725b53ad256a498a61051a8d22dea7bbfcd545cf0 languageName: node linkType: hard -"@babylonjs/gui-editor@npm:7.0.0": - version: 7.0.0 - resolution: "@babylonjs/gui-editor@npm:7.0.0" +"@babylonjs/gui-editor@npm:^7.26.0": + version: 7.26.3 + resolution: "@babylonjs/gui-editor@npm:7.26.3" peerDependencies: "@babylonjs/core": ^7.0.0 "@babylonjs/gui": ^7.0.0 "@types/react": ">=16.7.3" "@types/react-dom": ">=16.0.9" - checksum: 1abccad5dc1f6896c8ae0ca13ee808d14b286345c6b00fb78ee6f608f622d4ba6f803eb2eb7e80bc5706df0ef1ccfa007a82ea72bd70bc425bfaa89a1c6604ab + checksum: b93eb23b43d1a623f1496451856d54294d41136b4f5cfaf702bd93e3043e0de288db853af2a4b530972147caa815f5953e1ce0f5593ee4e3669090cbab3c877d languageName: node linkType: hard -"@babylonjs/gui@npm:7.0.0": - version: 7.0.0 - resolution: "@babylonjs/gui@npm:7.0.0" +"@babylonjs/gui@npm:^7.26.0": + version: 7.26.3 + resolution: "@babylonjs/gui@npm:7.26.3" peerDependencies: "@babylonjs/core": ^7.0.0 - checksum: e17c67bb61b514d1f3503b428cbd900f163dd1dd27f3aba81d0b98a25e75b2519fd60ff8a495eb78b85057bc2782506f470c7e0abfd01f8a1026f6c1e8d09843 + checksum: e1bb85403bc53d1bd6513a63d9462ea5738c6a936f6976b68fd2cdbed9abbde093a641a9eb714b25d3a79cc70d45f8d2cd9b597af925b46bd760dc99ab14d7a5 languageName: node linkType: hard -"@babylonjs/inspector@npm:7.0.0": - version: 7.0.0 - resolution: "@babylonjs/inspector@npm:7.0.0" +"@babylonjs/inspector@npm:^7.26.0": + version: 7.26.3 + resolution: "@babylonjs/inspector@npm:7.26.3" dependencies: "@fortawesome/fontawesome-svg-core": ^6.1.0 "@fortawesome/free-regular-svg-icons": ^6.0.0 @@ -1770,36 +1770,36 @@ __metadata: "@babylonjs/serializers": ^7.0.0 "@types/react": ">=16.7.3" "@types/react-dom": ">=16.0.9" - checksum: 5e11b9258104fdcc87a575b796717aadc47aa3c1025a744e6c3bcefdf763fc774db5fd2e0d1bcd79517af309e095d641b48b3e5e88c249523282d763fbd071dd + checksum: 223577efd7b972a59e3e0036fea0cfe4a8fd36396227f9d15a2a9724a818432ce0804b7bc8705c3b26e921fdbb1566f2b5ca6d14664c20e9b29d86da90b70798 languageName: node linkType: hard -"@babylonjs/loaders@npm:7.0.0": - version: 7.0.0 - resolution: "@babylonjs/loaders@npm:7.0.0" +"@babylonjs/loaders@npm:^7.26.0": + version: 7.26.3 + resolution: "@babylonjs/loaders@npm:7.26.3" peerDependencies: "@babylonjs/core": ^7.0.0 babylonjs-gltf2interface: ^7.0.0 - checksum: 0c3aed99f4e9d2c0d29e65413be6c0976f3ccd2daec0bbd7d10141c7ed1feba854c1c8481cf789596416b15f74da318431f3795ebe8a846b058e7423251406f7 + checksum: 6c0da4d908f328a3467cb05424b733ae0aa659cb60a9890e8a4df33f2cd16fbb293ca9c72611e015d38ae8f9b5cd3f46d78117493558eb8b73c3f3e5f30b3c10 languageName: node linkType: hard -"@babylonjs/materials@npm:7.0.0": - version: 7.0.0 - resolution: "@babylonjs/materials@npm:7.0.0" +"@babylonjs/materials@npm:^7.26.0": + version: 7.26.3 + resolution: "@babylonjs/materials@npm:7.26.3" peerDependencies: "@babylonjs/core": ^7.0.0 - checksum: 3a6e13c636dd542c5e50cfe0ac334c0de42b6d571e3c2c31fb9356aa3302b96befac5ba7071d1496344f2d26a674d7a713a7c945a03d6b13ed32dbc48bc3933d + checksum: a0b7c4ea25bc75506cc32bcc5af2ea8383eeffabf524a310fdd04e4c70eacd43bba1f912feb03623729a18525cda2061e1b77bf454a0d45b62e8dd196fc5a8a4 languageName: node linkType: hard -"@babylonjs/serializers@npm:7.0.0": - version: 7.0.0 - resolution: "@babylonjs/serializers@npm:7.0.0" +"@babylonjs/serializers@npm:^7.26.0": + version: 7.26.3 + resolution: "@babylonjs/serializers@npm:7.26.3" peerDependencies: "@babylonjs/core": ^7.0.0 babylonjs-gltf2interface: ^7.0.0 - checksum: 2049ce8690e6ccd6112f5e9e5ba1627b003907d3f27bba38ad0a8aa3739734934e0422464539dda6a8987d83a0097245d4d36256be1bdf64bbf704fdfcb14da8 + checksum: d849ee640bfdc91d61cf6d4e5e5e2660106f2c65976716701f0dd711bbe9aaa96a4ec59dcc5da935981f2b68b4e1390250d9ecb08778048121f648aebda38fe4 languageName: node linkType: hard @@ -5700,7 +5700,7 @@ __metadata: "@babel/core": ^7.12.0 "@babel/preset-env": ^7.18.10 "@babel/preset-typescript": ^7.18.6 - "@babylonjs/core": 7.0.0 + "@babylonjs/core": ^7.26.0 "@tiledb-inc/tiledb-cloud": 1.0.15-alpha.1 parcel: 2.9.3 languageName: unknown @@ -5731,21 +5731,21 @@ __metadata: "@babel/core": ^7.12.0 "@babel/preset-env": ^7.18.10 "@babel/preset-typescript": ^7.18.6 - "@babylonjs/core": 7.0.0 - "@babylonjs/gui": 7.0.0 - "@babylonjs/gui-editor": 7.0.0 - "@babylonjs/inspector": 7.0.0 - "@babylonjs/loaders": 7.0.0 - "@babylonjs/materials": 7.0.0 - "@babylonjs/serializers": 7.0.0 + "@babylonjs/core": ^7.26.0 + "@babylonjs/gui": ^7.26.0 + "@babylonjs/gui-editor": ^7.26.0 + "@babylonjs/inspector": ^7.26.0 + "@babylonjs/loaders": ^7.26.0 + "@babylonjs/materials": ^7.26.0 + "@babylonjs/serializers": ^7.26.0 "@tiledb-inc/tiledb-cloud": 1.0.15-alpha.1 "@tiledb-inc/viz-common": "workspace:packages/common" "@tiledb-inc/viz-components": "workspace:packages/components" "@tiledb-inc/wkx": "https://github.com/TileDB-Inc/wkx" "@types/proj4": ^2.5.5 axios: ^0.21.1 - babylonjs-gui: 7.0.0 - babylonjs-materials: 7.0.0 + babylonjs-gui: ^7.26.0 + babylonjs-materials: ^7.26.0 earcut: 2.2.4 geometry-extrude: 0.2.1 idb: ^7.0.2 @@ -5808,11 +5808,6 @@ __metadata: typedoc-plugin-markdown: ^3.14.0 typescript: 4.7.4 vite-plugin-dts: ^3.3.1 - dependenciesMeta: - "@babylonjs/core@5.42.0": - unplugged: true - "@babylonjs/materials@5.42.0": - unplugged: true languageName: unknown linkType: soft @@ -7843,28 +7838,28 @@ __metadata: languageName: node linkType: hard -"babylonjs-gui@npm:7.0.0": - version: 7.0.0 - resolution: "babylonjs-gui@npm:7.0.0" +"babylonjs-gui@npm:^7.26.0": + version: 7.26.3 + resolution: "babylonjs-gui@npm:7.26.3" dependencies: - babylonjs: ^7.0.0 - checksum: 59d4def3b2e0074f2043d045f6d7db15244e221868aeb0b0eff41e28c2db78940f8a8625324e974314ce802144097f001372a2fbaa086eb97f3a3c687bd6f974 + babylonjs: ^7.26.3 + checksum: e8f4418b5222a22b183eab43deeb17f78f72c4dc2323efdd76971f89ffbc0b58b56a85fdd452dae9681f63000a07fea2cb3f3dffa493bb8a9299a491cdd9ff01 languageName: node linkType: hard -"babylonjs-materials@npm:7.0.0": - version: 7.0.0 - resolution: "babylonjs-materials@npm:7.0.0" +"babylonjs-materials@npm:^7.26.0": + version: 7.26.3 + resolution: "babylonjs-materials@npm:7.26.3" dependencies: - babylonjs: ^7.0.0 - checksum: 5df051a61d17cc9304dec6dd0a4ee0b141496d7d865648ac575f6d1239d55096c9d7ba9d83d8073b3b8d64eb32f8a9d6937fef14ad5866f288ac10ad5df9c03b + babylonjs: ^7.26.3 + checksum: c2aee6ce9c09ce27ae87063c7bf455a06007aa290a5a545743405a6ca25a71c65d7eaebe21ded804fa3575f51a1cf4eca1312631930a665bf3b42080410bd075 languageName: node linkType: hard -"babylonjs@npm:^7.0.0": - version: 7.6.0 - resolution: "babylonjs@npm:7.6.0" - checksum: 3de0538fac81f81ab9f2f4f56ce102f34cb7d7e656a708d816e5a88b2c7a2ef76d4f815146e9a414c28062b7f9f74d40dd5e5c0438a88a3a25460b75eea1da20 +"babylonjs@npm:^7.26.3": + version: 7.26.3 + resolution: "babylonjs@npm:7.26.3" + checksum: 0fbd23ae9afd045cc0f7e53231a4444d47b430dbe582326c7d2e5989076d24f92514b3286b135063aeb6ae404a618f8d374cf125edacf99144dd48f845b71fd3 languageName: node linkType: hard