From 251f73250bc4f9c18aa4c1a5f5f1f798e8cbbebe Mon Sep 17 00:00:00 2001 From: wass08 Date: Tue, 10 Feb 2026 14:42:29 +0900 Subject: [PATCH] polish ceiling --- .../renderers/ceiling/ceiling-renderer.tsx | 31 +++++++++++++++---- 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/packages/viewer/src/components/renderers/ceiling/ceiling-renderer.tsx b/packages/viewer/src/components/renderers/ceiling/ceiling-renderer.tsx index 27636de2..283497f4 100644 --- a/packages/viewer/src/components/renderers/ceiling/ceiling-renderer.tsx +++ b/packages/viewer/src/components/renderers/ceiling/ceiling-renderer.tsx @@ -1,22 +1,41 @@ import { type CeilingNode, useRegistry } from '@pascal-app/core' import { useRef } from 'react' -import { faceDirection, float, mix } from 'three/tsl' -import { DoubleSide, type Mesh, MeshStandardNodeMaterial } from 'three/webgpu' +import { faceDirection, float, mix, positionWorld, smoothstep } from 'three/tsl' +import { DoubleSide, type Mesh, MeshBasicNodeMaterial } from 'three/webgpu' import { useNodeEvents } from '../../../hooks/use-node-events' import { NodeRenderer } from '../node-renderer' // TSL material that renders differently based on face direction: // - Back face (looking up at ceiling from below): solid // - Front face (looking down at ceiling from above): 30% opacity -const ceilingMaterial = new MeshStandardNodeMaterial({ - color: 0xffffff, +const ceilingMaterial = new MeshBasicNodeMaterial({ + color: 0x999999, side: DoubleSide, transparent: true, + depthWrite: false, }) +// Create grid pattern based on local position +const gridScale = 5 // Grid cells per meter (1 = 1m grid) +const gridX = positionWorld.x.mul(gridScale).fract() +const gridY = positionWorld.z.mul(gridScale).fract() + +// Create grid lines - they are at 0 and 1 +const lineWidth = 0.05 // Width of grid lines (0-1 range within cell) + +// Create visible lines at edges (near 0 and near 1) +const lineX = smoothstep(lineWidth, 0, gridX).add(smoothstep(1.0 - lineWidth, 1.0, gridX)) +const lineY = smoothstep(lineWidth, 0, gridY).add(smoothstep(1.0 - lineWidth, 1.0, gridY)) + +// Combine: if either X or Y is a line, show the line +const gridPattern = lineX.max(lineY) + +// Grid lines at 0.8 opacity, spaces at 0.1 opacity +const gridOpacity = mix(float(0.1), float(0.8), gridPattern) + // faceDirection is 1.0 for front face, -1.0 for back face -// We want: front face (top, looking down) = 0.3 opacity, back face (bottom, looking up) = 1.0 opacity -ceilingMaterial.opacityNode = mix(float(1.0), float(0.3), faceDirection.greaterThan(0.0)) +// Front face (top, looking down): grid pattern, Back face (bottom, looking up): solid +ceilingMaterial.opacityNode = mix(float(1.0), gridOpacity, faceDirection.greaterThan(0.0)) export const CeilingRenderer = ({ node }: { node: CeilingNode }) => { const ref = useRef(null!)