polish ceiling

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<Mesh>(null!)