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

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 { Shape, Vector2, DoubleSide, TextureLoader, RepeatWrapping, SRGBColorSpace } 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 { useMemo } from "react";
+import {
+  Shape,
+  Vector2,
+  DoubleSide,
+  TextureLoader,
+  RepeatWrapping,
+  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 { activeModule } = useModuleStore();
-    const { selectedFloor, setSelectedFloor, setSelectedDecal } = useBuilderStore();
-    const savedTheme = localStorage.getItem('theme');
+  const { togglView } = useToggleView();
+  const { activeModule } = useModuleStore();
+  const { selectedFloor, setSelectedFloor, setSelectedDecal } =
+    useBuilderStore();
+  const savedTheme = localStorage.getItem("theme");
 
-    const materials: Record<string, string> = {
-        "Default Material": savedTheme === "dark" ? texturePathDark : texturePath,
-        "Material 1": savedTheme === "dark" ? material1 : material1,
-    };
+  const materials: Record<
+    string,
+    {
+      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 = new Shape();
-        const points = floor.points.map(p => new Vector2(p.position[0], p.position[2]));
-        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]);
-
-    const textureScale = Constants.floorConfig.textureScale;
-
-    const [topTexture, sideTexture] = useLoader(
-        TextureLoader,
-        [
-            materials[floor.topMaterial] || materials['Default Material'],
-            materials[floor.sideMaterial] || materials['Default Material']
-        ]
+  const shape = useMemo(() => {
+    const shape = new Shape();
+    const points = floor.points.map(
+      (p) => new Vector2(p.position[0], p.position[2])
     );
+    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 => {
-        tex.wrapS = tex.wrapT = RepeatWrapping;
-        tex.repeat.set(textureScale, textureScale);
-        tex.colorSpace = SRGBColorSpace;
+  // Helper function to handle texture maps and filter out null values
+  function getMaterialMaps(material: any, defaultMap: any) {
+    const materialMap = material.map || defaultMap;
+    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 (
-        <mesh
-            castShadow
-            receiveShadow
-            name={`Floor-${floor.floorUuid}`}
-            rotation={[Math.PI / 2, 0, 0]}
-            position={[0, !floor.isBeveled ? (floor.floorDepth - 0.1) : (floor.floorDepth - 0.2), 0]}
-            userData={floor}
-            onDoubleClick={(e) => {
-                if (!togglView && activeModule === 'builder') {
-                    if (e.object.userData.floorUuid) {
-                        e.stopPropagation();
-                        setSelectedFloor(e.object);
-                        setSelectedDecal(null);
-                    }
-                }
-            }}
-            onPointerMissed={() => {
-                if (selectedFloor && selectedFloor.userData.floorUuid === floor.floorUuid) {
-                    setSelectedFloor(null);
-                }
-            }}
-        >
-            <Extrude
-                name={`Floor-${floor.floorUuid}`}
-                args={[shape, {
-                    depth: !floor.isBeveled ? floor.floorDepth : (floor.floorDepth - 0.1),
-                    bevelEnabled: floor.isBeveled,
-                    bevelSegments: floor.bevelStrength,
-                    bevelOffset: -0.1,
-                    bevelSize: 0.1,
-                    bevelThickness: 0.1,
-                }]}
-                userData={floor}
-            >
-                <meshStandardMaterial
-                    attach="material-0"
-                    color={Constants.floorConfig.defaultColor}
-                    map={topTexture}
-                    side={DoubleSide}
-                />
-                <meshStandardMaterial
-                    attach="material-1"
-                    color={Constants.floorConfig.defaultColor}
-                    map={sideTexture}
-                    side={DoubleSide}
-                />
-            </Extrude>
-        </mesh>
-    );
+  return (
+    <mesh
+      castShadow
+      receiveShadow
+      name={`Floor-${floor.floorUuid}`}
+      rotation={[Math.PI / 2, 0, 0]}
+      position={[
+        0,
+        !floor.isBeveled ? floor.floorDepth - 0.1 : floor.floorDepth - 0.2,
+        0,
+      ]}
+      userData={floor}
+      onDoubleClick={(e) => {
+        if (!togglView && activeModule === "builder") {
+          if (e.object.userData.floorUuid) {
+            e.stopPropagation();
+            setSelectedFloor(e.object);
+            setSelectedDecal(null);
+          }
+        }
+      }}
+      onPointerMissed={() => {
+        if (
+          selectedFloor &&
+          selectedFloor.userData.floorUuid === floor.floorUuid
+        ) {
+          setSelectedFloor(null);
+        }
+      }}
+    >
+      <Extrude
+        name={`Floor-${floor.floorUuid}`}
+        args={[
+          shape,
+          {
+            depth: !floor.isBeveled ? floor.floorDepth : floor.floorDepth - 0.1,
+            bevelEnabled: floor.isBeveled,
+            bevelSegments: floor.bevelStrength,
+            bevelOffset: -0.1,
+            bevelSize: 0.1,
+            bevelThickness: 0.1,
+          },
+        ]}
+        userData={floor}
+      >
+        <meshPhysicalMaterial
+          attach="material-0"
+          color={Constants.floorConfig.defaultColor}
+          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);
     }