@neurodyn/react-room-viewer 0.0.22 → 0.0.23

package/dist/index.js

@@ -19,7 +19,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import { Clone, DragControls, Environment, Html, useGLTF, useProgress, useTexture } from "@react-three/drei";
 import { Canvas, useFrame, useLoader, useThree } from "@react-three/fiber";
-import { ACESFilmicToneMapping, Box3, BufferGeometry, CanvasTexture, ClampToEdgeWrapping, Color, DataTexture, DoubleSide, Float32BufferAttribute, LinearFilter, LoadingManager, MathUtils, Matrix4, Mesh, MeshBasicMaterial, NearestFilter, PerspectiveCamera, Plane, Quaternion, RGBAFormat, SRGBColorSpace, Scene, TextureLoader, Vector2, Vector3, WebGLRenderTarget } from "three";
+import { ACESFilmicToneMapping, Box3, BufferGeometry, CanvasTexture, ClampToEdgeWrapping, Color, DataTexture, DoubleSide, Float32BufferAttribute, LinearFilter, LoadingManager, MathUtils, Matrix4, Mesh, MeshBasicMaterial, PerspectiveCamera, Plane, Quaternion, RGBAFormat, RedFormat, SRGBColorSpace, Scene, TextureLoader, Vector2, Vector3, WebGLRenderTarget } from "three";
 import { MeshoptDecoder } from "three/examples/jsm/libs/meshopt_decoder.module.js";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
@@ -15345,6 +15345,106 @@ function useFlooringRotation(enabled, isPointerOnSurface, roomId) {
         setRotation
     ]);
 }
