54 lines
1.8 KiB
Markdown
54 lines
1.8 KiB
Markdown
# OpenSpec Change: enterprise-gaming-r3f-parallax
|
||
|
||
- **Change ID**: enterprise-gaming-r3f-parallax
|
||
- **Package**: `@suaveplan/r3f-parallax`
|
||
- **Category**: gaming/effects
|
||
- **Target path**: `gaming/effects/r3f-parallax`
|
||
- **Status**: PROPOSED
|
||
- **Date**: 2026-04-24
|
||
- **Reference spec**: `/mnt/s/web/suaveplan/enterprise/r3f-parallax.md`
|
||
|
||
---
|
||
|
||
## Summary
|
||
|
||
Deliver `@suaveplan/r3f-parallax` on the genesis branch from scratch at enterprise quality. The package provides interior parallax components for React Three Fiber: `WindowParallax` (shared ray-marched room behind an array of portal quads using a single depth-layered texture atlas) and `GridParallax` (tiled M×N grid of parallax rooms on one plane). Both components are GPU-friendly, declarative R3F JSX. Configurable: lighting within rooms, depth layers, room-layout generation, and texture-atlas helpers. Storybook-driven with interactive controls for room parameters. Genesis adds structured errors, and 100% coverage.
|
||
|
||
---
|
||
|
||
## Available workspace deps
|
||
|
||
`@suaveplan/error`, react, `@react-three/fiber`, `@react-three/drei`, three.
|
||
|
||
---
|
||
|
||
## Public API surface
|
||
|
||
```ts
|
||
function WindowParallax(props: WindowParallaxProps): JSX.Element
|
||
// columns, rows, roomDepth, atlasTexture, lightColor, lightIntensity
|
||
|
||
function GridParallax(props: GridParallaxProps): JSX.Element
|
||
// tileSize, roomDepthLayers, atlas
|
||
|
||
function generateRoomAtlas(rooms: RoomDefinition[], options: AtlasOptions): AtlasResult
|
||
```
|
||
|
||
---
|
||
|
||
## File layout
|
||
|
||
```text
|
||
gaming/effects/r3f-parallax/
|
||
package.json / tsconfig.json / vitest.config.ts
|
||
src/
|
||
index.ts
|
||
types/common.ts + md
|
||
shaders/parallax.vert.ts + parallax.frag.ts
|
||
utils/room-atlas-generator.ts + md + test
|
||
components/
|
||
WindowParallax/ (tsx + md + test + stories + index)
|
||
GridParallax/ (tsx + md + test + stories + index)
|
||
tests/integration.test.ts
|
||
```
|