Viewport Refactoring

[zuhanit]

Overview

Refactor the viewport rendering engine from Canvas 2D API to Pixi.js to improve rendering performance and simplify scene management.

Motivation

The current Canvas 2D-based viewport has fundamental limitations for a map editor use case:

• No object model: Deleting or updating a single unit/tile requires redrawing the entire scene
• Manual hit-testing: Click/hover interactions on units require custom coordinate math
• No batching: Every drawImage() call is an individual CPU-driven draw operation
• Zoom artifacts: Tile boundary bleeding is difficult to eliminate with ctx.setTransform

Goals

• Replace Canvas 2D renderer in wengine with a Pixi.js-based renderer
• Implement terrain/tilemap layer using @pixi/tilemap for GPU-batched tile rendering
• Manage units as individual PIXI.Sprite objects within a dedicated Container layer
• Retain the existing wengine public interface so frontend components require minimal changes

Proposed Layer Structure

app.stage
├── terrainLayer   (Tilemap)           — @pixi/tilemap, GPU batched
├── unitLayer      (Container)         — individual Sprite per unit
└── uiLayer        (Container)         — selection markers, overlays

Expected Improvements

• Tile rendering: GPU batching via @pixi/tilemap reduces draw calls for large maps (up to 256×256 tiles)
• Unit add/remove: addChild / removeChild with no scene-wide redraw
• Unit selection: sprite.tint change only, no redraw
• Interaction: Built-in Pixi event system replaces manual hit-test logic
• Zoom quality: Precise texture filtering eliminates tile boundary artifacts

Out of Scope

• HTML DOM overlay elements (tooltips, panels) — unaffected
• Backend / map parsing logic — unaffected

References

• Pixi.js
• @pixi/tilemap