Professional Photometric Light Profile Authoring Tool
A web-based tool for designing, previewing, and exporting custom IES photometric light profiles for use in professional 3D rendering, VFX, architectural visualization, cinematography previsualization, and game development.
- Real-time 3D Preview — Interactive Three.js visualization with orbit controls
- Polar Distribution Diagram — Classic photometric distribution plot
- Intensity Curve Graph — Candela values across vertical angles
- IES LM-63-2002 Export — Industry-standard file format
Photometric Properties
- Luminous Intensity (50-50,000 cd)
- Luminous Flux (calculated)
- Efficacy (10-200 lm/W)
Color Temperature
- CCT range: 1,800K - 12,000K
- CRI support (60-100)
- Real-time color preview
Beam Geometry
- Beam Angle (50% intensity)
- Field Angle (10% intensity)
- Edge Softness control
- Hotspot Shape adjustment
Distribution
- Vertical/Horizontal Spread
- Symmetry Types: Radial, Bilateral, Quadrant
- Secondary lobe support
- Spotlight
- Soft Area / Softbox
- Fresnel
- PAR Can
- LED Panel
- Practical Bulb
- Street Light
- Theatrical Spot
- Fluorescent / Kino
- Wall Washer
- Downlight
- Follow Spot
- Multiple camera views (Perspective, Front, Top, Side)
- Room environment with shadows
- Grid overlay option
- Beam angle helper visualization
- Animation mode
- Scroll to zoom, drag to orbit
Generated IES files are compatible with:
| Software | Status |
|---|---|
| Unreal Engine | ✅ Verified |
| Unity | ✅ Verified |
| Blender (Cycles/EEVEE) | ✅ Verified |
| Cinema 4D | ✅ Verified |
| Houdini | ✅ Verified |
| Maya (Arnold) | ✅ Verified |
| 3ds Max | ✅ Verified |
| V-Ray | ✅ Verified |
| Arnold | ✅ Verified |
| Redshift | ✅ Verified |
| Architectural Software | ✅ Verified |
Simply open index.html in a modern web browser. No build step required.
- Fork this repository
- Enable GitHub Pages in repository settings
- Access at
https://yourusername.github.io/ies-generator/
# Using Python
python -m http.server 8000
# Using Node.js
npx serve .
# Using PHP
php -S localhost:8000Two embed options are provided for integrating with Webflow:
The simplest and most reliable method. Paste into a Webflow Embed element:
<style>
.ies-embed-container {
width: 100%;
min-height: 800px;
position: relative;
background: #f9f9f9;
border: 1px solid #dadada;
border-radius: 1px;
overflow: hidden;
}
.ies-embed-container iframe {
width: 100%;
height: 100%;
min-height: 800px;
border: none;
}
</style>
<div class="ies-embed-container">
<iframe
src="https://yourusername.github.io/ies-generator/"
title="IES File Generator"
loading="lazy"
allow="clipboard-write"
></iframe>
</div>Loads the generator directly into the page (no iframe). Provides tighter integration but requires CORS configuration if using a custom domain.
-
Deploy to GitHub Pages:
- Create a new repository (e.g.,
ies-generator) - Upload all files from this folder
- Go to Settings → Pages → Enable GitHub Pages (Source: main branch)
- Wait for deployment (~1-2 minutes)
- Create a new repository (e.g.,
-
Update the embed URL:
- Replace
yourusernamewith your GitHub username - Or use your custom domain if configured
- Replace
-
Add to Webflow:
- Add an Embed element to your page
- Paste the embed code
- Publish your Webflow site
ies-generator/
├── index.html # Main HTML file
├── webflow-embed.html # Script-based Webflow loader
├── webflow-iframe-embed.html # Iframe-based Webflow loader (recommended)
├── css/
│ └── main.css # All styles
├── js/
│ ├── state.js # State management
│ ├── presets.js # Light presets
│ ├── photometrics.js # Intensity calculations
│ ├── viewer3d.js # Three.js 3D viewer
│ ├── diagrams.js # 2D canvas diagrams
│ ├── export.js # IES file generation
│ └── main.js # App initialization
├── assets/
│ └── preview.png # Preview image
└── README.md # This file
The generator produces compliant IES files following the IESNA LM-63-2002 standard:
- Proper header with metadata keywords
- TILT=NONE specification
- Type C photometric data
- Configurable angular resolution (19-181 vertical angles)
- Support for radial, bilateral, and quadrant symmetry
The photometric distribution uses a multi-zone model:
- Hotspot Core — Flat maximum intensity zone
- Hotspot Transition — Smoothstep falloff to 50%
- Field Falloff — Configurable exponential decay
- Cutoff Zone — Optional hard cutoff threshold
- Secondary Lobe — Optional secondary peak for reflector simulation
- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+
Requires WebGL for 3D preview.
- Use CCT 3200K for tungsten, 5600K for daylight
- Match beam angles to real fixtures for accurate previs
- Consider the Theatrical Spot preset for hard-edged sources
- Use the Wall Washer preset for grazing effects
- Downlight preset for recessed fixtures
- Adjust CRI to match specified fixtures
- Lower resolution (19-37) for better performance
- Use radial symmetry to minimize file size
- Consider baking IES profiles for static lights
The application is modular and can be extended:
// Get current state
const params = IESState.get();
// Set parameters
IESState.set({ intensity: 2000, beamOuter: 45 });
// Subscribe to changes
IESState.subscribe((state, changed, computed) => {
console.log('Changed:', changed);
});
// Generate IES content programmatically
const iesContent = IESExport.getContent(params, { fileName: 'my_light' });
// Calculate intensity at angle
const intensity = IESPhotometrics.calculateIntensity(30, params);Contributions are welcome! Please feel free to submit issues and pull requests.
MIT License — Free for personal and commercial use.
Built by Blauw Films
Note: This tool generates synthetic photometric data based on mathematical models. For accurate real-world lighting simulation, use measured IES files from fixture manufacturers.