Viewer render modes: Solid/Rendered + textures + surface-role clay + scene themes + edges (#332)
* viewer: add Phase 1 render-modes foundation (shading/textures/colorPreset state, defaultRender prop, SSGI gating) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: Phase 2 render-modes material-class switch (Lambert in solid, Standard in rendered) Shading-aware material factories (cached per class), reactive selection in renderers via the useViewer(shading) pattern, and dirty-rebuild on toggle for geometry/door systems. Rendered mode output unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: Phase 3a render-modes surface roles + clay palette foundation Adds surfaceRole token to core NodeDefinition, per-kind default roles, ColorPreset palettes + resolveSurfaceColor/createSurfaceRoleMaterial (glazing stays translucent), and the textures-off recolor path for def.geometry kinds (slab/fence/shelf via GeometrySystem.applyDefaultSurfaceRole) + wall. Renderer- based kinds (roof/window/stair/item/column/door/ceiling/elevator) wired in 3b. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: Phase 3b render-modes textures-off recoloring for renderer/system kinds Wires clay role coloring (textures=off) for roof/roof-segment, window, stair/ stair-segment, door, item, column, ceiling, elevator via createSurfaceRoleMaterial, reactive on textures/colorPreset. Per-surface roles: roof top+edge=roof / underside=ceiling; window frame=joinery / glass=glazing; stair+door+elevator= joinery; ceiling=ceiling; column=wall; item=furnishing. textures=on unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * editor: Phase 4a render-modes UI — Solid/Rendered toggle + per-context persistence Per-context shading via renderContext discriminator + shadingByContext (persisted); <Viewer> renderContext prop seeds per-context on mount. Solid/Rendered toggle in the editor action bar + standalone toolbar + command palette. Editor mounts default to renderContext=editor / shading=solid. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: fix window-system glassMaterial type to allow clay glazing reassignment The let was inferred as MeshLambertNodeMaterial from the imported glass constant, so reassigning createSurfaceRoleMaterial('glazing') (returns THREE.Material) failed under tsc --build. Widen the annotation to THREE.Material. Surfaced by the build (check-types had replayed a stale turbo cache). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: Phase 5 lighting — add theme-driven hemisphere light, trim fill directionals 3->2 Adds a sky/ground hemisphere fill (theme-lerped) and drops the second fill directional; the hemisphere covers the shadow-side fill it provided, at one fewer per-fragment directional term (shared by Solid + Rendered). Ambient lowered since the hemisphere now carries soft fill. Intensities are a starting point — tune visually on the gpu-perf overlay. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: tune Solid lighting for more form — stronger hemisphere sky/ground contrast, lower ambient Darker hemisphere ground (#d8d6cf -> #aaa49a) + higher hemisphere intensity and lower ambient so directional shading reads as form and undersides ground without AO. Keeps Solid free of any post-processing pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * chore: biome format render-mode files (lefthook pre-commit) Formatting-only — import wrapping, dep-array wrapping, single-line ternaries — across Phase 2-4a files that weren't biome-clean. No logic changes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: scene-theme system — named environment themes (studio/paper/sunset/night/...) New SceneTheme registry (lib/scene-themes.ts) drives lights, background, and tone mapping; lights.tsx refactored data-driven (N directionals + hemisphere + ambient). sceneTheme state (persisted) + cycle-button picker in editor bar + standalone toolbar, importing the registry from the viewer barrel (single source). Default 'studio' reproduces the prior look exactly; app light/dark 'theme' untouched. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * editor: Phase 7 — popover-dropdown pickers for render mode + scene theme (editor bar) Replace the shading + scene-theme cycle buttons in viewer-overlay.tsx with DropdownMenu pickers: render mode shows 2 rows (Solid/Rendered) with one-line detail; scene theme lists all themes with a derived color-swatch strip + active check. Imports the registry from the viewer barrel (single source). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * editor: Phase 7 — dropdown pickers in standalone toolbar + export DropdownMenu from barrel Replicate the render-mode + scene-theme dropdown pickers (with swatch strip + active check) to apps/editor's compact toolbar, matching viewer-overlay.tsx. Export DropdownMenu* from the @pascal-app/editor barrel for the standalone app. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer+editor: Phase 8 — crisp geometry edge overlay (off/soft/strong/sketchy) EdgeOverlaySystem draws EdgesGeometry LineSegments over node-backed building meshes (scoped via sceneRegistry, skips zone-layer/hitbox/overlay meshes), rebuilt on geometry-uuid or mode change, line color follows scene-theme background luminance; sketchy = static TSL vertex jitter. New 'edges' state (persisted, default off) + Edges dropdown in editor bar + standalone toolbar. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer+editor: edge overlay — thick lines via Line2, drop sketchy mode Switch EdgeOverlaySystem from LineBasicNodeMaterial (1px hardware cap) to LineSegments2 + Line2NodeMaterial so edges have real screen-space width (soft 1.5px / strong 3px); resolution tracks viewport. EdgeMode is now off/soft/strong (sketchy removed). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: fix edge overlay crash — webgpu Line2NodeMaterial has no settable resolution material.resolution is undefined under WebGPU (the node material reads the viewport internally); optional-chain the .set() call so it no-ops there instead of throwing. Thickness still applies via linewidth. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: edge overlay — weld vertices to fix CSG spiderweb edges + lighter strong Position-only mergeVertices before EdgesGeometry so coplanar triangles from CSG-cut walls (doors/windows) share vertices and their interior edges are suppressed — only opening outlines + silhouettes remain. Strong linewidth 3 -> 2px (was too heavy). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: edge overlay — crease-only extractor to fix CSG spiderweb Replace EdgesGeometry (which always draws unpaired boundary/T-junction edges) with buildCreaseEdges: weld positions, keep only edges shared by exactly two faces whose dihedral exceeds the threshold, drop everything unpaired. CSG-cut walls/slabs are watertight so real corners + opening outlines survive while the interior triangulation fans (coplanar or T-junction) are removed. Open meshes (bare ground plane, billboard leaves) shed their boundary clutter too. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: crease edges — coarser weld (0.1mm->1mm) to recover CSG/extrude seam edges The cap<->side-wall top edge of ExtrudeGeometry walls drifts past 0.1mm after CSG, so it stayed unpaired and was dropped. Weld at ~1mm to pair it into a real crease while staying far below feature size (wall thickness, openings). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: replace geometry edge overlay with screen-space ink (SketchUp look) Port the prototype's screen-space ink into the post-processing pipeline: depth + normal Sobel reading the scene-pass MRT. Crease term (normalized normals, center-vs-neighbour) + distance-independent depth-step term (raw Laplacian / (1-d)² with a noise gate so flat ground stays clean). Topology-agnostic, so it finally handles CSG-cut walls/openings without the spiderweb or missing-edge problems of EdgesGeometry. Driven by the existing edges off/soft/strong mode; MRT now builds when SSGI OR ink is on; ink colour tracks scene-theme luminance. Removes EdgeOverlaySystem + crease-edges (geometry approach). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: soft/strong ink modes + keep editor overlays out of the ink Two adjustments to the screen-space ink pass: 1. Soft vs strong now visibly differ. The edge masks saturate, so the old `intensity` gain did nothing once a line was detected. Replace it with a sample radius (line thickness) + opacity: soft = 1px / 50%, strong = 2px / 100%. `inkedEdges` takes `radius` + `opacity` instead of `intensity`. 2. Editor overlays (gizmos, move handles, tool previews, grid) no longer get inked. The scene pass that feeds the depth/normal MRT now renders only SCENE_LAYER; overlays render in a dedicated pass on OVERLAY_LAYER and are composited on top after the ink + outlines, so they read as crisp UI and never get inked or AO'd. New OVERLAY_LAYER constant in viewer; editor's EDITOR_LAYER re-exports it so the two stay in lockstep. Also moves WallMoveSideHandles (the wall/fence move arrows) onto EDITOR_LAYER — it was the one overlay still on SCENE_LAYER. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: render the grid in the scene pass so geometry occludes it The depth-gate fix couldn't help the grid: its material is depthWrite:false, so it never wrote overlay-pass depth and the "didn't write depth -> keep on top" term forced it on top — hence the floor grid bleeding through walls and objects. A full-floor plane can only be occluded correctly by living in the same depth context as the scene, so move the grid onto its own GRID_LAYER which the scene pass renders (alongside SCENE_LAYER). It's flat and depth-non-writing, so the screen-space ink still ignores it; gizmos/handles stay on OVERLAY_LAYER. The grid camera layer is enabled in custom-camera-controls and disabled on the thumbnail camera so thumbnails stay grid-free, matching EDITOR_LAYER. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: strong ink — match soft's 1px thickness, differ by darkness only Strong at radius 2 read too thick. Soft's 1px line is the nice one, so use it for both modes and let strong distinguish itself purely by being fully solid (opacity 1) vs soft's lighter 50%. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: shadow frustum follows the view + a shadows on/off setting The directional light's ortho shadow camera only covers ±50 around the light target, which was pinned at the origin — so zones far from origin received no shadows no matter where the camera moved. Recentre each shadow-casting light (position + target together, preserving direction) on the view focus every frame: the orbit-controls target when available, else the camera's ground projection. The shadow area now tracks wherever the user looks. Also add a persisted `shadows` toggle (default on) to the viewer store and a "Shadows" switch in the editor settings panel — the dedicated shadows control the render-modes plan deferred. Lights gate castShadow on it. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * editor: shadows toggle in the standalone toolbar + a touch more shadow strength The shadows switch I added only lived in the cloud settings panel's Visibility section, which is hidden in the local/standalone editor (no projectId). Add a ShadowsToggle button next to the grid toggle in the standalone toolbar so it's reachable there, matching how Show Grid is exposed in both places. Also push shadow strength partway toward the aesthetic prototype (which runs near-black, no blur): bump the bright-key shadow-intensity cap 0.4 -> 0.55 and tighten shadow-radius 2 -> 1.5. Still softer than aesthetic by design. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * nodes: site ground receives shadows (lit material instead of unlit Basic) The site ground fill used MeshBasicMaterial — unlit, so it could never show the directional shadow, and shadows visibly truncated at the slab edge. Swap it for a lit MeshLambertNodeMaterial with receiveShadow on the mesh; the geometry is the site polygon (slab footprints punched out), so shadows now extend across the whole site and stop at its boundary, which is the desired bound. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * themes: per-theme clay palettes + 2x2 swatch in the theme pickers Each scene theme now carries a clayTints map (wall/floor/ceiling/roof/glazing) giving it a per-surface-role palette — e.g. Mediterranean's blue roof + warm walls. The theme pickers (standalone toolbar + community overlay) now render the aesthetic-style 2x2 swatch of those role tints over the theme background instead of the old 3-colour strip. Data + UI only; wiring the tints into the textures-off surface materials is a separate change. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * editor: slimmer theme switcher + cloud-sun icon Shrink the scene-theme toolbar button (w-[8.5rem] -> w-28) so it stops reserving space for "Mediterranean"; the label truncates when it overflows. Swap the palette icon for cloud-sun (atmosphere/lighting, distinct from the app light/dark Sun-Moon toggle) in both the standalone toolbar and the community overlay. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * editor: theme switcher icon -> swatch-book Swap the scene-theme icon from cloud-sun to swatch-book in both the standalone toolbar and the community overlay. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * themes: colour untextured building surfaces by the active scene theme Untextured walls/roof/slab/ceiling now take the active theme's per-role colour (theme.clayTints[role], falling back to the colour preset) in BOTH textures modes. The textures toggle only governs surfaces that actually have an explicit material/preset — those still show their texture when textures are on. This is what makes e.g. Mediterranean read as a blue roof + warm walls instead of the old hardcoded white/grey defaults. - materials.ts: resolveSurfaceColor / createSurfaceRoleMaterial take an optional sceneThemeId (theme tint ?? preset palette); theme folded into the cache key. - wall-materials, roof-materials, slab/geometry, ceiling/renderer: the untextured fallback now resolves to the themed role colour instead of white/grey, in both modes; theme threaded into each builder + material cache key. - wall-cutout: now reads textures/colorPreset/sceneTheme and re-applies wall materials when any change (previously it ignored textures/colorPreset entirely). - geometry-system: threads sceneTheme into the generic surface-role path + rebuild effect. Renderers/preview call sites thread sceneTheme through. Doors/windows/stairs/columns/items still use their existing defaults — a follow-up pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(slab): recessed (negative-elevation) slabs extrude downward again The registry geometry builder created the slab mesh at Y=0 without applying the negative-elevation offset, so recessed slabs rendered above the floor plane (pool geometry is built locally with its floor cap at Y=0 and walls rising to Y=|elevation|, so the mesh must be shifted down by `elevation` to recess). The runtime slab-system already did this; the static builder path didn't. Mirror it: shift mesh.position.y by elevation when negative. Positive elevation unchanged. Unrelated to render modes — bundled into this branch's PR. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(roof): legacy roofs render again — migration wrote invalid wallHeight 0 Legacy roof nodes (old format, no `children`) were migrated with a hardcoded `wallHeight: 0`. With zero wall height the eave height (`wallHeight - autoDrop`) went negative in getRoofSegmentBrushes, producing geometrically invalid brushes; three-bvh-csg then spammed "TriangleClipper: Coplanar clip not handled" every frame and emitted NaN positions, so the merged roof geometry failed computeBoundingSphere and never rendered. - core/use-scene migration: wallHeight 0 -> 0.5 (the RoofSegmentNode schema default), so migrated segments have a valid wall height. - roof-system: clamp eave height to >= 0.01 so an intentional wallHeight 0 can never yield a negative eave, and guard updateMergedRoofGeometry so a CSG result with NaN positions is discarded (keep the last good mesh, warn once per roof) instead of poisoning the buffer + spamming the console. Unrelated to render modes — bundled into this branch's PR. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(column): columns cast and receive shadows Column meshes (box, beam, cylinder, sphere, torus) rendered without castShadow/ receiveShadow, so columns neither dropped a shadow nor caught one — unlike walls, slabs and roofs. Set both on all column shape meshes. Unrelated to render modes — bundled into this branch's PR. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * viewer: default edges to soft Editor defaults are now solid shading / studio theme / soft edges / shadows on. Shading (solid, via EDITOR_DEFAULT_RENDER), theme (studio) and shadows (on) were already the defaults; edges was 'off' — make 'soft' the default. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * themes: fold light/dark into the scene theme (remove the separate toggle) The viewer had two overlapping appearance controls: a light/dark `theme` toggle AND scene themes (which already drive the 3D background + lights). They conflicted — e.g. Night/Twilight are dark themes, but the light/dark toggle was an independent axis still tinting the 2D scene chrome. Unify on the scene theme: add an explicit `appearance: 'light' | 'dark'` to each SceneTheme (twilight/night = dark, the rest = light) and drive everything the old toggle drove off it — canvas backdrop, grid line colours, measurement-label/ cursor/site-edge contrast, the site ground fill, the ground occluder, and the mobile viewer bg. The editor UI chrome is unaffected (always dark via a fixed body class). Removes the `theme`/`setTheme` store state (+ persistence) and every light/dark toggle UI: the standalone toolbar Sun/Moon button, the community overlay theme switch, the command-palette command, and the ifc-converter preview toolbar button. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * themes: per-theme ground colour + add the "Verdant" nature theme - Add a `ground` colour to every SceneTheme and drive the site ground fill + the infinite ground-occluder off it (instead of the binary isDark ? #1f2433 : #fafafa). Dark themes now get a lit mid-tone ground (twilight #4a4566, night #2b3247) so the ground reads as ground rather than going near-black. - Add a new green/nature scene theme "Verdant": soft green sky + lit, with a green roof clay tint and mossy ground. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * wiki: document the surface-colour / theme system The colour-per-node/renderer/system model from the render-modes work was undocumented. Add wiki/architecture/materials-and-themes.md covering surface roles, colour presets, the textures axis, scene themes (appearance / ground / clay tints), and the "untextured surfaces are theme-coloured in both modes" invariant + where each kind wires it. Also fix two pages that the same work made stale: - node-definitions: geometry builders receive (shading, textures, colorPreset, sceneTheme); document the `surfaceRole` token + applyDefaultSurfaceRole. - layers: OVERLAY_LAYER (1, viewer) with EDITOR_LAYER now its alias, the new GRID_LAYER (3, rendered in the scene pass for depth occlusion), and the overlay pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * nodes: wire #330 roof-accessory kinds into the surface-role/theme colours PR #330's new kinds (chimney, dormer, skylight, solar-panel, ridge-vent, box-vent) use custom renderers, so the generic textures-off recolour path never reached them — they fell back to hardcoded colours. Wire each renderer into the render-modes system: read shading/textures/colorPreset/sceneTheme and resolve untextured surfaces via createSurfaceRoleMaterial (and force the role colour when textures are off), matching column/ceiling. Roles: chimney body→wall / cap→roof; dormer wall→wall, roof→roof, glass→glazing, frame→joinery; skylight glass→glazing / frame→joinery; ridge-vent + box-vent→roof; solar-panel frame→roof (the dark product-specific cell face is left as-is). Each definition also gets its dominant `surfaceRole` token. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(roof): legacy-roof migration must use a non-zero wallHeight The render-modes/#330 merge left the legacy roof→roof-segment migration writing `wallHeight: 0`. With #330's pitch model that builds a flat, zero-volume wall CSG brush, which three-bvh-csg can't clip ("Coplanar clip not handled") and yields NaN positions — so the migrated old roof never renders. Use the schema default 0.5 (what new roofs use), giving a valid wall. The eave clamp + merged- geometry NaN guard added earlier stay as defense-in-depth. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(roof): guard slope frame against missing/NaN pitch (no more NaN geometry) getSegmentSlopeFrame used `pitch <= 0` to detect flat/zero-pitch, but an undefined or NaN pitch (a segment from an older migration that set `roofHeight` instead of `pitch`, or stale persisted data) slips past that check and computes Math.tan(NaN) → NaN tanTheta/activeRh → NaN segment geometry → the merged-roof CSG spews "Coplanar clip not handled" and NaN positions, so the roof never renders. Use `!(pitch > 0)` so any non-positive/non-finite pitch resolves to the flat frame. Self-heals bad data regardless of how the segment was produced. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(roof): migration guarantees a positive pitch for every roof-segment Segments saved with neither a valid pitch nor a roofHeight (older/partial saves, e.g. landing home-graph) fell through the legacy roofHeight->pitch branch, leaving pitch undefined. The slope-frame guard then resolved them to a flat frame, so the roof rendered as a slab instead of pitched. Branch 2b now normalises any segment lacking a valid pitch: derive from roofHeight when present, else fall back to the schema default (40deg). The migration result is cast (not zod-parsed), so this is the only place the default lands. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Wassim SAMAD
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
87384cfbab
commit
bb5ce68254
@@ -2,11 +2,11 @@ import { type LevelNode, useScene } from '@pascal-app/core'
|
||||
import { useMemo } from 'react'
|
||||
import * as THREE from 'three'
|
||||
import { unionPolygons } from '../../lib/polygon-union'
|
||||
import { getSceneTheme } from '../../lib/scene-themes'
|
||||
import useViewer from '../../store/use-viewer'
|
||||
|
||||
export const GroundOccluder = () => {
|
||||
const theme = useViewer((state) => state.theme)
|
||||
const bgColor = theme === 'dark' ? '#1f2433' : '#fafafa'
|
||||
const bgColor = useViewer((state) => getSceneTheme(state.sceneTheme).ground)
|
||||
|
||||
const nodes = useScene((state) => state.nodes)
|
||||
|
||||
|
||||
@@ -2,10 +2,12 @@
|
||||
|
||||
import { StairOpeningSystem } from '@pascal-app/core'
|
||||
import { Canvas, extend, type ThreeToJSXElements, useFrame, useThree } from '@react-three/fiber'
|
||||
import { useEffect, useMemo, useRef } from 'react'
|
||||
import { useEffect } from 'react'
|
||||
import * as THREE from 'three/webgpu'
|
||||
import { PERF_OVERLAY_ENABLED, pushGpuSample } from '../../lib/gpu-perf'
|
||||
import useViewer from '../../store/use-viewer'
|
||||
import type { ColorPreset, RenderShading } from '../../lib/materials'
|
||||
import { getSceneTheme } from '../../lib/scene-themes'
|
||||
import useViewer, { type RenderContext } from '../../store/use-viewer'
|
||||
import { FloorElevationSystem } from '../../systems/floor-elevation/floor-elevation-system'
|
||||
import { GeometrySystem } from '../../systems/geometry/geometry-system'
|
||||
import { ErrorBoundary } from '../error-boundary'
|
||||
@@ -19,33 +21,6 @@ import { SceneBvh } from './scene-bvh'
|
||||
import { SelectionManager } from './selection-manager'
|
||||
import { ViewerCamera } from './viewer-camera'
|
||||
|
||||
function AnimatedBackground({ isDark }: { isDark: boolean }) {
|
||||
const targetColor = useMemo(() => new THREE.Color(), [])
|
||||
const initialized = useRef(false)
|
||||
|
||||
useFrame(({ scene }, delta) => {
|
||||
const dt = Math.min(delta, 0.1) * 4
|
||||
const targetHex = isDark ? '#1f2433' : '#ffffff'
|
||||
|
||||
if (!(scene.background && scene.background instanceof THREE.Color)) {
|
||||
scene.background = new THREE.Color(targetHex)
|
||||
initialized.current = true
|
||||
return
|
||||
}
|
||||
|
||||
if (!initialized.current) {
|
||||
scene.background.set(targetHex)
|
||||
initialized.current = true
|
||||
return
|
||||
}
|
||||
|
||||
targetColor.set(targetHex)
|
||||
scene.background.lerp(targetColor, dt)
|
||||
})
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
declare module '@react-three/fiber' {
|
||||
interface ThreeElements extends ThreeToJSXElements<typeof THREE> {}
|
||||
}
|
||||
@@ -130,12 +105,31 @@ function GPUDeviceWatcher() {
|
||||
return null
|
||||
}
|
||||
|
||||
function ToneMappingExposure() {
|
||||
const sceneTheme = useViewer((state) => state.sceneTheme)
|
||||
const gl = useThree((state) => state.gl)
|
||||
const invalidate = useThree((state) => state.invalidate)
|
||||
|
||||
useEffect(() => {
|
||||
gl.toneMappingExposure = getSceneTheme(sceneTheme).toneMappingExposure
|
||||
invalidate()
|
||||
}, [gl, invalidate, sceneTheme])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
interface ViewerProps {
|
||||
children?: React.ReactNode
|
||||
hoverStyles?: HoverStyles
|
||||
selectionManager?: 'default' | 'custom'
|
||||
perf?: boolean
|
||||
useBvh?: boolean
|
||||
renderContext?: RenderContext
|
||||
defaultRender?: {
|
||||
shading?: RenderShading
|
||||
textures?: boolean
|
||||
colorPreset?: ColorPreset
|
||||
}
|
||||
}
|
||||
|
||||
const Viewer: React.FC<ViewerProps> = ({
|
||||
@@ -144,8 +138,42 @@ const Viewer: React.FC<ViewerProps> = ({
|
||||
selectionManager = 'default',
|
||||
perf = false,
|
||||
useBvh = true,
|
||||
renderContext = 'editor',
|
||||
defaultRender,
|
||||
}) => {
|
||||
const theme = useViewer((state) => state.theme)
|
||||
const isDark = useViewer((state) => getSceneTheme(state.sceneTheme).appearance === 'dark')
|
||||
useEffect(() => {
|
||||
const ctx = renderContext
|
||||
useViewer.getState().setRenderContext(ctx)
|
||||
const { shading, shadingByContext, setShading } = useViewer.getState()
|
||||
setShading(shadingByContext[ctx] ?? defaultRender?.shading ?? shading)
|
||||
|
||||
if (!defaultRender || typeof window === 'undefined') return
|
||||
|
||||
let persistedState: Record<string, unknown> = {}
|
||||
const rawPreferences = window.localStorage.getItem('viewer-preferences')
|
||||
if (rawPreferences) {
|
||||
try {
|
||||
const parsed = JSON.parse(rawPreferences)
|
||||
if (
|
||||
parsed &&
|
||||
typeof parsed === 'object' &&
|
||||
parsed.state &&
|
||||
typeof parsed.state === 'object'
|
||||
) {
|
||||
persistedState = parsed.state as Record<string, unknown>
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
if (defaultRender.textures !== undefined && !('textures' in persistedState)) {
|
||||
useViewer.getState().setTextures(defaultRender.textures)
|
||||
}
|
||||
if (defaultRender.colorPreset && !('colorPreset' in persistedState)) {
|
||||
useViewer.getState().setColorPreset(defaultRender.colorPreset)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Coarse-pointer devices (phones/tablets) get a tighter DPR ceiling to keep
|
||||
// fragment-shader cost down — saves another ~30% over 1.5x on high-DPI mobile.
|
||||
// Desktops (fine pointer) keep the original 1.5 cap.
|
||||
@@ -154,7 +182,7 @@ const Viewer: React.FC<ViewerProps> = ({
|
||||
return (
|
||||
<Canvas
|
||||
camera={{ position: [50, 50, 50], fov: 50 }}
|
||||
className={`transition-colors duration-700 ${theme === 'dark' ? 'bg-[#1f2433]' : 'bg-[#fafafa]'}`}
|
||||
className={`transition-colors duration-700 ${isDark ? 'bg-[#1f2433]' : 'bg-[#fafafa]'}`}
|
||||
dpr={[1, maxDpr]}
|
||||
frameloop="never"
|
||||
gl={
|
||||
@@ -166,7 +194,9 @@ const Viewer: React.FC<ViewerProps> = ({
|
||||
try {
|
||||
const renderer = new THREE.WebGPURenderer(props as any)
|
||||
renderer.toneMapping = THREE.ACESFilmicToneMapping
|
||||
renderer.toneMappingExposure = 0.9
|
||||
renderer.toneMappingExposure = getSceneTheme(
|
||||
useViewer.getState().sceneTheme,
|
||||
).toneMappingExposure
|
||||
await renderer.init()
|
||||
return renderer
|
||||
} catch (err) {
|
||||
@@ -191,9 +221,9 @@ const Viewer: React.FC<ViewerProps> = ({
|
||||
}}
|
||||
>
|
||||
<FrameLimiter fps={50} />
|
||||
{/* <AnimatedBackground isDark={theme === 'dark'} /> */}
|
||||
<ViewerCamera />
|
||||
<GPUDeviceWatcher />
|
||||
<ToneMappingExposure />
|
||||
|
||||
<ErrorBoundary fallback={null} scope="viewer-scene">
|
||||
{/* <directionalLight position={[10, 10, 5]} intensity={0.5} castShadow
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
import { useFrame } from '@react-three/fiber'
|
||||
import { useMemo, useRef } from 'react'
|
||||
import type { AmbientLight, DirectionalLight, OrthographicCamera } from 'three/webgpu'
|
||||
import type {
|
||||
AmbientLight,
|
||||
DirectionalLight,
|
||||
HemisphereLight,
|
||||
OrthographicCamera,
|
||||
} from 'three/webgpu'
|
||||
import * as THREE from 'three/webgpu'
|
||||
import { getSceneTheme } from '../../lib/scene-themes'
|
||||
import useViewer from '../../store/use-viewer'
|
||||
|
||||
// Diagnostic toggle: `?disable=shadows` skips the shadow-map render pass
|
||||
@@ -15,136 +21,172 @@ const SHADOWS_DISABLED =
|
||||
.map((s) => s.trim()),
|
||||
).has('shadows')
|
||||
|
||||
export function Lights() {
|
||||
const theme = useViewer((state) => state.theme)
|
||||
const isDark = theme === 'dark'
|
||||
// Shadow darkness for the bright key lights (themes drive most lights past
|
||||
// intensity 1). The aesthetic prototype runs these near-black (≈1.0); this is a
|
||||
// deliberate middle ground — present, but not the heavy contact shadow there.
|
||||
const MAX_SHADOW_INTENSITY = 0.55
|
||||
|
||||
const light1Ref = useRef<DirectionalLight>(null)
|
||||
export function Lights() {
|
||||
const sceneTheme = useViewer((state) => state.sceneTheme)
|
||||
const theme = getSceneTheme(sceneTheme)
|
||||
const shadows = useViewer((state) => state.shadows)
|
||||
|
||||
const lightRefs = useRef<Array<DirectionalLight | null>>([])
|
||||
const shadowCamera = useRef<OrthographicCamera>(null)
|
||||
const shadowCameraSize = 50 // The "area" around the camera to shadow
|
||||
|
||||
const light2Ref = useRef<DirectionalLight>(null)
|
||||
const light3Ref = useRef<DirectionalLight>(null)
|
||||
// Where the shadow frustum is centred each frame. The directional light's
|
||||
// ortho shadow camera only covers ±shadowCameraSize around the light target,
|
||||
// so it has to track the view or anything far from origin gets no shadows.
|
||||
const shadowFocus = useRef(new THREE.Vector3())
|
||||
|
||||
const hemiRef = useRef<HemisphereLight>(null)
|
||||
const ambientRef = useRef<AmbientLight>(null)
|
||||
|
||||
const initialized = useRef(false)
|
||||
const lightTargets = useRef<THREE.Color[]>([])
|
||||
|
||||
const targets = useMemo(
|
||||
() => ({
|
||||
l1Color: new THREE.Color(),
|
||||
l2Color: new THREE.Color(),
|
||||
l3Color: new THREE.Color(),
|
||||
hemiSky: new THREE.Color(),
|
||||
hemiGround: new THREE.Color(),
|
||||
ambColor: new THREE.Color(),
|
||||
}),
|
||||
[],
|
||||
)
|
||||
|
||||
useFrame((_, delta) => {
|
||||
useFrame((state, delta) => {
|
||||
// clamp delta to avoid huge jumps on tab switch
|
||||
const dt = Math.min(delta, 0.1) * 4
|
||||
|
||||
if (!initialized.current) {
|
||||
if (light1Ref.current) {
|
||||
light1Ref.current.intensity = isDark ? 0.8 : 4
|
||||
light1Ref.current.color.set(isDark ? '#e0e5ff' : '#ffffff')
|
||||
// Recentre each shadow-casting light's frustum on what the viewer is looking
|
||||
// at (orbit target if available, else the camera's ground projection), moving
|
||||
// the light and its target together so the light DIRECTION is preserved and
|
||||
// only the shadow camera slides. Without this the frustum stays at the origin
|
||||
// and zones far from it never receive shadows.
|
||||
if (shadows) {
|
||||
const focus = shadowFocus.current
|
||||
const controls = state.controls as { getTarget?: (out: THREE.Vector3) => void } | null
|
||||
if (controls?.getTarget) {
|
||||
controls.getTarget(focus)
|
||||
} else {
|
||||
focus.set(state.camera.position.x, 0, state.camera.position.z)
|
||||
}
|
||||
for (let index = 0; index < theme.lights.length; index++) {
|
||||
const config = theme.lights[index]
|
||||
const light = lightRefs.current[index]
|
||||
if (!(config?.castShadow && light)) continue
|
||||
const [ox, oy, oz] = config.position
|
||||
light.position.set(focus.x + ox, focus.y + oy, focus.z + oz)
|
||||
light.target.position.copy(focus)
|
||||
light.target.updateMatrixWorld()
|
||||
}
|
||||
}
|
||||
|
||||
if (light1Ref.current.shadow) light1Ref.current.shadow.intensity = isDark ? 0.8 : 0.4
|
||||
if (!initialized.current) {
|
||||
for (let index = 0; index < theme.lights.length; index++) {
|
||||
const config = theme.lights[index]
|
||||
const light = lightRefs.current[index]
|
||||
if (!(config && light)) continue
|
||||
light.intensity = config.intensity
|
||||
light.color.set(config.color)
|
||||
|
||||
if (config.castShadow && light.shadow) {
|
||||
light.shadow.intensity = config.intensity <= 1 ? config.intensity : MAX_SHADOW_INTENSITY
|
||||
}
|
||||
}
|
||||
if (light2Ref.current) {
|
||||
light2Ref.current.intensity = isDark ? 0.2 : 0.75
|
||||
light2Ref.current.color.set(isDark ? '#8090ff' : '#ffffff')
|
||||
}
|
||||
if (light3Ref.current) {
|
||||
light3Ref.current.intensity = isDark ? 0.3 : 1
|
||||
light3Ref.current.color.set(isDark ? '#a0b0ff' : '#ffffff')
|
||||
if (hemiRef.current && theme.hemi) {
|
||||
hemiRef.current.intensity = theme.hemi.intensity
|
||||
hemiRef.current.color.set(theme.hemi.sky)
|
||||
hemiRef.current.groundColor.set(theme.hemi.ground)
|
||||
}
|
||||
if (ambientRef.current) {
|
||||
ambientRef.current.intensity = isDark ? 0.15 : 0.5
|
||||
ambientRef.current.color.set(isDark ? '#a0b0ff' : '#ffffff')
|
||||
ambientRef.current.intensity = theme.ambient.intensity
|
||||
ambientRef.current.color.set(theme.ambient.color)
|
||||
}
|
||||
initialized.current = true
|
||||
return
|
||||
}
|
||||
|
||||
if (light1Ref.current) {
|
||||
light1Ref.current.intensity = THREE.MathUtils.lerp(
|
||||
light1Ref.current.intensity,
|
||||
isDark ? 0.8 : 4,
|
||||
dt,
|
||||
)
|
||||
targets.l1Color.set(isDark ? '#e0e5ff' : '#ffffff')
|
||||
light1Ref.current.color.lerp(targets.l1Color, dt)
|
||||
for (let index = 0; index < theme.lights.length; index++) {
|
||||
const config = theme.lights[index]
|
||||
const light = lightRefs.current[index]
|
||||
if (!(config && light)) continue
|
||||
|
||||
if (light1Ref.current.shadow) {
|
||||
if (light1Ref.current.shadow.intensity !== undefined) {
|
||||
light1Ref.current.shadow.intensity = THREE.MathUtils.lerp(
|
||||
light1Ref.current.shadow.intensity,
|
||||
isDark ? 0.8 : 0.4,
|
||||
light.intensity = THREE.MathUtils.lerp(light.intensity, config.intensity, dt)
|
||||
let target = lightTargets.current[index]
|
||||
if (!target) {
|
||||
target = new THREE.Color()
|
||||
lightTargets.current[index] = target
|
||||
}
|
||||
target.set(config.color)
|
||||
light.color.lerp(target, dt)
|
||||
|
||||
if (config.castShadow && light.shadow) {
|
||||
if (light.shadow.intensity !== undefined) {
|
||||
light.shadow.intensity = THREE.MathUtils.lerp(
|
||||
light.shadow.intensity,
|
||||
config.intensity <= 1 ? config.intensity : MAX_SHADOW_INTENSITY,
|
||||
dt,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (light2Ref.current) {
|
||||
light2Ref.current.intensity = THREE.MathUtils.lerp(
|
||||
light2Ref.current.intensity,
|
||||
isDark ? 0.2 : 0.75,
|
||||
if (hemiRef.current && theme.hemi) {
|
||||
hemiRef.current.intensity = THREE.MathUtils.lerp(
|
||||
hemiRef.current.intensity,
|
||||
theme.hemi.intensity,
|
||||
dt,
|
||||
)
|
||||
targets.l2Color.set(isDark ? '#8090ff' : '#ffffff')
|
||||
light2Ref.current.color.lerp(targets.l2Color, dt)
|
||||
}
|
||||
|
||||
if (light3Ref.current) {
|
||||
light3Ref.current.intensity = THREE.MathUtils.lerp(
|
||||
light3Ref.current.intensity,
|
||||
isDark ? 0.3 : 1,
|
||||
dt,
|
||||
)
|
||||
targets.l3Color.set(isDark ? '#a0b0ff' : '#ffffff')
|
||||
light3Ref.current.color.lerp(targets.l3Color, dt)
|
||||
targets.hemiSky.set(theme.hemi.sky)
|
||||
hemiRef.current.color.lerp(targets.hemiSky, dt)
|
||||
targets.hemiGround.set(theme.hemi.ground)
|
||||
hemiRef.current.groundColor.lerp(targets.hemiGround, dt)
|
||||
}
|
||||
|
||||
if (ambientRef.current) {
|
||||
ambientRef.current.intensity = THREE.MathUtils.lerp(
|
||||
ambientRef.current.intensity,
|
||||
isDark ? 0.15 : 0.5,
|
||||
theme.ambient.intensity,
|
||||
dt,
|
||||
)
|
||||
targets.ambColor.set(isDark ? '#a0b0ff' : '#ffffff')
|
||||
targets.ambColor.set(theme.ambient.color)
|
||||
ambientRef.current.color.lerp(targets.ambColor, dt)
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<directionalLight
|
||||
castShadow={!SHADOWS_DISABLED}
|
||||
position={[10, 10, 10]}
|
||||
ref={light1Ref}
|
||||
shadow-bias={-0.002}
|
||||
shadow-mapSize={[1024, 1024]}
|
||||
shadow-normalBias={0.3}
|
||||
shadow-radius={2}
|
||||
>
|
||||
{SHADOWS_DISABLED ? null : (
|
||||
<orthographicCamera
|
||||
attach="shadow-camera"
|
||||
bottom={-shadowCameraSize}
|
||||
far={100}
|
||||
left={-shadowCameraSize}
|
||||
near={1}
|
||||
ref={shadowCamera}
|
||||
right={shadowCameraSize}
|
||||
top={shadowCameraSize}
|
||||
/>
|
||||
)}
|
||||
</directionalLight>
|
||||
{theme.lights.map((light, index) => (
|
||||
<directionalLight
|
||||
castShadow={Boolean(light.castShadow) && !SHADOWS_DISABLED && shadows}
|
||||
key={`${index}-${light.position.join(',')}`}
|
||||
position={light.position}
|
||||
ref={(ref) => {
|
||||
lightRefs.current[index] = ref
|
||||
}}
|
||||
shadow-bias={-0.002}
|
||||
shadow-mapSize={[1024, 1024]}
|
||||
shadow-normalBias={0.3}
|
||||
shadow-radius={1.5}
|
||||
>
|
||||
{light.castShadow && !SHADOWS_DISABLED && shadows ? (
|
||||
<orthographicCamera
|
||||
attach="shadow-camera"
|
||||
bottom={-shadowCameraSize}
|
||||
far={100}
|
||||
left={-shadowCameraSize}
|
||||
near={1}
|
||||
ref={shadowCamera}
|
||||
right={shadowCameraSize}
|
||||
top={shadowCameraSize}
|
||||
/>
|
||||
) : null}
|
||||
</directionalLight>
|
||||
))}
|
||||
|
||||
<directionalLight position={[-10, 10, -10]} ref={light2Ref} />
|
||||
|
||||
<directionalLight position={[-10, 10, 10]} ref={light3Ref} />
|
||||
{theme.hemi ? <hemisphereLight ref={hemiRef} /> : null}
|
||||
|
||||
<ambientLight ref={ambientRef} />
|
||||
</>
|
||||
|
||||
@@ -21,9 +21,12 @@ import {
|
||||
vec4,
|
||||
} from 'three/tsl'
|
||||
import { RenderPipeline, type WebGPURenderer } from 'three/webgpu'
|
||||
import { edgeColorFor } from '../../lib/edge-style'
|
||||
import { PERF_OVERLAY_ENABLED, pushGpuSample } from '../../lib/gpu-perf'
|
||||
import { SCENE_LAYER, ZONE_LAYER } from '../../lib/layers'
|
||||
import { inkedEdges } from '../../lib/ink-edges'
|
||||
import { GRID_LAYER, OVERLAY_LAYER, SCENE_LAYER, ZONE_LAYER } from '../../lib/layers'
|
||||
import { mergedOutline } from '../../lib/merged-outline-node'
|
||||
import { getSceneTheme } from '../../lib/scene-themes'
|
||||
import useViewer from '../../store/use-viewer'
|
||||
|
||||
// SSGI Parameters - adjust these to fine-tune global illumination and ambient occlusion
|
||||
@@ -82,9 +85,6 @@ const PERF_POST_FX_DISABLED =
|
||||
const MAX_PIPELINE_RETRIES = 3
|
||||
const RETRY_DELAY_MS = 500
|
||||
|
||||
const DARK_BG = '#1f2433'
|
||||
const LIGHT_BG = '#ffffff'
|
||||
|
||||
export type HoverStyle = {
|
||||
visibleColor: number
|
||||
hiddenColor: number
|
||||
@@ -135,18 +135,41 @@ const PostProcessingPasses = ({
|
||||
const skippedZeroSizeRef = useRef(false)
|
||||
|
||||
// Background color uniform — updated every frame via lerp, read by the TSL pipeline.
|
||||
// Initialised from the current theme so there's no flash on first render.
|
||||
const initBg = useViewer.getState().theme === 'dark' ? DARK_BG : LIGHT_BG
|
||||
// Initialised from the current scene theme so there's no flash on first render.
|
||||
const initBg = getSceneTheme(useViewer.getState().sceneTheme).background
|
||||
const bgUniform = useRef(uniform(new Color(initBg)))
|
||||
const bgCurrent = useRef(new Color(initBg))
|
||||
const bgTarget = useRef(new Color())
|
||||
|
||||
// Ink-line colour follows the scene-theme background luminance (dark lines on
|
||||
// light scenes, light on dark), refreshed each frame like the background.
|
||||
const inkColorUniform = useRef(uniform(new Color(edgeColorFor(initBg))))
|
||||
|
||||
const zoneLayers = useMemo(() => {
|
||||
const l = new Layers()
|
||||
l.enable(ZONE_LAYER)
|
||||
l.disable(SCENE_LAYER)
|
||||
return l
|
||||
}, [])
|
||||
// Scene pass renders the main geometry layer plus the grid. The default camera
|
||||
// mask also has the overlay layer enabled (custom controls enable it for
|
||||
// picking), so without this the gizmos/handles/tool previews land in the
|
||||
// depth+normal MRT and get inked / AO'd as if they were geometry. The grid is
|
||||
// kept in here (not the overlay pass) so scene geometry depth-occludes it; it's
|
||||
// a flat, depth-non-writing plane so the ink never picks it up.
|
||||
const sceneOnlyLayers = useMemo(() => {
|
||||
const l = new Layers()
|
||||
l.set(SCENE_LAYER)
|
||||
l.enable(GRID_LAYER)
|
||||
return l
|
||||
}, [])
|
||||
// Editor overlays render in their own pass, composited on top after the ink
|
||||
// and outlines so they read as crisp UI rather than scene geometry.
|
||||
const overlayLayers = useMemo(() => {
|
||||
const l = new Layers()
|
||||
l.set(OVERLAY_LAYER)
|
||||
return l
|
||||
}, [])
|
||||
const hoverHighlightMode = useViewer((s) => s.hoverHighlightMode)
|
||||
const hoverVisibleColor = useMemo(() => uniform(new Color(DEFAULT_HOVER_STYLE.visibleColor)), [])
|
||||
const hoverHiddenColor = useMemo(() => uniform(new Color(DEFAULT_HOVER_STYLE.hiddenColor)), [])
|
||||
@@ -155,6 +178,8 @@ const PostProcessingPasses = ({
|
||||
|
||||
// Subscribe to projectId so the pipeline rebuilds on project switch
|
||||
const projectId = useViewer((s) => s.projectId)
|
||||
const shading = useViewer((s) => s.shading)
|
||||
const edges = useViewer((s) => s.edges)
|
||||
const lastProjectIdRef = useRef(projectId)
|
||||
|
||||
// Bump this to force a pipeline rebuild (used by retry logic)
|
||||
@@ -235,9 +260,33 @@ const PostProcessingPasses = ({
|
||||
}
|
||||
|
||||
const perfDisable = readPerfDisableFlags()
|
||||
const ssgiEnabled = SSGI_PARAMS.enabled && !perfDisable.ao
|
||||
const ssgiEnabled = shading === 'rendered' && SSGI_PARAMS.enabled && !perfDisable.ao
|
||||
const denoiseEnabled = ssgiEnabled && !perfDisable.denoise
|
||||
const outlineEnabled = !perfDisable.outline
|
||||
const inkEnabled = edges !== 'off'
|
||||
// The depth+normal MRT feeds both SSGI and the screen-space ink pass.
|
||||
const needsNormalMRT = ssgiEnabled || inkEnabled
|
||||
// Soft = thin (1px sample radius) + faint (50% opacity); strong = thick
|
||||
// (2px, ~2× wider detected band) + solid (100%). The edge masks saturate,
|
||||
// so radius+opacity are what actually separate the two modes — gain wouldn't.
|
||||
// Same 1px line thickness for both (soft's thickness is the nice one);
|
||||
// strong reads heavier purely by being fully solid vs soft's lighter 50%.
|
||||
const inkRadius = 1
|
||||
const inkOpacity = edges === 'strong' ? 1 : 0.5
|
||||
|
||||
console.log('[viewer/post-processing] Building pipeline', {
|
||||
version: pipelineVersion,
|
||||
ssgi: ssgiEnabled,
|
||||
denoise: denoiseEnabled,
|
||||
outline: outlineEnabled,
|
||||
perfDisable,
|
||||
hoverHighlightMode,
|
||||
projectId,
|
||||
shading,
|
||||
rendererCtor: (renderer as any).constructor?.name,
|
||||
width,
|
||||
height,
|
||||
})
|
||||
|
||||
hasPipelineErrorRef.current = false
|
||||
|
||||
@@ -266,8 +315,15 @@ const PostProcessingPasses = ({
|
||||
|
||||
try {
|
||||
const scenePass = pass(scene, camera)
|
||||
scenePass.setLayers(sceneOnlyLayers)
|
||||
const zonePass = pass(scene, camera)
|
||||
zonePass.setLayers(zoneLayers)
|
||||
// Editor overlays (gizmos, move handles, tool previews, grid) on their own
|
||||
// layer, kept out of the depth/normal MRT above so the ink + SSGI ignore
|
||||
// them, then composited on top of the final image below.
|
||||
const overlayPass = pass(scene, camera)
|
||||
overlayPass.setLayers(overlayLayers)
|
||||
const overlayColor = overlayPass.getTextureNode('output')
|
||||
|
||||
const scenePassColor = scenePass.getTextureNode('output')
|
||||
|
||||
@@ -280,8 +336,12 @@ const PostProcessingPasses = ({
|
||||
|
||||
let sceneColor = scenePassColor as unknown as ReturnType<typeof vec4>
|
||||
|
||||
if (ssgiEnabled) {
|
||||
// MRT only needed for SSGI (diffuse for GI, normal for SSGI sampling)
|
||||
// Depth + normal MRT — shared by SSGI (diffuse/normal) and the ink pass
|
||||
// (depth/normal). Built whenever either is active.
|
||||
let scenePassDepth: any = null
|
||||
let scenePassNormal: any = null
|
||||
let sceneNormal: any = null
|
||||
if (needsNormalMRT) {
|
||||
scenePass.setMRT(
|
||||
mrt({
|
||||
output,
|
||||
@@ -289,19 +349,18 @@ const PostProcessingPasses = ({
|
||||
normal: directionToColor(normalView),
|
||||
}),
|
||||
)
|
||||
|
||||
const scenePassDiffuse = scenePass.getTextureNode('diffuseColor')
|
||||
const scenePassDepth = scenePass.getTextureNode('depth')
|
||||
const scenePassNormal = scenePass.getTextureNode('normal')
|
||||
|
||||
// Optimize texture bandwidth
|
||||
const diffuseTexture = scenePass.getTexture('diffuseColor')
|
||||
diffuseTexture.type = UnsignedByteType
|
||||
scenePassDepth = scenePass.getTextureNode('depth')
|
||||
scenePassNormal = scenePass.getTextureNode('normal')
|
||||
const normalTexture = scenePass.getTexture('normal')
|
||||
normalTexture.type = UnsignedByteType
|
||||
// Extract normal from color-encoded texture (SSGI consumes the node form)
|
||||
sceneNormal = sample((uv) => colorToDirection(scenePassNormal.sample(uv)))
|
||||
}
|
||||
|
||||
// Extract normal from color-encoded texture
|
||||
const sceneNormal = sample((uv) => colorToDirection(scenePassNormal.sample(uv)))
|
||||
if (ssgiEnabled) {
|
||||
const scenePassDiffuse = scenePass.getTextureNode('diffuseColor')
|
||||
const diffuseTexture = scenePass.getTexture('diffuseColor')
|
||||
diffuseTexture.type = UnsignedByteType
|
||||
|
||||
const giPass = ssgi(scenePassColor, scenePassDepth, sceneNormal, camera as any)
|
||||
giPass.sliceCount.value = SSGI_PARAMS.sliceCount
|
||||
@@ -341,6 +400,23 @@ const PostProcessingPasses = ({
|
||||
)
|
||||
}
|
||||
|
||||
// Screen-space ink outline (SketchUp look) — depth/normal edge detection
|
||||
// over the composited scene. Topology-agnostic, so it handles CSG-cut
|
||||
// walls cleanly. Applied before the selection outline + background mix.
|
||||
if (inkEnabled) {
|
||||
sceneColor = vec4(
|
||||
inkedEdges({
|
||||
sceneRgb: sceneColor.rgb,
|
||||
depthTex: scenePassDepth,
|
||||
normalTex: scenePassNormal,
|
||||
inkColor: inkColorUniform.current,
|
||||
radius: inkRadius,
|
||||
opacity: inkOpacity,
|
||||
}),
|
||||
sceneColor.a,
|
||||
)
|
||||
}
|
||||
|
||||
// Single merged outline node: one shared depth pass for both selected + hovered groups.
|
||||
const outliner = useViewer.getState().outliner
|
||||
let compositeWithOutlines = sceneColor
|
||||
@@ -377,10 +453,11 @@ const PostProcessingPasses = ({
|
||||
)
|
||||
}
|
||||
|
||||
const finalOutput = vec4(
|
||||
mix(bgUniform.current, compositeWithOutlines.rgb, contentAlpha),
|
||||
float(1),
|
||||
)
|
||||
const composited = mix(bgUniform.current, compositeWithOutlines.rgb, contentAlpha)
|
||||
// Editor overlays painted on top by their own alpha — they never get inked,
|
||||
// AO'd, or outlined, and always read crisp regardless of scene depth.
|
||||
const withOverlay = mix(composited, overlayColor.rgb, overlayColor.a)
|
||||
const finalOutput = vec4(withOverlay, float(1))
|
||||
|
||||
const renderPipeline = new RenderPipeline(renderer as unknown as WebGPURenderer)
|
||||
renderPipeline.outputNode = finalOutput
|
||||
@@ -416,13 +493,17 @@ const PostProcessingPasses = ({
|
||||
hoverPulseMix,
|
||||
hoverStrength,
|
||||
hoverVisibleColor,
|
||||
edges,
|
||||
pipelineVersion,
|
||||
projectId,
|
||||
renderer,
|
||||
scene,
|
||||
shading,
|
||||
size.height,
|
||||
size.width,
|
||||
zoneLayers,
|
||||
sceneOnlyLayers,
|
||||
overlayLayers,
|
||||
])
|
||||
|
||||
useFrame((_, delta) => {
|
||||
@@ -430,10 +511,12 @@ const PostProcessingPasses = ({
|
||||
return
|
||||
}
|
||||
|
||||
// Animate background colour toward the current theme target (same lerp as AnimatedBackground)
|
||||
bgTarget.current.set(useViewer.getState().theme === 'dark' ? DARK_BG : LIGHT_BG)
|
||||
// Animate background colour toward the current scene theme target (same lerp as AnimatedBackground)
|
||||
bgTarget.current.set(getSceneTheme(useViewer.getState().sceneTheme).background)
|
||||
bgCurrent.current.lerp(bgTarget.current, Math.min(delta, 0.1) * 4)
|
||||
bgUniform.current.value.copy(bgCurrent.current)
|
||||
// Ink colour follows the (lerping) background luminance — snaps dark↔light.
|
||||
inkColorUniform.current.value.set(edgeColorFor(`#${bgCurrent.current.getHexString()}`))
|
||||
|
||||
const outliner = useViewer.getState().outliner
|
||||
sanitizeOutlineObjects(outliner.selectedObjects)
|
||||
|
||||
Reference in New Issue
Block a user