@neurodyn/react-room-viewer 0.0.22 → 0.0.24

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";
@@ -5409,6 +5409,10 @@ var __webpack_modules__ = {
     color: var(--v-text-dark);
   }
 
+  .data-\\[variant\\=destructive\\]\\:\\[\\&_svg\\:not\\(\\[class\\*\\=text-\\]\\)\\]\\:text-inherit[data-variant="destructive"] svg:not([class*="text-"]) {
+    color: inherit;
+  }
+
   .\\[\\&_tr\\]\\:border-b tr {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -7795,7 +7799,7 @@ const RESOURCE_TYPE_PROFILES = {
         chrome: 'immersive-room',
         presentation: 'immersive-panels',
         manipulation: 'panel-group',
-        catalogLabel: 'product-name',
+        productNameSource: 'collection',
         catalogTitle: 'wall-panel',
         introduction: 'focus-resource',
         identity: 'modelled-resource',
@@ -7815,7 +7819,7 @@ const RESOURCE_TYPE_PROFILES = {
         chrome: 'framed-scene',
         presentation: 'framed-default',
         manipulation: 'single-resource',
-        catalogLabel: 'material-name',
+        productNameSource: 'material',
         catalogTitle: 'title',
         introduction: null,
         identity: 'textured-resource',
@@ -7832,7 +7836,7 @@ const RESOURCE_TYPE_PROFILES = {
         chrome: 'immersive-room',
         presentation: 'immersive-default',
         manipulation: 'drag-with-rotation-handle',
-        catalogLabel: 'material-name',
+        productNameSource: 'collection',
         catalogTitle: 'rugs',
         introduction: null,
         identity: 'modelled-resource',
@@ -7849,7 +7853,7 @@ const RESOURCE_TYPE_PROFILES = {
         chrome: 'immersive-room',
         presentation: 'immersive-default',
         manipulation: 'rotate-on-floor',
-        catalogLabel: 'material-name',
+        productNameSource: 'collection',
         catalogTitle: 'flooring',
         introduction: null,
         identity: 'modelled-resource',
@@ -8807,13 +8811,7 @@ function getListingKey(object) {
     return object.kit?.uuid ?? object.uuid ?? object.tinuuid ?? '';
 }
 function getSizedDesignKey(object) {
-    const meta = decodeRugSizeMeta(object.description);
-    const name = object.name?.trim();
-    const sizeSuffix = meta ? ` — ${meta.size}` : null;
-    if (name && sizeSuffix && name.endsWith(sizeSuffix)) {
-        const designName = name.slice(0, -sizeSuffix.length).trim();
-        if (designName) return `rug-name:${designName}`;
-    }
+    if (object.kit?.uuid) return object.kit.uuid;
     return `object:${getListingKey(object)}`;
 }
 const PRODUCT_COMPOSITION_ANSWERS = {
@@ -8835,16 +8833,13 @@ const PRODUCT_COMPOSITION_ANSWERS = {
 };
 const MATERIAL_ROLE_ANSWERS = {
     'product-identity': {
-        catalogsEveryMaterial: true,
-        namesProduct: true
+        catalogsEveryMaterial: true
     },
     finish: {
-        catalogsEveryMaterial: false,
-        namesProduct: false
+        catalogsEveryMaterial: false
     },
     placeholder: {
-        catalogsEveryMaterial: false,
-        namesProduct: false
+        catalogsEveryMaterial: false
     }
 };
 function resolveProductCompositionAnswers(type) {
@@ -8869,8 +8864,7 @@ function resolveResourceIdentityAnswers(type) {
     return RESOURCE_IDENTITY_ANSWERS[resolveResourceProfile(type).identity];
 }
 function getResourceProductName(type, object, material, fallback = '') {
-    const { namesProduct } = resolveMaterialRoleAnswers(type);
-    return namesProduct ? material?.name ?? object?.name ?? object?.kit?.name ?? fallback : object?.kit?.name ?? object?.name ?? material?.name ?? fallback;
+    return 'material' === resolveResourceProfile(type).productNameSource ? material?.name ?? object?.name ?? object?.kit?.name ?? fallback : object?.kit?.name?.trim() || object?.name?.trim() || material?.name?.trim() || fallback;
 }
 function getMaterialId(material) {
     return material.hid ?? '';
@@ -8982,13 +8976,14 @@ function useRoomViewerMaterialCatalog({ includeEmbeddedObject = false } = {}) {
     const { requiresMaterialModel } = resolveResourceIdentityAnswers(type);
     const { getCollapseKey } = resolveProductCompositionAnswers(type);
     const { catalogsEveryMaterial } = resolveMaterialRoleAnswers(type);
-    const { catalogLabel, composition } = resolveResourceProfile(type);
+    const { composition, productNameSource } = resolveResourceProfile(type);
     const fetchedObjects = (0, __rspack_external_react.useMemo)(()=>data?.pages.flatMap((page)=>page.objs ?? []) ?? [], [
         data
     ]);
-    const unresolvedObjects = (0, __rspack_external_react.useMemo)(()=>'color-design' === composition ? fetchedObjects.filter((object)=>object.tinuuid && !object.kit?.uuid && object.materials?.[0]?.native?.glbUrl) : [], [
-        composition,
-        fetchedObjects
+    const unresolvedObjects = (0, __rspack_external_react.useMemo)(()=>'material' === productNameSource ? [] : fetchedObjects.filter((object)=>object.tinuuid && (!object.kit?.uuid || !object.kit.name?.trim()) && (!requiresMaterialModel || object.materials?.[0]?.native?.glbUrl)), [
+        fetchedObjects,
+        productNameSource,
+        requiresMaterialModel
     ]);
     const collectionQueries = useQueries({
         queries: unresolvedObjects.map((object)=>({
@@ -9015,7 +9010,10 @@ function useRoomViewerMaterialCatalog({ includeEmbeddedObject = false } = {}) {
         return [
             {
                 ...object,
-                kit: query?.data?.kit ?? object.kit
+                kit: query?.data?.kit ? {
+                    ...object.kit,
+                    ...query.data.kit
+                } : object.kit
             }
         ];
     });
@@ -9043,17 +9041,16 @@ function useRoomViewerMaterialCatalog({ includeEmbeddedObject = false } = {}) {
             return catalogMaterials?.map((material)=>{
                 const materialId = getMaterialId(material);
                 if (!materialId || !object.tinuuid) return null;
+                const productName = getResourceProductName(type, object, material, name);
                 return {
                     materialId,
-                    name: ('material-name' === catalogLabel ? material.name : object.kit?.name ?? object.name) ?? material.name ?? '',
-                    productName: getResourceProductName(type, object, material, name),
+                    productName,
                     material,
                     tinuuid: object.tinuuid
                 };
             }).filter((item)=>null !== item) ?? [];
         }), [
         catalogsEveryMaterial,
-        catalogLabel,
         composition,
         objects,
         type,
@@ -14676,7 +14673,7 @@ function dropdown_menu_DropdownMenuItem({ className, inset, variant = 'default',
         "data-slot": "dropdown-menu-item",
         "data-inset": inset,
         "data-variant": variant,
-        className: utils_cn('relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden hover:bg-background-base focus:bg-background-base data-[highlighted]:bg-background-base data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:hover:bg-destructive/10 data-[highlighted][data-variant=destructive]:bg-destructive/10 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*=text-])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0', inset && 'pl-8', className),
+        className: utils_cn('relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden hover:bg-background-base focus:bg-background-base data-[highlighted]:bg-background-base data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:hover:bg-destructive/10 data-[highlighted][data-variant=destructive]:bg-destructive/10 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*=text-])]:text-muted-foreground data-[variant=destructive]:[&_svg:not([class*=text-])]:text-inherit [&_svg]:pointer-events-none [&_svg]:shrink-0', inset && 'pl-8', className),
         ...props
     });
 }
@@ -15345,6 +15342,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 +15580,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 +15618,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 +15641,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 +15658,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 +15676,7 @@ function useRoomScenePlacement({ camera, invalidate, pointer, raycaster, roomId,
         });
         invalidate();
     }, [
-        activePlaneIdUniform,
+        activeMaskTextureUniform,
         camera,
         invalidate,
         placementKey
@@ -15594,7 +15707,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 +15715,7 @@ function useRoomScenePlacement({ camera, invalidate, pointer, raycaster, roomId,
         });
         invalidate();
     }, [
-        activePlaneIdUniform,
+        activeMaskTextureUniform,
         allowedPlanes,
         camera,
         invalidate,
@@ -15636,19 +15749,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 +15767,7 @@ function useRoomScenePlacement({ camera, invalidate, pointer, raycaster, roomId,
     ]);
     return {
         isPointerOnSurface,
-        activePlaneIdUniform,
+        activeMaskTextureUniform,
         isPointVisible,
         failure,
         handleDrag,
@@ -15816,16 +15924,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 +15935,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 +17224,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 +17233,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 +17254,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.24",
   "publishConfig": {
     "access": "public"
   },