HDR/EXR 360 Viewer
Features
✨ Core Capabilities
- 🌐 360-Degree Spherical Viewer: Immersive environment map visualization with full mouse interaction
- 🎨 HDR Support: High dynamic range image viewing with ACES Filmic tone mapping
- 📸 OpenEXR Support: Professional VFX format support with proper color space handling
- ⚙️ Real-Time Exposure Control: Dynamic exposure adjustment (-5 to +5 EV range) to reveal shadow and highlight details
- 🖱️ Intuitive Controls: Optimized mouse and keyboard interaction for seamless navigation
- ⚡ GPU-Accelerated Rendering: Hardware-accelerated WebGL with Three.js for smooth, responsive performance
🎯 Professional Features
- SRGB Color Space: Proper color management for accurate HDR representation
- Auto-Rotation Mode: Automated camera rotation for hands-free viewing
- Zoom Control: Smooth scrollwheel zoom with momentum damping
- 2D Fallback: Graceful degradation with canvas-based 2D image display
- Error Handling: Comprehensive error messages and fallback rendering
Installation
🔧 From VS Code Marketplace (Recommended)
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X / Cmd+Shift+X)
- Search for "HDR/EXR 360 Viewer"
- Click Install
📦 Install from VSIX File
code --install-extension Mehanth.hdr-exr-360-viewer-0.0.20.vsix
🛠️ Build from Source
# Clone the repository
git clone https://github.com/Itz-mehanth/VSCE.git
cd VSCE
# Install dependencies
npm install
# Build the extension
npm run compile
# Package as VSIX
npm run package
# Install the generated VSIX
code --install-extension Mehanth.hdr-exr-360-viewer-0.0.20.vsix --force
Quick Start
- Open a File: Open any
.hdr or .exr file in VS Code
- Auto-Display: The 360 viewer opens automatically in the editor
- Interact: Use mouse and keyboard controls to navigate (see shortcuts below)
- Adjust: Use the exposure slider in the top-right corner to optimize brightness
Usage Guide
Basic Navigation
| Action |
Control |
| Rotate View |
Click and drag with mouse |
| Zoom In/Out |
Scroll wheel or trackpad |
| Pan |
Right-click and drag (if available) |
| Auto-Rotate |
Press Space to toggle |
| Reset View |
Press R to center camera |
Advanced Controls
Exposure Adjustment
- Use the slider in the top-right to adjust exposure
- Range: -5 to +5 EV (Exposure Value)
- Real-time preview of changes
Camera Behavior
- Momentum Damping: Smooth deceleration when rotating
- Auto-Rotation Speed: Adjustable via code (default: 2x)
- Field of View: 75° default (optimized for HDR viewing)
Keyboard Shortcuts
| Key |
Action |
Details |
| Space |
Toggle Auto-Rotation |
Starts/stops automatic camera rotation around the Y-axis |
| R |
Reset Camera |
Returns to default view (camera at origin, facing forward) |
| Mouse Drag |
Rotate |
Left-click and drag to orbit the environment |
| Scroll |
Zoom |
Zoom in and out smoothly |
- Extension:
.hdr
- MIME Type:
image/vnd.radiance
- Use Case: Environment maps, light probes, atmospheric imaging
- Color Space: RGB, linear light
- Max Resolution: Unlimited (performance-dependent)
OpenEXR
- Extension:
.exr
- MIME Type:
image/x-exr
- Use Case: Professional VFX, 3D rendering, scientific imagery
- Color Space: Linear RGB, support for various channel layouts
- Compression: Supported (ZIP, RLE, etc.)
Advanced Features
Tone Mapping
The extension uses ACES Filmic tone mapping for professional-grade HDR visualization:
- Preserves highlights and shadows
- Maintains color accuracy
- Suitable for color-critical work
PMREM (Pre-filtered Mipmapped Radiance Environment Mapping)
- Automatically generates mipmaps for efficient rendering
- Reduces specular aliasing
- Optimizes performance for large environments
Color Management
- Output Color Space: sRGB (matches monitor calibration)
- Proper Gamma Correction: Ensures accurate visual representation
- Linear Workflow: Internally uses linear color space for calculations
Rendering Settings
- Anti-aliasing: Enabled (smooth edges)
- Pixel Ratio: Native device pixel ratio (sharp on all displays)
- Format: WebGL (automatic fallback to 2D canvas if needed)
- Large Files: Files over 5MB may take longer to load
- Resolution: Up to 8K environments supported (GPU-dependent)
- Memory: Typically uses 100-500MB per image
- CPU: Minimal CPU usage once loaded (GPU-driven)
Troubleshooting
Issue: Viewer shows dark/black screen
Solution:
- Check that the file is a valid HDR or EXR image
- Adjust the exposure slider (top-right)
- Verify file is not corrupted: try opening in external viewer (Marmoset Toolbag, Substance Designer, etc.)
- Check console for errors:
Ctrl+Shift+I > Console tab
Issue: File won't open
Troubleshooting Steps:
- Verify file extension is
.hdr or .exr (case-insensitive)
- Check file is not corrupted
- Try renaming file if it has special characters
- Restart VS Code
Optimization Steps:
- Reduce file resolution (re-save at lower dimensions)
- Update GPU drivers
- Close other GPU-intensive applications
- Check VS Code GPU acceleration is enabled
Issue: Colors look wrong
Troubleshooting:
- Verify your monitor is calibrated correctly
- Check tone mapping is working (exposure slider should affect brightness)
- Compare with external HDR viewer for reference
- Try different tone mapping: modify source code
THREE.ACESFilmicToneMapping
Get Help
Open the Developer Console for diagnostic information:
- Windows/Linux:
Ctrl+Shift+I
- macOS:
Cmd+Shift+I
- Navigate to Console tab to view logs
System Requirements
| Requirement |
Minimum |
Recommended |
| VS Code |
1.106.1 |
Latest stable |
| GPU Memory |
512 MB |
2 GB+ |
| WebGL |
WebGL 2.0 |
WebGL 2.0 |
| OS |
Windows 7+ / macOS 10.13+ / Linux |
Modern OS |
| Browser Engine |
Chromium 90+ |
Chromium 100+ |
Browser Support:
- Chrome/Chromium 90+
- Edge 90+
- Firefox 88+ (WebGL 2.0 support)
Configuration
VS Code Settings (Optional)
Add to settings.json for custom behavior:
{
"hdrExr360Viewer.defaultExposure": 0,
"hdrExr360Viewer.autoRotateSpeed": 2,
"hdrExr360Viewer.enableAutoRotate": false
}
Extension Details
| Property |
Value |
| Publisher |
Mehanth |
| ID |
Mehanth.hdr-exr-360-viewer |
| Version |
0.0.20 |
| License |
MIT |
| Repository |
GitHub |
| Main Runtime |
Node.js + Chromium (Electron) |
| Renderer |
WebGL via Three.js r160 |
Development
Building Locally
# Development build (watch mode)
npm run watch
# Production build
npm run package
# Run tests
npm test
# Type checking
npm run check-types
# Linting
npm run lint
Project Structure
src/
├── extension.ts # Extension entry point & custom editor provider
└── webview.ts # Webview viewer implementation (Three.js)
media/
├── webview-bundle.js # Bundled webview script (generated)
├── three.module.js # Three.js library
├── OrbitControls.js # Camera controller
├── RGBELoader.js # HDR file loader
├── EXRLoader.js # EXR file loader
└── fflate.module.js # Compression library for EXR
dist/
└── extension.js # Compiled extension (generated)
Dependencies
- Three.js: WebGL rendering engine
- OrbitControls: Interactive camera control
- RGBELoader: HDR file parsing
- EXRLoader: OpenEXR file parsing
- fflate: Compression support for EXR files
License
This project is licensed under the MIT License - see the LICENSE file for details.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature)
- Commit your changes (
git commit -m 'Add amazing feature')
- Push to the branch (
git push origin feature/amazing-feature)
- Open a Pull Request
Support
Changelog
See CHANGELOG.md for detailed version history.
Latest (v0.0.20)
- ✅ Fixed CSP policy for data URL support
- ✅ Bundled webview as IIFE for stability
- ✅ Added 2D fallback viewer
- ✅ Improved error handling and diagnostics
- ✅ Production-ready release
Credits
Built with:
- Three.js - 3D graphics library
- VS Code Extension API - Extension framework
- Open Source Community - Supporting libraries
