@archvisioninc/canvas 3.2.8 → 3.3.1

package/dist/enums/exclusions.js

@@ -1,4 +1,4 @@
-export const exclusionMaterials = ['colorShader', 'default material', 'gridMat', 'ground', 'skyBox', 'boundingMaterial'];
+export const exclusionMaterials = ['colorShader', 'default material', 'gridMat', 'ground', 'skyBox', 'boundingMaterial', 'voxelization', 'voxelSlabDebug'];
 export const exclusionMeshes = ['xAxisMesh', 'yAxisMesh', 'zAxisMesh', 'mirrorGround', 'ground', 'hdrSkyBox', 'boundingMesh', 'lengthContainer', 'widthContainer', 'heightContainer'];
 export const exclusionGUIs = ['guiDragSelectBox', 'lengthRectangle', 'lengthLabel', 'lengthContainer', 'widthRectangle', 'widthLabel', 'widthContainer', 'heightRectangle', 'heightLabel', 'heightContainer'];
 export const exclusionTNodes = ['xAxis', 'yAxis', 'zAxis', 'multiMeshTransforms', 'singleMeshTransforms'];

package/dist/helpers/canvasUpdateHelpers.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { getUserMeshes, resetSelectedMeshes, addNewMesh, scene, mirrorGround, ground, newVector, newColor, newScreenshot, serializeScene, newMetaDataEntry, selectedMeshes, singleMeshTNode, toRadians, toDegrees, multiMeshTNode, handleMousePointerTap, prepareCamera, buildMaterialsArray, buildMeshPositionsArray, createBoundingMesh, attachToSelectMeshesNode, newTexture, getUserMaterials, buildSelectedMaterialArray, buildMeshIdArray, refreshHighlight, guiTexture, getBoundingMeshData, getScaleFactor, gizmoManager, buildLightsArray } from '../helpers';
+import { getUserMeshes, resetSelectedMeshes, addNewMesh, scene, mirrorGround, ground, newVector, newColor, newScreenshot, serializeScene, newMetaDataEntry, selectedMeshes, singleMeshTNode, toRadians, toDegrees, multiMeshTNode, handleMousePointerTap, prepareCamera, buildMaterialsArray, buildMeshPositionsArray, createBoundingMesh, attachToSelectMeshesNode, newTexture, getUserMaterials, buildSelectedMaterialArray, buildMeshIdArray, refreshHighlight, guiTexture, getBoundingMeshData, getScaleFactor, gizmoManager, iblShadowPipeline, buildLightsArray } from '../helpers';
 import { toggleSafeFrame, toggleOrthographicViews, toggleBoundingBoxWidget, resetManagerGizmos, modelToOrigin, focusCamera } from '../actions';
 import { GLTF2 } from 'babylonjs-loaders';
 import { GIZMOS, TRANSPARENCY_MODES, GUI } from '../constants';
