mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2026-04-05 06:57:24 +02:00
42 lines
1.9 KiB
Markdown
42 lines
1.9 KiB
Markdown
---
|
|
stepsCompleted: [1, 2]
|
|
inputDocuments:
|
|
- "_bmad-output/planning-artifacts/research/technical-WebGL-SVG-layered-rendering-research-2026-03-12.md"
|
|
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: "Progressive Technique Flow"
|
|
techniques_used: []
|
|
ideas_generated: []
|
|
context_file: "_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.
|
|
|
|
---
|