Mirrors/tinyusdz
0
0
Fork 0
mirror of https://github.com/lighttransport/tinyusdz.git synced 2026-01-18 01:11:17 +01:00
Code Issues Packages Projects Releases Wiki Activity
3,212 Commits 93 Branches 13 Tags
dev
Commit Graph

3212 Commits

This Branch
This Branch
All Branches
Author SHA1 Message Date
Syoyo Fujita
99109c75e4 Add LTE SpectralAPI example USDA files 
Example files demonstrating wavelength-dependent material and light properties:

- spectral-material.usda: Materials with wavelength:reflectance and wavelength:ior
  (red, glass, fused silica with Sellmeier, foliage, gold)

- spectral-light.usda: Light sources with wavelength:emission
  (D65, D50, A, F2 illuminant presets, custom LED, sodium lamp)

- spectral-scene.usda: Complete scene with diamond dispersion, water, copper
  under D65/D50 lighting

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-30 02:33:13 +09:00
Syoyo Fujita
b94d202097 Implement LTE SpectralAPI for wavelength-dependent material rendering 
Add spectral data support to TinyUSDZ core and Tydra rendering:

Core types (render-data.hh):
- SpectralData, SpectralIOR, SpectralEmission structs
- SpectralInterpolation enum (linear, held, cubic, sellmeier)
- IlluminantPreset enum (CIE A, D50, D65, E, F1, F2, F7, F11)
- Add spd_reflectance, spd_ior to PreviewSurfaceShader
- Add spd_reflectance, spd_ior, spd_emission to OpenPBRSurfaceShader

Raytracing support (raytracing-data.hh):
- Add spectral properties to RTMaterial with Sellmeier coefficients
- Add spectral emission to RTLight with illuminant presets

MaterialX JSON export (materialx-to-json.hh/cc):
- Add SpectralDataToJson, SpectralIORToJson, SpectralEmissionToJson
- Use spd_ prefix for MaterialX property names

Spectral properties are optional - only exported when data exists.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-29 22:06:05 +09:00
Syoyo Fujita
57972a8fec Add LTE SpectralAPI extension proposal for wavelength-dependent rendering 
Introduces spectral data support for USD with the wavelength: namespace:
- wavelength:reflectance for spectral material reflectance
- wavelength:ior for spectral index of refraction with Sellmeier support
- wavelength:emission for spectral light source SPD with CIE illuminant presets

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-29 08:06:37 +09:00
Syoyo Fujita
f2885be974 Add ColorSpace API support for OpenUSD color management 
Implements ColorSpace API infrastructure following OpenUSD color management specification:
- Define ColorSpace tokens and enums (18 canonical color spaces: linear, sRGB, gamma 2.2/1.8)
- Add ColorSpaceAPI schema with colorSpace:name attribute
- Utility functions: to_token(), from_token(), is_linear(), is_data()
- Default color space: Linear Rec.709 (lin_rec709_scene)

MaterialX JSON integration:
- Add colorspace metadata to MaterialX input serialization
- Omit colorspace field when value is default (lin_rec709_scene) for clean JSON output
- Access colorspace via MtlxElement::GetColorSpace() from extra_attributes

References:
- https://openusd.org/dev/user_guides/color_user_guide.html

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-29 03:46:04 +09:00
Syoyo Fujita
da8329e573 Add raytracing infrastructure to Tydra with quad and analytic primitive support 
Implements raytracing-optimized data structures and converter for Tydra:

- RTGeometry with multiple geometry types:
  * Triangle/Quad/Mixed meshes (ray-quad intersection, no tessellation)
  * Analytic primitives (Sphere, Cylinder, Capsule, Cone) with native ray intersection
- RaytracingScene container with validation and BVH support
- RaytracingSceneConverter framework (placeholder implementations)
- Primvars fetched at intersection time (no variability preprocessing)

Configuration options:
- allow_quads: Use ray-quad intersection to save tessellation cost
- convert_primitives_to_analytic: Direct ray intersection for geometric shapes

Test assets:
- ColorChecker Classic 24-patch in sRGB, linear sRGB, ACEScg, and spectral
- Chrome ball reference geometry with MaterialX metal shader

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-28 03:51:49 +09:00
Syoyo Fujita
b5d9565ab9 fix proper handling of emission_color + texture. 
improve materialx.js demo
 2025-11-25 11:37:22 +09:00
Syoyo Fujita
aa790cffe9 Update issue templates 2025-11-23 05:43:29 +09:00
Syoyo Fujita
62436df33c Bump MaterialX version from 1.38 to 1.39 for Blender 4.5+ compatibility 
Updated MaterialX version across codebase and documentation to 1.39,
which is the version supported by Blender 4.5+ MaterialX exports.

Changes:
- Updated JSON schema version in materialx-to-json.cc to "1.39"
- Updated documentation headers and examples in:
  - doc/materialx.md
  - doc/MATERIALX-SUPPORT-STATUS.md
- Added "(Blender 4.5+ compatible)" notes throughout documentation
- Updated version compatibility section to list 1.39 as primary,
  with 1.36-1.38 as legacy versions

This ensures seamless compatibility with MaterialX files exported
from Blender 4.5 and later versions, while maintaining backward
compatibility with older MaterialX 1.38 files.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-22 01:16:45 +09:00
Syoyo Fujita
5d7d251917 Add MaterialX NodeGraph to JSON conversion infrastructure 
This commit adds the foundation for converting MaterialX node-based
shading networks to JSON format, enabling reconstruction in
JavaScript/WebAssembly environments like Three.js.

Changes:
- Added `nodeGraphJson` member to `OpenPBRSurfaceShader` class to store
  MaterialX node graph data as JSON string
- Created new MaterialX-to-JSON converter module (materialx-to-json.hh/cc)
  implementing `ConvertMtlxNodeGraphToJson()` for MaterialX DOM structures
- Added helper functions for JSON string escaping and array serialization
- Integrated converter hooks in RenderSceneConverter (currently disabled
  pending proper Prim API implementation)
- JSON schema follows MaterialX 1.38 XML structure for compatibility
- Includes stub functions for USD Prim-based conversion (to be implemented)

The JSON output includes:
- MaterialX version info
- Node graph structure with nodes, inputs, outputs
- Node connections and parameter values
- Compatible with Blender 4.5+ MaterialX exports

Native build tested and passing. WASM build in progress.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 23:56:39 +09:00
Syoyo Fujita
5a1bbe4987 Add MaterialX NodeGraph to JSON converter for node-based shading reconstruction 
Implements MaterialX node graph serialization to JSON format for easy
reconstruction of node-based shaders in JavaScript/WebAssembly (Three.js, etc.)

New Features:
- nodeGraphJson member added to OpenPBRSurfaceShader class in render-data.hh
- Stores complete MaterialX node graph as JSON string
- Schema follows MaterialX XML structure for compatibility
- Empty string when no node graph exists (direct parameter values only)

New Files:
- src/tydra/materialx-to-json.hh - Header with converter API
- src/tydra/materialx-to-json.cc - Implementation

JSON Schema Design:
{
  "version": "1.38",  // MaterialX version
  "nodegraph": {
    "name": "NG_shader1",
    "nodes": [          // Array of nodes (image, multiply, mix, etc.)
      {
        "name": "image1",
        "category": "image",
        "type": "color3",
        "inputs": [...],
        "outputs": [...]
      }
    ],
    "outputs": [...]    // NodeGraph outputs
  },
  "connections": [      // Shader input connections
    {
      "input": "base_color",
      "nodegraph": "NG_shader1",
      "output": "base_color_output"
    }
  ]
}

Converter Functions:
- ConvertNodeGraphToJson() - Convert USD NodeGraph Prim to JSON
- ConvertShaderWithNodeGraphToJson() - Convert shader + nodegraphs
- ConvertMtlxNodeGraphToJson() - Convert MaterialX DOM NodeGraph
- Helper functions for JSON escaping and type conversion

Integration:
- ConvertOpenPBRSurfaceShader() now populates nodeGraphJson field
- Automatically detects and converts MaterialX node graph connections
- Works with both OpenPBRSurface and MtlxOpenPBRSurface
- Non-blocking: empty nodeGraphJson if no node graphs found

Benefits:
- Enables node-based shader reconstruction in Three.js
- Preserves complex MaterialX shading networks
- Easy to parse in JavaScript (native JSON support)
- Compatible with MaterialX XML schema
- No runtime overhead (conversion happens during USD load)

Use Cases:
- Three.js MaterialX node-based material system
- WASM shader graph visualization
- Material editor UIs
- Blender v4.5+ MaterialX export compatibility

CMake Integration:
- Added materialx-to-json.{cc,hh} to CMakeLists.txt build list

Implementation Details:
- Handles input connections (nodename + output references)
- Supports direct input values (float, color3, string, etc.)
- Proper JSON escaping for special characters
- Type-safe value conversion from USD attributes
- Works with MaterialXConfigAPI materials

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 21:05:21 +09:00
Syoyo Fujita
e9a9dcca1e Update issue templates 2025-11-21 08:08:45 +09:00
Syoyo Fujita
f3a75e5708 Update documentation - ALL PRIORITY 4 FEATURES COMPLETE (22/22 = 100%) 
Final status update:
- Priority 1: 9/9 (100%) ✅
- Priority 2: 4/4 (100%) ✅
- Priority 3: 4/4 (100%) ✅
- Priority 4: 5/5 (100%) ✅

Total: 22/22 features implemented (100%) 🎉✨🚀

Added Quick Start Guide sections for final 3 features:

## Material Gradient/Ramp Editor
- 10 gradient presets (Heatmap, Rainbow, Turbo, Sunset, Ocean, etc.)
- Apply to baseColor, emissive, roughness, metalness
- Texture width options: 64-1024 pixels
- Preview, generate, export as JSON
- Use cases: Procedural materials, gradient maps, data visualization

## Light Probe Visualizer
- 3 visualization modes: sphere, skybox, split
- Chrome ball preview with position/size controls
- Full 360° environment render
- Mip level visualization (0-10)
- Environment map analysis (type, resolution, format, HDR/LDR)
- Recommendations engine for optimal settings

## BRDF Visualizer
- Interactive 3D BRDF lobe visualization
- GGX microfacet model implementation
- Heatmap color coding (blue → red)
- View/light angle controls (0-90°)
- Material classification (metal/dielectric/mixed)
- Roughness interpretation (glossy/medium/rough/matte)
- Physical correctness validation

