Files

T

2b588cd30f fix: WebGPU renderer race on Canvas remount & duplicate item scale loss (#284 )

Backport from monorepo PR #310 (fix/april-pass):

1. WebGPU renderer race on Canvas remount
   Cache the in-flight WebGPURenderer promise per canvas element so
   concurrent configure() calls from R3F's useLayoutEffect await the
   same init() instead of creating duplicate renderers. Fixes
   intermittent 'resolve target size does not match' errors when
   navigating between projects and home.

2. Duplicate item loses its scale
   Add scale to the field set in useDraftNode.commit() so duplicated
   items preserve their original scale instead of falling back to
   [1,1,1].

Co-authored-by: Pascal <open@pascal.app>

2026-04-28 12:42:08 -04:00

src

fix: WebGPU renderer race on Canvas remount & duplicate item scale loss (#284 )

2026-04-28 12:42:08 -04:00

package.json

release: v0.6.0

2026-04-21 20:52:02 +00:00

README.md

packages

2026-02-05 08:22:19 +09:00

tsconfig.json

remove community

2026-03-13 09:07:46 +01:00

README.md

@pascal-app/viewer

3D viewer component for Pascal building editor.

Installation

npm install @pascal-app/viewer @pascal-app/core

Peer Dependencies

npm install react three @react-three/fiber @react-three/drei

What's Included

Viewer Component - WebGPU-powered 3D viewer with camera controls
Node Renderers - React Three Fiber components for all node types
Post-Processing - SSGI (ambient occlusion + global illumination), TRAA (anti-aliasing), outline effects
Level System - Level visibility and positioning (stacked/exploded/solo modes)
Wall Cutout System - Dynamic wall hiding based on camera position
Asset URL Helpers - CDN URL resolution for models and textures

Usage

import { Viewer, useViewer } from '@pascal-app/viewer'
import { useScene } from '@pascal-app/core'

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Viewer />
    </div>
  )
}

Custom Camera Controls

import { Viewer } from '@pascal-app/viewer'
import { CameraControls } from '@react-three/drei'

function App() {
  return (
    <Viewer selectionManager="custom">
      <CameraControls />
    </Viewer>
  )
}

Viewer State

import { useViewer } from '@pascal-app/viewer'

function ViewerControls() {
  const levelMode = useViewer(s => s.levelMode)
  const setLevelMode = useViewer(s => s.setLevelMode)
  const wallMode = useViewer(s => s.wallMode)
  const setWallMode = useViewer(s => s.setWallMode)

  return (
    <div>
      <button onClick={() => setLevelMode('stacked')}>Stacked</button>
      <button onClick={() => setLevelMode('exploded')}>Exploded</button>
      <button onClick={() => setWallMode('cutaway')}>Cutaway</button>
      <button onClick={() => setWallMode('up')}>Full Height</button>
    </div>
  )
}

Asset CDN Helpers

import { resolveCdnUrl, ASSETS_CDN_URL } from '@pascal-app/viewer'

// Resolves relative paths to CDN URLs
const url = resolveCdnUrl('/items/chair/model.glb')
// → 'https://pascal-cdn.wawasensei.dev/items/chair/model.glb'

// Handles external URLs and asset:// protocol
const externalUrl = resolveCdnUrl('https://example.com/model.glb')
// → 'https://example.com/model.glb' (unchanged)

Features

WebGPU Rendering - Hardware-accelerated rendering via Three.js WebGPU
Post-Processing - SSGI for realistic lighting, outline effects for selection
Level Modes - Stacked, exploded, or solo level display
Wall Cutaway - Automatic wall hiding for interior views
Camera Modes - Perspective and orthographic projection
Scan/Guide Support - 3D scans and 2D guide images

License

MIT