morgan/editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add material system for all node types

Browse Source 
- Add MaterialSchema with 10 presets (white, brick, concrete, wood, glass, metal, plaster, tile, marble, custom)
- Add material field to Wall, Slab, Door, Window, Ceiling, Roof, RoofSegment nodes
- Create MaterialPicker UI component with preset selection and custom properties
- Update all renderers to support material rendering with caching
- Add Material section to all node panels (WallPanel, SlabPanel, DoorPanel, WindowPanel, CeilingPanel, RoofPanel, RoofSegmentPanel)
- Update AGENTS.md with Material System documentation
This commit is contained in:
Developer
2026-03-30 12:15:16 +08:00
parent 99bb5f3645
commit 12b6292623
29 changed files with 613 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/viewer/src/components/renderers/ceiling/ceiling-renderer.tsx
+32 -36
View File
@@ -1,49 +1,37 @@
import { type CeilingNode, useRegistry } from '@pascal-app/core'
import { useRef } from 'react'
import { useMemo, useRef } from 'react'
import { float, mix, positionWorld, smoothstep } from 'three/tsl'
import { BackSide, FrontSide, type Mesh, MeshBasicNodeMaterial } from 'three/webgpu'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { createMaterial, DEFAULT_CEILING_MATERIAL } from '../../../lib/materials'
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 ceilingTopMaterial = new MeshBasicNodeMaterial({
color: 0xb5_a7_8d,
transparent: true,
depthWrite: false,
side: FrontSide,
// Disabled as we only show ceiling grid when needed
// alphaTestNode: float(0.4), // Discard pixels with alpha below 0.4 to create grid lines and not affect depth buffer
})
const ceilingBottomMaterial = new MeshBasicNodeMaterial({
color: 0x99_99_99,
transparent: true,
side: BackSide,
})
// Create grid pattern based on local position
const gridScale = 5 // Grid cells per meter (1 = 1m grid)
const gridScale = 5
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 lineWidth = 0.05
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.6 opacity, spaces at 0.2 opacity
const gridOpacity = mix(float(0.2), float(0.6), gridPattern)
// faceDirection is 1.0 for front face, -1.0 for back face
// Front face (top, looking down): grid pattern, Back face (bottom, looking up): solid
ceilingTopMaterial.opacityNode = gridOpacity
function createCeilingMaterials(color: string = '#999999') {
const topMaterial = new MeshBasicNodeMaterial({
color,
transparent: true,
depthWrite: false,
side: FrontSide,
})
topMaterial.opacityNode = gridOpacity
const bottomMaterial = new MeshBasicNodeMaterial({
color,
transparent: true,
side: BackSide,
})
return { topMaterial, bottomMaterial }
}
export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
const ref = useRef<Mesh>(null!)
@@ -51,12 +39,20 @@ export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
useRegistry(node.id, 'ceiling', ref)
const handlers = useNodeEvents(node, 'ceiling')
const materials = useMemo(() => {
if (node.material) {
const props = node.material.properties
const color = props?.color || '#999999'
return createCeilingMaterials(color)
}
return { topMaterial: createCeilingMaterials().topMaterial, bottomMaterial: DEFAULT_CEILING_MATERIAL }
}, [node.material])
return (
<mesh material={ceilingBottomMaterial} ref={ref}>
{/* CeilingSystem will replace this geometry in the next frame */}
<mesh material={materials.bottomMaterial} ref={ref}>
<boxGeometry args={[0, 0, 0]} />
<mesh
material={ceilingTopMaterial}
material={materials.topMaterial}
name="ceiling-grid"
{...handlers}
scale={0}
packages/viewer/src/components/renderers/door/door-renderer.tsx
+7 -3
View File
@@ -1,7 +1,8 @@
import { type DoorNode, useRegistry } from '@pascal-app/core'
import { useRef } from 'react'
import { useMemo, useRef } from 'react'
import type { Mesh } from 'three'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { createMaterial, DEFAULT_DOOR_MATERIAL } from '../../../lib/materials'
export const DoorRenderer = ({ node }: { node: DoorNode }) => {
const ref = useRef<Mesh>(null!)
@@ -10,9 +11,14 @@ export const DoorRenderer = ({ node }: { node: DoorNode }) => {
const handlers = useNodeEvents(node, 'door')
const isTransient = !!(node.metadata as Record<string, unknown> | null)?.isTransient
const material = useMemo(() => {
return node.material ? createMaterial(node.material) : DEFAULT_DOOR_MATERIAL
}, [node.material])
return (
<mesh
castShadow
material={material}
position={node.position}
receiveShadow
ref={ref}
@@ -20,9 +26,7 @@ export const DoorRenderer = ({ node }: { node: DoorNode }) => {
visible={node.visible}
{...(isTransient ? {} : handlers)}
>
{/* DoorSystem replaces this geometry each time the node is dirty */}
<boxGeometry args={[0, 0, 0]} />
<meshStandardMaterial color="#d1d5db" />
</mesh>
)
}
packages/viewer/src/components/renderers/roof/roof-renderer.tsx
+9 -2
View File
@@ -1,7 +1,8 @@
import { type RoofNode, useRegistry } from '@pascal-app/core'
import { useRef } from 'react'
import { useMemo, useRef } from 'react'
import type * as THREE from 'three'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { createMaterial, DEFAULT_ROOF_MATERIAL } from '../../../lib/materials'
import useViewer from '../../../store/use-viewer'
import { NodeRenderer } from '../node-renderer'
import { roofDebugMaterials, roofMaterials } from './roof-materials'
@@ -14,6 +15,12 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
const handlers = useNodeEvents(node, 'roof')
const debugColors = useViewer((s) => s.debugColors)
const customMaterial = useMemo(() => {
return node.material ? createMaterial(node.material) : null
}, [node.material])
const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials
return (
<group
position={node.position}
@@ -24,7 +31,7 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
>
<mesh
castShadow
material={debugColors ? roofDebugMaterials : roofMaterials}
material={material}
name="merged-roof"
receiveShadow
>
packages/viewer/src/components/renderers/slab/slab-renderer.tsx
+7 -4
View File
@@ -1,7 +1,8 @@
import { type SlabNode, useRegistry } from '@pascal-app/core'
import { useRef } from 'react'
import { useMemo, useRef } from 'react'
import type { Mesh } from 'three'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { createMaterial, DEFAULT_SLAB_MATERIAL } from '../../../lib/materials'
export const SlabRenderer = ({ node }: { node: SlabNode }) => {
const ref = useRef<Mesh>(null!)
@@ -10,11 +11,13 @@ export const SlabRenderer = ({ node }: { node: SlabNode }) => {
const handlers = useNodeEvents(node, 'slab')
const material = useMemo(() => {
return node.material ? createMaterial(node.material) : DEFAULT_SLAB_MATERIAL
}, [node.material])
return (
<mesh castShadow receiveShadow ref={ref} {...handlers} visible={node.visible}>
{/* SlabSystem will replace this geometry in the next frame */}
<mesh castShadow receiveShadow ref={ref} {...handlers} visible={node.visible} material={material}>
<boxGeometry args={[0, 0, 0]} />
<meshStandardMaterial color="#e5e5e5" />
</mesh>
)
}
packages/viewer/src/components/renderers/wall/wall-renderer.tsx
+7 -5
View File
@@ -1,7 +1,8 @@
import { useRegistry, useScene, type WallNode } from '@pascal-app/core'
import { useLayoutEffect, useRef } from 'react'
import { useLayoutEffect, useMemo, useRef } from 'react'
import type { Mesh } from 'three'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { createMaterial, DEFAULT_WALL_MATERIAL } from '../../../lib/materials'
import { NodeRenderer } from '../node-renderer'
export const WallRenderer = ({ node }: { node: WallNode }) => {
@@ -9,18 +10,19 @@ export const WallRenderer = ({ node }: { node: WallNode }) => {
useRegistry(node.id, 'wall', ref)
// Mark dirty on mount so WallSystem rebuilds geometry when wall (re)appears
useLayoutEffect(() => {
useScene.getState().markDirty(node.id)
}, [node.id])
const handlers = useNodeEvents(node, 'wall')
const material = useMemo(() => {
return node.material ? createMaterial(node.material) : DEFAULT_WALL_MATERIAL
}, [node.material])
return (
<mesh castShadow receiveShadow ref={ref} visible={node.visible}>
{/* WallSystem will replace this geometry in the next frame */}
<mesh castShadow receiveShadow ref={ref} visible={node.visible} material={material}>
<boxGeometry args={[0, 0, 0]} />
{/* Collision mesh: full-wall geometry (no cutouts) for pointer events */}
<mesh name="collision-mesh" visible={false} {...handlers}>
<boxGeometry args={[0, 0, 0]} />
</mesh>
packages/viewer/src/components/renderers/window/window-renderer.tsx
+7 -3
View File
@@ -1,7 +1,8 @@
import { useRegistry, type WindowNode } from '@pascal-app/core'
import { useRef } from 'react'
import { useMemo, useRef } from 'react'
import type { Mesh } from 'three'
import { useNodeEvents } from '../../../hooks/use-node-events'
import { createMaterial, DEFAULT_WINDOW_MATERIAL } from '../../../lib/materials'
export const WindowRenderer = ({ node }: { node: WindowNode }) => {
const ref = useRef<Mesh>(null!)
@@ -10,9 +11,14 @@ export const WindowRenderer = ({ node }: { node: WindowNode }) => {
const handlers = useNodeEvents(node, 'window')
const isTransient = !!(node.metadata as Record<string, unknown> | null)?.isTransient
const material = useMemo(() => {
return node.material ? createMaterial(node.material) : DEFAULT_WINDOW_MATERIAL
}, [node.material])
return (
<mesh
castShadow
material={material}
position={node.position}
receiveShadow
ref={ref}
@@ -20,9 +26,7 @@ export const WindowRenderer = ({ node }: { node: WindowNode }) => {
visible={node.visible}
{...(isTransient ? {} : handlers)}
>
{/* WindowSystem replaces this geometry each time the node is dirty */}
<boxGeometry args={[0, 0, 0]} />
<meshStandardMaterial color="#d1d5db" />
</mesh>
)
}
packages/viewer/src/index.ts
+12
View File
@@ -1,6 +1,18 @@
export { default as Viewer } from './components/viewer'
export { ASSETS_CDN_URL, resolveAssetUrl, resolveCdnUrl } from './lib/asset-url'
export { SCENE_LAYER, ZONE_LAYER } from './lib/layers'
export {
clearMaterialCache,
createDefaultMaterial,
createMaterial,
DEFAULT_CEILING_MATERIAL,
DEFAULT_DOOR_MATERIAL,
DEFAULT_ROOF_MATERIAL,
DEFAULT_SLAB_MATERIAL,
DEFAULT_WALL_MATERIAL,
DEFAULT_WINDOW_MATERIAL,
disposeMaterial,
} from './lib/materials'
export { default as useViewer } from './store/use-viewer'
export { InteractiveSystem } from './systems/interactive/interactive-system'
export { snapLevelsToTruePositions } from './systems/level/level-utils'
packages/viewer/src/lib/materials.ts
+69
View File
@@ -0,0 +1,69 @@
import { type MaterialProperties, type MaterialSchema, resolveMaterial } from '@pascal-app/core'
import * as THREE from 'three'
const sideMap: Record<MaterialProperties['side'], THREE.Side> = {
front: THREE.FrontSide,
back: THREE.BackSide,
double: THREE.DoubleSide,
}
const materialCache = new Map<string, THREE.MeshStandardMaterial>()
function getCacheKey(props: MaterialProperties): string {
return `${props.color}-${props.roughness}-${props.metalness}-${props.opacity}-${props.transparent}-${props.side}`
}
export function createMaterial(material?: MaterialSchema): THREE.MeshStandardMaterial {
const props = resolveMaterial(material)
const cacheKey = getCacheKey(props)
if (materialCache.has(cacheKey)) {
return materialCache.get(cacheKey)!
}
const threeMaterial = new THREE.MeshStandardMaterial({
color: props.color,
roughness: props.roughness,
metalness: props.metalness,
opacity: props.opacity,
transparent: props.transparent,
side: sideMap[props.side],
})
materialCache.set(cacheKey, threeMaterial)
return threeMaterial
}
export function createDefaultMaterial(color: string = '#ffffff', roughness: number = 0.9): THREE.MeshStandardMaterial {
return new THREE.MeshStandardMaterial({
color,
roughness,
metalness: 0,
side: THREE.FrontSide,
})
}
export const DEFAULT_WALL_MATERIAL = createDefaultMaterial('#ffffff', 0.9)
export const DEFAULT_SLAB_MATERIAL = createDefaultMaterial('#e5e5e5', 0.8)
export const DEFAULT_DOOR_MATERIAL = createDefaultMaterial('#8b4513', 0.7)
export const DEFAULT_WINDOW_MATERIAL = new THREE.MeshStandardMaterial({
color: '#87ceeb',
roughness: 0.1,
metalness: 0.1,
opacity: 0.3,
transparent: true,
side: THREE.DoubleSide,
})
export const DEFAULT_CEILING_MATERIAL = createDefaultMaterial('#f5f5dc', 0.95)
export const DEFAULT_ROOF_MATERIAL = createDefaultMaterial('#808080', 0.85)
export function disposeMaterial(material: THREE.Material): void {
material.dispose()
}
export function clearMaterialCache(): void {
for (const material of materialCache.values()) {
material.dispose()
}
materialCache.clear()
}