replit/timmy-tower
2
0
Fork 0
Code Issues 26 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

[Matrix] WebGL Context Loss Recovery #63

New Issue
Closed
opened 2026-03-21 00:45:18 +00:00 by replit · 1 comment
replit commented 2026-03-21 00:45:18 +00:00
Owner
Copy Link

What & Why

On iPad and low-memory devices, iOS can silently kill the WebGL context while the app is backgrounded. When the app returns to the foreground the scene is blank and never recovers without a manual reload. This is a poor user experience for a home-screen PWA.

Done looks like

  • When the WebGL context is lost, a recovery overlay appears with a short message and Matrix green styling
  • The animation loop stops cleanly on context loss
  • When the context is restored, the full scene reinitialises automatically — no manual reload required
  • WebSocket reconnection is unaffected (WS is independent)
  • Works on iOS Safari 17+ and Chrome for Android

Out of scope

  • Context loss simulation tooling (manual iPad test is sufficient)
  • WebSocket reconnection changes

Tasks

  1. Dispose method on MatrixWorld — Add a dispose() method to the MatrixWorld class that calls dispose() on all subsystems (world, agents, effects, renderer) and removes all event listeners. This is the clean teardown path needed before re-init.
  2. Context loss listener — In _init(), add a webglcontextlost listener on the canvas element. Call event.preventDefault() (required by WebGL spec), stop the animation loop via flag, show recovery overlay.
  3. Context restored listener — Add webglcontextrestored listener: call this.dispose(), re-run this._init(), hide recovery overlay.
  4. Recovery overlay — Add minimal overlay element to index.html (hidden by default, shown during context loss) with short message and Matrix green styling.

Relevant files

  • the-matrix/js/main.js
  • the-matrix/index.html
  • the-matrix/style.css
## What & Why On iPad and low-memory devices, iOS can silently kill the WebGL context while the app is backgrounded. When the app returns to the foreground the scene is blank and never recovers without a manual reload. This is a poor user experience for a home-screen PWA. ## Done looks like - When the WebGL context is lost, a recovery overlay appears with a short message and Matrix green styling - The animation loop stops cleanly on context loss - When the context is restored, the full scene reinitialises automatically — no manual reload required - WebSocket reconnection is unaffected (WS is independent) - Works on iOS Safari 17+ and Chrome for Android ## Out of scope - Context loss simulation tooling (manual iPad test is sufficient) - WebSocket reconnection changes ## Tasks 1. **Dispose method on MatrixWorld** — Add a `dispose()` method to the `MatrixWorld` class that calls `dispose()` on all subsystems (world, agents, effects, renderer) and removes all event listeners. This is the clean teardown path needed before re-init. 2. **Context loss listener** — In `_init()`, add a `webglcontextlost` listener on the canvas element. Call `event.preventDefault()` (required by WebGL spec), stop the animation loop via flag, show recovery overlay. 3. **Context restored listener** — Add `webglcontextrestored` listener: call `this.dispose()`, re-run `this._init()`, hide recovery overlay. 4. **Recovery overlay** — Add minimal overlay element to `index.html` (hidden by default, shown during context loss) with short message and Matrix green styling. ## Relevant files - `the-matrix/js/main.js` - `the-matrix/index.html` - `the-matrix/style.css`
replit added the frontend label 2026-03-21 00:45:18 +00:00
claude was assigned by Rockachopa 2026-03-22 23:37:10 +00:00
claude commented 2026-03-23 20:01:54 +00:00
Collaborator
Copy Link

PR created: http://143.198.27.163:3000/replit/timmy-tower/pulls/84

The WebGL context loss recovery was already implemented in main.js and index.html (context loss/restored listeners, animation-loop stop, full teardown/reinit, agent-state snapshot preservation). The one gap was the recovery overlay text using blue (#5577aa) instead of Matrix green — fixed to #22aa66 with matching text-shadow glow.

PR created: http://143.198.27.163:3000/replit/timmy-tower/pulls/84 The WebGL context loss recovery was already implemented in `main.js` and `index.html` (context loss/restored listeners, animation-loop stop, full teardown/reinit, agent-state snapshot preservation). The one gap was the recovery overlay text using blue (`#5577aa`) instead of Matrix green — fixed to `#22aa66` with matching text-shadow glow.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
ai
backend
frontend
lightning
mobile
mobile
nostr
workshop
No Label frontend
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claude gemini replit
No Assignees claude
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: replit/timmy-tower#63
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?