BabylonJS 기초 8일차 : HDRI 환경맵(environmentTexture)으로 반사(reflection) 품질 한 단계 올리기

한눈에 보는 요약

조명은 Directional/Point/Spot 같은 “직접광”만으로 끝나지 않습니다. 금속·유리·플라스틱 같은 재질이 그럴듯해지려면, 주변 세계(하늘, 벽, 조명기구)가 만들어내는 “환경광 + 환경반사”가 반드시 필요합니다.

BabylonJS에서는 이 역할을 scene.environmentTexture(= environmentTexture)가 담당합니다. HDRI(High Dynamic Range Image) 기반의 환경맵을 세팅하면 PBR(Material) 반사가 실제 촬영 사진처럼 자연스럽게 붙습니다.

오늘 목표는 간단합니다. HDRI 적용 전/후를 눈으로 비교하고, 마지막에는 PBR 쇼케이스 씬(금속/거칠기 차이를 한 번에 확인하는 장면)을 만들어 “조명+반사” 품질을 단계 업그레이드합니다.

핵심 포인트

environmentTexture는 “환경광 + 환경반사”의 기반입니다.
PBR 머티리얼은 주변을 비추는 정보가 없으면 반사가 밋밋해지고, 재질이 “플라스틱 장난감”처럼 보이기 쉽습니다.
HDRI는 밝기 범위(다이내믹 레인지)가 넓어 “빛이 센 곳”이 살아납니다.
실제 스튜디오 조명처럼 하이라이트가 생기고, 금속 재질은 “반짝임”이 훨씬 설득력 있게 나옵니다.
반사(reflection)는 텍스처 한 장이 아니라 “재질 파라미터(roughness/metallic)”로 조절합니다.
같은 HDRI를 써도 roughness가 높으면 흐릿한 반사, 낮으면 거울 같은 반사가 됩니다.
전/후 비교는 ‘환경맵 ON/OFF’로 즉시 확인합니다.
scene.environmentTexture를 끄고 켜는 것만으로도 “재질의 현실감”이 얼마나 바뀌는지 바로 느낄 수 있습니다.

상세 설명

1) HDRI 환경맵이 왜 중요한가

초보자 단계에서 흔히 하는 실수는 “라이트만 더 세게” 켜는 것입니다. 하지만 현실 세계에서 물체가 그럴듯해 보이는 이유는, 직접광뿐 아니라 주변 환경이 만들어내는 간접광(ambient)과 환경반사(specular reflection)가 함께 작동하기 때문입니다.

예를 들어, 금속 구체는 방 안의 벽/천장/조명기구가 그대로 비치고, 무광 플라스틱은 반사가 퍼져 흐릿하게 보입니다. 이 차이는 “라이트의 개수”보다도 환경맵이 있느냐 없느냐에서 크게 갈립니다.

2) environmentTexture 개념과 동작 방식

scene.environmentTexture는 씬 전체가 참조하는 “주변 환경 정보”입니다. PBRMaterial은 기본적으로 이 텍스처를 이용해 반사를 계산합니다. 즉, PBR에서 반사를 잘 만들려면 머티리얼 쪽만 만지는 게 아니라 씬의 환경 텍스처를 먼저 세팅해야 합니다.

여기서 중요한 포인트는 “HDRI 이미지 그대로”를 쓰기보다, 렌더링에 적합하도록 프리필터(prefiltered)된 환경맵을 쓰는 것이 일반적이라는 점입니다. BabylonJS에서는 흔히 .env 형태의 프리필터 파일을 사용합니다. (성능/품질 균형이 좋고, 거칠기(roughness) 단계별로 반사를 빠르게 샘플링할 수 있습니다.)

추가로, 환경 반사 강도가 너무 세거나 약하면 scene.environmentIntensity로 전체 강도를 조절할 수 있습니다. “HDRI를 붙였는데 너무 번쩍거린다”는 상황에서 가장 먼저 만져볼 값입니다.

3) reflection(반사)을 “재질”로 제어하는 법

반사를 다루는 핵심은 “반사 텍스처를 바꾼다”가 아니라, 같은 환경맵을 두고도 재질 파라미터로 표면 성질을 바꾸는 것입니다. PBR에서 가장 중요한 두 축은 보통 다음입니다.

metallic(금속성): 금속에 가까울수록 환경 반사가 강하게, 색도 금속 특성에 맞게 반영됩니다.
roughness(거칠기): 낮으면 거울처럼 선명, 높으면 흐릿하고 넓게 퍼지는 반사(무광)에 가깝습니다.

