feedBack/plugins/highway_3d
Kyle fcdb4867d6
feat(highway_3d): background controls in the player chrome (#1008)
* Add mid-song background picker to player chrome

Mount a background style/intensity control in the player's plugin popover so users can switch backgrounds mid-song without leaving for Settings. Uses ref-counting to manage the shared control across multiple renderer instances. The control syncs bidirectionally with settings.html and the settings bus, so changes from either UI stay agreed. Moved _pcAcquire() to after _isReady to avoid acquiring for non-viable (e.g. WebGL2-missing) renderers.

* Grey out background controls that current style ignores

Add _PC_USES table to track which settings (intensity, reactive) each background style actually consumes. Disable and grey out controls when the active style doesn't use them, preventing user confusion. Updates _pcPaint() to support disabled state with tooltip explanations, and guards click/change handlers against disabled controls.

* Add background control tests and changelog entry

Document the new background controls feature in the 3D Highway plugin that allows changing the highway background mid-song from the player's Plugin Controls popover. Add a comprehensive test suite for the background control system covering refcounting, settings sync, greying out unsupported controls, and teardown behavior.

* Generalize background control refcounting language

Update CHANGELOG and test comments to reflect that the 3D highway background control refcounting applies to any multiple renderer instances, not exclusively splitscreen. Change test name and clarify that multi-instance behavior is exercised with stubbed instances, not real splitscreen sessions (whose visualizer does not currently work).

* Reorder 3D Highway changelog entry, bump version

Moved the 'Background controls in the player' entry to a different position in the Unreleased changelog section. Updated 3D Highway plugin version from 3.32.0 to 3.33.0.

* fix: store screen.js and CHANGELOG.md with CRLF to match main

The merge of main was run with merge.renormalize=true (needed — this repo has CRLF committed while core.autocrlf=true, so a plain merge sees all 16k lines as changed). That rewrote screen.js and CHANGELOG.md to LF, which autocrlf then stored. main has both as CRLF, so every line differed and GitHub reported 16,428/16,112 for screen.js and refused to render it.

Restaged with the CRLF blobs written directly so they are what get stored. No content change; the diff drops to 316/0 and highway_3d_render_order.test.js leaves the diff entirely.

Signed-off-by: Kyle <kyle.j.t@live.co.uk>

* Unbind screen:changed hook on last release

Ensure the highway_3d control removes its screen:changed listener when the last reference is released to avoid listener/closure leaks across plugin reloads. Added a best-effort off() call and clears _pcScreenHook so future acquires re-bind correctly. Tests updated: mock feedBack on/off implemented, helpers added (screenHooks, fireScreenChanged), and a new test verifies the subscription is removed on final _pcRelease and re-subscribed on re-acquire.

* fix(highway_3d): show greyed-out reason on hover for disabled bg controls

A native-disabled <button>/<input> receives no pointer events, so its
`title` tooltip never appears — the "greyed out, says why on hover"
affordance was dead in the browser while the tests passed on the
swallowed control title. Move the reason onto a non-disabled wrapper and
set pointer-events:none on the disabled control so the hover reaches it.
Also add aria-disabled so screen readers get the state.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Byron Gamatos <xasiklas@gmail.com>

---------

Signed-off-by: Kyle <kyle.j.t@live.co.uk>
Signed-off-by: Byron Gamatos <xasiklas@gmail.com>
Co-authored-by: Byron Gamatos <xasiklas@gmail.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-19 11:39:26 +02:00
..
assets feat(highway_3d): Butterchurn visualizer background style (#598) 2026-06-26 14:07:29 +02:00
tests feat(highway_3d): background controls in the player chrome (#1008) 2026-07-19 11:39:26 +02:00
_plugin.src.css Clean release snapshot 2026-06-16 18:47:13 +02:00
build-tailwind.sh Clean release snapshot 2026-06-16 18:47:13 +02:00
CLAUDE.md Add new chart-transform plugin capability (#1000) 2026-07-19 11:27:52 +02:00
FREECAM_BRIDGE.md Clean release snapshot 2026-06-16 18:47:13 +02:00
NOTICE feat(highway_3d): Butterchurn visualizer background style (#598) 2026-06-26 14:07:29 +02:00
plugin.json feat(highway_3d): background controls in the player chrome (#1008) 2026-07-19 11:39:26 +02:00
README.md rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
routes.py rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
screen.js feat(highway_3d): background controls in the player chrome (#1008) 2026-07-19 11:39:26 +02:00
settings.html feat(highway_3d): hit-feedback juice + Hit-sparks toggle (#618) 2026-06-28 11:53:48 +02:00
tailwind.config.js rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
tour.json Clean release snapshot 2026-06-16 18:47:13 +02:00

3D Highway

A 3D note highway visualization for FeedBack — an alternative to the default 2D highway, with a sense of depth and perspective inspired by stage views in modern rhythm games.

What you get

  • A camera-perspective highway with notes flying down toward a virtual fretboard at the bottom of the screen
  • Glowing strings that pulse and brighten on each hit
  • Note Detection feedback, including hit/miss outlines and diagnostic early/late/sharp/flat labels when the note detection plugin emits enriched judgments
  • Chord frame-boxes, named-chord labels, and a chord diagram overlay (configurable corner position) so you can read shapes at a glance
  • Two complementary barre indicators fire together when a barre chord shape is detected (2+ consecutive strings fretted at the lowest fret, e.g. F [1,1,2,3,3,1], or an outer-edge full-span barre with every intermediate string fretted, e.g. B major x24442): a translucent vertical line across the strings on the 3D highway, and a straight bracket drawn inside the first fret space of the chord diagram overlay
  • A heat-colored fret number row that lights up around your active playing region
  • Selectable color palettes for the strings — pick the look you want
  • Audio-reactive ambient background animations (particles, silhouettes, stage lights, geometric — pick one or turn it off)
  • Lyrics overlay synced to the song
  • Works as the main player view or per-panel inside the splitscreen plugin

Install

3D Highway ships bundled with FeedBack — no separate installation needed. Pick 3D Highway from the visualization picker in the player.

Note: The bundled version is preferred over any user-installed copy with the same plugin ID. If you have an old feedBack-plugin-3dhighway clone on disk (from before 3D Highway was promoted to core), it will be ignored at startup — a warning in the server log names the path of the discarded copy. You can safely delete the stale clone.

Fallback: In the unlikely event that the bundled copy fails to load its routes (e.g., a broken bundled release), FeedBack will automatically fall back to your user-installed copy and show a yellow "Fallback" badge in the Settings panel. Check the server startup log for the root cause in that case.

Settings

Most of the visual controls (background style, intensity, audio reactivity, color palette) live on FeedBack's Settings screen under the 3D Highway section.

Contributing / development

For maintainers and AI assistants working on the codebase, see CLAUDE.md — it's a navigation guide that maps every visual element to where it lives in screen.js, plus the gotchas worth knowing before tweaking.

Perf bench (?h3dbench=1)

Append ?h3dbench=1 to the player URL to enable opt-in console.log reporting of update() self-time, broken into six segments — frame (everything between pbBeg(0) at the top of update() and pbEnd(0) at the bottom; excludes the trailing pbReportTick() logging that fires after pbEnd(0)), state (per-frame state-derivation loop), next (next-note-by-string lookahead), mat (per-string material writes), noteDraw (single-note draw loop), chordDraw (chord draw loop). Reported every 5 seconds with p50 / p95 / max per segment and frame count, so before/after numbers on a target chart are reproducible (feedBack#226). Off-by-default; the bench helpers (pbBeg / pbEnd / pbReportTick) are bound to a shared empty-function literal when the renderer instance is created (each createHighway() panel re-checks the flag), so the hot-path call sites are no-ops with negligible overhead (typically JIT-inlined).