Merge remote-tracking branch 'origin/main-demo' into main-dev

app/package-lock.json

@@ -2026,7 +2026,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -2038,7 +2038,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -4180,25 +4180,6 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
-      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.3.0",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -4310,25 +4291,25 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@turf/along": {
       "version": "7.2.0",
@@ -9082,7 +9063,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/cross-env": {
       "version": "7.0.3",
@@ -9959,7 +9940,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -15343,7 +15324,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -20820,7 +20801,7 @@
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -20863,7 +20844,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -20875,7 +20856,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -21371,7 +21352,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
@@ -22430,7 +22411,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=6"
       }

app/package.json

@@ -52,9 +52,7 @@
     "prestart": "tsc scripts/git-prompt.ts && node scripts/git-prompt.js",
     "start": "react-scripts start",
     "build": "GENERATE_SOURCEMAP=false react-scripts build",
-    "test": "jest",
+    "test": "jest"
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run"
   },
   "eslintConfig": {
     "extends": [

app/src/components/layout/sidebarRight/properties/FloorProperties.tsx

@@ -4,6 +4,9 @@ import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 
 import defaultTexture from '../../../../assets/textures/floor/white.png';
 import flootTexture1 from '../../../../assets/textures/floor/factory wall texture.jpg';
+import flootTexture2 from '../../../../assets/textures/floor/tex1/MI_FactoryConcreteFloor01_BaseColor.001.jpg';
+import flootTexture3 from '../../../../assets/textures/floor/tex2/MI_FloorMats01_baseColor.png';
+import flootTexture4 from '../../../../assets/textures/floor/tex3/metal_plate_diff_1k.jpg';
 
 import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
 
@@ -13,9 +16,12 @@ type Material = {
     textureName: string;
 };
 
-const materials = [
+export const materials = [
     { texture: defaultTexture, textureId: "Default Material", textureName: "Default Material" },
-    { texture: flootTexture1, textureId: "Material 1", textureName: "Grunge Concrete Wall" }
+    { texture: flootTexture1, textureId: "Material 1", textureName: "Grunge Concrete Wall" },
+    { texture: flootTexture2, textureId: "Material 2", textureName: "Tiled Floor" },
+    { texture: flootTexture3, textureId: "Material 3", textureName: "Metal Floor" },
+    { texture: flootTexture4, textureId: "Material 4", textureName: "Metal Floor 2" },
 ];
 
 const FloorProperties = () => {
@@ -30,7 +36,7 @@ const FloorProperties = () => {
             top: materials.find((mat) => mat.textureId === topMaterial) || null,
             side: materials.find((mat) => mat.textureId === sideMaterial) || null,
         });
-    }, []);
+    }, [sideMaterial, topMaterial]);
 
     const handleDepthChange = (val: string) => {
         setFloorDepth(parseFloat(val));

app/src/components/layout/sidebarRight/properties/SelectedFloorProperties.tsx

@@ -2,15 +2,13 @@ import { useEffect, useState } from "react";
 import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import InputToggle from "../../../ui/inputs/InputToggle";
 
-import defaultTexture from '../../../../assets/textures/floor/white.png';
-import floorTexture1 from '../../../../assets/textures/floor/factory wall texture.jpg';
-
 import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
 import { useSceneContext } from "../../../../modules/scene/sceneContext";
 import { useVersionContext } from "../../../../modules/builder/version/versionContext";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../../functions/getUserData";
 import { useSocketStore } from "../../../../store/builder/store";
+import { materials } from "./FloorProperties";
 
 // import { upsertFloorApi } from "../../../../services/factoryBuilder/floor/upsertFloorApi";
 
@@ -29,11 +27,6 @@ const SelectedFloorProperties = () => {
 
     const [activeSurface, setActiveSurface] = useState<"top" | "side">("top");
 
-    const materials = [
-        { texture: defaultTexture, textureId: "Default Material", textureName: "Default Material" },
-        { texture: floorTexture1, textureId: "Material 1", textureName: "Grunge Concrete" }
-    ];
-
     const floor = selectedFloor ? getFloorById(selectedFloor.userData.floorUuid) : null;
 
     useEffect(() => {

app/src/modules/builder/builder.tsx

@@ -95,7 +95,7 @@ export default function Builder() {
 
             <AssetsGroup plane={plane} />
 
-            <mesh name='Walls-And-WallAssets-Group'>
+            {/* <mesh name='Walls-And-WallAssets-Group'>
                 <Geometry ref={csgRef} useGroups>
 
                     <WallGroup />
@@ -103,7 +103,7 @@ export default function Builder() {
                     <WallAssetGroup />
 
                 </Geometry>
-            </mesh>
+            </mesh> */}
 
             <AislesGroup />
 
@@ -113,9 +113,9 @@ export default function Builder() {
 
             <MeasurementTool />
 
-            <CalculateAreaGroup />
+            {/* <CalculateAreaGroup /> */}
 
-            <NavMesh />
+            {/* <NavMesh /> */}
 
             <DxfFile />
 

app/src/modules/builder/floor/Instances/Instance/floorInstance.tsx

@@ -1,108 +1,247 @@
-import { useMemo } from 'react';
+import { useMemo } from "react";
-import { Shape, Vector2, DoubleSide, TextureLoader, RepeatWrapping, SRGBColorSpace } from 'three';
+import {
-import { useLoader } from '@react-three/fiber';
+  Shape,
-import { Extrude } from '@react-three/drei';
+  Vector2,
-import useModuleStore from '../../../../../store/useModuleStore';
+  DoubleSide,
-import { useBuilderStore } from '../../../../../store/builder/useBuilderStore';
+  TextureLoader,
-import { useToggleView } from '../../../../../store/builder/store';
+  RepeatWrapping,
-import * as Constants from '../../../../../types/world/worldConstants';
+  SRGBColorSpace,
+  NoColorSpace,
+} from "three";
+import { useLoader } from "@react-three/fiber";
+import { Extrude } from "@react-three/drei";
+import useModuleStore from "../../../../../store/useModuleStore";
+import { useBuilderStore } from "../../../../../store/builder/useBuilderStore";
+import { useToggleView } from "../../../../../store/builder/store";
+import * as Constants from "../../../../../types/world/worldConstants";
 
 import texturePath from "../../../../../assets/textures/floor/white.png";
 import texturePathDark from "../../../../../assets/textures/floor/black.png";
-import material1 from '../../../../../assets/textures/floor/factory wall texture.jpg';
+import material1 from "../../../../../assets/textures/floor/factory wall texture.jpg";
+
+// floor-mat1
+import material2Map from "../../../../../assets/textures/floor/tex1/MI_FactoryConcreteFloor01_BaseColor.001.jpg";
+import material2NormalMap from "../../../../../assets/textures/floor/tex1/MI_FactoryConcreteFloor01_Normal.001.jpg";
+import material2MetalicRoughnessMap from "../../../../../assets/textures/floor/tex1/MI_FactoryConcreteFloor01_MetallicRoughness.001.jpg";
+
+// floor-mat2
+import material3Map from "../../../../../assets/textures/floor/tex2/MI_FloorMats01_baseColor.png";
+import material3NormalMap from "../../../../../assets/textures/floor/tex2/MI_FloorMats01_Normal.png";
+import material3MetalicRoughnessMap from "../../../../../assets/textures/floor/tex2/MI_FloorMats01_occlusionRoughnessMetallic.png";
+
+// floor-mat3
+import material4Map from "../../../../../assets/textures/floor/tex3/metal_plate_diff_1k.jpg";
+import material4RoughnessMap from "../../../../../assets/textures/floor/tex3/metal_plate_rough_1k.png";
+import material4MetalicMap from "../../../../../assets/textures/floor/tex3/metal_plate_metal_1k.png";
+import material4NormalMap from "../../../../../assets/textures/floor/tex3/metal_plate_nor_gl_1k.png";
 
 function FloorInstance({ floor }: { floor: Floor }) {
-    const { togglView } = useToggleView();
+  const { togglView } = useToggleView();
-    const { activeModule } = useModuleStore();
+  const { activeModule } = useModuleStore();
-    const { selectedFloor, setSelectedFloor, setSelectedDecal } = useBuilderStore();
+  const { selectedFloor, setSelectedFloor, setSelectedDecal } =
-    const savedTheme = localStorage.getItem('theme');
+    useBuilderStore();
+  const savedTheme = localStorage.getItem("theme");
 
-    const materials: Record<string, string> = {
+  const materials: Record<
-        "Default Material": savedTheme === "dark" ? texturePathDark : texturePath,
+    string,
-        "Material 1": savedTheme === "dark" ? material1 : material1,
+    {
-    };
+      map: string;
+      roughnessMap?: string;
+      metalnessMap?: string;
+      normalMap?: string;
+      textureTileScale?: [number, number];
+    }
+  > = {
+    "Default Material": {
+      map: savedTheme === "dark" ? texturePathDark : texturePath,
+    },
+    "Material 1": {
+      map: material1,
+    },
+    "Material 2": {
+      map: material2Map,
+      roughnessMap: material2MetalicRoughnessMap,
+      metalnessMap: material2MetalicRoughnessMap,
+      normalMap: material2NormalMap,
+      textureTileScale: [0.1, 0.1],
+    },
+    "Material 3": {
+      map: material3Map,
+      roughnessMap: material3MetalicRoughnessMap,
+      metalnessMap: material3MetalicRoughnessMap,
+      normalMap: material3NormalMap,
+      textureTileScale: [0.35, 0.5],
+    },
+    "Material 4": {
+      map: material4Map,
+      roughnessMap: material4RoughnessMap,
+      metalnessMap: material4MetalicMap,
+      normalMap: material4NormalMap,
+    },
+  };
 
-    const shape = useMemo(() => {
+  const shape = useMemo(() => {
-        const shape = new Shape();
+    const shape = new Shape();
-        const points = floor.points.map(p => new Vector2(p.position[0], p.position[2]));
+    const points = floor.points.map(
-        if (points.length < 3) return null;
+      (p) => new Vector2(p.position[0], p.position[2])
-        shape.moveTo(points[0].x, points[0].y);
-        for (let i = 1; i < points.length; i++) {
-            shape.lineTo(points[i].x, points[i].y);
-        }
-        return shape;
-    }, [floor]);
-
-    const textureScale = Constants.floorConfig.textureScale;
-
-    const [topTexture, sideTexture] = useLoader(
-        TextureLoader,
-        [
-            materials[floor.topMaterial] || materials['Default Material'],
-            materials[floor.sideMaterial] || materials['Default Material']
-        ]
     );
+    if (points.length < 3) return null;
+    shape.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) {
+      shape.lineTo(points[i].x, points[i].y);
+    }
+    return shape;
+  }, [floor]);
 
-    if (!materials[floor.topMaterial] || !materials[floor.sideMaterial]) return null;
+  const textureScale = Constants.floorConfig.textureScale;
 
-    [topTexture, sideTexture].forEach(tex => {
+  // Helper function to handle texture maps and filter out null values
-        tex.wrapS = tex.wrapT = RepeatWrapping;
+  function getMaterialMaps(material: any, defaultMap: any) {
-        tex.repeat.set(textureScale, textureScale);
+    const materialMap = material.map || defaultMap;
-        tex.colorSpace = SRGBColorSpace;
+    const normalMap = material.normalMap || null;
+    const roughnessMap = material.roughnessMap || null;
+    const metalnessMap = material.metalnessMap || null;
+
+    return [materialMap, normalMap, roughnessMap, metalnessMap].filter(
+      (texture): texture is string => texture !== null
+    );
+  }
+
+  // Default material map
+  const defaultMaterialMap = materials["Default Material"].map;
+
+  // Get top and side material maps
+  const topMaterial = materials[floor.topMaterial];
+  const sideMaterial = materials[floor.sideMaterial];
+
+  // Get the filtered lists for top and side textures
+  const topTexturesList = getMaterialMaps(topMaterial, defaultMaterialMap);
+  const sideTexturesList = getMaterialMaps(sideMaterial, defaultMaterialMap);
+
+  // Use loader to load top and side textures
+  const [topTexture, topNormalTexture, topRoughnessTexture, topMetalicTexture] =
+    useLoader(TextureLoader, topTexturesList);
+
+  const [
+    sideTexture,
+    sideNormalTexture,
+    sideRoughnessTexture,
+    sideMetalicTexture,
+  ] = useLoader(TextureLoader, sideTexturesList);
+
+  // Early exit if materials are missing
+  if (!materials[floor.topMaterial] || !materials[floor.sideMaterial])
+    return null;
+
+  // Combine and pair textures with their corresponding material
+  const textureMaterialMap = [
+    {
+      textures: [
+        topTexture,
+        topNormalTexture,
+        topRoughnessTexture,
+        topMetalicTexture,
+      ],
+      materialKey: floor.topMaterial,
+    },
+    {
+      textures: [
+        sideTexture,
+        sideNormalTexture,
+        sideRoughnessTexture,
+        sideMetalicTexture,
+      ],
+      materialKey: floor.sideMaterial,
+    },
+  ];
+
+  // Apply texture settings
+  textureMaterialMap.forEach(({ textures, materialKey }) => {
+    const tileScale = materials[materialKey]?.textureTileScale ?? [
+      textureScale,
+      textureScale,
+    ];
+
+    textures.forEach((tex, idx) => {
+      if (!tex) return;
+      tex.wrapS = tex.wrapT = RepeatWrapping;
+      tex.repeat.set(tileScale[0], tileScale[1]);
+      tex.anisotropy = 16;
+      // First texture is always the color map (use SRGB), others should be linear
+      tex.colorSpace = idx < 1 ? SRGBColorSpace : NoColorSpace;
     });
+  });
 
-    if (!shape) return null;
+  if (!shape) return null;
 
-    return (
+  return (
-        <mesh
+    <mesh
-            castShadow
+      castShadow
-            receiveShadow
+      receiveShadow
-            name={`Floor-${floor.floorUuid}`}
+      name={`Floor-${floor.floorUuid}`}
-            rotation={[Math.PI / 2, 0, 0]}
+      rotation={[Math.PI / 2, 0, 0]}
-            position={[0, !floor.isBeveled ? (floor.floorDepth - 0.1) : (floor.floorDepth - 0.2), 0]}
+      position={[
-            userData={floor}
+        0,
-            onDoubleClick={(e) => {
+        !floor.isBeveled ? floor.floorDepth - 0.1 : floor.floorDepth - 0.2,
-                if (!togglView && activeModule === 'builder') {
+        0,
-                    if (e.object.userData.floorUuid) {
+      ]}
-                        e.stopPropagation();
+      userData={floor}
-                        setSelectedFloor(e.object);
+      onDoubleClick={(e) => {
-                        setSelectedDecal(null);
+        if (!togglView && activeModule === "builder") {
-                    }
+          if (e.object.userData.floorUuid) {
-                }
+            e.stopPropagation();
-            }}
+            setSelectedFloor(e.object);
-            onPointerMissed={() => {
+            setSelectedDecal(null);
-                if (selectedFloor && selectedFloor.userData.floorUuid === floor.floorUuid) {
+          }
-                    setSelectedFloor(null);
+        }
-                }
+      }}
-            }}
+      onPointerMissed={() => {
-        >
+        if (
-            <Extrude
+          selectedFloor &&
-                name={`Floor-${floor.floorUuid}`}
+          selectedFloor.userData.floorUuid === floor.floorUuid
-                args={[shape, {
+        ) {
-                    depth: !floor.isBeveled ? floor.floorDepth : (floor.floorDepth - 0.1),
+          setSelectedFloor(null);
-                    bevelEnabled: floor.isBeveled,
+        }
-                    bevelSegments: floor.bevelStrength,
+      }}
-                    bevelOffset: -0.1,
+    >
-                    bevelSize: 0.1,
+      <Extrude
-                    bevelThickness: 0.1,
+        name={`Floor-${floor.floorUuid}`}
-                }]}
+        args={[
-                userData={floor}
+          shape,
-            >
+          {
-                <meshStandardMaterial
+            depth: !floor.isBeveled ? floor.floorDepth : floor.floorDepth - 0.1,
-                    attach="material-0"
+            bevelEnabled: floor.isBeveled,
-                    color={Constants.floorConfig.defaultColor}
+            bevelSegments: floor.bevelStrength,
-                    map={topTexture}
+            bevelOffset: -0.1,
-                    side={DoubleSide}
+            bevelSize: 0.1,
-                />
+            bevelThickness: 0.1,
-                <meshStandardMaterial
+          },
-                    attach="material-1"
+        ]}
-                    color={Constants.floorConfig.defaultColor}
+        userData={floor}
-                    map={sideTexture}
+      >
-                    side={DoubleSide}
+        <meshPhysicalMaterial
-                />
+          attach="material-0"
-            </Extrude>
+          color={Constants.floorConfig.defaultColor}
-        </mesh>
+          map={topTexture}
-    );
+          roughnessMap={topRoughnessTexture}
+          metalnessMap={topMetalicTexture}
+          normalMap={topNormalTexture}
+          roughness={1.5}
+          metalness={1.0}
+          side={DoubleSide}
+        />
+        <meshStandardMaterial
+          attach="material-1"
+          color={Constants.floorConfig.defaultColor}
+          map={sideTexture?.clone()}
+          roughnessMap={sideRoughnessTexture?.clone()}
+          metalnessMap={sideMetalicTexture?.clone()}
+          normalMap={sideNormalTexture?.clone()}
+          side={DoubleSide}
+        />
+      </Extrude>
+    </mesh>
+  );
 }
 
-export default FloorInstance;
+export default FloorInstance;

app/src/modules/scene/postProcessing/postProcessing.tsx

@@ -1,4 +1,4 @@
-import { DepthOfField, EffectComposer, GodRays, N8AO, Outline } from "@react-three/postprocessing";
+import { DepthOfField, Bloom, EffectComposer, N8AO, Outline } from "@react-three/postprocessing";
 import { useThree } from "@react-three/fiber";
 import { BlendFunction } from "postprocessing";
 import {
@@ -84,6 +84,12 @@ export default function PostProcessing() {
                 focalLength={0.15}
                 bokehScale={2}
             />
+            <Bloom
+                intensity={0.1}
+                luminanceThreshold={0.9}
+                luminanceSmoothing={0.025}
+                mipmapBlur={false}
+            />
             {selectedWallAsset && (
                 <Outline
                     selection={flattenChildren(selectedWallAsset.children)}

app/src/modules/scene/scene.tsx

@@ -13,7 +13,7 @@ import { useParams } from "react-router-dom";
 import { getAllProjects } from "../../services/dashboard/getAllProjects";
 import { getUserData } from "../../functions/getUserData";
 import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
-import { Color } from "three";
+import { Color, SRGBColorSpace } from "three";
 
 export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Comparison Layout' }) {
     const map = useMemo(() => [
@@ -52,6 +52,7 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
             }).catch((err) => {
                 console.error(err);
             });
+            // eslint-disable-next-line
     }, [activeModule, assets, loadingProgress])
 
     return (
@@ -68,7 +69,7 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
                 onCreated={(e) => {
                     e.scene.background = layout === 'Main Layout' ? null : new Color(0x19191d);
                 }}
-                gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
+                gl={{ outputColorSpace: SRGBColorSpace, powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
             >
                 <Setup />
                 <Collaboration />
@@ -79,4 +80,4 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
             </Canvas>
         </KeyboardControls>
     );
-}
+}

app/src/modules/scene/setup/setup.tsx

@@ -5,6 +5,7 @@ import Controls from '../controls/controls';
 import { AdaptiveDpr, AdaptiveEvents, Environment } from '@react-three/drei'
 
 import background from "../../../assets/textures/hdr/mudroadpuresky2k.hdr";
+// import { Perf } from 'r3f-perf';
 
 function Setup() {
     return (
@@ -17,6 +18,8 @@ function Setup() {
 
             <PostProcessing />
 
+            {/* <Perf position="bottom-left" className="scene-performance-stats"/> */}
+
             {/* <MovingClouds /> */}
 
             <Environment files={background} environmentIntensity={1.5} />
@@ -28,4 +31,4 @@ function Setup() {
     )
 }
 
-export default Setup;
+export default Setup;

app/src/styles/scene/scene.scss

@@ -74,10 +74,10 @@
       border-radius: #{$border-radius-large};
       outline: 1px solid var(--border-color);
     }
-    .upload-btn{
+    .upload-btn {
       padding: 4px 16px !important;
     }
-    .generate-walls-btn{
+    .generate-walls-btn {
       padding: 4px 16px;
       @include flex-center;
       gap: 4px;
@@ -117,9 +117,20 @@
       }
     }
   }
-
-
 }
-.label-toogler.bottom{
+.label-toogler.bottom {
   bottom: 32%;
 }
+
+.scene-performance-stats {
+  bottom: 36px !important;
+  left: 12px !important;
+  border-radius: 6px;
+  backdrop-filter: blur(4px);
+  svg {
+    display: none;
+  }
+  .c-jiwtRJ{
+    align-items: center;
+  }
+}

app/src/utils/shortcutkeys/handleShortcutKeys.ts

@@ -245,8 +245,12 @@ const KeyPressListener: React.FC = () => {
     if (keyCombination === "Ctrl+Shift+?") {
       setShowShortcuts(!showShortcuts);
     }
+
+    // if (keyCombination === "Ctrl+Shift+P") {
+    //   pref
+    // }
+
     if (keyCombination === "U") {
-      // console.log("viewSceneLabels: ", viewSceneLabels);
       setViewSceneLabels((prev) => !prev);
     }