# De7 Webgl Fallbacks

> Track 7 rail — WebGL fallbacks and adaptive quality. Device capability detection and tiering (high/medium/low/static), the quality knobs ranked by cost-effectiveness (pixel ratio first), runtime FPS-monitored degradation, designed static-tier and loading-state choreography, prefers-reduced-motion handling, and WebGL context-loss recovery. Use whenever a 3D/animated experience must work on low-end…

- **Type:** Skill
- **Install:** `agentstack add skill-rakibulism-agent-skills-os-de7-webgl-fallbacks`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [rakibulism](https://agentstack.voostack.com/s/rakibulism)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [rakibulism](https://github.com/rakibulism)
- **Source:** https://github.com/rakibulism/agent-skills-os/tree/main/skills/de7-webgl-fallbacks
- **Website:** https://agent-skills-os.vercel.app

## Install

```sh
agentstack add skill-rakibulism-agent-skills-os-de7-webgl-fallbacks
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# WebGL Fallbacks & Adaptive Quality

Tier the experience — same design intent at every tier. The low tier is a designed artifact, never an apology page.

## 1. Capability Detection at Boot

Classify **high / medium / low / static** from:
- WebGL2 support; `MAX_TEXTURE_SIZE`; unmasked renderer string (`WEBGL_debug_renderer_info`) for known-weak GPU patterns
- `navigator.hardwareConcurrency`, `navigator.deviceMemory`, connection type
- `prefers-reduced-motion` → static tier (or opacity-only transitions) automatically

## 2. Quality Knobs — ranked by visual cost-effectiveness

1. **Renderer pixel ratio — the single biggest lever:** `renderer.setPixelRatio(Math.min(devicePixelRatio, tier === 'high' ? 2 : 1))`. Dropping 2→1 quarters the fragment work; most users can't tell on motion-heavy scenes.
2. Postprocessing off (bloom/DOF/SSAO are the most expensive per-pixel items).
3. Particle counts ÷ 4; raymarch iterations ÷ 2 (de3-glsl-shaders); shadow maps → baked (de3-asset-pipeline) or off.
4. Smaller texture set / mip bias; simpler materials (standard → lambert) as a last resort.

## 3. Runtime Adaptive Degradation

Don't trust the boot classification alone — monitor and react:
```js
// rolling FPS average in the render loop
if (avgFPS  58 for 10s) cautiouslyStepUp();
```
drei's `` implements exactly this for R3F. Never let users watch a slideshow out of pride — degrade live.

## 4. The Static Tier — designed, not apologetic

A high-quality rendered still or short video of the scene, same layout, same copy — indistinguishable in screenshots from the live version. This is also the poster in the LCP strategy (de7-core-web-vitals), so it exists anyway. `prefers-reduced-motion` users land here by default.

## 5. Loading States Are Choreography

- Branded progress tied to **real** asset loading (`THREE.LoadingManager` / drei `useProgress`) — never an indefinite spinner.
- Reveal with a designed transition (fade/wipe from poster to canvas), dimensions matched exactly (CLS — de7-core-web-vitals).
- Grace period: if load exceeds ~4s on the detected connection, stay on the static tier and offer the full experience as an opt-in.

## 6. Context Loss Is Not Optional

Mobile GPUs evict contexts routinely (backgrounding, memory pressure):
```js
canvas.addEventListener('webglcontextlost', e => { e.preventDefault(); pauseLoop(); });
canvas.addEventListener('webglcontextrestored', () => { reinitScene(); resumeLoop(); });
```
Report loss events with GPU info to telemetry (de8-telemetry) — a device class losing contexts constantly means the tiering misclassifies it.

## Ship Test
Actually run the low tier and reduced-motion mode before launch — on a real cheap Android, not a resized desktop window.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [rakibulism](https://github.com/rakibulism)
- **Source:** [rakibulism/agent-skills-os](https://github.com/rakibulism/agent-skills-os)
- **License:** MIT
- **Homepage:** https://agent-skills-os.vercel.app

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-rakibulism-agent-skills-os-de7-webgl-fallbacks
- Seller: https://agentstack.voostack.com/s/rakibulism
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.