디자인 아틀라스
EN
⬢ 3D 모델링·렌더링

HDRI 라이팅

HDRI lighting

실제(또는 절차적으로 만든) 공간을 담은 고다이나믹레인지 파노라마 한 장으로 물체 전체의 조명과 반사를 한 번에 채우는 기법.

다른 이름: Image-based lightingIBL환경광
···
html
<span class="hdri-cap">one HDRI · lighting + reflections, no lights placed</span>
css
.hdri-cap{position:absolute;left:0;right:0;bottom:5%;text-align:center;font-size:clamp(9px,2.4vmin,12px);color:#f1f0ecdd}
js
import * as THREE from 'three';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
camera.position.set(0, 0.4, 5.2);
const pmrem = new THREE.PMREMGenerator(renderer);
const envTex = pmrem.fromScene(new RoomEnvironment(), 0.035).texture;
scene.environment = envTex;
scene.background = envTex;
scene.backgroundBlurriness = 0.5;

const mesh = new THREE.Mesh(
  new THREE.CapsuleGeometry(0.62, 1.15, 12, 32),
  new THREE.MeshPhysicalMaterial({ color: 0xe6413a, roughness: 0.25, metalness: 0.0, clearcoat: 1, clearcoatRoughness: 0.15 })
);
scene.add(mesh);
function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  mesh.rotation.y = t * 0.00032;
  mesh.rotation.x = Math.sin(t * 0.00018) * 0.15;
  camera.lookAt(0, 0, 0);
  renderer.render(scene, camera);
});

사진 스튜디오에서 그럴듯한 렌더를 만들려면 보통 주광·보조광·역광 세 개(3점 조명)를 손으로 배치해야 합니다. HDRI 라이팅은 그 대신 주변 공간 전체를 한 장의 파노라마 사진(HDR이라 아주 밝은 하이라이트도 안 날아가고 담깁니다)으로 찍어서, 물체가 마치 그 공간 안에 실제로 놓인 것처럼 사방에서 빛을 받게 합니다.

이게 강력한 이유는 "조명"과 "반사"가 같은 데이터에서 동시에 나온다는 점입니다 — 매끈한 표면은 그 파노라마를 그대로 비추고(반사), 동시에 파노라마의 밝기 분포가 물체의 각 면을 얼마나 밝게 비출지 결정합니다(조명). 조명 3개를 하나하나 배치하는 대신, 스튜디오·야외·해질녘 같은 HDRI 한 장만 바꿔 끼우면 분위기 전체가 바뀝니다.

Blender·C4D·Maya는 모두 "환경 텍스처"나 "IBL" 노드로 HDRI 파일을 바로 지원합니다. 이 사이트는 외부 이미지를 못 불러오므로, three.js의 RoomEnvironment 애드온으로 작은 가상의 방을 절차적으로 만들어 그 자리에서 굽습니다(그 굽는 과정 자체은 environment-map 항목에서 더 자세히 다룹니다).

언제 쓰나

제품 목업, 금속·유리 재질 프리뷰처럼 빠르고 사실적인 스튜디오 조명이 필요할 때.