WebGL vs Canvas transparency notes (xterm.js + backgrounds)

gistfile0.txt

# WebGL vs Canvas Transparency Notes

## Problem
WebGL doesn't play nice with transparent backgrounds and CSS glassmorphic effects.

## Solution (from Opustrator)

Use a **hybrid approach**:

1. **Canvas 2D** for animated background effects (supports transparency natively)
2. **xterm with rgba background** - semi-transparent so canvas shows through
3. **WebGL addon** optional for terminal text rendering (can disable for TUI tools)

## Key Pattern

Set rgba backgrounds in xterm theme:

```typescript
xterm: {
  background: "rgba(10, 10, 15, 0.85)", // 85% opaque, shows through
  foreground: "#d4d4d4",
  // ...
}
```

## Opustrator Reference

- `frontend/src/styles/terminal-themes.ts` - All themes use `rgba(..., 0.85)` backgrounds
- `frontend/src/components/Terminal.tsx` - WebGL addon loaded conditionally
- `frontend/src/backgrounds/effects/*.tsx` - All use Canvas 2D (`getContext("2d")`)

## For TabzChrome 3D Experiment

If WebGL backgrounds + transparency aren't working:
- Use Canvas 2D for the 3D scene background
- Keep xterm's WebGL addon for terminal text (or switch to canvas renderer)  
- Set `background: "rgba(...)"` in xterm theme for transparency

---
*Saved: 2025-12-17*