+const MASK_EDGE_START = 0.4;
+const MASK_EDGE_END = 0.7;
+const MASK_DISCARD_ALPHA = 0.001;
+const UPSCALE = 2;
+const BLUR_SIGMA = 3;
+const BLUR_RADIUS = 9;
+const plane_visibility_mask_kernel = new Float32Array(2 * BLUR_RADIUS + 1);
+let kernelSum = 0;
+for(let offset = -BLUR_RADIUS; offset <= BLUR_RADIUS; offset++){
+    const weight = Math.exp(-offset * offset / (2 * BLUR_SIGMA * BLUR_SIGMA));
+    plane_visibility_mask_kernel[offset + BLUR_RADIUS] = weight;
+    kernelSum += weight;
+}
+for(let index = 0; index < plane_visibility_mask_kernel.length; index++)plane_visibility_mask_kernel[index] /= kernelSum;
+function plane_visibility_mask_clamp(value1, max) {
+    return Math.max(0, Math.min(max, value1));
+}
+function createPlaneVisibilityMask(map, planeId) {
+    const width = map.width * UPSCALE;
+    const height = map.height * UPSCALE;
+    const upscaled = new Float32Array(width * height);
+    const horizontal = new Float32Array(width * height);
+    const data = new Uint8Array(width * height);
+    let minX = map.width;
+    let minY = map.height;
+    let maxX = -1;
+    let maxY = -1;
+    for(let y = 0; y < map.height; y++)for(let x = 0; x < map.width; x++)if (map.data[y * map.width + x] === planeId) {
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
+    }
+    const margin = BLUR_RADIUS + UPSCALE;
+    const startX = maxX < 0 ? width : Math.max(0, minX * UPSCALE - margin);
+    const startY = maxY < 0 ? height : Math.max(0, minY * UPSCALE - margin);
+    const endX = maxX < 0 ? -1 : Math.min(width - 1, (maxX + 1) * UPSCALE + margin);
+    const endY = maxY < 0 ? -1 : Math.min(height - 1, (maxY + 1) * UPSCALE + margin);
+    for(let y = startY; y <= endY; y++){
+        const sourceY = (y + 0.5) / UPSCALE - 0.5;
+        const sourceY0 = Math.floor(sourceY);
+        const y0 = plane_visibility_mask_clamp(sourceY0, map.height - 1);
+        const y1 = plane_visibility_mask_clamp(sourceY0 + 1, map.height - 1);
+        const fy = sourceY - sourceY0;
+        for(let x = startX; x <= endX; x++){
+            const sourceX = (x + 0.5) / UPSCALE - 0.5;
+            const sourceX0 = Math.floor(sourceX);
+            const x0 = plane_visibility_mask_clamp(sourceX0, map.width - 1);
+            const x1 = plane_visibility_mask_clamp(sourceX0 + 1, map.width - 1);
+            const fx = sourceX - sourceX0;
+            const top = (map.data[y0 * map.width + x0] === planeId ? 1 - fx : 0) + (map.data[y0 * map.width + x1] === planeId ? fx : 0);
+            const bottom = (map.data[y1 * map.width + x0] === planeId ? 1 - fx : 0) + (map.data[y1 * map.width + x1] === planeId ? fx : 0);
+            upscaled[y * width + x] = top * (1 - fy) + bottom * fy;
+        }
+    }
+    for(let y = startY; y <= endY; y++)for(let x = startX; x <= endX; x++){
+        let value1 = 0;
+        for(let offset = -BLUR_RADIUS; offset <= BLUR_RADIUS; offset++)value1 += upscaled[y * width + plane_visibility_mask_clamp(x + offset, width - 1)] * plane_visibility_mask_kernel[offset + BLUR_RADIUS];
+        horizontal[y * width + x] = value1;
+    }
+    for(let y = startY; y <= endY; y++)for(let x = startX; x <= endX; x++){
+        let value1 = 0;
+        for(let offset = -BLUR_RADIUS; offset <= BLUR_RADIUS; offset++)value1 += horizontal[plane_visibility_mask_clamp(y + offset, height - 1) * width + x] * plane_visibility_mask_kernel[offset + BLUR_RADIUS];
+        data[y * width + x] = Math.round(255 * value1);
+    }
+    const texture = new DataTexture(data, width, height, RedFormat);
+    texture.minFilter = LinearFilter;
+    texture.magFilter = LinearFilter;
+    texture.wrapS = ClampToEdgeWrapping;
+    texture.wrapT = ClampToEdgeWrapping;
+    texture.generateMipmaps = false;
+    texture.unpackAlignment = 1;
+    texture.needsUpdate = true;
+    return {
+        data,
+        width,
+        height,
+        texture
+    };
+}
+function samplePlaneVisibilityMask(mask, u, v) {
+    if (u < 0 || u > 1 || v < 0 || v > 1) return 0;
+    const x = u * mask.width - 0.5;
+    const y = v * mask.height - 0.5;
+    const sourceX0 = Math.floor(x);
+    const sourceY0 = Math.floor(y);
+    const x0 = plane_visibility_mask_clamp(sourceX0, mask.width - 1);
+    const y0 = plane_visibility_mask_clamp(sourceY0, mask.height - 1);
+    const x1 = plane_visibility_mask_clamp(sourceX0 + 1, mask.width - 1);
+    const y1 = plane_visibility_mask_clamp(sourceY0 + 1, mask.height - 1);
+    const fx = x - Math.floor(x);
+    const fy = y - Math.floor(y);
+    const top = mask.data[y0 * mask.width + x0] * (1 - fx) + mask.data[y0 * mask.width + x1] * fx;
+    const bottom = mask.data[y1 * mask.width + x0] * (1 - fx) + mask.data[y1 * mask.width + x1] * fx;
+    return (top * (1 - fy) + bottom * fy) / 255;
+}
+function planeVisibilityAlpha(value1) {
+    const t = plane_visibility_mask_clamp((value1 - MASK_EDGE_START) / (MASK_EDGE_END - MASK_EDGE_START), 1);
+    return t * t * (3 - 2 * t);
+}
 new Set();
 function warnOnce(key, message) {}
 const RESOURCE_BASE_NORMAL = new Vector3(0, 0, 1);
@@ -15483,11 +15583,12 @@ function useRoomScenePlacement({ camera, invalidate, pointer, raycaster, roomId,
     const placementKey = `${roomId}:${[
         ...surfaces
     ].sort().join(',')}`;
-    const activePlaneIdUniform = (0, __rspack_external_react.useMemo)(()=>({
-            value: 0
+    const activeMaskTextureUniform = (0, __rspack_external_react.useMemo)(()=>({
+            value: null
         }), []);
     const [placementState, dispatchPlacementState] = (0, __rspack_external_react.useReducer)(reduceRoomScenePlacementState, placementKey, createInitialRoomScenePlacementState);
     const activePlaneIdRef = (0, __rspack_external_react.useRef)(null);
+    const planeMasksRef = (0, __rspack_external_react.useRef)(new Map());
     const planeMapRef = (0, __rspack_external_react.useRef)(new Map());
     const pointerDragOffsetRef = (0, __rspack_external_react.useRef)(null);
     const isCurrentPlacementKey = placementState.placementKey === placementKey;
@@ -15520,7 +15621,16 @@ function useRoomScenePlacement({ camera, invalidate, pointer, raycaster, roomId,
             placementKey
         });
         decodePlaneIdsDataPng(scene.planeIds.dataPng, scene.planeIds.width, scene.planeIds.height).then((map)=>{
-            if (!isCancelled) dispatchPlacementState({
+            if (isCancelled) return;
+            const masks = new Map();
+            try {
+                for (const plane of scene.planes)if (surfaces.includes(plane.kind) && plane.id > 0) masks.set(plane.id, createPlaneVisibilityMask(map, plane.id));
+            } catch (error) {
+                masks.forEach((mask)=>mask.texture.dispose());
+                throw error;
+            }
+            planeMasksRef.current = masks;
+            dispatchPlacementState({
                 type: 'set-plane-id-map',
                 placementKey,
                 planeIdMap: map
@@ -15534,10 +15644,16 @@ function useRoomScenePlacement({ camera, invalidate, pointer, raycaster, roomId,
         });
         return ()=>{
             isCancelled = true;
+            planeMasksRef.current.forEach((mask)=>mask.texture.dispose());
+            planeMasksRef.current = new Map();
+            activeMaskTextureUniform.value = null;
         };
     }, [
+        activeMaskTextureUniform,
         placementKey,
-        scene.planeIds
+        scene.planeIds,
+        scene.planes,
+        surfaces
     ]);
     (0, __rspack_external_react.useEffect)(()=>{
         dispatchPlacementState({
@@ -15545,17 +15661,17 @@ function useRoomScenePlacement({ camera, invalidate, pointer, raycaster, roomId,
             placementKey
         });
         activePlaneIdRef.current = null;
-        activePlaneIdUniform.value = 0;
+        activeMaskTextureUniform.value = null;
         pointerDragOffsetRef.current = null;
     }, [
-        activePlaneIdUniform,
+        activeMaskTextureUniform,
         placementKey
     ]);
     const updatePoseFromPlane = (0, __rspack_external_react.useCallback)((mesh, point, pointerDragOffset = null)=>{
         const pointerPose = createPoseFromPlane(mesh, point, camera);
         const pose = pointerDragOffset ? applyPointerDragOffset(pointerPose, pointerDragOffset) : pointerPose;
         activePlaneIdRef.current = pose.activePlaneId;
-        activePlaneIdUniform.value = pose.activePlaneId;
+        activeMaskTextureUniform.value = planeMasksRef.current.get(pose.activePlaneId)?.texture ?? null;
         dispatchPlacementState({
             type: 'set-resource-pose',
             placementKey,
@@ -15563,7 +15679,7 @@ function useRoomScenePlacement({ camera, invalidate, pointer, raycaster, roomId,
         });
         invalidate();
     }, [
-        activePlaneIdUniform,
+        activeMaskTextureUniform,
         camera,
         invalidate,
         placementKey
@@ -15594,7 +15710,7 @@ function useRoomScenePlacement({ camera, invalidate, pointer, raycaster, roomId,
         });
         if (!pose) return;
         activePlaneIdRef.current = pose.activePlaneId;
-        activePlaneIdUniform.value = pose.activePlaneId;
+        activeMaskTextureUniform.value = planeMasksRef.current.get(pose.activePlaneId)?.texture ?? null;
         dispatchPlacementState({
             type: 'set-resource-pose',
             placementKey,
@@ -15602,7 +15718,7 @@ function useRoomScenePlacement({ camera, invalidate, pointer, raycaster, roomId,
         });
         invalidate();
     }, [
-        activePlaneIdUniform,
+        activeMaskTextureUniform,
         allowedPlanes,
         camera,
         invalidate,
@@ -15636,19 +15752,14 @@ function useRoomScenePlacement({ camera, invalidate, pointer, raycaster, roomId,
         pointerDragOffsetRef.current = null;
     }, []);
     const isPointVisible = (0, __rspack_external_react.useCallback)((point)=>{
-        if (!planeIdMap) return false;
+        const activePlaneId = activePlaneIdRef.current;
+        const mask = null === activePlaneId ? null : planeMasksRef.current.get(activePlaneId);
+        if (!mask) return false;
         const projected = point.clone().project(camera);
-        const x = Math.floor((projected.x + 1) * 0.5 * planeIdMap.width);
-        const y = Math.floor((1 - projected.y) * 0.5 * planeIdMap.height);
-        for(let dy = -2; dy <= 2; dy++)for(let dx = -2; dx <= 2; dx++){
-            const px = Math.max(0, Math.min(planeIdMap.width - 1, x + dx));
-            const py = Math.max(0, Math.min(planeIdMap.height - 1, y + dy));
-            if (planeIdMap.data[py * planeIdMap.width + px] === activePlaneIdRef.current) return true;
-        }
-        return false;
+        const value1 = samplePlaneVisibilityMask(mask, (projected.x + 1) * 0.5, (1 - projected.y) * 0.5);
+        return planeVisibilityAlpha(value1) > MASK_DISCARD_ALPHA;
     }, [
-        camera,
-        planeIdMap
+        camera
     ]);
     const isPointerOnSurface = (0, __rspack_external_react.useCallback)((point)=>{
         const id = planeIdMap ? findPlaneIdAtPointer(point, planeIdMap) : null;
@@ -15659,7 +15770,7 @@ function useRoomScenePlacement({ camera, invalidate, pointer, raycaster, roomId,
     ]);
     return {
         isPointerOnSurface,
-        activePlaneIdUniform,
+        activeMaskTextureUniform,
         isPointVisible,
         failure,
         handleDrag,
@@ -15816,16 +15927,10 @@ function createRoomLightingTexture(planeIds, shading, neutral = 128) {
 const CACHE_KEY = 'neurodyn-room-scene-v5';
 const GLSL_DEFINE = 'NEURODYN_ROOM_SCENE_PATCH';
 function patchShader(shader, patch, shading) {
-    shader.uniforms.uPlaneIds = {
-        value: patch.planeIdsTexture
-    };
+    shader.uniforms.uMask = patch.activeMaskTextureUniform;
     shader.uniforms.uRoomLighting = {
         value: patch.lightingTexture
     };
-    shader.uniforms.uActiveId = patch.activePlaneIdUniform;
-    shader.uniforms.uPlaneIdsSize = {
-        value: patch.planeIdsSize
-    };
     shader.uniforms.uViewport = {
         value: patch.viewport
     };
@@ -15833,54 +15938,25 @@ function patchShader(shader, patch, shading) {
     const inject = `
     {
       vec2 _neurodynRoomUv = gl_FragCoord.xy / uViewport;
-      float _neurodynRoomCoverage = neurodynRoomScenePlaneCoverage(_neurodynRoomUv);
+      float _neurodynRoomMask = texture2D(uMask, vec2(_neurodynRoomUv.x, 1.0 - _neurodynRoomUv.y)).r;
+      float _neurodynRoomCoverage = smoothstep(${MASK_EDGE_START}, ${MASK_EDGE_END}, _neurodynRoomMask);
 
-      if (_neurodynRoomCoverage <= 0.001) discard;
+      if (_neurodynRoomCoverage <= ${MASK_DISCARD_ALPHA}) discard;
 
       ${shading ? `
         float _neurodynRoomGain = min(texture2D(uRoomLighting, vec2(_neurodynRoomUv.x, 1.0 - _neurodynRoomUv.y)).r * (255.0 / 128.0), ${patch.maxRoomGain.toFixed(3)});
         outgoingLight = (outgoingLight - ${emissive}) * _neurodynRoomGain + ${emissive};
       ` : ''}
-      diffuseColor.a *= smoothstep(0.0, 0.6, _neurodynRoomCoverage);
+      diffuseColor.a *= _neurodynRoomCoverage;
     }
   `;
     const fragmentWithUniforms = shader.fragmentShader.replace('#include <common>', `
         #include <common>
         #ifndef ${GLSL_DEFINE}
         #define ${GLSL_DEFINE}
-        uniform sampler2D uPlaneIds;
+        uniform sampler2D uMask;
         uniform sampler2D uRoomLighting;
-        uniform float uActiveId;
-        uniform vec2 uPlaneIdsSize;
         uniform vec2 uViewport;
-
-        float neurodynRoomScenePlaneMatch(vec2 uv) {
-          float id = floor(texture2D(uPlaneIds, uv).r * 255.0 + 0.5);
-          return 1.0 - step(0.5, abs(id - uActiveId));
-        }
-
-        // uPlaneIds is a low-res nearest-filtered id map, so its edges are blocky.
-        // A single-texel tent filter isn't wide enough to hide that — it just
-        // softens each block's corner, which reads as a staircase. Supersample
-        // a wider neighbourhood (5x5 taps, 2-texel radius) with Gaussian-like
-        // falloff so the boundary is both denser-sampled and properly blurred.
-        float neurodynRoomScenePlaneCoverage(vec2 uv) {
-          vec2 texel = 1.0 / uPlaneIdsSize;
-          float coverage = 0.0;
-          float totalWeight = 0.0;
-
-          for (int y = -2; y <= 2; y++) {
-            for (int x = -2; x <= 2; x++) {
-              vec2 offset = vec2(float(x), float(y));
-              float weight = 1.0 / (1.0 + dot(offset, offset));
-
-              coverage += neurodynRoomScenePlaneMatch(uv + offset * texel) * weight;
-              totalWeight += weight;
-            }
-          }
-
-          return coverage / totalWeight;
-        }
         #endif
       `);
     if (fragmentWithUniforms.includes('#include <output_fragment>')) {
@@ -17151,10 +17227,6 @@ function Room() {
     });
     useFlooringRotation('rotate-on-floor' === resolveResourceProfile(type).manipulation, scenePlacement.isPointerOnSurface, room.id);
     const viewport = (0, __rspack_external_react.useMemo)(()=>new Vector2(1, 1), []);
-    const planeIdsSize = (0, __rspack_external_react.useMemo)(()=>new Vector2(scene.planeIds.width, scene.planeIds.height), [
-        scene.planeIds.height,
-        scene.planeIds.width
-    ]);
     const lightingTexture = (0, __rspack_external_react.useMemo)(()=>createRoomLightingTexture(planeIdsTexture, shadingTexture, scene.shading?.neutral), [
         planeIdsTexture,
         shadingTexture,
@@ -17164,16 +17236,12 @@ function Room() {
         lightingTexture
     ]);
     const materialPatch = (0, __rspack_external_react.useMemo)(()=>({
-            planeIdsTexture,
             lightingTexture,
-            planeIdsSize,
             viewport,
-            activePlaneIdUniform: scenePlacement.activePlaneIdUniform,
+            activeMaskTextureUniform: scenePlacement.activeMaskTextureUniform,
             maxRoomGain: MAX_ROOM_GAIN
         }), [
-        scenePlacement.activePlaneIdUniform,
-        planeIdsSize,
-        planeIdsTexture,
+        scenePlacement.activeMaskTextureUniform,
         lightingTexture,
         viewport
     ]);
@@ -17189,16 +17257,6 @@ function Room() {
         invalidate,
         scene.camera.fovYDeg
     ]);
-    (0, __rspack_external_react.useLayoutEffect)(()=>{
-        planeIdsTexture.minFilter = NearestFilter;
-        planeIdsTexture.magFilter = NearestFilter;
-        planeIdsTexture.wrapS = ClampToEdgeWrapping;
-        planeIdsTexture.wrapT = ClampToEdgeWrapping;
-        planeIdsTexture.generateMipmaps = false;
-        planeIdsTexture.needsUpdate = true;
-    }, [
-        planeIdsTexture
-    ]);
     (0, __rspack_external_react.useLayoutEffect)(()=>{
         gl.getDrawingBufferSize(viewport);
         viewport.set(Math.max(1, viewport.x), Math.max(1, viewport.y));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@neurodyn/react-room-viewer",
   "type": "module",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "publishConfig": {
     "access": "public"
   },