bmad-init

_bmad-output/brainstorming/brainstorming-session-2026-03-12-001.md

@@ -0,0 +1,41 @@
+---
+stepsCompleted: [1]
+inputDocuments: []
+session_topic: "WebGL + SVG Layered Rendering Architecture for Relief Icons"
+session_goals: "Explore all viable approaches for achieving correct layer ordering when mixing WebGL (Three.js) and SVG rendering for the relief icons layer; specifically evaluate and expand on the multi-SVG/multi-DOM-element architecture; surface edge cases, risks, and non-obvious possibilities"
+selected_approach: "AI-Recommended"
+techniques_used: []
+ideas_generated: []
+context_file: ""
+---
+
+# Brainstorming Session — WebGL Relief Icons Rendering Architecture
+
+**User:** Azgaar
+**Date:** 2026-03-12
+**Project:** Fantasy-Map-Generator
+
+---
+
+## Session Overview
+
+**Topic:** WebGL + SVG Layered Rendering Architecture — Relief Icons
+
+**Goals:**
+
+- Explore all viable approaches for mixing WebGL (Three.js) and SVG while preserving correct layer ordering
+- Thoroughly evaluate the "split into multiple DOM elements, one per layer" proposal
+- Surface edge cases, risks, performance characteristics, and non-obvious alternatives
+- Push the idea space far past the obvious before organizing
+
+### Core Problem Statement
+
+The relief icons layer is currently SVG. The proposed change renders it via Three.js WebGL for performance. Three approaches have been considered:
+
+1. **Canvas beside the SVG** — loses all layer interleaving (layers can't be placed between each other)
+2. **WebGL inside `<foreignObject>`** — correct layering, but catastrophically slow (FBO composite on every frame)
+3. **Split SVG into multiple DOM elements (1 per layer)** — some layers canvas/WebGL, some SVG, each independently moveable in the DOM to reconstruct layer order
+
+The user needs to explore Option 3 deeply and discover any other viable approaches.
+
+---