2.3 KiB
OpenSpec Change: enterprise-gaming-r3f-networking
- Change ID: enterprise-gaming-r3f-networking
- Package:
@suaveplan/r3f-networking - Category: gaming/gameplay
- Target path:
gaming/gameplay/r3f-networking - Status: SUPERSEDED-BY-GENESIS-WAVE
- Date: 2026-04-24
Summary
Deliver @suaveplan/r3f-networking on the genesis branch from scratch at enterprise quality. The package provides multiplayer state synchronization for React Three Fiber: NetworkedTransform component applying snapshot interpolation (lerp/slerp per-axis with configurable extrapolation buffer), NetworkedAnimator syncing animation state across clients, ClientPrediction applying local-authoritative input with server reconciliation, LagCompensation utility for rollback-based hit detection, and useNetworkPing hook for RTT display. Built on WebSocket transport from @suaveplan/game-server. Genesis adds 100% coverage and Storybook stories.
Available workspace deps
@suaveplan/game-server, @suaveplan/game-state-schemas, @suaveplan/error, @suaveplan/types, @suaveplan/timing, react, @react-three/fiber, three.
Public API surface
function NetworkProvider(props: NetworkProviderProps): JSX.Element
// url, tickRate, interpolationDelay, onConnect, onDisconnect
function NetworkedTransform(props: NetworkedTransformProps): JSX.Element
// networkId, interpolation: 'lerp' | 'hermite', extrapolate
function NetworkedAnimator(props: NetworkedAnimatorProps): JSX.Element
// networkId, mixer
function ClientPrediction(props: ClientPredictionProps): JSX.Element
// networkId, applyInput, rollback
function useNetworkPing(): { ping: number; jitter: number }
function useNetworkProvider(): NetworkContext
// send(msg), latency, connected, tick
File layout
gaming/gameplay/r3f-networking/
package.json / tsconfig.json / vitest.config.ts
src/
index.ts / error-codes.ts
types/common.ts + md
context/network-provider.tsx + md + test
interpolation/ (snapshot-buffer.ts + md + test, hermite.ts + md + test)
hooks/use-network-ping.ts + md + test
components/
NetworkedTransform/ (tsx + md + test + stories + index)
NetworkedAnimator/ (tsx + md + test + stories + index)
ClientPrediction/ (tsx + md + test + stories + index)
tests/integration.test.ts