Skip to content

feat: background effects [wpb-23253]#20732

Merged
zskhan merged 84 commits intodevfrom
feat/background-effects-WPB-23253
Apr 2, 2026
Merged

feat: background effects [wpb-23253]#20732
zskhan merged 84 commits intodevfrom
feat/background-effects-WPB-23253

Conversation

@EnricoSchw
Copy link
Copy Markdown
Contributor

@EnricoSchw EnricoSchw commented Mar 17, 2026

TaskWPB-23253 Bring Blurred Background Spike into Webapp Edge

Pull Request

Summary

  • restore blur and virtual background support
  • add media pipe models
  • update background selection UI

Security Checklist (required)

  • External inputs are validated & sanitized on client and/or server where applicable.
  • API responses are validated; unexpected shapes are handled safely (fallbacks or errors).
  • No unsafe HTML is rendered; if unavoidable, sanitization is applied and documented where it happens.
  • Injection risks (XSS/SQL/command) are prevented via safe APIs and/or escaping.

Accessibility (required)

Standards Acknowledgement (required)


Screenshots or demo (if the user interface changed)

Notes for reviewers

  • Trade-offs:
  • Follow-ups (linked issues):
  • Linked PRs (e.g. web-packages):

Adam Low and others added 30 commits January 7, 2026 09:32
- Add onMetrics callback option to StartOptions
- Track rolling averages for total, segmentation, and GPU time
- Report metrics for both worker and main pipelines
- Display metrics in demo UI with utilization and tier info
- Fix background source handling for canvas2d pipeline using optional chaining
- Add metrics tracking for canvas2d rendering time
- Reduce blurDownsampleScale from 0.5 to 0.25 for tiers A and B
- Fix mask ImageData normalization to properly handle alpha channel
- Add computeBlurRadius() function for dynamic blur radius calculation
  - Blur radius now scales with blurStrength (0-1) instead of fixed per tier
  - Supports tier scaling and downsampling compensation
  - Clamps to MAX_SHADER_RADIUS (16)

- Increase blur shader MAX_RADIUS from 8 to 16 pixels
  - Update gaussianBlurH.frag and gaussianBlurV.frag
  - Allows for stronger blur effects

- Improve blur quality for tier A
  - Increase blurDownsampleScale from 0.25 to 0.5 (better quality)
  - Increase segmentationHeight from 144 to 256 (better mask quality)

- Enhance quality controller stability
  - Increase hysteresis from 30 to 60 frames
  - Add downgrade confirmation (10 consecutive over-budget frames)
  - Add warm-up period (90 samples) before allowing downgrades
  - Implement maxTier cap to prevent re-upgrade to tier A after issues
  - Adjust thresholds: upgrade 50% (was 60%), downgrade 100% (was 85%)
  - Add debug logging in non-production mode

- Make segmenter initialization non-blocking in worker
  - Prevent concurrent initialization attempts
  - Use promise pattern to avoid blocking frame processing
  - Add segmenterInitPromise state tracking

- Ensure blur consistency across pipelines
  - Canvas2DPipeline now uses computeBlurRadius() like WebGL
  - Both pipelines use same calculation logic

- Update demo defaults (virtual mode, auto quality)

Fixes weak blur visibility issue where blur was barely noticeable even
at maximum settings. Blur now scales smoothly with blurStrength parameter.
- Implement debt-based downgrade system
  - Accumulates over-budget debt instead of requiring consecutive frames
  - Debt recovery when performance improves
  - More stable and predictable tier transitions

- Add EWMA (Exponentially Weighted Moving Average) smoothing
  - Smoother performance measurements
  - Reduces noise in tier decision making
  - Tracks separate EWMA for total, segmentation, and GPU time

- Add severe downgrade detection
  - Fast downgrade when severely over budget (2x threshold)
  - Separate confirmation and warmup requirements
  - Prevents severe performance degradation

- Implement upgrade failure tracking
  - Tracks failed upgrade attempts
  - Caps upgrades after repeated failures
  - Prevents oscillation between tiers

- Refactor to ring buffer for sample storage
  - More efficient O(1) sample insertion
  - Maintains running totals for fast averaging
  - Better memory usage patterns

- Extract modules for better organization
  - quality/tuning.ts: All tuning constants in one place
  - quality/samples.ts: Performance sample types
  - Better separation of concerns

- Enhance metrics system
  - MetricsWindow interface with ring buffer
  - createMetricsWindow and resetMetricsWindow helpers
  - More efficient sample management

- Improve quality resolution
  - Better handling of passthrough mode
  - resolveQualityTierForEffectMode for mode-aware resolution
  - effectModeToProcessingMode helper function

- Enhance pipeline initialization
  - Conditional segmenter initialization (skip for tier D/passthrough)
  - Better error handling and state management
  - Use new metrics window API

- Add comprehensive documentation
  - JSDoc comments throughout quality modules
  - Better parameter descriptions
  - Clearer function documentation

- Update tests for new behavior
  - Tests for debt-based system
  - Tests for EWMA smoothing
  - Tests for severe downgrade detection

This refactoring significantly improves the stability and predictability
of the quality controller while maintaining backward compatibility.
- Document current status as production-ready code in real-world testing phase
- Explain limited release to Edge and Internal builds only
- Highlight areas requiring validation: capability detection, quality controller, performance
- Note known areas for future improvement: segmentation and overlay quality
- Move BackgroundEffects directory from src/script/repositories/media/ to apps/webapp/src/script/repositories/media/
- Update component imports and references
- Update webpack configuration
- Remove old BackgroundEffects location
- Remove VideoBackgroundBlur.ts (replaced by BackgroundEffects system)
- Add mediapipe model to .gitignore
- Update config files for BackgroundEffects
- Update GroupVideoGrid and VideoControls components
- Enhance CallingRepository and Participant for background effects
- Update BackgroundEffects quality definitions and capability policy
- Add comprehensive pipeline implementations (Canvas2D, MainWebGL, Passthrough, WorkerWebGL)
- Enhance BackgroundEffectsController with additional functionality
- Update pipeline types and interfaces
- Add background images assets
- Remove selfie_segmenter.tflite model file
- Update i18n strings for background effects
- Improve context loss handling in worker
- Update README with pipeline documentation
- Tier B: increase blurDownsampleScale (0.25 -> 0.5), bilateralRadius (4 -> 5), bilateralSpatialSigma (3.0 -> 3.5)
- Tier C: increase segmentationCadence (2 -> 3), decrease maskRefineScale (0.5 -> 0.4)
- Update README to reflect quality tier adjustments
- Add comprehensive WebGL renderer implementation (BackgroundRenderer, RenderPasses, ShaderPrograms, WebGLResources)
- Enhance mask post-processing and segmentation capabilities
- Improve worker frame processing and context loss handling
- Add shared utilities for mask and timestamp management
- Enhance FrameSource with additional functionality
- Update Canvas2D and WorkerWebGL pipelines
- Remove old background image assets
- Update i18n strings and README documentation
…ove effect handling to global scope

      Background effects are no longer attached to the self participant.
      Effect management is now handled globally and the BackgroundEffectsController
      is implemented as a singleton to centralize lifecycle and state handling.
@zskhan zskhan marked this pull request as ready for review March 26, 2026 16:36
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud bot commented Apr 2, 2026

@zskhan zskhan enabled auto-merge April 2, 2026 10:31
@zskhan zskhan added this pull request to the merge queue Apr 2, 2026
Merged via the queue into dev with commit 1566f4e Apr 2, 2026
85 checks passed
@zskhan zskhan deleted the feat/background-effects-WPB-23253 branch April 2, 2026 10:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants