Skip to content

Relief webgl renderer#1352

Open
Azgaar wants to merge 43 commits intomasterfrom
relief-webgl-renderer
Open

Relief webgl renderer#1352
Azgaar wants to merge 43 commits intomasterfrom
relief-webgl-renderer

Conversation

@Azgaar
Copy link
Copy Markdown
Owner

@Azgaar Azgaar commented Mar 10, 2026

Description

Azgaar added 7 commits March 9, 2026 02:47
- Migrate relief icon rendering from SVG to WebGL for improved performance.
- Introduce a new relief generator module to handle relief icon creation.
- Update event listeners in relief editor to use a consistent `byId` method.
- Synchronize relief data with the current SVG DOM when exiting edit mode.
- Enhance relief icon management by integrating new utility functions for generating and resolving relief icons.
- Clean up legacy code and improve overall structure for better maintainability.
@Azgaar Azgaar self-assigned this Mar 10, 2026
Copilot AI review requested due to automatic review settings March 10, 2026 21:58
@netlify
Copy link
Copy Markdown

netlify bot commented Mar 10, 2026

Deploy Preview for afmg ready!

Name Link
🔨 Latest commit 73d6d66
🔍 Latest deploy log https://app.netlify.com/projects/afmg/deploys/69c5604ab7f7c3000713196d
😎 Deploy Preview https://deploy-preview-1352--afmg.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR introduces a new relief-icon pipeline that renders relief icons via a Three.js WebGL canvas (embedded into the SVG via foreignObject), while also adding a TS-side relief icon generator and migration/saving helpers to keep legacy .map compatibility.

Changes:

  • Add WebGL relief rendering (Three.js) + sprite atlas textures, with fallback SVG <use> rendering for editing.
  • Introduce generateRelief() (and pack.relief) to store relief icon placement data separate from the DOM, plus save/load migration helpers.
  • Add relief config/sprite atlas tooling and wire relief redraws into UI (style changes, zoom rerender, editor entry point).

Reviewed changes

Copilot reviewed 22 out of 27 changed files in this pull request and generated 9 comments.

Show a summary per file
File Description
src/renderers/draw-relief-icons.ts Replaces SVG-only relief drawing with WebGL renderer + migration/save hooks
src/modules/relief-generator.ts New relief icon placement generator that populates pack.relief
src/config/relief-config.ts Canonical relief symbol lists + variant mappings
src/types/PackedGraph.ts Adds relief to packed map data type
public/modules/ui/layers.js Switch relief toggle to drawRelief / undrawRelief
public/modules/ui/relief-editor.js Switch editor to SVG mode for editing and sync edits back into pack.relief
public/modules/io/load.js Adds migration call from legacy <use> relief into pack.relief
public/modules/io/save.js, public/modules/io/export.js Inject/remove <use> elements around serialization so relief data is preserved
public/modules/ui/tools.js, public/modules/ui/style.js, public/modules/ui/biomes-editor.js Update relief regeneration/redraw triggers
scripts/generate-relief-atlases.js Adds Playwright-based atlas generator
public/images/relief/*.png Adds atlas textures for WebGL sprite rendering
package.json, package-lock.json Adds three (+ types) dependencies
src/utils/graphUtils.ts, src/types/global.ts, .gitignore, public/index.css, src/modules/index.ts Supporting typing/formatting/wiring changes

@Azgaar Azgaar marked this pull request as ready for review March 10, 2026 23:34
Azgaar and others added 15 commits March 11, 2026 00:51
…functional requirements for WebGL layer framework
…Map-Generator

- Created sprint-status.yaml to track development status of epics and stories.
- Added epics.md detailing the breakdown of functional and non-functional requirements for the project.
- Introduced implementation-readiness-report-2026-03-12.md summarizing document inventory, PRD analysis, epic coverage validation, UX alignment assessment, and overall readiness status.
…uding init, resize observation, and D3 zoom subscription
…ework

- Implemented registration of draw-relief-icons with WebGL2LayerFramework, removing module-level renderer state.
- Updated drawRelief, undrawRelief, and rerenderReliefIcons functions to utilize framework methods.
- Ensured SVG fallback path is preserved and functional.
- Added performance criteria for rendering relief icons.
- Created tests to verify fallback integration and visual parity with existing SVG output.

test: Add WebGL2 fallback integration verification

- Introduced new tests for WebGL2LayerFramework to ensure no-ops when fallback is active.
- Verified that drawRelief routes to SVG when WebGL2 is unavailable.
- Confirmed visual parity between SVG output and existing implementation.
- Ensured all tests pass with updated coverage metrics.
Azgaar added 19 commits March 12, 2026 15:04
…work

- Removed global renderer, camera, and scene management in favor of layer framework integration.
- Implemented terrain layer registration with setup, render, and dispose methods.
- Enhanced texture loading and caching mechanisms.
- Updated geometry building to return Mesh objects directly.
- Added performance benchmarking story for render performance validation.
- Created bundle size audit story to ensure effective tree-shaking and size constraints.
- Mark Epic 2 as done and update related stories to reflect completion.
- Add Epic 2 retrospective document detailing team performance, metrics, and insights.
- Enhance draw-relief-icons.ts to include parentEl parameter in drawRelief function.
- Introduce performance measurement scripts for WebGL and SVG rendering comparisons.
- Add benchmarks for geometry building in draw-relief-icons.
- Removed the webgl-layer-framework module and its associated tests.
- Introduced a new webgl-layer module to handle WebGL2 layer management.
- Updated references throughout the codebase to use the new webgl-layer module.
- Adjusted layer registration and rendering logic to align with the new structure.
- Ensured compatibility with existing functionality while improving modularity.
…d rendering

refactor: Streamline WebGL2LayerClass methods and remove unused code
refactor: Consolidate relief icon rendering logic and remove benchmarks
…ed Host

- Added documentation for Story 1.6 outlining the requirements and acceptance criteria for migrating shared defs-backed resources to a dedicated host.
- Updated sprint status to reflect the readiness of Story 1.6 for development.
- Created epics document detailing the breakdown of the Fantasy-Map-Generator project, including functional and non-functional requirements.
- Added implementation readiness report assessing the current state of documentation and readiness for the project.
- Introduced end-to-end tests for scene bootstrap to ensure runtime hosts are created and reused correctly.
- Added compatibility lookups for legacy single-SVG callers to ensure existing workflows function during migration to new architecture.
- Implemented `getLayerSvg`, `getLayerSurface`, and `queryMap` functions as stable globals.
- Migrated relevant code in `draw-state-labels.ts` to utilize the new `queryMap` function for scene-aware lookups.
- Updated `layers.js` to manage layer visibility and registration more effectively.
- Introduced `LayersModule` to handle layer registration, visibility, and ordering.
- Created `WebGLSurfaceLayer` and `SvgLayer` classes to encapsulate layer behavior.
- Refactored `TextureAtlasLayer` to utilize the new layer management system.
- Updated HTML structure to accommodate new SVG and canvas elements.
- Ensured all TypeScript checks pass with zero errors on modified files.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants