Files

T

billyandGitHub 341725b37a fix(viewer): await renderer.init() in Canvas gl factory (#233 )

The WebGPURenderer needs its backend initialized before any direct
`.render(scene, camera)` call. The commented-out `// renderer.init()`
said "Only use when using <DebugRenderer />", but the non-debug path
also calls direct render from the post-processing fallback
(post-processing.tsx:318), which throws "Renderer: .render() called
before the backend is initialized" on any browser that falls back to
the WebGL2 backend.

Switching the gl factory to an async function and awaiting init()
before returning is safe in both backends (init() is idempotent and
the async factory is a supported @react-three/fiber v9+ pattern), and
prevents the error in WebGL2 fallback.

2026-04-15 17:23:27 -04:00

src

fix(viewer): await renderer.init() in Canvas gl factory (#233 )

2026-04-15 17:23:27 -04:00

package.json

release: v0.5.1

2026-04-14 05:01:30 +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