초보자에게 추천하는 연습 방법은 “같은 구체(sphere)를 여러 개 만들고” metallic/roughness만 다르게 주는 것입니다. 그러면 환경맵이 반사에 어떻게 영향을 주는지, 그리고 roughness가 반사를 어떻게 퍼뜨리는지 시각적으로 확실히 잡힙니다.

4) HDRI 적용 전/후 비교 실습

이번 실습은 단순하지만 효과가 큽니다. 같은 씬에서 (A) 환경맵 OFF와 (B) 환경맵 ON을 토글하고, 금속/비금속 구체의 반사와 전체 분위기(톤)가 어떻게 달라지는지 확인합니다.

포인트는 “라이트를 잔뜩 추가하지 말고”, 우선 환경맵만으로 얼마나 현실감이 올라오는지 보는 것입니다. 이후 라이트는 “형태를 잡는 보조”로 쓰는 것이 흐름상 자연스럽습니다.

코드 예시

// BabylonJS Day 8: HDRI 환경맵 & 반사 실습 (전/후 비교 + PBR 기본 셋업)
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);

const createScene = () => {
const scene = new BABYLON.Scene(engine);

// 카메라
const camera = new BABYLON.ArcRotateCamera(
"cam",
-Math.PI / 2,
Math.PI / 2.4,
8,
new BABYLON.Vector3(0, 1, 0),
scene
);
camera.attachControl(canvas, true);

// 최소한의 직접광(형태를 보이게 하는 정도로만)
const light = new BABYLON.DirectionalLight(
"dir",
new BABYLON.Vector3(-0.4, -1, -0.3),
scene
);
light.intensity = 1.0;

// 바닥
const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 10, height: 10 }, scene);

// PBR 재질 2종(금속/비금속 비교)
const metalMat = new BABYLON.PBRMetallicRoughnessMaterial("metalMat", scene);
metalMat.baseColor = new BABYLON.Color3(0.9, 0.9, 0.95);
metalMat.metallic = 1.0;
metalMat.roughness = 0.15;

const plasticMat = new BABYLON.PBRMetallicRoughnessMaterial("plasticMat", scene);
plasticMat.baseColor = new BABYLON.Color3(0.2, 0.25, 0.35);
plasticMat.metallic = 0.0;
plasticMat.roughness = 0.6;

const sphereMetal = BABYLON.MeshBuilder.CreateSphere("sphereMetal", { diameter: 1.4 }, scene);
sphereMetal.position = new BABYLON.Vector3(-1.6, 1.2, 0);
sphereMetal.material = metalMat;

const spherePlastic = BABYLON.MeshBuilder.CreateSphere("spherePlastic", { diameter: 1.4 }, scene);
spherePlastic.position = new BABYLON.Vector3(1.6, 1.2, 0);
spherePlastic.material = plasticMat;

// (A) HDRI 적용 전: 환경맵 없음
// scene.environmentTexture = null;

// (B) HDRI 적용 후: 프리필터 .env 환경맵을 씬에 지정
// 실제 프로젝트에서는 본인 환경맵 경로로 교체하세요.
const envTex = BABYLON.CubeTexture.CreateFromPrefilteredData(
"[https://playground.babylonjs.com/textures/environment.env](https://playground.babylonjs.com/textures/environment.env)",
scene
);
scene.environmentTexture = envTex;

// 환경 반사 강도(너무 번쩍이면 낮추고, 너무 밋밋하면 높입니다)
scene.environmentIntensity = 1.0;

// 눈으로 확인하기 좋은 기본 환경(선택): 간단한 스카이박스/그라운드 셋업
// (createDefaultEnvironment는 편의 기능이며, 안 써도 됩니다)
// scene.createDefaultEnvironment({
//   createSkybox: true,
//   skyboxSize: 50
// });

return scene;
};

const scene = createScene();
engine.runRenderLoop(() => scene.render());
window.addEventListener("resize", () => engine.resize());

위 코드에서 핵심은 scene.environmentTexture 한 줄입니다. 같은 PBR 재질이라도 환경맵이 없으면 반사 정보가 부족해 “재질이 가짜처럼” 보일 수 있습니다. 반대로 환경맵을 붙이면 금속은 선명한 하이라이트와 주변 반사가 살아나고, 플라스틱은 거칠기에 따라 반사가 부드럽게 퍼집니다.

전/후 비교는 주석 처리된 (A)/(B) 부분을 번갈아 적용해 렌더링 결과를 보는 방식으로 진행하시면 됩니다. 가능하면 스크린샷을 찍어 두고 한 화면에 비교해 보시는 것을 추천드립니다.

