From f6a88860ecfa284d6a08aad569c8e07a88648efc Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Wed, 10 Sep 2025 16:01:01 +0530 Subject: [PATCH 1/2] added shader reader, seperated shader files to glsl files and added zone corner reference --- app/src/assets/shaders/point/point.frag.glsl | 13 ++ app/src/assets/shaders/point/point.vert.glsl | 6 + app/src/assets/shaders/zone/zone1.frag.glsl | 42 ++++ app/src/assets/shaders/zone/zone1.vert.glsl | 6 + app/src/assets/shaders/zone/zone2.frag.glsl | 25 ++ app/src/assets/shaders/zone/zone2.vert.glsl | 6 + app/src/assets/shaders/zone/zone3.frag.glsl | 37 +++ app/src/assets/shaders/zone/zone3.vert.glsl | 6 + app/src/modules/builder/point/point.tsx | 53 ++--- .../point/reference/referencePoint.tsx | 81 +++---- .../zone/Instances/Instance/zoneInstance.tsx | 221 +++++------------- app/src/types/declarations.d.ts | 3 +- app/src/utils/scene/useShaderReader.ts | 13 ++ 13 files changed, 262 insertions(+), 250 deletions(-) create mode 100644 app/src/assets/shaders/point/point.frag.glsl create mode 100644 app/src/assets/shaders/point/point.vert.glsl create mode 100644 app/src/assets/shaders/zone/zone1.frag.glsl create mode 100644 app/src/assets/shaders/zone/zone1.vert.glsl create mode 100644 app/src/assets/shaders/zone/zone2.frag.glsl create mode 100644 app/src/assets/shaders/zone/zone2.vert.glsl create mode 100644 app/src/assets/shaders/zone/zone3.frag.glsl create mode 100644 app/src/assets/shaders/zone/zone3.vert.glsl create mode 100644 app/src/utils/scene/useShaderReader.ts diff --git a/app/src/assets/shaders/point/point.frag.glsl b/app/src/assets/shaders/point/point.frag.glsl new file mode 100644 index 0000000..5b5d6a3 --- /dev/null +++ b/app/src/assets/shaders/point/point.frag.glsl @@ -0,0 +1,13 @@ +varying vec2 vUv; +uniform vec3 uOuterColor; +uniform vec3 uInnerColor; + +void main() { + // Define the size of the white square as a proportion of the face + float borderThickness = 0.2; // Adjust this value for border thickness + if (vUv.x > borderThickness && vUv.x < 1.0 - borderThickness && vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) { + gl_FragColor = vec4(uInnerColor, 1.0); // Inner square + } else { + gl_FragColor = vec4(uOuterColor, 1.0); // Border + } +} \ No newline at end of file diff --git a/app/src/assets/shaders/point/point.vert.glsl b/app/src/assets/shaders/point/point.vert.glsl new file mode 100644 index 0000000..322c197 --- /dev/null +++ b/app/src/assets/shaders/point/point.vert.glsl @@ -0,0 +1,6 @@ +varying vec2 vUv; + +void main() { + vUv = uv; + gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); +} diff --git a/app/src/assets/shaders/zone/zone1.frag.glsl b/app/src/assets/shaders/zone/zone1.frag.glsl new file mode 100644 index 0000000..369e903 --- /dev/null +++ b/app/src/assets/shaders/zone/zone1.frag.glsl @@ -0,0 +1,42 @@ +#define TAU 6.28318530718 +#define MAX_ITER 5 + +varying vec2 vUv; +uniform float uTime; +uniform vec3 uOuterColor; + +void main() { + float time = uTime * 0.25; + vec2 uv = vUv; + + vec2 p = mod(uv * TAU, TAU) - 250.0; + vec2 i = vec2(p); + + float c = 1.0; + float inten = 0.005; + + for (int n = 0; n < MAX_ITER; n++) { + float t = time * (1.0 - (3.5 / float(n + 1))); + i = p + vec2( + cos(t - i.x) + sin(t + i.y), + sin(t - i.y) + cos(t + i.x) + ); + c += 1.0 / length(vec2( + p.x / (sin(i.x + t) / inten), + p.y / (cos(i.y + t) / inten) + )); + } + + c /= float(MAX_ITER); + c = 1.17 - pow(c, 1.4); + + vec3 fractalCol = vec3(pow(abs(c), 8.0)); + fractalCol = clamp(fractalCol + vec3(0.0, 0.35, 0.5), 0.0, 1.0); + + vec3 darkColor = uOuterColor * 0.4; + vec3 col = mix(darkColor, uOuterColor, fractalCol.r); + + float verticalFade = 1.0 - vUv.y; + + gl_FragColor = vec4(col * verticalFade, verticalFade); +} diff --git a/app/src/assets/shaders/zone/zone1.vert.glsl b/app/src/assets/shaders/zone/zone1.vert.glsl new file mode 100644 index 0000000..322c197 --- /dev/null +++ b/app/src/assets/shaders/zone/zone1.vert.glsl @@ -0,0 +1,6 @@ +varying vec2 vUv; + +void main() { + vUv = uv; + gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); +} diff --git a/app/src/assets/shaders/zone/zone2.frag.glsl b/app/src/assets/shaders/zone/zone2.frag.glsl new file mode 100644 index 0000000..68fd554 --- /dev/null +++ b/app/src/assets/shaders/zone/zone2.frag.glsl @@ -0,0 +1,25 @@ +varying vec2 vUv; +uniform vec3 uOuterColor; +uniform float uTime; + +void main() { + // Map vUv into -1..1 range like Shadertoy + vec2 uv = (vUv - 1.0) * 0.5; + + // Distortion loop – slowed down (uTime * 0.25) + for (float i = 1.0; i < 8.0; i++) { + uv.y += 0.1 * sin(uv.x * i * i + uTime * 0.25) + * sin(uv.y * i * i + uTime * 0.25); + } + + // Base color influenced by uv + zone color + vec3 col = uOuterColor; + col.r += uv.y * 0.2; + col.g += uv.y * 0.3; + col.b += uv.y * 0.4; + + // Vertical fade + float verticalFade = 1.0 - vUv.y; + + gl_FragColor = vec4(col * verticalFade, verticalFade); +} diff --git a/app/src/assets/shaders/zone/zone2.vert.glsl b/app/src/assets/shaders/zone/zone2.vert.glsl new file mode 100644 index 0000000..322c197 --- /dev/null +++ b/app/src/assets/shaders/zone/zone2.vert.glsl @@ -0,0 +1,6 @@ +varying vec2 vUv; + +void main() { + vUv = uv; + gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); +} diff --git a/app/src/assets/shaders/zone/zone3.frag.glsl b/app/src/assets/shaders/zone/zone3.frag.glsl new file mode 100644 index 0000000..aa74ced --- /dev/null +++ b/app/src/assets/shaders/zone/zone3.frag.glsl @@ -0,0 +1,37 @@ +varying vec2 vUv; +uniform float uTime; +uniform vec3 uOuterColor; + +void main() { + // UV mapping like fragCoord + vec2 uv = vUv; + vec2 p = uv * 2.0 - 1.0; + float t = uTime * 0.3; + + // Flow direction and movement + vec2 flowDir = normalize(vec2(-0.7, -1.0)); + float flowSpeed = 2.0; + float flow = dot(p, flowDir) * flowSpeed + t; + + // Ripples + float rippleX = sin(p.x * 12.0 + t * 1.5) * cos(p.y * 8.0 + t * 2.0) * 0.3; + float rippleY = cos(p.y * 10.0 - t * 1.2) * sin(p.x * 7.0 + t * 0.8) * 0.4; + float distort = rippleX + rippleY; + + // Gradient to drive stripes + float gradient = fract(flow + distort * 0.5); + + // Smooth liquid band + float band = smoothstep(0.2, 0.6, gradient) - smoothstep(0.6, 0.9, gradient); + + // Darker zone color + vec3 darkColor = uOuterColor * 0.4; + + // Mix between dark and bright zone color + vec3 col = mix(darkColor, uOuterColor, band); + + // Vertical fade + float verticalFade = 1.0 - vUv.y; + + gl_FragColor = vec4(col * verticalFade, verticalFade); +} diff --git a/app/src/assets/shaders/zone/zone3.vert.glsl b/app/src/assets/shaders/zone/zone3.vert.glsl new file mode 100644 index 0000000..86d9adb --- /dev/null +++ b/app/src/assets/shaders/zone/zone3.vert.glsl @@ -0,0 +1,6 @@ +varying vec2 vUv; + +void main(){ + vUv = uv; + gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); +} diff --git a/app/src/modules/builder/point/point.tsx b/app/src/modules/builder/point/point.tsx index d6a9b92..2d4c6a0 100644 --- a/app/src/modules/builder/point/point.tsx +++ b/app/src/modules/builder/point/point.tsx @@ -7,9 +7,13 @@ import { useThree } from "@react-three/fiber"; import { useBuilderStore } from "../../../store/builder/useBuilderStore"; import { useSelectedPoints } from "../../../store/simulation/useSimulationStore"; import { usePointSnapping } from "./helpers/usePointSnapping"; +import useShaderReader from "../../../utils/scene/useShaderReader"; import { useParams } from "react-router-dom"; import { useSceneContext } from "../../scene/sceneContext"; +import vertexShaderUrl from "../../../assets/shaders/point/point.vert.glsl"; +import fragmentShaderUrl from "../../../assets/shaders/point/point.frag.glsl"; + import { upsertAisleApi } from "../../../services/factoryBuilder/aisle/upsertAisleApi"; import { deleteAisleApi } from "../../../services/factoryBuilder/aisle/deleteAisleApi"; import { upsertWallApi } from "../../../services/factoryBuilder/wall/upsertWallApi"; @@ -27,6 +31,8 @@ import { calculateAssetTransformationOnWall } from "../wallAsset/Instances/Insta function Point({ point }: { readonly point: Point }) { const materialRef = useRef(null); + const vertexShader = useShaderReader(vertexShaderUrl); + const fragmentShader = useShaderReader(fragmentShaderUrl); const { raycaster, camera, pointer } = useThree(); const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []); const [isHovered, setIsHovered] = useState(false); @@ -42,7 +48,11 @@ function Point({ point }: { readonly point: Point }) { const { setPosition: setZonePosition, removePoint: removeZonePoint, getZonesByPointId } = zoneStore(); const { getWallAssetsByWall, updateWallAsset, removeWallAsset } = wallAssetStore(); const { selectedVersion } = versionStore(); - const { snapAislePoint, snapAisleAngle, snapWallPoint, snapWallAngle, snapFloorPoint, snapFloorAngle, snapZonePoint, snapZoneAngle } = usePointSnapping({ uuid: point.pointUuid, pointType: point.pointType, position: point.position }); + const { snapAislePoint, snapAisleAngle, snapWallPoint, snapWallAngle, snapFloorPoint, snapFloorAngle, snapZonePoint, snapZoneAngle } = usePointSnapping({ + uuid: point.pointUuid, + pointType: point.pointType, + position: point.position, + }); const { hoveredPoint, hoveredLine, setHoveredPoint } = useBuilderStore(); const { selectedPoints } = useSelectedPoints(); const { userId, organization } = getUserData(); @@ -695,9 +705,7 @@ function Point({ point }: { readonly point: Point }) { } }, [selectedPoints]); - if (!point) { - return null; - } + if (!point || !vertexShader || !fragmentShader) return null; return ( <> @@ -733,37 +741,18 @@ function Point({ point }: { readonly point: Point }) { userData={point} > - borderThickness && vUv.x < 1.0 - borderThickness && vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) { - gl_FragColor = vec4(uInnerColor, 1.0); // Inner square - } else { - gl_FragColor = vec4(uOuterColor, 1.0); // Border - } - } - `} - /> + ) : ( - + diff --git a/app/src/modules/builder/point/reference/referencePoint.tsx b/app/src/modules/builder/point/reference/referencePoint.tsx index 50882f8..c577ee2 100644 --- a/app/src/modules/builder/point/reference/referencePoint.tsx +++ b/app/src/modules/builder/point/reference/referencePoint.tsx @@ -1,9 +1,15 @@ -import * as THREE from 'three'; -import * as Constants from '../../../../types/world/worldConstants'; -import { useRef, useMemo } from 'react'; +import * as THREE from "three"; +import { useRef, useMemo } from "react"; +import * as Constants from "../../../../types/world/worldConstants"; +import useShaderReader from "../../../../utils/scene/useShaderReader"; + +import vertexShaderUrl from "../../../../assets/shaders/point/point.vert.glsl"; +import fragmentShaderUrl from "../../../../assets/shaders/point/point.frag.glsl"; function ReferencePoint({ point }: { readonly point: Point }) { const materialRef = useRef(null); + const vertexShader = useShaderReader(vertexShaderUrl); + const fragmentShader = useShaderReader(fragmentShaderUrl); const boxScale: [number, number, number] = Constants.pointConfig.boxScale; const colors = { @@ -12,64 +18,37 @@ function ReferencePoint({ point }: { readonly point: Point }) { defaultDeleteColor: Constants.pointConfig.deleteColor, }; - const uniforms = useMemo(() => ({ - uOuterColor: { value: new THREE.Color(colors.defaultOuterColor) }, - uInnerColor: { value: new THREE.Color(colors.defaultInnerColor) }, - }), [colors.defaultInnerColor, colors.defaultOuterColor, colors.defaultDeleteColor]); + const uniforms = useMemo( + () => ({ + uOuterColor: { value: new THREE.Color(colors.defaultOuterColor) }, + uInnerColor: { value: new THREE.Color(colors.defaultInnerColor) }, + }), + [colors.defaultInnerColor, colors.defaultOuterColor, colors.defaultDeleteColor] + ); if (!point) { return null; } - let pointName = 'Point'; - if (point.pointType === 'Wall') { - pointName = 'Wall-Point'; - } else if (point.pointType === 'Floor') { - pointName = 'Floor-Point'; - } else if (point.pointType === 'Aisle') { - pointName = 'Aisle-Point'; - } else if (point.pointType === 'Zone') { - pointName = 'Zone-Point'; + let pointName = "Point"; + if (point.pointType === "Wall") { + pointName = "Wall-Point"; + } else if (point.pointType === "Floor") { + pointName = "Floor-Point"; + } else if (point.pointType === "Aisle") { + pointName = "Aisle-Point"; + } else if (point.pointType === "Zone") { + pointName = "Zone-Point"; } + if (!point || !vertexShader || !fragmentShader) return null; + return ( - + - borderThickness && vUv.x < 1.0 - borderThickness && - vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) { - gl_FragColor = vec4(uInnerColor, 1.0); // Inner square - } else { - gl_FragColor = vec4(uOuterColor, 1.0); // Border - } - } - `} - /> + ); } -export default ReferencePoint; \ No newline at end of file +export default ReferencePoint; diff --git a/app/src/modules/builder/zone/Instances/Instance/zoneInstance.tsx b/app/src/modules/builder/zone/Instances/Instance/zoneInstance.tsx index 7ed053a..720e8eb 100644 --- a/app/src/modules/builder/zone/Instances/Instance/zoneInstance.tsx +++ b/app/src/modules/builder/zone/Instances/Instance/zoneInstance.tsx @@ -2,176 +2,27 @@ import { useMemo, useState } from "react"; import { Color, DoubleSide, ShaderMaterial, Vector3 } from "three"; import { useFrame } from "@react-three/fiber"; import { useSceneStore } from "../../../../../store/scene/useSceneStore"; +import useShaderReader from "../../../../../utils/scene/useShaderReader"; + +import vertexShaderUrl from "../../../../../assets/shaders/zone/zone1.vert.glsl"; +import fragmentShaderUrl from "../../../../../assets/shaders/zone/zone1.frag.glsl"; +import { RoundedBox } from "@react-three/drei"; function ZoneInstance({ zone }: { readonly zone: Zone }) { + const vertexShader = useShaderReader(vertexShaderUrl); + const fragmentShader = useShaderReader(fragmentShaderUrl); const zoneLayer = zone.points[0].layer; const { limitFps } = useSceneStore(); const [time, setTime] = useState(); - - // const zoneMaterial = useMemo(() => { - // return new ShaderMaterial({ - // side: DoubleSide, - // vertexShader: ` - // varying vec2 vUv; - // void main() { - // vUv = uv; - // gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); - // } - // `, - // fragmentShader: ` - // varying vec2 vUv; - // uniform vec3 uOuterColor; - // uniform float uTime; - - // void main() { - // // Map vUv into -1..1 range like Shadertoy - // vec2 uv = (vUv - 1.0) * 0.5; - - // // Distortion loop – slowed down (uTime * 0.25) - // for (float i = 1.0; i < 8.0; i++) { - // uv.y += 0.1 * sin(uv.x * i * i + uTime * 0.25) - // * sin(uv.y * i * i + uTime * 0.25); - // } - - // // Base color influenced by uv + zone color - // vec3 col = uOuterColor; - // col.r += uv.y * 0.2; - // col.g += uv.y * 0.3; - // col.b += uv.y * 0.4; - - // // Fade vertically for a nicer top fade-out - // float verticalFade = 1.0 - vUv.y; - - // gl_FragColor = vec4(col * verticalFade, verticalFade); - // } - // `, - // uniforms: { - // uOuterColor: { value: new Color(zone.zoneColor) }, - // uTime: { value: time }, - // }, - // transparent: true, - // depthWrite: false, - // }); - // }, [time]); - - // const zoneMaterial = useMemo(() => { - // return new ShaderMaterial({ - // side: DoubleSide, - // vertexShader: ` - // varying vec2 vUv; - // void main(){ - // vUv = uv; - // gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); - // } - // `, - // fragmentShader: ` - // varying vec2 vUv; - // uniform float uTime; - // uniform vec3 uOuterColor; - - // void main() { - // // UV mapping like fragCoord - // vec2 uv = vUv; - // vec2 p = uv * 2.0 - 1.0; - // float t = uTime * 0.3; - - // // Flow direction and movement - // vec2 flowDir = normalize(vec2(-0.7, -1.0)); - // float flowSpeed = 2.0; - // float flow = dot(p, flowDir) * flowSpeed + t; - - // // Ripples - // float rippleX = sin(p.x * 12.0 + t * 1.5) * cos(p.y * 8.0 + t * 2.0) * 0.3; - // float rippleY = cos(p.y * 10.0 - t * 1.2) * sin(p.x * 7.0 + t * 0.8) * 0.4; - // float distort = rippleX + rippleY; - - // // Gradient to drive stripes - // float gradient = fract(flow + distort * 0.5); - - // // Smooth liquid band - // float band = smoothstep(0.2, 0.6, gradient) - smoothstep(0.6, 0.9, gradient); - - // // Darker zone color - // vec3 darkColor = uOuterColor * 0.4; - - // // Mix between dark and bright zone color - // vec3 col = mix(darkColor, uOuterColor, band); - - // // Vertical fade - // float verticalFade = 1.0 - vUv.y; - - // gl_FragColor = vec4(col * verticalFade, verticalFade); - // } - // `, - // uniforms: { - // uOuterColor: { value: new Color(zone.zoneColor) }, - // uTime: { value: time }, - // }, - // transparent: true, - // depthWrite: false, - // }); - // }, [zone.zoneColor, time]); + const isCornerReferenceVisible = false; const zoneMaterial = useMemo(() => { + if (!vertexShader || !fragmentShader) return null; + return new ShaderMaterial({ side: DoubleSide, - vertexShader: ` - varying vec2 vUv; - void main() { - vUv = uv; - gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); - } - `, - fragmentShader: ` - #define TAU 6.28318530718 - #define MAX_ITER 5 - - varying vec2 vUv; - uniform float uTime; - uniform vec3 uOuterColor; - - void main() { - float time = uTime * 0.25; - - // uv in [0,1] - vec2 uv = vUv; - - // convert to p space like Shadertoy - vec2 p = mod(uv * TAU, TAU) - 250.0; - vec2 i = vec2(p); - - float c = 1.0; - float inten = 0.005; - - for (int n = 0; n < MAX_ITER; n++) { - float t = time * (1.0 - (3.5 / float(n + 1))); - i = p + vec2( - cos(t - i.x) + sin(t + i.y), - sin(t - i.y) + cos(t + i.x) - ); - c += 1.0 / length(vec2( - p.x / (sin(i.x + t) / inten), - p.y / (cos(i.y + t) / inten) - )); - } - - c /= float(MAX_ITER); - c = 1.17 - pow(c, 1.4); - - // base fractal color - vec3 fractalCol = vec3(pow(abs(c), 8.0)); - fractalCol = clamp(fractalCol + vec3(0.0, 0.35, 0.5), 0.0, 1.0); - - // Mix between dark and bright zone color - vec3 darkColor = uOuterColor * 0.4; - vec3 col = mix(darkColor, uOuterColor, fractalCol.r); - - // Vertical fade - float verticalFade = 1.0 - vUv.y; - - gl_FragColor = vec4(col * verticalFade, verticalFade); - } - `, + vertexShader, + fragmentShader, uniforms: { uOuterColor: { value: new Color(zone.zoneColor) }, uTime: { value: time }, @@ -187,10 +38,13 @@ function ZoneInstance({ zone }: { readonly zone: Zone }) { } }); + if (!zoneMaterial) return null; + return ( {zone.points.map((point, index: number) => { const nextPoint = zone.points[(index + 1) % zone.points.length]; + const prevPoint = zone.points[(index - 1 + zone.points.length) % zone.points.length]; const point1 = new Vector3(...point.position); const point2 = new Vector3(...nextPoint.position); @@ -199,14 +53,49 @@ function ZoneInstance({ zone }: { readonly zone: Zone }) { const planeHeight = zone.zoneHeight; const midpoint = new Vector3((point1.x + point2.x) / 2, zone.zoneHeight / 2 + (zoneLayer - 1) * zone.zoneHeight, (point1.z + point2.z) / 2); - const angle = Math.atan2(point2.z - point1.z, point2.x - point1.x); + const bottomCorner = new Vector3(point.position[0], (zoneLayer - 1) * zone.zoneHeight, point.position[2]); + const halfHeight = zone.zoneHeight / 4; + + const dirNext = new Vector3(nextPoint.position[0] - point.position[0], 0, nextPoint.position[2] - point.position[2]).normalize(); + const dirPrev = new Vector3(prevPoint.position[0] - point.position[0], 0, prevPoint.position[2] - point.position[2]).normalize(); + + const frameThickness = 0.25; + + const position1: [number, number, number] = [bottomCorner.x, bottomCorner.y + halfHeight / 2, bottomCorner.z]; + const position2: [number, number, number] = [ + bottomCorner.clone().add(dirNext.clone().multiplyScalar(halfHeight / 2)).x, + bottomCorner.clone().add(dirNext.clone().multiplyScalar(halfHeight / 2)).y + frameThickness / 2, + bottomCorner.clone().add(dirNext.clone().multiplyScalar(halfHeight / 2)).z, + ]; + const position3: [number, number, number] = [ + bottomCorner.clone().add(dirPrev.clone().multiplyScalar(halfHeight / 2)).x, + bottomCorner.clone().add(dirPrev.clone().multiplyScalar(halfHeight / 2)).y + frameThickness / 2, + bottomCorner.clone().add(dirPrev.clone().multiplyScalar(halfHeight / 2)).z, + ]; return ( - - - - + + + + + + {isCornerReferenceVisible && ( + <> + + + + + + + + + + + + + )}{" "} + ); })} diff --git a/app/src/types/declarations.d.ts b/app/src/types/declarations.d.ts index ccc8e5e..e998690 100644 --- a/app/src/types/declarations.d.ts +++ b/app/src/types/declarations.d.ts @@ -5,4 +5,5 @@ declare module '*.css'; declare module '*.scss'; declare module '*.glb'; -declare module '*.gltf'; \ No newline at end of file +declare module '*.gltf'; +declare module '*.glsl'; \ No newline at end of file diff --git a/app/src/utils/scene/useShaderReader.ts b/app/src/utils/scene/useShaderReader.ts new file mode 100644 index 0000000..8599560 --- /dev/null +++ b/app/src/utils/scene/useShaderReader.ts @@ -0,0 +1,13 @@ +import { useEffect, useState } from "react"; + +export default function useShaderReader(url: string) { + const [source, setSource] = useState(""); + + useEffect(() => { + fetch(url) + .then((res) => res.text()) + .then((txt) => setSource(txt)); + }, [url]); + + return source; +} From 8afa1f3c1211883cb36b16db31c08cf392f3b478 Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Wed, 10 Sep 2025 16:17:44 +0530 Subject: [PATCH 2/2] zone bug fix --- .../builder/zone/zoneCreator/zoneCreator.tsx | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx b/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx index c5c6ef4..f181d2a 100644 --- a/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx +++ b/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx @@ -9,6 +9,8 @@ import { getUserData } from "../../../../functions/getUserData"; import ReferencePoint from "../../point/reference/referencePoint"; import ReferenceZone from "./referenceZone"; +import getCenteroidPoint from "../../functions/getCenteroid"; + import { upsertZoneApi } from "../../../../services/factoryBuilder/zone/upsertZoneApi"; function ZoneCreator() { @@ -95,14 +97,17 @@ function ZoneCreator() { } if (tempPoints.length > 2 && isCreating && snappedPoint && snappedPoint.pointUuid === tempPoints[0].pointUuid) { + const vec2Points = tempPoints.map((p) => new THREE.Vector2(parseFloat(p.position[0].toFixed(2)), parseFloat(p.position[2].toFixed(2)))); + const viewPortPosition = getCenteroidPoint(vec2Points); + const zone: Zone = { zoneUuid: THREE.MathUtils.generateUUID(), zoneName: `Zone `, points: tempPoints, zoneColor, zoneHeight, - viewPortPosition: [0, 0, 0], - viewPortTarget: [0, 0, 0], + viewPortPosition: viewPortPosition ? [viewPortPosition.x, 10, viewPortPosition.y] : [0, 0, 0], + viewPortTarget: viewPortPosition ? [viewPortPosition.x, 0, viewPortPosition.y] : [0, 0, 0], }; addZone(zone); @@ -147,14 +152,17 @@ function ZoneCreator() { setIsCreating(true); } else if (pointIntersects) { if (tempPoints.length > 2 && isCreating && pointIntersects.object.uuid === tempPoints[0].pointUuid) { + const vec2Points = tempPoints.map((p) => new THREE.Vector2(parseFloat(p.position[0].toFixed(2)), parseFloat(p.position[2].toFixed(2)))); + const viewPortPosition = getCenteroidPoint(vec2Points); + const zone: Zone = { zoneUuid: THREE.MathUtils.generateUUID(), zoneName: "Zone", points: tempPoints, zoneColor, zoneHeight, - viewPortPosition: [0, 0, 0], - viewPortTarget: [0, 0, 0], + viewPortPosition: viewPortPosition ? [viewPortPosition.x, 10, viewPortPosition.y] : [0, 0, 0], + viewPortTarget: viewPortPosition ? [viewPortPosition.x, 0, viewPortPosition.y] : [0, 0, 0], }; addZone(zone); @@ -208,14 +216,17 @@ function ZoneCreator() { event.preventDefault(); if (isCreating) { if (tempPoints.length >= 3) { + const vec2Points = tempPoints.map((p) => new THREE.Vector2(parseFloat(p.position[0].toFixed(2)), parseFloat(p.position[2].toFixed(2)))); + const viewPortPosition = getCenteroidPoint(vec2Points); + const zone: Zone = { zoneUuid: THREE.MathUtils.generateUUID(), zoneName: "Zone", points: tempPoints, zoneColor, zoneHeight, - viewPortPosition: [0, 0, 0], - viewPortTarget: [0, 0, 0], + viewPortPosition: viewPortPosition ? [viewPortPosition.x, 10, viewPortPosition.y] : [0, 0, 0], + viewPortTarget: viewPortPosition ? [viewPortPosition.x, 0, viewPortPosition.y] : [0, 0, 0], }; addZone(zone);