Implement an interactive 3D gamut visualization that renders the printer profile's colour volume in CIELAB space using WebGL within the Tauri webview. Provide reference gamut overlays for comparison.
Toolchain Context
Frontend: WebGL via Three.js (loaded from CDN or bundled) in Tauri webview
Data source: Gamut boundary extracted from the generated .icc profile using ArgyllCMS iccgamut or parsed directly
Implementation Plan
Gamut Data Extraction (Rust Backend)
New Tauri commandcommands::extract_gamut(app, state, icc_path):
Spawn ArgyllCMS iccgamut (or viewgam) to compute gamut boundary from the ICC profile
Parse the output .gam CGATS file to extract Lab* vertex coordinates
Return as JSON array of [L, a, b] triplets
Reference gamuts: Bundle pre-computed .gam files for sRGB and Adobe RGB in the argyll/ resources directory.
Frontend (JavaScript / WebGL)
Three.js scene (src/js/gamut_viewer.js):
Create a WebGL canvas in the Stage 5 panel (below the report card)
Render gamut boundary as a translucent 3D mesh using Delaunay triangulation on the Lab* point cloud
Map L* to Y axis, a* to X axis, b* to Z axis
Add reference gamut overlays (sRGB as wireframe, Adobe RGB as second wireframe) in contrasting colours
### Description
Implement an interactive 3D gamut visualization that renders the printer profile's colour volume in CIELAB space using WebGL within the Tauri webview. Provide reference gamut overlays for comparison.
### Toolchain Context
- **Frontend**: WebGL via Three.js (loaded from CDN or bundled) in Tauri webview
- **Data source**: Gamut boundary extracted from the generated `.icc` profile using ArgyllCMS `iccgamut` or parsed directly
### Implementation Plan
#### Gamut Data Extraction (Rust Backend)
1. **New Tauri command** `commands::extract_gamut(app, state, icc_path)`:
- Spawn ArgyllCMS `iccgamut` (or `viewgam`) to compute gamut boundary from the ICC profile
- Parse the output `.gam` CGATS file to extract L*a*b* vertex coordinates
- Return as JSON array of `[L, a, b]` triplets
2. **Reference gamuts**: Bundle pre-computed `.gam` files for sRGB and Adobe RGB in the `argyll/` resources directory.
#### Frontend (JavaScript / WebGL)
1. **Three.js scene** (`src/js/gamut_viewer.js`):
- Create a WebGL canvas in the Stage 5 panel (below the report card)
- Render gamut boundary as a translucent 3D mesh using Delaunay triangulation on the L*a*b* point cloud
- Map L* to Y axis, a* to X axis, b* to Z axis
- Add reference gamut overlays (sRGB as wireframe, Adobe RGB as second wireframe) in contrasting colours
2. **Interactivity**:
- OrbitControls for mouse/touch rotation, zoom, pan
- Toggle buttons: show/hide printer gamut, sRGB overlay, AdobeRGB overlay
- L* axis label markers at 0, 25, 50, 75, 100
3. **Performance**: Use instanced geometry or BufferGeometry for large point sets. Target 60fps for gamuts up to 10,000 vertices.
#### New/Modified Files
- `[MODIFY]` `src-tauri/src/commands.rs` — add `extract_gamut` command
- `[NEW]` `src/js/gamut_viewer.js` — Three.js 3D viewer
- `[NEW]` `argyll/reference_gamuts/sRGB.gam` — pre-computed sRGB gamut boundary
- `[NEW]` `argyll/reference_gamuts/AdobeRGB.gam` — pre-computed Adobe RGB gamut boundary
- `[MODIFY]` `src/index.html` — WebGL canvas container in Stage 5
- `[MODIFY]` `src/styles/main.css` — canvas sizing, toggle button styles
### Acceptance Criteria
- [ ] 3D gamut mesh renders from ICC profile data
- [ ] sRGB and Adobe RGB reference overlays displayed as toggleable wireframes
- [ ] Smooth orbit/zoom/pan controls at 60fps
- [ ] L*a*b* axis labels and orientation indicators
- [ ] Responsive canvas sizing within the Tauri window
- [ ] Graceful fallback if WebGL is unavailable
### References
- [README.md §8 — 3D Gamut Visualisation](README.md#8-display-of-results--verification)
gronod
added this to the Milestone 5: Advanced Visualisations & Packaging milestone 2026-08-21 10:29:35 +01:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Description
Implement an interactive 3D gamut visualization that renders the printer profile's colour volume in CIELAB space using WebGL within the Tauri webview. Provide reference gamut overlays for comparison.
Toolchain Context
.iccprofile using ArgyllCMSiccgamutor parsed directlyImplementation Plan
Gamut Data Extraction (Rust Backend)
commands::extract_gamut(app, state, icc_path):iccgamut(orviewgam) to compute gamut boundary from the ICC profile.gamCGATS file to extract Lab* vertex coordinates[L, a, b]triplets.gamfiles for sRGB and Adobe RGB in theargyll/resources directory.Frontend (JavaScript / WebGL)
src/js/gamut_viewer.js):New/Modified Files
[MODIFY]src-tauri/src/commands.rs— addextract_gamutcommand[NEW]src/js/gamut_viewer.js— Three.js 3D viewer[NEW]argyll/reference_gamuts/sRGB.gam— pre-computed sRGB gamut boundary[NEW]argyll/reference_gamuts/AdobeRGB.gam— pre-computed Adobe RGB gamut boundary[MODIFY]src/index.html— WebGL canvas container in Stage 5[MODIFY]src/styles/main.css— canvas sizing, toggle button stylesAcceptance Criteria
References