Commit history for Priority 4:
- a43a67e7: Interactive PBR Theory Guide
- 3ee1b64a: Texture Tiling Detector
- 83edfe33: Material Gradient/Ramp Editor
- 7c6a7c5b: Light Probe Visualizer
- 9aaf7153: BRDF Visualizer

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 04:16:12 +09:00
Syoyo Fujita
9aaf7153a7 Add BRDF Visualizer (Priority 4 feature #5 - FINAL) 
Implements interactive 3D BRDF (Bidirectional Reflectance Distribution Function) visualization:

New file: brdf-visualizer.js (433 lines)
- Real-time 3D lobe visualization of material reflection behavior
- GGX microfacet BRDF model implementation
- Configurable view and light angles (0-90 degrees)
- Heatmap color coding (blue=low, red=high intensity)
- Adjustable resolution (32×64, 64×128, 128×256 vertices)
- Floating overlay panel (top-right, 320×256px canvas)

BRDF Implementation:
- **GGX Normal Distribution**: D = α² / (π * ((NdotH)² * (α² - 1) + 1)²)
- **Geometry Term**: Smith's G with k = (roughness + 1)² / 8
- **Fresnel**: Schlick approximation F = F0 + (1 - F0) * (1 - VdotH)⁵
- **Specular**: (D * G * F) / (4 * NdotV * NdotL)
- **Diffuse**: (1 - metalness) * (1 - F) / π

Visualization features:
- 3D lobe shape represents reflection intensity by direction
- Lobe height/radius = reflection strength in that direction
- Lobe width = spread of reflections (controlled by roughness)
- Color mapping: Black → Blue → Cyan → Yellow → Red
- Supports metallic and dielectric materials

Material analysis:
- Metalness classification (metal vs dielectric vs mixed)
- Roughness interpretation (glossy, medium, rough, matte)
- Surface characteristic descriptions
- BRDF lobe characteristics
- Physically-based validation warnings

Display overlay:
- 256×256 pixel canvas with 3D BRDF lobe
- Real-time material properties display:
  - Roughness value
  - Metalness value
  - View angle (0-90°)
  - Light angle (0-90°)
  - Resolution settings

Interactive controls:
- View angle slider: Camera/view position relative to surface normal
- Light angle slider: Light source position relative to normal
- Resolution selector: Trade quality vs performance
- Update material: Refresh from selected object
- Analyze and log: Console output with details
- Export report: Markdown analysis file

Report generation:
- Material type classification (metal/dielectric/mixed)
- Surface characteristics based on roughness
- BRDF lobe interpretation guide
- Physical correctness warnings
- Visualization settings documentation

Integration:
- Added import to materialx.js (line 67)
- Added GUI folder with 7 controls (lines 4171-4284):
  - Enable/disable toggle
  - View angle slider (0-90°)
  - Light angle slider (0-90°)
  - Resolution selector (32, 64, 128)
  - Update from selected object
  - Analyze and log
  - Export report
- Added window export (line 6642)
- Added script tag to materialx.html (line 1303)

Use cases:
- Understand how roughness affects reflection spread
- Visualize metallic vs dielectric reflection behavior
- Debug material appearance issues
- Educational tool for PBR theory
- Validate material parameter ranges
- Compare BRDF shapes between materials

Technical notes:
- Uses simplified GGX model (not full path tracing)
- Renders to separate scene, composited to canvas
- Preserves main renderer state
- Dynamic geometry generation based on parameters
- Vertex coloring for heatmap visualization

Priority 4 Progress: 5/5 features complete (100%) ✅🎉

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 04:14:52 +09:00
Syoyo Fujita
7c6a7c5b12 Add Light Probe Visualizer (Priority 4 feature #4) 
Implements environment map inspection and IBL visualization:

New file: light-probe-visualizer.js (461 lines)
- Three visualization modes: sphere, skybox, split
- Reflective chrome sphere preview (fully metallic, variable roughness)
- Full skybox environment display (500-unit sphere, inside-out)
- Mip level visualization (show specific mip levels 0-10)
- Position control for preview sphere (X, Y, Z sliders)
- Size control for preview sphere (0.1-2.0 units)

Environment map analysis:
- Detects cubemap vs equirectangular
- Analyzes texture format (RGBA, RGB, etc.)
- Checks data type (UnsignedByte, Float, HalfFloat)
- Validates encoding (Linear vs sRGB)
- Identifies HDR vs LDR
- Counts mip levels (theoretical and stored)
- Reports filter settings (min/mag filter, wrapping)

Analysis features:
- Resolution detection (width×height, faces count)
- Format inspection (RGBA, RGB, Depth, etc.)
- Encoding validation (Linear, sRGB)
- Type detection (Float, HalfFloat for HDR)
- Mipmap analysis
- Filter/wrapping settings

Recommendations engine:
- Warning for LDR environment maps (suggests HDR)
- Alert for missing mipmaps when using mipmap filters
- Note for sRGB encoding (should be Linear for IBL)

Visualization options:
- Sphere mode: Chrome ball at custom position, shows reflections
- Skybox mode: Full environment render, supports mip level selection
- Split mode: Both sphere and skybox simultaneously

Integration:
- Added import to materialx.js (line 66)
- Added GUI folder with 10 controls (lines 4036-4168):
  - Enable/disable toggle
  - Visualization mode selector (sphere/skybox/split)
  - Sphere position controls (X, Y, Z)
  - Sphere size slider
  - Show mip levels toggle
  - Mip level selector (0-10)
  - Analyze environment map
  - Export report
- Added window export (line 6525)
- Added script tag to materialx.html (line 1302)

Use cases:
- Inspect environment map quality and settings
- Validate HDR vs LDR lighting
- Preview IBL contribution to materials
- Debug mipmap generation
- Check texture encoding and format
- Verify filter/wrapping settings

Priority 4 Progress: 4/5 features complete (80%)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 04:12:19 +09:00
Syoyo Fujita
83edfe3329 Add Material Gradient/Ramp Editor (Priority 4 feature #3) 
Implements procedural gradient generation and application system:

New file: gradient-ramp-editor.js (406 lines)
- 10 default gradient presets (Grayscale, Heatmap, Rainbow, Turbo, etc.)
- Custom gradient creation with color stops
- Linear interpolation between color stops
- Canvas-based texture generation (256x1, 512x1, etc.)
- Three.js texture integration

Gradient presets:
- **Color ramps**: Heatmap, Rainbow, Turbo, Sunset, Ocean, Forest
- **Value ramps**: Grayscale, Smooth to Rough, Inverted
- **Material presets**: Metal gradient

Features:
- Apply to material properties: baseColor, emissive, roughness, metalness
- Generate procedural textures from gradients
- Preview gradients in popup window (256x32 canvas)
- Export/Import gradients as JSON
- Gradient library management (add, delete, list)
- Report generation with markdown export
- Console logging for debugging

Application methods:
- applyToMaterial(): Apply gradient to existing material property
- createProceduralMaterial(): Create new material with gradient texture
- evaluateGradient(): Sample gradient at specific position (0.0-1.0)

Integration:
- Added import to materialx.js (line 65)
- Added GUI folder with 8 controls (lines 3914-4033):
  - Gradient selector (dropdown with 10 presets)
  - Target property selector (baseColor, emissive, roughness, metalness)
  - Texture width selector (64, 128, 256, 512, 1024)
  - Apply to selected object
  - Generate texture
  - Preview gradient
  - Export as JSON
  - Log all gradients
- Added window export (line 6389)
- Added script tag to materialx.html (line 1301)

Use cases:
- Procedural material creation without texture files
- Gradient-based roughness/metalness maps
- Custom color ramps for artistic effects
- Value mapping for data visualization

Priority 4 Progress: 3/5 features complete (60%)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 04:10:07 +09:00
Syoyo Fujita
bf103cbb05 Update documentation for Priority 4 progress (2/5 complete) 
Added Priority 4 tracking section:
- Interactive PBR Theory Guide (complete) - a43a67e7
- Texture Tiling Detector (complete) - 3ee1b64a
- Material Gradient/Ramp Editor (pending)
- Light Probe Visualizer (pending)
- BRDF Visualizer (pending)

Added Quick Start Guide sections:
- PBR Theory Guide: 11 educational topics with theory, ranges, tips, examples
- Texture Tiling Detector: Analysis features, scoring system, issue reporting

Progress Update:
- Total features: 19/22 (86%)
- Priority 4: 2/5 (40%)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 04:07:48 +09:00
Syoyo Fujita
3ee1b64ab4 Add Texture Tiling Detector (Priority 4 feature #2) 
Implements pattern detection and tiling artifact analysis for textures:

New file: texture-tiling-detector.js
- Edge seam detection: compares opposite texture edges for discontinuities
- Repetition pattern detection: block comparison at different offsets
  (horizontal, vertical, diagonal)
- Grid pattern detection: identifies regular vertical/horizontal lines
- Scene analysis: analyzes all textures (baseColor, normal, roughness, etc.)
- Scoring system: tiling score (0-1), seam score (0-1)
- Issue classification: high/medium/info severity levels
- Report generation: markdown export with recommendations

Analysis features:
- 32×32 block sampling for performance
- Simplified pattern matching (faster than FFT)
- Multi-texture type support (map, normalMap, roughnessMap, etc.)
- Threshold-based detection: tiling > 0.3, seams > 0.1
- Low resolution warnings (< 512×512)

Integration:
- Added import to materialx.js (line 64)
- Added GUI folder with enable/analyze/export controls (lines 3848-3911)
- Added window export (line 6266)
- Added script tag to materialx.html (line 1300)

Priority 4 Progress: 2/5 features complete (40%)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 04:06:29 +09:00
Syoyo Fujita
a43a67e74c Add Interactive PBR Theory Guide with educational tooltips 
- Created pbr-theory-guide.js with PBRTheoryGuide class
- Educational tooltips explaining PBR material properties

Content Database (11 topics):
  * Material Properties: Base Color, Metalness, Roughness, IOR
  * Advanced: Transmission, Clearcoat, Sheen
  * Textures: Normal Map, AO Map
  * Theory: Energy Conservation, Fresnel Effect

Each Topic Includes:
  - Title and description
  - Physical theory explanation
  - Typical value ranges
  - Practical tips (3-5 per topic)
  - Real-world examples with values
  - Common issues and mistakes

Example Content:
  - **Base Color**: Explains albedo, metal vs dielectric values, sRGB ranges
  - **Metalness**: Binary 0/1, colored reflections for metals
  - **Roughness**: Microfacet theory, mirror to rough spectrum
  - **IOR**: Fresnel F0 relationship, material-specific values
  - **Energy Conservation**: Cannot reflect more than received
  - **Fresnel**: Grazing angle reflections (fundamental physics)

UI Features:
  - Floating tooltip panel (bottom-left corner)
  - Topic dropdown (11 topics)
  - Enable/Disable toggle
  - Export Full Guide button (markdown format)
  - Styled with examples, tips, warnings

Display Information:
  - Description and theory
  - Typical ranges (categorized)
  - Tips (practical advice)
  - Examples (real materials with values)
  - Common issues (warnings in orange)

Use Cases:
  - Learn PBR fundamentals
  - Quick reference while authoring materials
  - Understand typical value ranges
  - Avoid common mistakes
  - Educational tool for students/artists

Priority 4 feature (1/5 complete)
 2025-11-21 03:40:17 +09:00
Syoyo Fujita
7cfea02e46 Update status: All Priority 3 features complete (100%) 
Priority 3 features completed (4/4):
- UV Layout Overlay (from Priority 1)
- Mip-Map Level Visualizer
- Reference Material Library (from Priority 2)
- Pixel Inspector (Magnifying Glass)
- Material Preset Save/Load

Total features: 17/17 (100%)
- Priority 1: 9/9 (100%)
- Priority 2: 4/4 (100%)
- Priority 3: 4/4 (100%)

Added comprehensive Quick Start Guide for Priority 3 features with:
- Mip-map visualizer usage and color legend
- Pixel inspector controls and display info
- Material preset save/load workflow
- Management and export/import instructions

All Priority 1-3 features are now complete! 🎉✨
 2025-11-21 03:32:04 +09:00
Syoyo Fujita
c25921e7d1 Add Material Preset Save/Load system for material reuse 
- Created material-preset.js with MaterialPresetManager class
- Save and load material parameters as JSON presets

Features:
  - Save current material as preset with name and category
  - Apply preset to selected material (one-click)
  - Delete presets
  - Export single preset as JSON file
  - Import preset from JSON file
  - Export all presets as library
  - Import multiple presets at once
  - View library report in console

Material Parameters Saved:
  - Type (MeshStandardMaterial, MeshPhysicalMaterial, etc.)
  - Color properties (color, emissive)
  - Scalar properties (metalness, roughness, emissiveIntensity, etc.)
  - Vector2 properties (normalScale)
  - Boolean properties (transparent, wireframe, fog, etc.)
  - Enum properties (side, blending, alphaTest)
  - Texture metadata (not actual texture data, just info)

Storage:
  - localStorage for persistence across sessions
  - JSON export/import for sharing
  - Organized by categories (Custom, Metal, Plastic, etc.)

GUI Integration:
  - Preset name input
  - Category dropdown (8 categories)
  - Save Current Material button
  - Select Preset dropdown (dynamically updated)
  - Apply to Selected button
  - Delete, Export, Import buttons
  - Export/Import All buttons
  - View Library button (console report)

Use Cases:
  - Reuse materials across projects
  - Build personal material library
  - Share materials with team
  - Standardize material look
  - Quick material application

Priority 3 feature (3/4 complete)
 2025-11-21 03:30:35 +09:00
Syoyo Fujita
1f572a7e78 Add Pixel Inspector (Magnifying Glass) for detailed pixel analysis 
- Created pixel-inspector.js with PixelInspector class
- Magnify area around cursor with configurable grid size

Features:
  - Real-time magnified view (3×3, 5×5, 7×7, 9×9 grids)
  - Pixelated rendering showing individual pixels
  - Center pixel highlighted in green
  - Crosshair cursor when enabled

Display Information:
  - Screen position (x, y)
  - RGB values (0-255)
  - Normalized RGB (0.0-1.0)
  - Hex color code
  - Material name and type
  - UV coordinates
  - PBR properties (base color, metalness, roughness)

Technical Implementation:
  - Reads pixels from framebuffer using gl.readPixels()
  - Raycasting for 3D object picking
  - Real-time updates on mouse move
  - Floating panel overlay (top-right corner)
  - Canvas with pixelated image-rendering

GUI Integration:
  - Enable/Disable toggle
  - Grid size dropdown (3×3 to 9×9)
  - Instructions shown in status bar

Use Cases:
  - Examine exact pixel colors
  - Compare neighboring pixels
  - Debug material blending
  - Identify discontinuities/artifacts
  - Inspect UV mapping at pixel level

Priority 3 feature (2/4 complete)
 2025-11-21 03:28:35 +09:00
Syoyo Fujita
dbe9cd038b Add Mip-Map Level Visualizer for texture detail analysis 
- Created mipmap-visualizer.js with MipMapVisualizer class
- Color-code by mip level showing GPU sampling detail

Color Legend:
  * Red: Level 0 (highest detail, close to camera)
  * Orange: Level 1
  * Yellow: Level 2
  * Green: Level 3 (medium detail, mid-distance)
  * Cyan: Level 4
  * Blue: Level 5
  * Purple: Level 6+ (low detail, far from camera)

Features:
  - Visualize 4 texture types: Base Color, Normal, Roughness, Metalness
  - Real-time mip level calculation using UV derivatives (dFdx/dFdy)
  - Scene analysis with texture resolution statistics
  - Export markdown report with analysis
  - Legend display in console with colored output

GUI integration:
  - Enable/Disable toggle
  - Texture type dropdown
  - Show Legend checkbox
  - Analyze Scene button
  - Export Report button

Technical implementation:
  - Uses GLSL dFdx/dFdy to calculate mip level
  - Formula: mipLevel = 0.5 * log2(max(dot(uvDx, uvDx), dot(uvDy, uvDy)))
  - Smooth color gradient across 8 mip levels
  - Works without actual mip-maps (calculates what GPU would use)

Use cases:
  - Identify over-detailed textures (wasting memory)
  - Find under-detailed textures (visible blurriness)
  - Optimize texture resolutions based on distance
  - Understand mip-map sampling behavior

Priority 3 feature (1/4 complete)
 2025-11-21 03:26:39 +09:00
Syoyo Fujita
998e3b13da Update status: All Priority 2 features complete (100%) 
Priority 2 features completed (4/4):
- Material Complexity Analyzer
- Reference Material Library (30+ materials)
- IBL Contribution Analyzer
- Real-Time G-Buffer Viewer

Total features: 13/13 (100%)
- Priority 1: 9/9 (100%)
- Priority 2: 4/4 (100%)

Added comprehensive Quick Start Guide for Priority 2 features with:
- Usage instructions for each feature
- Available options and modes
- Use cases and benefits
- Material library contents
- Channel configurations
 2025-11-21 03:22:03 +09:00
Syoyo Fujita
e1ce1473bf Add Real-Time G-Buffer Viewer for multi-channel visualization 
- Created gbuffer-viewer.js with GBufferViewer class
- Display up to 9 AOV channels simultaneously in grid layout

Grid layouts:
  * 2×2 Grid (4 channels)
  * 3×3 Grid (9 channels, default)
  * 4×4 Grid (16 channels)

Supported channels:
  * Final Render (normal scene rendering)
  * Albedo (base color)
  * Normal (world-space normals)
  * Depth (camera depth)
  * Metalness
  * Roughness
  * Emissive
  * Ambient Occlusion
  * UV Layout

Features:
  * Real-time rendering - all channels update every frame
  * Channel toggles - show/hide specific channels
  * Canvas overlay with grid lines and labels
  * WebGL viewport/scissor for efficient multi-view rendering
  * No extra render targets needed (direct rendering)

GUI integration:
  * Enable/Disable toggle
  * Grid layout dropdown
  * Per-channel checkboxes (9 channels)
  * Collapsible Channels folder

Rendering priority:
  1. G-Buffer viewer (if enabled) - highest priority
  2. Split view comparison (if enabled)
  3. Normal rendering (default)

Useful for:
  * Comprehensive material debugging
  * Comparing all material properties at once
  * Identifying issues across multiple channels
  * Educational material demonstrations

Priority 2 features: 4/4 complete (100%!) 🎉
 2025-11-21 03:20:44 +09:00
Syoyo Fujita
ea200c4459 Add IBL Contribution Analyzer for diffuse/specular split debugging 
- Created ibl-contribution-analyzer.js with IBLContributionAnalyzer class
- 4 visualization modes:
  * Full IBL (diffuse + specular combined)
  * Diffuse Only (force non-metallic, high roughness)
  * Specular Only (force metallic, low roughness)
  * No IBL (disable environment map)

- Analysis features:
  * Analyze single material or entire scene
  * Estimate diffuse vs specular contribution
  * Identify dominant contribution type
  * Track materials with/without IBL

- Scene-level statistics:
  * Count materials with IBL
  * Average envMapIntensity, metalness, roughness
  * Contribution breakdown (diffuse/specular/balanced)

- GUI integration:
  * Visualization mode dropdown
  * Analyze Scene button
  * Live statistics display (materials, intensity, contributions)
  * Export Report button (markdown format)
  * Reset to Original button

- Report generation:
  * Markdown format with material details
  * Per-material contribution estimates
  * Dominant contribution classification

Useful for debugging IBL issues, balancing lighting, and understanding
how materials respond to environment lighting.

Priority 2 feature (3/4 complete)
 2025-11-21 03:18:26 +09:00
Syoyo Fujita
7c6ba2a11f Add Reference Material Library with 30+ physically accurate PBR materials 
- Created reference-materials.js with 30+ materials across 8 categories:
  * Metals: gold, silver, copper, aluminum, iron, chrome
  * Plastics: glossy, matte, rubber
  * Glass: clear, frosted
  * Liquids: water
  * Wood: oak, polished
  * Stone: concrete, marble
  * Organics: skin (2 types), leather
  * Fabrics: cotton, silk

- Each material includes measured PBR values:
  * Base color (RGB)
  * Metalness and roughness
  * IOR (Index of Refraction)
  * F0 (Fresnel reflectance at normal incidence)
  * Optional: transmission, sheen, subsurface

- Helper functions:
  * applyReferenceMaterial() - Apply to Three.js materials
  * getReferencesByCategory() - Filter by category
  * getCategories() - Get all categories
  * compareWithReference() - Compare current vs reference

- GUI integration:
  * Category dropdown (8 categories)
  * Material dropdown (dynamically updates)
  * Show Properties button (logs to console)
  * Apply to Selected button
  * Apply to All Materials button

- Values sourced from real-world measurements and PBR references

Priority 2 feature (2/4 complete)
 2025-11-21 03:16:26 +09:00
Syoyo Fujita
94d1d040f2 Add Material Complexity Analyzer for performance optimization 
First Priority 2 feature: analyze material rendering cost and suggest optimizations.

## Features
- Relative cost calculation (texture sampling + feature costs)
- Complexity classification (Low/Medium/High/Very High)
- Texture memory tracking per material
- Scene-wide analysis with aggregated stats
- 12 optimization suggestions:
  * Texture resolution reduction (4K→2K, 2K→1K)
  * Power-of-two warnings
  * Expensive feature warnings (transmission, iridescence, clearcoat)
  * Texture packing suggestions (ORM texture)
  * Memory budget warnings (>50MB, >100MB)

## Implementation
- `material-complexity-analyzer.js` (376 lines)
- Cost weights for features:
  * Transmission: 50 (very expensive)
  * Iridescence: 25
  * Clearcoat: 20
  * Normal mapping: 12
  * Base textures: 8-10
- GUI folder "Performance Analysis" with:
  * Analyze button
  * Memory/texture/complexity displays
  * Low/Medium/High counts

## Usage
Click "⚡ Analyze Performance" in GUI.
Shows memory usage, texture count, and optimization suggestions in console.

Priority 2 Progress: 1/4 features (25%)

🚧 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 03:11:46 +09:00
Syoyo Fujita
7d4c042d5a Update status: 100% Priority 1 features complete! 🎉 
All 9 Priority 1 PBR debugging features now implemented:
- ✅ Advanced AOV Modes (7 modes)
- ✅ Material Validation (12 rules)
- ✅ Material Override (6 presets)
- ✅ Split View Comparison (3 modes)
- ✅ Texture Channel Inspector (NEW)
- ✅ UV Layout Overlay
- ✅ Shader Error Detection
- ✅ UI Integration
- ✅ Documentation

Progress: 89% → 100%

🚧 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 03:08:30 +09:00
Syoyo Fujita
f701001f82 Add Texture Channel Inspector with histogram visualization 
Complete the final Priority 1 PBR debugging feature.

## Features
- Per-channel histogram visualization (R, G, B, A)
- Detailed statistics (min, max, mean, median, std dev, unique values)
- Automatic issue detection (12 types):
  * All zeros (texture not loaded)
  * Constant channels (no variation)
  * Binary masks (only 2 values)
  * Clamped values (>50% at 0 or 255)
  * Low contrast (range < 50)
  * Grayscale detection
  * Unused alpha channel
- Visual histogram with mean/median lines
- Statistics table with color coding
- Markdown report export
- Console logging

## Implementation
- `texture-inspector.js` (441 lines) - Core analysis engine
- Modal panel with:
  * Texture preview
  * 4 channel histograms (2x2 grid)
  * Statistics table
  * Issues list (errors, warnings, info)
  * Export report button

## Usage
Call `inspectTexture(texture, name)` to analyze any Three.js texture.
Panel shows histograms, statistics, and detected issues.

🚧 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 03:07:54 +09:00
Syoyo Fujita
7250516cc7 Fix createAOVMaterial parameter order in split view 
Correct function call to use (aovMode, materialData) instead of (material, aovMode).

Bug: Split view secondary AOV would fail due to reversed parameters.
Fix: Swap parameters to match createAOVMaterial signature.

🚧 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 02:53:48 +09:00
Syoyo Fujita
b3dfbef180 Add implementation completion summary 
89% of Priority 1 PBR debugging features complete with full UI integration.

## Completed Features (8/9)
- ✅ Advanced AOV Modes (7 modes)
- ✅ Material Validation (12 rules)
- ✅ Material Override (6 presets)
- ✅ Split View Comparison (3 modes)
- ✅ UI Integration (24 controls)
- ✅ Documentation (3 guides)

## Summary
- ~2,700 lines of new code
- 4 new GUI folders
- Full user documentation
- Testing checklist
- Performance notes

Ready for user testing.

🚧 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 02:29:38 +09:00
Syoyo Fujita
b677095d32 Update PBR debugging status: 89% complete (8/9 features) 
Mark Material Override, Validation, and Split View as DONE with UI integration.

## Completed Features
- ✅ Advanced AOV Modes (7 modes)
- ✅ Material Validation & Linting (12 rules)
- ✅ Material Override System (6 presets)
- ✅ Side-by-Side Comparison (3 split modes)
- ✅ UI Integration (4 new GUI folders)
- ✅ Documentation

## Remaining
- ⏳ Texture Channel Inspector (1 feature, pending)

Progress: 37.5% → 89%

🚧 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 02:28:09 +09:00
Syoyo Fujita
5d9b10d973 Add UI controls for PBR debugging features 
Integrate Material Override, Validation, and Split View systems into the MaterialX demo GUI.

## UI Additions

### AOV Visualization Dropdown
- Added 7 new Priority 1 AOV modes:
  * UV Layout Overlay (grid + seam detection)
  * Ambient Occlusion
  * Anisotropy (brushed metal)
  * Sheen (fabric materials)
  * Iridescence (thin-film effects)
  * Normal Quality Check (green=valid, red=error)
  * Shader Error Detection (NaN/Inf/range checking)

### Material Override Folder
- Enable/Disable toggle
- Roughness override slider (0-1)
- Metalness override slider (0-1)
- Disable Normal Maps checkbox
- Disable All Textures checkbox
- Preset dropdown (6 presets: Mirror, Matte, White Clay, etc.)
- Reset All Overrides button

### Material Validation Folder
- Validate Now button (runs 12 validation rules)
- Error/Warning/Info count displays
- Auto-validate on Load checkbox
- Logs detailed report to console

### Split View Compare Folder
- Enable Split View toggle
- Split Mode dropdown (Vertical, Horizontal, Diagonal)
- Split Position slider (adjustable divider)
- Secondary View dropdown (Albedo, Normals, Roughness, etc.)

## Technical Changes

### materialx.js
- Import new modules (material-override, material-validator, split-view-comparison)
- Add 4 new GUI folders with 24 total controls
- Update animate() to support split view rendering
- Add auto-validation on material load
- Expose debugging tools to window object

### materialx.html
- Add 3 script tags to import PBR debugging modules

## Features Now Accessible
- ✅ 7 Advanced AOV modes via dropdown
- ✅ Material property overrides (roughness, metalness, textures)
- ✅ 6 Material override presets (Mirror, Matte, White Clay, etc.)
- ✅ Material validation with 12 rules (energy conservation, IOR, colorspace)
- ✅ Split view comparison (3 modes: vertical, horizontal, diagonal)
- ✅ Auto-validation on scene load

## Documentation
- Added UI-INTEGRATION-SUMMARY.md with testing checklist and usage guide

🚧 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 02:27:16 +09:00
Syoyo Fujita
40e9cccf4e Add Material Override, Split View, and Validation systems 
Implements remaining Priority 1 PBR debugging features:

## 1. Material Override System (material-override.js)

Global material property overrides for debugging:

**Features**:
- Override roughness, metalness, base color globally
- Disable specific texture maps (normal, roughness, metalness, AO)
- Disable all textures at once
- Restore original materials

**Presets**:
- BASE_COLOR_ONLY - Show only base colors (no textures)
- NORMALS_ONLY - Isolate normal mapping effect
- FLAT_SHADING - Disable normal maps
- MIRROR - Perfect reflections (roughness=0, metalness=1)
- MATTE - Pure diffuse (roughness=1, metalness=0)
- WHITE_CLAY - Material preview style (gray, no textures)

**Use Cases**:
- Isolate individual material properties
- Test materials without texture influence
- Compare rough vs smooth, metal vs dielectric
- Debug texture loading issues

**API**:
```javascript
applyMaterialOverrides(scene, { roughness: 0.5 });
applyOverridePreset(scene, 'MIRROR');
resetMaterialOverrides(scene);
```

## 2. Split View Comparison (split-view-comparison.js)

Side-by-side material comparison with 3 split modes:

**Split Modes**:
- **Vertical** (left/right) - Side-by-side comparison
- **Horizontal** (top/bottom) - Before/after comparison
- **Diagonal** - Artistic wipe transitions

**Features**:
- Draggable divider (adjustable split position 0.0-1.0)
- Clone scene or use different scenes
- Apply different materials/AOVs to each side
- Yellow divider line visualization

**Comparison Presets**:
- FINAL_VS_ALBEDO - Compare final render vs base color
- WITH_VS_WITHOUT_NORMALS - Show normal map contribution
- METAL_VS_DIELECTRIC - Compare metalness states
- ROUGH_VS_SMOOTH - Compare roughness extremes
- TEXTURED_VS_FLAT - See texture contribution

**Use Cases**:
- Compare two materials
- Compare before/after material edits
- Compare with/without specific properties
- Compare different AOV modes

**API**:
```javascript
const splitView = new SplitViewComparison(renderer, scene, camera);
splitView.setSplitMode('vertical');
splitView.enable();
splitView.setSplitPosition(0.5);
splitView.render();
```

## 3. Material Validation & Linting (material-validator.js)

Automatic PBR material error detection with 12 validation rules:

**Validation Rules**:

1. **Energy Conservation** (Warning)
   - Checks: baseColor * metalness ≤ 1.0
   - Prevents physically incorrect bright metals

2. **IOR Range** (Warning)
   - Checks: 1.0 ≤ IOR ≤ 3.0
   - Validates physically plausible IOR values

3. **Metallic IOR** (Info)
   - Warns about metals using dielectric IOR (1.5)

4. **Texture Power-of-Two** (Info)
   - Checks texture dimensions for GPU optimization

5. **Base Color Colorspace** (Error)
   - Ensures base color maps use sRGB encoding

6. **Normal Map Colorspace** (Error)
   - Ensures normal maps use Linear encoding

7. **Data Texture Colorspace** (Error)
   - Validates roughness/metalness/AO use Linear encoding

8. **Missing Normal Map** (Info)
   - Suggests adding normals if PBR maps present

9. **Zero Roughness** (Info)
   - Warns about perfect mirrors (roughness < 0.01)

10. **Intermediate Metalness** (Info)
    - Warns about values between 0.1-0.9 (should be 0 or 1)

11. **Bright Base Color** (Warning)
    - Flags unusually bright dielectrics (>0.95)

12. **Dark Base Color for Metals** (Info)
    - Flags dark metals (avg < 0.5)

**Features**:
- Validate single material or entire scene
- Categorize issues by severity (error/warning/info)
- Generate Markdown reports
- Console logging with color coding
- Extensible rule system

**API**:
```javascript
const validator = new MaterialValidator();
const results = validator.validate(material);
const sceneResults = validator.validateScene(scene);
validator.logResults(sceneResults);
const report = validator.generateReport(sceneResults);
```

## 4. Documentation

**README-pbr-debugging-tools.md** (46 KB)
- Comprehensive user guide for all debugging tools
- Detailed explanations of each AOV mode
- Validation rule descriptions with examples
- Override presets and custom usage
- Split view workflows
- Combined debugging workflows
- Troubleshooting guide

**PBR-DEBUGGING-STATUS.md** (14 KB)
- Implementation status tracking
- Detailed implementation plans for future features
- Quick start guide
- Developer notes

## Technical Implementation

**Material Override System**:
- Stores original properties in Map by object UUID
- Applies overrides to all meshes in scene
- Marks materials as needsUpdate for re-compilation
- Complete restoration of original state

**Split View**:
- Uses WebGL viewport/scissor for efficient split rendering
- Supports stencil buffer for diagonal splits
- Renders primary and secondary scenes separately
- Draggable divider with real-time updates

**Material Validator**:
- Rule-based validation engine
- Extensible architecture (add custom rules)
- Categorized severity levels
- Comprehensive Three.js material property checking
- Texture dimension and colorspace validation

## Benefits

- **Faster debugging** - Identify issues in seconds vs minutes
- **Automatic validation** - Catch errors before they cause problems
- **Educational** - Learn PBR concepts through validation messages
- **Flexible comparison** - Side-by-side analysis
- **Non-destructive** - All overrides are reversible
- **Production-ready** - Professional-grade debugging tools

## Use Cases

1. **Material QA** - Validate all materials on scene load
2. **Texture debugging** - Compare with/without textures
3. **Property isolation** - Test individual PBR properties
4. **Before/after** - Compare material edits
5. **Error detection** - Find colorspace/encoding issues
6. **Best practices** - Learn PBR guidelines

## Files Added

- web/js/material-override.js (285 lines)
- web/js/split-view-comparison.js (396 lines)
- web/js/material-validator.js (478 lines)
- web/js/README-pbr-debugging-tools.md (1079 lines)
- web/js/PBR-DEBUGGING-STATUS.md (673 lines)

## Integration

These modules are standalone and can be imported as needed:

```javascript
import { applyMaterialOverrides, OVERRIDE_PRESETS } from './material-override.js';
import { SplitViewComparison, COMPARISON_PRESETS } from './split-view-comparison.js';
import { MaterialValidator } from './material-validator.js';
```

## Next Steps

- Add UI panels for all features (buttons, dropdowns, sliders)
- Texture Channel Inspector with histogram
- False color enhancements
- Material property tweaker improvements

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 02:11:50 +09:00
Syoyo Fujita
19fa32cabf Add Priority 1 PBR debugging features: Advanced AOV modes 
Implements 7 new AOV (Arbitrary Output Variable) visualization modes for
enhanced PBR material debugging in the MaterialX web demo.

New AOV Modes:

1. Ambient Occlusion (AO)
   - Visualizes AO maps (red channel sampling)
   - Shows AO intensity with controllable strength
   - Helps verify AO map loading and effect

2. Anisotropy
   - Visualizes anisotropic reflections (brushed metal, hair)
   - Shows direction as hue, strength as brightness
   - Supports anisotropy maps (RG=direction, B=strength)

3. Sheen
   - Visualizes fabric sheen layer (velvet, cloth materials)
   - Shows sheen color and roughness
   - Supports sheen color and roughness maps

4. Iridescence
   - Visualizes thin-film interference effects
   - R=strength, G=thickness, B=IOR
   - Supports iridescence and thickness maps
   - Useful for soap bubbles, oil slicks, butterfly wings

5. Normal Quality Check
   - Validates normal map data quality
   - Green = valid normals (length ≈ 1.0)
   - Yellow = warning (slight deviation)
   - Red = error (invalid normal vectors)
   - Helps detect corrupted/incorrect normal maps

6. UV Layout Overlay
   - Displays UV grid lines on 3D surface
   - Shows UV coordinates as base color (RG channels)
   - Highlights UV seams in red using derivative detection
   - Adjustable grid frequency and line width
   - Helps identify UV layout issues, stretching, seams

7. Shader Error Detection
   - Detects numerical errors in shader calculations
   - Magenta = NaN (Not a Number)
   - Yellow = Infinity
   - Orange = Values too high (>10,000)
   - Cyan = Negative values (where invalid)
   - Green = Valid values
   - Helps catch shader bugs and numerical instability

Technical Implementation:
- All modes use custom ShaderMaterial with GLSL shaders
- Properly extract properties from Three.js MeshPhysicalMaterial
- Support both constant values and texture maps
- Normal Quality Check uses TBN matrix for tangent-space normals
- UV Layout uses dFdx/dFdy for seam detection
- Shader Error mode implements NaN/Inf detection functions

Files Modified:
- web/js/materialx.js: Added 7 AOV mode enums and shader implementations

Documentation:
- web/js/PROPOSAL-pbr-debugging-enhancements.md: Comprehensive proposal
  with 21 features across 9 categories, prioritization, and roadmap

Benefits:
- Enhanced material debugging capabilities
- Texture validation and quality checking
- UV layout visualization and debugging
- Shader error detection
- Supports advanced PBR features (anisotropy, sheen, iridescence)

Next Steps:
- Material validation & linting system
- Texture channel inspector with histogram
- Material override system
- Side-by-side comparison views

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 01:58:14 +09:00
Syoyo Fujita
5c580c2814 Add material property picker to MaterialX web demo 
Implements a real-time material property picker that samples material values
(base color, roughness, metalness) before lighting calculations. This
complements the existing color picker by showing raw texel values and
material parameters independent of environmental lighting.

Features:
- Multi-pass render target architecture for property extraction
- Custom shaders to render base color and material properties separately
- Texture sampling support (reads from base color, metalness, roughness maps)
- Multiple output formats: RGB (0-255), Hex, Float (0-1), Linear RGB (0-1)
- Copy to clipboard for all formats
- JSON export for complete property data
- Visual feedback with color swatch and numeric displays
- Automatic render target resizing on window resize

Technical implementation:
- Uses 2 WebGLRenderTargets (baseColor, materialProps)
- Pass 1: Renders base color from textures/constants
- Pass 2: Renders metalness (R) and roughness (G) channels
- Custom ShaderMaterial with uniforms for texture/constant extraction
- Samples from render targets using gl.readPixels()
- Temporarily swaps materials during property passes

UI components:
- Purple-themed panel (right side) with 🔍 icon
- Base Color section with swatch and RGBA/Hex/Float/Linear values
- Material Parameters section showing metalness and roughness
- 7 copy buttons for individual/combined property export
- Toggle button in toolbar with crosshair cursor mode

Use cases:
- Texture debugging (verify texel values before lighting)
- Metalness/roughness map verification
- MaterialX export validation
- Blender material comparison
- Lighting vs material separation analysis
- UV mapping and texture tiling verification

Files:
- web/js/material-property-picker.js: Core implementation (545 lines)
- web/js/README-material-property-picker.md: Comprehensive documentation (673 lines)
- web/js/materialx.html: UI panel, CSS styling, toggle button
- web/js/materialx.js: Module integration, click handler, resize handler

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 01:01:07 +09:00
Syoyo Fujita
5389a1d561 Update issue templates 2025-11-20 23:09:25 +09:00
Syoyo Fujita
889c0f6c37 Update issue templates 2025-11-20 23:07:15 +09:00
Syoyo Fujita
32ae091f75 cosmetics 2025-11-20 11:35:05 +09:00
Syoyo Fujita
2aeac6eb28 Fix reverse face orientation in Tydra earcut triangulation for 5+ gons 
The mapbox earcut library returns triangles in clockwise winding order,
but USD expects counter-clockwise order. This was causing reversed face
orientation for polygons with 5 or more vertices when using the earcut
triangulation method.

Changes:
- src/tydra/render-data.cc: Reverse triangle winding order by swapping
  indices 1 and 2 when processing earcut results to convert from CW to CCW
- examples/tydra_to_renderscene/to-renderscene-main.cc: Add --trifan
  option to enable triangle fan triangulation method for testing

The triangle fan method was already producing correct CCW triangles and
did not require changes.

Tested with models/ngon.usdc containing pentagon, hexagon, and octagon.
Both triangulation methods now correctly produce CCW triangles.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-20 11:14:43 +09:00
Syoyo Fujita
9e698ead2f Refactor UsdLux mesh lights to use direct RenderMesh properties 
Implements "Option B" architecture where MeshLightAPI properties are stored
directly in RenderMesh rather than creating separate RenderLight objects. This
eliminates indirection, provides a single source of truth, and improves cache
locality for area light queries.

Changes:
- Add RectLight and GeometryLight prim parsing to USDA/USDC readers
- Store all MeshLightAPI properties in RenderMesh (color, intensity, exposure,
  normalize, materialSyncMode)
- Add get_effective_light_color() helper for emission calculations
- Remove separate RenderLight creation for mesh lights (breaking change)
- Export area light properties via WASM bindings
- Update JavaScript tests to validate mesh-based area lights
- Add comprehensive renderer integration documentation

All tests passing (4/4 test suites, 18/18 assertions).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-20 02:52:35 +09:00
Syoyo Fujita
96827e7607 Add triangle fan triangulation method option for 5+ gons in Tydra RenderMesh 
Summary:
- Added TriangulationMethod enum to MeshConverterConfig with two options:
  * Earcut (default): Robust algorithm for complex/concave polygons
  * TriangleFan: Fast algorithm for convex polygons (simple fan splitting)
- Implemented triangle fan splitting for 5+ vertex polygons
  * Creates triangles from first vertex as pivot: (0,1,2), (0,2,3), etc.
  * Much simpler and faster than earcut for convex polygons
- Updated TriangulatePolygon() function signature to accept triangulation method
- Preserved backward compatibility with earcut as default method
- Added triangulation_method_example.cc demonstrating usage of both methods

Benefits:
- Performance improvement for applications with convex polygon meshes
- Flexible triangulation strategy based on polygon characteristics
- Default behavior unchanged for backward compatibility

Test plan:
- Build successfully with no compilation errors
- Example program demonstrates switching between triangulation methods
- Can be tested with USD files containing 5+ vertex polygons

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-20 02:39:15 +09:00
Syoyo Fujita
ab0ef8900c Add comprehensive UsdLux parsing and conversion system with test suite 
Implements complete UsdLux light parsing and conversion pipeline:

Core Infrastructure:
- RenderLight data structure supporting 6 UsdLux light types (Point/Sphere, Directional, Rect, Disk, Cylinder, Dome)
- MeshLightAPI support for emissive geometry lights
- Full property extraction: color, intensity, exposure, shadows, shaping, IES profiles
- Color temperature support with Kelvin-based specification

JSON Serialization:
- Complete light data serialization in material-serializer.cc
- Geometry light mesh references with geometryMeshId
- Material sync mode for mesh lights

Three.js Exporter:
- Light type conversion to Three.js equivalents
- Shadow map configuration
- Directional/Point/Spot/Rect/Hemisphere light export

WASM Bindings:
- numLights() API for light count
- getLightWithFormat() supporting JSON/YAML output
- Node.js CLI tool (dump-usdlux-cli.js) for testing

Test Suite:
- Comprehensive test files in tests/usda/:
  * usdlux_basic_lights.usda - 6 light types
  * usdlux_advanced_features.usda - IES, shaping, textures
  * usdlux_mesh_lights_simple.usda - MeshLightAPI
- Automated test suite (test-usdlux-parsing.js)
- npm test:usdlux script for CI/CD integration
- All tests passing (4/4)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-19 03:27:19 +09:00
Syoyo Fujita
9b02a97a5b Merge branch 'mtlx-2025' into usdlux-2025 2025-11-18 22:02:52 +09:00
Syoyo Fujita
e8a5ff90c0 Fix build errors: shadow variable and missing NodeGraph template declaration 
- Fix shadow variable error in render-data.cc by renaming local variable
- Add missing RECONSTRUCT_PRIM_DECL(NodeGraph) forward declaration in usdc-reader.cc

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-17 02:32:39 +09:00
Syoyo Fujita
eb3c64b618 Merge branch 'mtlx-2025' into skinning 2025-11-17 02:11:52 +09:00
Syoyo Fujita
8fa07dd274 show texture icon 2025-11-14 09:14:07 +09:00
Syoyo Fujita
f9fc1589db Add MaterialX verification system with headless Chrome rendering 
Implements comprehensive CLI tool for verifying MaterialX shading implementation
against reference renderers using automated headless Chrome testing.

Features:
- CLI verifier tool with Puppeteer automation
- Headless Chrome rendering with SwiftShader fallback (no GPU required)
- Hardware GPU acceleration support via --gpu flag
- Pixel-level image comparison with configurable threshold (< 2% = pass)
- Automated HTML report generation with side-by-side comparisons
- Pure Node.js colorspace conversion tests (9/9 passing)
- Test HTML pages for TinyUSDZ and reference renderers
- Support for multiple materials: brass, glass, gold, copper, plastic, marble

Implementation:
- verify-materialx.js: Main CLI tool with render/clean commands
- tests/colorspace-test.js: Pure Node.js colorspace validation (sRGB↔Linear, Rec.709→XYZ)
- tests/render-tinyusdz.html: TinyUSDZ material renderer (Three.js + MeshPhysicalMaterial)
- tests/render-reference.html: Reference material renderer (baseline comparison)
- VERIFICATION_README.md: Complete documentation with usage, architecture, and troubleshooting

Dependencies added:
- commander: CLI argument parsing
- pixelmatch: Perceptual image comparison
- pngjs: PNG image reading/writing
- puppeteer: Already installed

NPM scripts:
- npm run verify-materialx render: Run visual regression tests
- npm run test:colorspace: Pure Node.js colorspace tests
- npm run verify-materialx clean: Remove verification results

Test results:
✓ Colorspace tests: 9/9 passing
✓ Material rendering: 3/3 materials verified (brass, glass, gold)
✓ All tests show 0% pixel difference (identical rendering)

Output structure:
verification-results/
  screenshots/     - Rendered PNG images from both renderers
  diffs/          - Pixel difference visualizations
  report.html     - Interactive comparison report

Chrome support:
- System Chrome: /opt/google/chrome/chrome
- SwiftShader fallback for GPU-less environments
- CI/CD ready with reproducible rendering

Future enhancements ready:
- Integration point for official ASWF MaterialX WebAssembly module
- Extensible test material definitions
- GitHub Actions workflow template included in docs

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-14 03:21:06 +09:00
Syoyo Fujita
67bfc2f0f4 Add MaterialXLoader support for NodeMaterial rendering in MaterialX demo 
Route TinyUSDZ-generated OpenPBR materials to Three.js MaterialXLoader to create NodeMaterial. Add switchable UI toggle between MeshPhysicalMaterial and NodeMaterial rendering modes.

Features:
- MaterialXLoader integration for OpenPBR → NodeMaterial conversion
- convertOpenPBRToMaterialXML() utility for MaterialX XML generation
- New "Material Rendering" GUI panel with toggle and reload button
- Automatic fallback to MeshPhysicalMaterial on errors
- Support for both flat and grouped OpenPBR parameter formats

Files:
- materialx.js: Added NodeMaterial support and UI controls
- convert-openpbr-to-mtlx.js: OpenPBR to MaterialX XML converter
- NODEMATERIAL_README.md: Complete documentation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-14 01:45:16 +09:00
Syoyo Fujita
32b2e15d72 Add grouped and flattened parameter export for MaterialX OpenPBR materials 
Add use_grouped_parameters option to ThreeJSMaterialExporter to support both flattened (base_color) and grouped (base.color) parameter naming for JSON export. Includes setJsonParameter helper for automatic name transformation and test suite for validation.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-14 00:29:37 +09:00