5) 산출물: PBR 쇼케이스 씬 만들기

이제 “학습 결과가 남는” 산출물을 만들어 보겠습니다. PBR 쇼케이스 씬의 목표는 딱 하나입니다. metallic/roughness 조합이 반사에 미치는 영향을 한눈에 보이게 구성하는 것입니다.

추천 구성은 다음과 같습니다.

구체 6~9개를 격자 형태로 배치
가로축: metallic 0.0 → 1.0, 세로축: roughness 0.05 → 0.9
HDRI 환경맵은 고정, environmentIntensity로 전체 톤만 미세 조정
직접광은 과하지 않게(형태만 드러나는 수준)

이 쇼케이스가 완성되면, 이후 텍스처(알베도/노멀/ORM)를 붙이기 전에 “내가 원하는 재질 느낌이 어떤 파라미터 영역인지”를 빠르게 감으로 잡을 수 있어 작업 속도가 크게 올라갑니다.

따라하기

기본 씬을 준비합니다.

ArcRotateCamera + DirectionalLight 1개 + 바닥(ground) 정도로 시작합니다. 라이트를 많이 쓰기보다, 환경맵 변화가 잘 보이게 “단순한 씬”이 좋습니다.
PBR 머티리얼을 최소 2개 만들고(금속/비금속) 구체에 적용합니다.

metallic=1, roughness=0.1~0.2(금속) / metallic=0, roughness=0.5~0.7(플라스틱)처럼 극단값으로 시작하면 차이가 확실히 보입니다.
HDRI 적용 전 상태를 캡처합니다.

scene.environmentTexture를 비워 둔 상태에서 스크린샷을 찍어 두세요. 이 “기준 화면”이 있어야 전/후 개선이 명확해집니다.
HDRI 환경맵(.env)을 적용하고 동일 구도로 다시 캡처합니다.

scene.environmentTexture에 프리필터 .env를 지정합니다. 적용 후에는 environmentIntensity를 0.6~1.2 범위에서 미세 조정해 과한 반사/어두운 톤을 잡습니다.
PBR 쇼케이스 씬으로 확장합니다.

구체를 여러 개 만들고 roughness/metallic을 단계적으로 변화시키세요. 같은 HDRI 아래에서 재질 파라미터만 바꿔도 반사가 어떻게 달라지는지 “규칙”이 눈에 들어오기 시작합니다.

비교 표

아래 표는 “HDRI 환경맵 적용 전/후”에서 초보자가 가장 먼저 체감하는 차이를 정리한 것입니다. 전/후 비교 스크린샷과 함께 표를 붙여두면 학습 기록으로도 좋습니다.

항목	HDRI 적용 전 (environmentTexture 없음)	HDRI 적용 후 (environmentTexture 있음)	확인 포인트
금속 하이라이트	빛이 단순하고 “번쩍임”이 약함	스튜디오 조명처럼 강한 하이라이트와 그라데이션	구체 표면의 밝은 점이 “그럴듯한 형태”인지
환경 반사 디테일	주변이 비치지 않아 재질이 평평해 보임	주변 환경이 반사되어 입체감/현실감 상승	금속은 선명, 거친 재질은 흐릿하게 퍼지는지
전체 색감/분위기	직접광 위주로 톤이 “게임 조명”처럼 단조로움	실제 공간 톤처럼 자연스러운 컬러 캐스팅	그림자/중간톤이 너무 꺼지거나 뜨지 않는지
튜닝 난이도	라이트를 계속 추가/수정하게 됨	environmentIntensity + 라이트 1~2개로 안정적	라이트보다 환경맵 먼저 잡는 습관

추가로 생각해볼 점

HDRI는 “무조건 강하게”가 아니라, 씬 목적에 맞게 environmentIntensity와 톤 매핑을 함께 고려하는 편이 결과가 깔끔합니다.
반사가 거칠기에 따라 예쁘게 퍼지지 않는다면, 환경맵이 프리필터되어 있는지(.env)와 재질 파라미터(roughness)가 의도대로 들어갔는지부터 점검해 보시면 좋습니다.
다음 단계에서는 ORM(occlusion-roughness-metallic) 텍스처, 노멀맵, 그리고 IBL(이미지 기반 조명) 최적화(해상도/용량)로 품질과 성능을 동시에 잡는 흐름이 좋습니다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

BabylonJS 기초 8일차 : HDRI 환경맵(environmentTexture)으로 반사(reflection) 품질 한 단계 올리기