mirror of
https://github.com/got-feedBack/feedBack.git
synced 2026-07-25 14:21:21 +00:00
* feat(highway_3d): hit-feedback juice — cinematic lighting, strike line, sparks, intensity dial Charrette wave 1 (additive, default-tasteful, all behind settings): - #8 Hit-feedback settings: hitFx (0..1), cinematic, verdictMarks, timingFx, streakFx in BG_DEFAULTS + h3dBgSet* setters + settings.html (intensity slider + cinematic toggle). hitFx=0 → colour verdict only. - #2 Cinematic lighting: ambient 0.85→0.35 + stronger key light when cinematic on, so emissive gems have a dark surround to pop against. Live-toggleable. - #1 Strike line: a glowing bar at the hit line (Z=0) that flashes green on a verified hit / red on a miss, eased from the per-frame verdict alpha. - #3 Hit sparks: a pooled additive Points burst at the gem on a verified hit (deduped one burst per note), scaled by hitFx; disposed on teardown. Staged for wave 2 (after dogfooding): bloom+ACES (#4), colorblind verdict glyphs (#6), early/late timing tint (#5), streak heat + clean-bar (#7), gem scale-punch. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011Q9BpGYqUaga9ZJyS3dDPq * feat(highway_3d): wave 2 — gem scale-punch, streak heat, colorblind verdict marks - #3 (completion) gem scale-punch: the hit gem briefly grows (1 + 0.22·hitFx·alpha), biggest at the strike and easing with the verdict — the per-gem impulse. - #7 streak heat: a renderer-side consecutive-hit counter eases a 0..1 "heat" (plateau at 16) that grows the spark burst + warms the strike-line idle glow; a miss eases it back down. Behind the Streak-feedback toggle. - #6 colorblind verdict marks: a redundant ✓ (hit) / ✗ (miss) glyph on the verdict via the existing 2D label overlay, so the green/red pair isn't the only signal — notably also covers the provider path (where the timing labels don't show). - settings.html: Streak-feedback + Accessible-marks toggles. Deferred: #4 bloom+ACES (needs the Three.js postprocessing addons vendored into core static/vendor/three/ — not present; warrants its own infra change), and #5's timing tint (the early/late ±ms labels already render on the event path; surfacing them on the provider path needs a notedetect verdict field — a cross-plugin item). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011Q9BpGYqUaga9ZJyS3dDPq * feat(highway_3d): #4 bloom + ACES — vendored Three.js postprocessing, perf-gated The single biggest fidelity lever from the charrette. Core had only three.module.min.js (no postprocessing addons), so this vendors the r170 EffectComposer/RenderPass/UnrealBloomPass/OutputPass + their shader deps into static/vendor/three/addons/, with every `from 'three'` rewritten to the SAME vendored three (../../three.module.min.js) so the addons share the plugin's three instance (a CDN copy would be a second, non-interoperable module). highway_3d wiring: - Lazy-loads the addons only when the new `bloom` setting is on (dynamic import), builds EffectComposer(RenderPass → UnrealBloomPass(strength .65/radius .5/ threshold .82 — high so only emissive gems + the hit flash bloom) → OutputPass). - Render loop uses composer.render() with ACES tone-mapping when bloom is active, else the unchanged direct ren.render() with NoToneMapping (bloom-off = today's look). - Perf-gated: OFF in splitscreen; graceful fallback to direct render if the modules or composer fail; composer.setSize on canvas resize; disposed on teardown. - settings.html: "Glow bloom" toggle (default on). Verified the import chain resolves + renders via a same-origin module-load test (EffectComposer built + a bloom frame rendered, three r170). Charrette status: 7/8 (only #5's early/late timing tint remains — a notedetect verdict-field change, outside the highway). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011Q9BpGYqUaga9ZJyS3dDPq * feat(highway_3d): #5 early/late timing — colour the hit feedback by timing Surfaces the detector's timing on every hit (the charrette's last item), fully highway-side: notedetect already dispatches the judgment (timingState/timingError) on notedetect:hit/miss, so we carry timingState onto the event mark and tint the hit's spark burst + the ✓ verdict glyph by it — on-time green, early cyan, late amber. Gracefully falls back to green when no timing is known (pure-provider path), so it never invents data. Behind the new "Timing feedback" toggle (default on). Charrette: 8/8 complete. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011Q9BpGYqUaga9ZJyS3dDPq * feat(highway_3d): add a "Hit sparks" on/off toggle (note-hit particles) The on-hit spark burst (the particle effect that fires the instant note_detect confirms a hit) could previously only be removed by dragging Hit-feedback intensity to 0 — which also kills the strike-line flash and the scale-punch. Add a dedicated "Hit sparks" toggle (default on) under 3D Highway settings, in the hit-feedback group beside the intensity slider, that gates ONLY the spark particles; the strike flash and colour verdict are unaffected. Wired the same way as the sibling juice toggles: a `sparks` boolean in BG_DEFAULTS, in _BG_BOOL_KEYS, a window.h3dBgSetSparks setter, the per-instance _sparks state + settings re-read, and a guard on the _sparkBurst spawn. Reuses existing Tailwind utility classes, so assets/plugin.css is unchanged; plugin.json version bumped to 3.28.0. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(highway_3d): act on tester charrette — strike line, fog readability, AA Addresses the alpha-tester 3D-highway feedback thread via the design panel's recommendations: - Strike line (panel rec 1a): now a HIT-ONLY faint "now" line — flashes green on a confirmed hit, no red miss branch (misses already show at the gem: red wash + ✗). Moved off the bottom edge to the vertical CENTRE of the string field, which was the "incorrectly placed" complaint (it read as the board's lower border and fused with open-string gems on a miss). Added a "Strike line" on/off toggle (`strikeLine`, default on). - Horizon readability (#2): the note gems + their outlines are now fog-exempt (`material.fog = false` on mStr/mGlow/mStrHitOutline/mHitBright/mWhiteOutline/ mMissOutline), so upcoming notes punch through the distance fog and stay legible as they render in — the board, lane, sustains and scenery keep their atmospheric fog, so depth is preserved. - Cinematic lighting softened: cinematic ambient 0.35 -> 0.45 so the dark stage doesn't crush note/fret legibility. - Anti-aliasing under bloom (perf rec): give the bloom EffectComposer a multisampled (WebGL2 MSAA x4) HalfFloat render target. The default target had no `samples`, so bloom-on bypassed MSAA — the "too HD / jagged on Windows, fine on Mac" report (Mac only won via Retina supersampling). This is the highest-value, smallest fix for the jaggies. plugin.json -> 3.29.0. The renderScale quality-oscillation is core (static/highway.js) and will be a separate feedBack PR. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat(highway_3d): remove the strike line; sparks-only hit feedback, subtler Second tester-charrette pass. The strike line (even hit-only/centred from the last pass) was still too distracting/confusing on a hit, so it's removed entirely — strings + fret markers already orient the player, and the hit is fully carried at the gem (bright outline + scale-punch + spark burst) with the timing-coloured ✓/✗ verdict as the knowledge-of-results channel. - Deleted the strike-line mesh, its per-frame update, the `strikeLine` setting (BG_DEFAULTS / _BG_BOOL_KEYS / setter / settings-load), the settings.html toggle, and the now-dead `_strikeLine`/`_ndHitFlash`/`_ndMissFlash` state + their verdict-block feeds. - Made the spark burst subtler now that it's the sole celebration: point size 1.7→1.0·K, opacity 0.95→0.8, burst count (7+13·hitFx)→(4+7·hitFx), radial speed (7+r·20)→(5+r·12)·K, life (0.40+r·0.28)→(0.30+r·0.16)s. - Toggles for Hit sparks and the ✓/✗ verdict marks already exist in settings (kept). Minimal hit-feedback set now: gem bright + subtle spark (celebration) + timing-coloured ✓/✗ (the KR) + ambient streak heat. plugin.json -> 3.30.0. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * fix(highway_3d): hydrate hit-feedback settings controls from saved state The 7 new juice controls (Hit sparks, Cinematic, Streak, Verdict marks, Bloom, Timing, Hit-feedback intensity) were hard-coded to their default markup and never read back from localStorage when the settings panel reopened — so a saved non-default (e.g. Hit sparks off) showed as the default (checked) even though the renderer correctly honored it. The sibling controls in the same panel were already hydrated; this restores that pattern for the new ones. Reads h3d_bg_* directly; defaults mirror BG_DEFAULTS (all bools on, hitFx 0.70) and the _bgCoerceBool 'true'/'1' vs 'false'/'0' coercion. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: byrongamatos <xasiklas@gmail.com>
232 lines
4.6 KiB
JavaScript
232 lines
4.6 KiB
JavaScript
import {
|
|
Clock,
|
|
HalfFloatType,
|
|
NoBlending,
|
|
Vector2,
|
|
WebGLRenderTarget
|
|
} from '../../three.module.min.js';
|
|
import { CopyShader } from '../shaders/CopyShader.js';
|
|
import { ShaderPass } from './ShaderPass.js';
|
|
import { MaskPass } from './MaskPass.js';
|
|
import { ClearMaskPass } from './MaskPass.js';
|
|
|
|
class EffectComposer {
|
|
|
|
constructor( renderer, renderTarget ) {
|
|
|
|
this.renderer = renderer;
|
|
|
|
this._pixelRatio = renderer.getPixelRatio();
|
|
|
|
if ( renderTarget === undefined ) {
|
|
|
|
const size = renderer.getSize( new Vector2() );
|
|
this._width = size.width;
|
|
this._height = size.height;
|
|
|
|
renderTarget = new WebGLRenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio, { type: HalfFloatType } );
|
|
renderTarget.texture.name = 'EffectComposer.rt1';
|
|
|
|
} else {
|
|
|
|
this._width = renderTarget.width;
|
|
this._height = renderTarget.height;
|
|
|
|
}
|
|
|
|
this.renderTarget1 = renderTarget;
|
|
this.renderTarget2 = renderTarget.clone();
|
|
this.renderTarget2.texture.name = 'EffectComposer.rt2';
|
|
|
|
this.writeBuffer = this.renderTarget1;
|
|
this.readBuffer = this.renderTarget2;
|
|
|
|
this.renderToScreen = true;
|
|
|
|
this.passes = [];
|
|
|
|
this.copyPass = new ShaderPass( CopyShader );
|
|
this.copyPass.material.blending = NoBlending;
|
|
|
|
this.clock = new Clock();
|
|
|
|
}
|
|
|
|
swapBuffers() {
|
|
|
|
const tmp = this.readBuffer;
|
|
this.readBuffer = this.writeBuffer;
|
|
this.writeBuffer = tmp;
|
|
|
|
}
|
|
|
|
addPass( pass ) {
|
|
|
|
this.passes.push( pass );
|
|
pass.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
|
|
|
|
}
|
|
|
|
insertPass( pass, index ) {
|
|
|
|
this.passes.splice( index, 0, pass );
|
|
pass.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
|
|
|
|
}
|
|
|
|
removePass( pass ) {
|
|
|
|
const index = this.passes.indexOf( pass );
|
|
|
|
if ( index !== - 1 ) {
|
|
|
|
this.passes.splice( index, 1 );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
isLastEnabledPass( passIndex ) {
|
|
|
|
for ( let i = passIndex + 1; i < this.passes.length; i ++ ) {
|
|
|
|
if ( this.passes[ i ].enabled ) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
render( deltaTime ) {
|
|
|
|
// deltaTime value is in seconds
|
|
|
|
if ( deltaTime === undefined ) {
|
|
|
|
deltaTime = this.clock.getDelta();
|
|
|
|
}
|
|
|
|
const currentRenderTarget = this.renderer.getRenderTarget();
|
|
|
|
let maskActive = false;
|
|
|
|
for ( let i = 0, il = this.passes.length; i < il; i ++ ) {
|
|
|
|
const pass = this.passes[ i ];
|
|
|
|
if ( pass.enabled === false ) continue;
|
|
|
|
pass.renderToScreen = ( this.renderToScreen && this.isLastEnabledPass( i ) );
|
|
pass.render( this.renderer, this.writeBuffer, this.readBuffer, deltaTime, maskActive );
|
|
|
|
if ( pass.needsSwap ) {
|
|
|
|
if ( maskActive ) {
|
|
|
|
const context = this.renderer.getContext();
|
|
const stencil = this.renderer.state.buffers.stencil;
|
|
|
|
//context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
|
|
stencil.setFunc( context.NOTEQUAL, 1, 0xffffffff );
|
|
|
|
this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, deltaTime );
|
|
|
|
//context.stencilFunc( context.EQUAL, 1, 0xffffffff );
|
|
stencil.setFunc( context.EQUAL, 1, 0xffffffff );
|
|
|
|
}
|
|
|
|
this.swapBuffers();
|
|
|
|
}
|
|
|
|
if ( MaskPass !== undefined ) {
|
|
|
|
if ( pass instanceof MaskPass ) {
|
|
|
|
maskActive = true;
|
|
|
|
} else if ( pass instanceof ClearMaskPass ) {
|
|
|
|
maskActive = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.renderer.setRenderTarget( currentRenderTarget );
|
|
|
|
}
|
|
|
|
reset( renderTarget ) {
|
|
|
|
if ( renderTarget === undefined ) {
|
|
|
|
const size = this.renderer.getSize( new Vector2() );
|
|
this._pixelRatio = this.renderer.getPixelRatio();
|
|
this._width = size.width;
|
|
this._height = size.height;
|
|
|
|
renderTarget = this.renderTarget1.clone();
|
|
renderTarget.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
|
|
|
|
}
|
|
|
|
this.renderTarget1.dispose();
|
|
this.renderTarget2.dispose();
|
|
this.renderTarget1 = renderTarget;
|
|
this.renderTarget2 = renderTarget.clone();
|
|
|
|
this.writeBuffer = this.renderTarget1;
|
|
this.readBuffer = this.renderTarget2;
|
|
|
|
}
|
|
|
|
setSize( width, height ) {
|
|
|
|
this._width = width;
|
|
this._height = height;
|
|
|
|
const effectiveWidth = this._width * this._pixelRatio;
|
|
const effectiveHeight = this._height * this._pixelRatio;
|
|
|
|
this.renderTarget1.setSize( effectiveWidth, effectiveHeight );
|
|
this.renderTarget2.setSize( effectiveWidth, effectiveHeight );
|
|
|
|
for ( let i = 0; i < this.passes.length; i ++ ) {
|
|
|
|
this.passes[ i ].setSize( effectiveWidth, effectiveHeight );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
setPixelRatio( pixelRatio ) {
|
|
|
|
this._pixelRatio = pixelRatio;
|
|
|
|
this.setSize( this._width, this._height );
|
|
|
|
}
|
|
|
|
dispose() {
|
|
|
|
this.renderTarget1.dispose();
|
|
this.renderTarget2.dispose();
|
|
|
|
this.copyPass.dispose();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
export { EffectComposer };
|