什麼是 HDR / HDRI?為什麼 3D 渲染離不開它?
HDR(High Dynamic Range,高動態範圍影像) 或 HDRI(高動態範圍環境貼圖) 是一種包含超高亮度範圍和物理光強資訊的 360° 等距圓柱投影(Equirectangular)影像格式。普通 JPG 或 PNG 圖片的像素通道值被限制在 0 ~ 255(0.0 ~ 1.0)的低動態範圍(LDR),而真正的 Radiance .hdr 格式採用 32 位元浮點 RGBE 編碼,能夠完整記錄太陽表面或發光燈具等高達數十甚至數萬倍的超高真實光照強度。
在 Blender (Cycles/Eevee)、Three.js、Unreal Engine 5、Cinema 4D、Maya、Godot 等現代基於物理的渲染引擎(PBR)中,導入一張製作精良的 HDR 背景環境貼圖,可以實現:
- 真實基於圖像的照明 (IBL, Image-Based Lighting):自動為場景中的物體提供 360 度全方位的柔和漫反射環境光與準確的投影陰影。
- 物理級鏡面高光與反射 (Reflections & Highlights):金屬、玻璃、車漆等光滑材質能夠精確反射周圍環境細節與太陽光斑,呈現極具質感的現代三維視覺。
- 極簡場景打光工作流程:無需在場景中繁瑣放置數十盞補光燈,僅需加載一張 HDR 貼圖即可一鍵獲得專業級光影氛圍。
如何線上建立 HDR 背景貼圖?
傳統製作 HDRI 全景圖往往需要專業全景相機拍攝多檔包圍曝光照片並在大型桌面軟體中拼接合成。而借助本站的線上 HDR 背景生成器(Online HDR Generator),您只需在瀏覽器中調節太陽角度、燈光陣列或匯入圖片,即可在幾秒鐘內純前端即時生成物理級精度的高動態全景背景(.hdr),並即時在 3D PBR 材質球上觀察光影效果。
🎨 8 大經典場景與光照預設(Lighting Presets)
工具內建了覆蓋戶外自然、專業攝影棚與科幻特效的精選預設,助您一鍵快速載入專業級光照環境:
- ☀️ 日落黃金時刻 (Golden Hour):模擬低角度金橙色夕陽與漸變深藍天頂,營造溫暖柔和的黃昏逆光與修長投影,極具電影級氛圍。
- 🌞 晴朗正午碧空 (Sunny Sky):高角度明亮陽光與純淨的大氣瑞利散射,提供高對比度的室外自然硬光,適合建築漫遊與日景渲染。
- 🌌 深邃暮色星輝 (Deep Twilight):地平線紫紅餘暉與深邃夜空交融,光比柔和,適合汽車、夜景展台與神秘靜物展示。
- 🌫️ 清晨薄霧初升 (Morning Mist):高渾濁度晨霧漫射光,天空呈現淡雅柔和的奶油色調,呈現清透夢幻的空氣感。
- 💡 經典三點布光棚 (Studio Three-Point):標準攝影主光、冷色輔光與暖色輪廓光三維環繞,立體雕刻模型輪廓,是 3D 角色與道具展示的首選。
- ⚪ 純淨高光白棚 (Studio Clean White):大尺寸頂棚柔光箱配合正面均勻漫射補光,提供純粹無雜色的商業電商與工業產品渲染環境。
- 🟣 賽博龐克霓虹 (Cyber Neon):高飽和青藍(Cyan)與洋紅(Magenta)雙色強對比高光,專為科幻機甲、發光物體及潮流藝術打造。
- 🟢 極光幽綠之夜 (Aurora Night):深藍星空底色與地平線幽綠極光輝映,為場景賦予神秘奇幻的冷調漫反射微光。
🌐 即時 3D PBR 物理材質球預覽(Material Showcase)
視口內建 Three.js 物理著色管線,透過不同特性的標準材質球,讓您在匯出前即可 360° 全方位檢驗光影與反射質感:
- 🪞 光滑鍍鉻金屬球 (Chrome Mirror):極低粗糙度(Roughness 0.02)與 100% 金屬度,直觀檢驗環境貼圖的清晰度、全景接縫平滑度與太陽強光斑。
- 🪙 粗糙啞光金屬球 (Rough Metal):中等粗糙度(Roughness 0.35),呈現金屬在漫反射與各向異性高光之間的質感過渡。
- 🍶 高光陶瓷漫反射球 (Glossy Ceramic):非金屬基礎色與清漆高光,直觀觀察場景陰影柔化度與全局漫反射光照(Diffuse IBL)。
- 🥨 高光環形結 (Torus Knot):具有多曲面複雜轉角,方便觀察環境高光在曲面流轉時的立體感與自遮擋陰影。
核心特色與技術優勢
☀️ 物理大氣與太陽光照模擬
基於經典的大氣瑞利與米氏散射物理數學模型,即時計算天頂、地平線與太陽角度的漸變過渡,支援動態調整太陽高度角、方位角與光盤耀斑。
💡 攝影棚多點柔光箱打光
自由新增主光、輔光、輪廓光及頂棚柔光箱,自訂每個光源的經緯度位置、色溫、高動態亮度與邊緣羽化度,非常適合 3D 產品與電商模型渲染。
🌐 3D PBR 材質即時反射預覽
內建 WebGL Three.js 即時渲染視口,提供光滑鍍鉻金屬球、粗糙金屬球與陶瓷球展示,直觀感受 HDR 貼圖對物體的真實反光與高光表現。
⚡ 純前端零延遲與本地隱私安全
所有 HDR 浮點運算與 Radiance RGBE 二進位編碼均在您的瀏覽器本地極速完成,無需上傳任何資料到伺服器,免費且絕對保護隱私。
如何在 3D 軟體中使用本工具匯出的 .hdr 檔案?
1. 在 Blender 中使用
- 打開 Blender,進入右側 World Properties(世界環境屬性) 面板。
- 點擊
Color(顏色)旁邊的黃色圓點,選擇 Environment Texture(環境紋理)。 - 點擊
Open(開啟),選擇本工具下載的.hdr檔案。 - 將視圖著色方式切換為 Rendered(渲染視圖) 即可看到全景天空與逼真反射。
2. 在 Three.js Web 專案中使用
使用 Three.js 官方提供的 RGBELoader 即可一行代碼快速加載:
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
new RGBELoader().load('your_sky.hdr', (texture) => {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture; // 設置場景背景
scene.environment = texture; // 設置物體 PBR 環境光與反射
});