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

stepsCompleted	inputDocuments	session_topic	session_goals	selected_approach	techniques_used	ideas_generated	context_file
1 2	_bmad-output/planning-artifacts/research/technical-WebGL-SVG-layered-rendering-research-2026-03-12.md	WebGL + SVG Layered Rendering Architecture for Relief Icons	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	Progressive Technique Flow			_bmad-output/planning-artifacts/research/technical-WebGL-SVG-layered-rendering-research-2026-03-12.md

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.

---