@@ -314,6 +314,10 @@ export const updateMaterial = inboundData => {
     if (newId) {
       material.id = newId;
       material.name = newId;
+      if (Array.isArray(scene.metadata.selectedMaterials) && scene.metadata.selectedMaterials.length > 0) {
+        // We currently only support one selectedMaterial at a time so we should set the changed material to selected
+        scene.metadata.selectedMaterials = [material];
+      }
     }
 
     // Select all meshes with current material.
@@ -1051,6 +1055,7 @@ export const updateViewport = inboundData => {
   const {
     envVisible,
     shadows,
+    iblPipeline,
     axes,
     grid,
     hideSelected,
@@ -1115,6 +1120,12 @@ export const updateViewport = inboundData => {
     zAxisMesh.setEnabled(axes);
     newMetaDataEntry('viewportAxes', axes);
   }
+
+  // IBL Shadow Rendering Pipeline
+  if (iblPipeline !== undefined) {
+    iblShadowPipeline.toggleShadow(iblPipeline);
+    newMetaDataEntry('iblShadowPipelineEnabled', iblPipeline);
+  }
 };
 export const updatePublish = inboundData => {
   const {

package/dist/helpers/gizmoHelpers.js

@@ -110,6 +110,7 @@ export const createBoundingMesh = () => {
   boundingMesh.material = boundingRectMaterial;
   boundingMesh.position = nodeLocation || newVector(1, 1, 1);
   boundingMesh.isPickable = false;
+  boundingMesh.visibility = 0;
   addHighlightExclusion(boundingMesh);
   return boundingMesh;
 };

package/dist/helpers/initHelpers.js

@@ -2,8 +2,8 @@ import * as BABYLON from 'babylonjs';
 import * as MATERIALS from 'babylonjs-materials';
 import * as BABYLONGUI from 'babylonjs-gui';
 import { LISTENERS, LIGHTS, CAMERAS, VIEWPORT } from '../constants';
-import { shortcuts, ratios, downscaling } from '../enums';
-import { newScene, newEngine, newCamera, newLight, newVector, newHighlightManager, handleMouseListeners, handleShortcutListeners, prepareCamera, newGround, newGridMaterial, newColor, setDefaultGridProperties, prepareAxes, getBoundingDistance, newGizmoManager, getUserMeshes, newPBRMaterial, createSafeFrame, createDragSelectBox, addInitialGizmoBehaviors, loadFromBlob, loadFromGuidURL, prepareMaterialCamera, loadFromDragDrop, addHighlightExclusion, warningChecks, toRadians, toDegrees, getStatisticsMetadata, newMetaDataEntry, serializeScene, buildMeshPositionsArray, buildMaterialsArray, updatePublish, buildSelectedMaterialArray, buildMaterialVariantsArray, removeAutoRotation, getUserNodes, buildLightsArray } from '../helpers';
+import { shortcuts, ratios, downscaling, exclusionMeshes, exclusionMaterials } from '../enums';
+import { newScene, newEngine, newCamera, newLight, newVector, newHighlightManager, handleMouseListeners, handleShortcutListeners, prepareCamera, newGround, newGridMaterial, newColor, setDefaultGridProperties, prepareAxes, getBoundingDistance, newGizmoManager, getUserMeshes, getUserMaterials, newPBRMaterial, createSafeFrame, createDragSelectBox, addInitialGizmoBehaviors, loadFromBlob, loadFromGuidURL, prepareMaterialCamera, loadFromDragDrop, addHighlightExclusion, warningChecks, toRadians, toDegrees, getStatisticsMetadata, newMetaDataEntry, serializeScene, buildMeshPositionsArray, buildMaterialsArray, updatePublish, buildSelectedMaterialArray, buildMaterialVariantsArray, removeAutoRotation, getUserNodes, buildLightsArray } from '../helpers';
 import { modelToOrigin, focusCamera } from '../actions';
 import { reactProps as props } from '../Canvas';
 import _ from 'lodash';
@@ -26,6 +26,7 @@ export let guiTexture;
 export let multiMeshTNode;
 export let singleMeshTNode;
 export let dragDropFileInput;
+export let iblShadowPipeline;
 export let shortcutArray = [];
 export const groundOptions = () => {
   const meshSize = getBoundingDistance() || 10;
@@ -176,6 +177,19 @@ const initLights = () => {
   shadowGenerator.contactHardeningLightSizeUVRatio = 0.2;
   shadowGenerator.bias = 0.00001;
   shadowGenerator.normalBias = 0.01;
+  iblShadowPipeline = new BABYLON.IblShadowsRenderPipeline('archvision_ibl_shadows', scene);
+  meshes.forEach(mesh => iblShadowPipeline.addShadowCastingMesh(mesh));
+  const materials = getUserMaterials();
+  materials.forEach(mat => iblShadowPipeline.addShadowReceivingMaterial(mat));
+  exclusionMeshes.forEach(name => {
+    const mesh = scene.getMeshByName(name);
+    iblShadowPipeline.removeShadowCastingMesh(mesh);
+  });
+  exclusionMaterials.forEach(name => {
+    const mat = scene.getMaterialByName(name);
+    iblShadowPipeline.removeShadowReceivingMaterial(mat);
+  });
+  iblShadowPipeline.toggleShadow(false);
 };
 const initGridGround = () => {
   const gridMaterial = newGridMaterial('gridMat');
@@ -326,6 +340,7 @@ const initMetadataKeyDefaults = () => {
   newMetaDataEntry('viewportGround', true);
   newMetaDataEntry('viewportAxes', true);
   newMetaDataEntry('viewportShadows', mirrorGround.receiveShadows);
+  newMetaDataEntry('iblShadowPipelineEnabled', false);
   newMetaDataEntry('fileName', null);
   newMetaDataEntry('uvScaleLock', false);
   newMetaDataEntry('lights', []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archvisioninc/canvas",
-  "version": "3.2.8",
+  "version": "3.3.1",
   "private": false,
   "main": "dist/Canvas.js",
   "module": "dist/Canvas.js",
@@ -42,11 +42,11 @@
     "@testing-library/user-event": "^13.5.0",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "axios": "^1.2.0",
-    "babylonjs": "^6.16.0",
-    "babylonjs-gui": "^6.16.0",
-    "babylonjs-loaders": "^6.16.0",
-    "babylonjs-materials": "^6.16.0",
-    "babylonjs-serializers": "^6.16.0",
+    "babylonjs": "^7.41.0",
+    "babylonjs-gui": "^7.41.0",
+    "babylonjs-loaders": "^7.41.0",
+    "babylonjs-materials": "^7.41.0",
+    "babylonjs-serializers": "^7.41.0",
     "eslint-plugin-destructuring": "^2.2.1",
     "eslint-plugin-etc": "^2.0.2",
     "eslint-plugin-no-inline-styles": "^1.0.5",

package/src/package/enums/exclusions.js

@@ -5,6 +5,8 @@ export const exclusionMaterials = [
   'ground',
   'skyBox',
   'boundingMaterial',
+  'voxelization',
+  'voxelSlabDebug',
 ];
 
 export const exclusionMeshes = [

package/src/package/helpers/canvasUpdateHelpers.js

@@ -31,6 +31,7 @@ import {
   getBoundingMeshData,
   getScaleFactor,
   gizmoManager,
+  iblShadowPipeline,
   buildLightsArray,
 } from '../helpers';
 import {
@@ -373,6 +374,11 @@ export const updateMaterial = inboundData => {
     if (newId) {
       material.id = newId;
       material.name = newId;
+
+      if (Array.isArray(scene.metadata.selectedMaterials) && scene.metadata.selectedMaterials.length > 0) {
+        // We currently only support one selectedMaterial at a time so we should set the changed material to selected
+        scene.metadata.selectedMaterials = [ material ];
+      }
     }
 
     // Select all meshes with current material.
@@ -1058,6 +1064,7 @@ export const updateViewport = inboundData => {
   const {
     envVisible,
     shadows,
+    iblPipeline,
     axes,
     grid,
     hideSelected,
@@ -1124,6 +1131,12 @@ export const updateViewport = inboundData => {
     zAxisMesh.setEnabled(axes);
     newMetaDataEntry('viewportAxes', axes);
   }
+
+  // IBL Shadow Rendering Pipeline
+  if (iblPipeline !== undefined) {
+    iblShadowPipeline.toggleShadow(iblPipeline);
+    newMetaDataEntry('iblShadowPipelineEnabled', iblPipeline);
+  }
 };
 
 export const updatePublish = inboundData => {

package/src/package/helpers/gizmoHelpers.js

@@ -139,6 +139,7 @@ export const createBoundingMesh = () => {
   boundingMesh.material = boundingRectMaterial;
   boundingMesh.position = nodeLocation || newVector(1, 1, 1);
   boundingMesh.isPickable = false;
+  boundingMesh.visibility = 0;
 
 
   addHighlightExclusion(boundingMesh);

package/src/package/helpers/initHelpers.js

@@ -2,7 +2,7 @@ import * as BABYLON from 'babylonjs';
 import * as MATERIALS from 'babylonjs-materials';
 import * as BABYLONGUI from 'babylonjs-gui';
 import { LISTENERS, LIGHTS, CAMERAS, VIEWPORT } from '../constants';
-import { shortcuts, ratios, downscaling } from '../enums';
+import { shortcuts, ratios, downscaling, exclusionMeshes, exclusionMaterials } from '../enums';
 import {
   newScene,
   newEngine,
@@ -21,6 +21,7 @@ import {
   getBoundingDistance,
   newGizmoManager,
   getUserMeshes,
+  getUserMaterials,
   newPBRMaterial,
   createSafeFrame,
   createDragSelectBox,
@@ -69,6 +70,7 @@ export let guiTexture;
 export let multiMeshTNode;
 export let singleMeshTNode;
 export let dragDropFileInput;
+export let iblShadowPipeline;
 export let shortcutArray = [];
 
 export const groundOptions = () => {
@@ -223,6 +225,24 @@ const initLights = () => {
   shadowGenerator.contactHardeningLightSizeUVRatio = 0.2;
   shadowGenerator.bias = 0.00001;
   shadowGenerator.normalBias = 0.01;
+
+  iblShadowPipeline = new BABYLON.IblShadowsRenderPipeline(
+    'archvision_ibl_shadows',
+    scene,
+  );
+
+  meshes.forEach(mesh => iblShadowPipeline.addShadowCastingMesh(mesh));
+  const materials = getUserMaterials();
+  materials.forEach(mat => iblShadowPipeline.addShadowReceivingMaterial(mat));
+  exclusionMeshes.forEach(name => {
+    const mesh = scene.getMeshByName(name);
+    iblShadowPipeline.removeShadowCastingMesh(mesh);
+  });
+  exclusionMaterials.forEach(name => {
+    const mat = scene.getMaterialByName(name);
+    iblShadowPipeline.removeShadowReceivingMaterial(mat);
+  });
+  iblShadowPipeline.toggleShadow(false);
 };
 
 const initGridGround = () => {
@@ -364,6 +384,7 @@ const initMetadataKeyDefaults = () => {
   newMetaDataEntry('viewportGround', true);
   newMetaDataEntry('viewportAxes', true);
   newMetaDataEntry('viewportShadows',  mirrorGround.receiveShadows);
+  newMetaDataEntry('iblShadowPipelineEnabled', false);
   newMetaDataEntry('fileName', null);
   newMetaDataEntry('uvScaleLock', false);
   newMetaDataEntry('lights', []);

package/src/package/helpers/utilityHelpers.js

@@ -670,11 +670,13 @@ export const buildLightsArray = () => {
   const lights = scene.lights;
   return lights.map(light => {
     const { position } = light;
-    const { x, y, z} = position;
+    const { x, y, z } = position;
     return {
       ...light.serialize(),
       rotation: light?.rotation ?? 0,
-      distance: light?.distance ?? Math.sqrt(Math.pow(Math.abs(x), 2) + Math.pow(Math.abs(y), 2) + Math.pow(Math.abs(z), 2)),
+      distance:
+        light?.distance ??
+        Math.sqrt(Math.pow(Math.abs(x), 2) + Math.pow(Math.abs(y), 2) + Math.pow(Math.abs(z), 2)),
     };
   });
 };

package/src/scenes/App/App.js

@@ -1,13 +1,13 @@
-/* eslint-disable max-len */
+/* eslint-disable */
 import { useEffect, useState, useCallback } from 'react';
 import { Notifications } from 'components';
 import { AppContainer, DebugButtons, Button } from './styles';
 import { theme } from 'static/theme';
 import { fetchDownloadURL } from 'helpers/fetchHelpers';
 import { ENVIRONMENTS } from 'constants';
-import { updateLighting } from 'package/helpers';
+import { updateViewport, scene, updateLighting, updateMaterial } from 'package/helpers';
 import Canvas from 'package/Canvas';
-import _ from 'lodash';
+import _, { update } from 'lodash';
 
 const materialMode = false;
 const previewMode = false;
@@ -76,7 +76,7 @@ const App = () => {
         materialMode={materialMode}
         previewMode={previewMode}
         demoScene={demoScene}
-        integration={{}}
+        integration={{ shadows: true }}
         file={null}
         guidURL={previewURL}
         updateData={null}
@@ -111,6 +111,23 @@ const App = () => {
           Take screenshot
         </Button>
 
+        <Button
+          theme={theme}
+          $selectedTheme={selectedTheme}
+          onClick={() => {
+            const inboundData = {
+              payload: {
+                iblPipeline: !scene.metadata.iblShadowPipelineEnabled,
+              }
+            };
+
+            updateViewport(inboundData);
+            //console.log({ metadata: scene.metadata });
+          }}
+        >
+          Toggle IBL
+        </Button>
+
         <Button
           theme={theme}
           $selectedTheme={selectedTheme}
@@ -125,14 +142,15 @@ const App = () => {
           onClick={() => {
             const inboundData = {
               payload: {
-                id: 'directional',
-                intensity: 5,
+                id: 'Body',
+                newId: 'test',
               },
             };
-            updateLighting(inboundData);
+            updateMaterial(inboundData);
+            console.log({ metadata: scene.metadata });
           }}
         >
-          Update Intensity
+          Update Body Material
         </Button>
       </DebugButtons>
     </AppContainer>