feat(PR#6): WebSocket/HTTP streaming playback, jitter buffer, embed API + PR#5 FACS slider panel

[Copilot]

Implements real-time animation streaming via WebSocket/HTTP binary protocol with a jitter buffer, wires the human.streaming SDK namespace, adds a streaming demo page, and completes the unfinished PR#5 FACS slider panel.

StreamingAnimationPlayer (src/animation/StreamingAnimationPlayer.js)

• Binary protocol (little-endian): 12-byte header + joints (3×int16 pos + 4×int16 quat, mm precision / ×32767) + FACS (52×int16)
• Jitter buffer with configurable target delay (default 60 ms), SLERP/LERP interpolation between buffered frames, hold-last-pose extrapolation on loss
• WebSocket transport with auto-reconnect; HTTP streaming with chunked-frame reassembly
• Public API: connect(), disconnect(), injectFrame() (test injection), getInterpolatedPose(), setSmoothingAlpha(), setTargetDelay(), stats; events: connect, disconnect, data, error, drop, reconnecting

SDK wiring (src/sdk/OpenHuman.js)

• Full human.streaming namespace replacing stubs: connect, disconnect, onData, getInterpolatedPose (auto-applies FACS→MorphController, joints→Skeleton), stats, setTargetDelay, player
• Streaming events forwarded as streaming:* on the instance via human.on()
• Re-exports StreamingAnimationPlayer, encodeFrame, STREAM_TYPE_WS/HTTP

const human = await OpenHuman.load('__demo__', canvas);
human.streaming.connect('wss://your-server/stream');
human.on('streaming:data', () => human.streaming.getInterpolatedPose()); // auto-applies pose
console.log(human.streaming.stats); // { fps, latencyMs, dropped, bufferSize, … }

Streaming demo (demo/streaming.html)

• In-page mock source (MockStreamSource) — animates 3 joints + 52 FACS at 30 FPS with no external server; uses public injectFrame()
• Performance overlay: render FPS, stream FPS, latency, dropped frames, buffer depth
• Sidebar: connect/disconnect controls, transport selector, jitter delay + smoothing sliders, timestamped console log
• Embed API code snippet with clipboard copy

Reference server (demo/streaming-server.js)

• Minimal Node.js ws server broadcasting synthetic frames at 30 FPS on ws://localhost:8765

FACS slider panel — PR#5 completion (demo/index.html)

• 52 FACS sliders in 11 semantic groups (Brow, Cheek, Eye, Jaw, Mouth ×4, Nose, Tongue)
• CSS-transition collapsible left-side panel; Reset All; responsive; zero deps; wired directly to MorphController.set()

Original prompt

Create PR #6 for openhuman-ai/realistic-render-engine implementing real-time animation/WebSocket/HTTP streaming playback system, jitter buffer, and expose embed/streaming API, plus complete unfinished PR #5 task (FACS slider panel HTML/CSS in demo).

Scope (PR #6):

1. StreamingAnimationPlayer module: implement WebSocket binary protocol (frame buffer, <50ms latency, 16-bit quantize), HTTP fetch/stream, and jitter buffer (with interpolation/extrapolation on missed/late frames).
2. SDK API/human.streaming namespace: connect, disconnect, onData, getInterpolatedPose, handling of joints and FACS array per frame, match OpenHuman SDK plan; robust connection/reconnect events and smoothing.
3. Embed API wiring: add/embed code snippet for iframe or webcomponent usage.
4. Demos: Streaming demo page with mock/real server sources, console status, visible performance overlay (latency, FPS, frame drop); instructions/comments for test usage.
5. Plus UNFINISHED PR Complete deferred rendering pipeline: G-buffer, PBR/IBL, PCF shadows, ACES, demo controls #5: FACS slider panel for demo (HTML/CSS/JS wiring for manipulating 52 FACS values interactively via GUI panel, responsive, light design, zero dependency).

Constraints:

• All code zero runtime dependencies
• Align with upstream file/module conventions
• All control/event hooks working as in SDK/API spec

Acceptance:

1. Streaming playback functional, minimal latency/jitter visible in demo
2. Demo (now with FACS slider panel) allows real-time morph/FACS blend via GUI
3. Embed API and onData/connection events work as specified
4. All code fits repo structure, and zero runtime deps

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: @copilot Accepted Confirmation: Confirm agent session

Assistant: Started — PR #3 is now in progress.

You can track it here:

data:
    - title: '[WIP] Implement deferred rendering pipeline with G-buffer and PBR lighting'
      repository: openhuman-ai/realistic-render-engine
      url: https://github.com/copilot/tasks/pull/PR_kwDORtjZVs7Mez_d?session_id=b777be20-170b-456d-b503-7e8c23fe7631
      state: queued

User: Let continue to fix PR #3.

Assistant: Done — I’ve sent the continuation/fix request for PR #3 and resumed work on the deferred pipeline issues (G-buffer, PBR/IBL, shadows, ACES, and demo stability) on openhuman-ai/realistic-render-engine (main).

User: @copilot Accepted Confirmation: Confirm agent session

Assistant: Great — I’ve continued the PR #3 fix pass and queued focused fixes.

Track progress here:

data:
    - title: '[WIP] Fix deferred rendering pipeline issues in PR #3'
      repository: openhuman-ai/realistic-render-engine
      url: https://github.com/copilot/tasks/pull/PR_kwDORtjZVs7Me_WY?session_id=d822f307-fb70-4128-bc0e-f6bd191efd12
      state: queued

User: #PR3 still not work, Let continue to fix by following list guide, [x] is already complete, [ ] is not complete yet. Let complete all unfinish task following:

• Explore existing codebase (ForwardRenderer, RenderTarget, Shader, StateCache, SDK, demo)
• Update src/core/RenderTarget.js — add depth-texture support (for shadow maps)
• Implement src/renderer/ShadowMap.js — depth FBO, orthographic light matrix, shadow pass, PCF
• Implement src/renderer/PostProcessStack.js — fullscreen quad, ACES tonemapping shader, pass chain
• Implement src/renderer/DeferredRenderer.js — G-buffer MRT, geometry pass (static+skinned), PBR lighting pass, IBL (BRDF LUT + fallback), ACES post-process
• Update src/sdk/OpenHuman.js — wire DeferredRenderer + ShadowMap, setExposure, setEnvironment
• Update demo/index.html — deferred path labels, exposure slider, shadow/IBL/ACES toggles

Assistant: Continuing PR #3: All remaining deferred pipeline tasks (shadows, ACES, G-buffer, demo controls, and SDK wiring) are being implemented and fixed as scoped.

You can track the working session as updates land for each checklist item.

User: @copilot Accepted Confirmation: Confirm agent session

Assistant: I’m now continuing to fix PR #3 and will complete all remaining checklist items for the deferred pipeline, as described.

Track the full progress here:

data:
    - title: '[WIP] Fix issues in deferred pipeline and complete checklist tasks'
      repository: openhuman-ai/realistic-render-engine
      url: https://github.com/copilot/tasks/pull/PR_kwDORtjZVs7Mf3yh?session_id=55a4034a-0a04-464c-8a53-c25f281b1d7f
      state: queued

User: Continue with four PR:

PR #4: SSS + eye + hair

Assistant: Started PR #4: SSS, eye shader, and hair shader are being implemented on openhuman-ai/realistic-render-engine (main branch), with all demo and SDK API controls to follow the MVP plan.

Track your task progress here:

data:
    - title: '[WIP] Implement skin SSS, eye shader, and hair shader (Kajiya-Kay/card-based) with demo and SDK API'
      repository: openhuman-ai/realistic-render-engine
      url: htt...

</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

*This pull request was created from Copilot chat.*
>

<!-- START COPILOT CODING AGENT TIPS -->
---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. [Learn more about Advanced Security.](https://gh.io/cca-advanced-security)