BabylonJS 기초 7일차 : PBRMaterial로 “그럴듯함” 만들기

BabylonJS 기초 7일차 : PBRMaterial로 “그럴듯함” 만들기 — Albedo/Metallic/Roughness/Normal/AO, 재질 비교판 실습

한눈에 보는 요약

실사 느낌의 핵심은 “색을 예쁘게 칠한다”가 아니라, 빛이 표면에서 반사/확산되는 규칙을 그럴듯하게 만든다는 데 있습니다.
PBRMaterial은 그 규칙을 입력으로 받습니다. 대표 입력이 Albedo(기본색), Metallic(금속성), Roughness(거칠기), Normal(미세 요철), AO(틈 어두움)입니다.
학습 효율을 높이려면 “값을 외우기”보다, 같은 형태의 오브젝트 3개(금속/플라스틱/고무)를 나란히 두고, roughness만 바꿔가며 눈으로 변화를 고정하는 방식이 가장 빠릅니다.
PBR은 환경 반사(IBL, environmentTexture)가 없으면 반사 성분이 죽어 실사 느낌이 확 떨어집니다. 재질과 환경은 세트로 생각하는 편이 좋습니다.

1. PBR이 “그럴듯함”을 만드는 이유
2. 핵심 개념 5종: albedo/metallic/roughness/normal/AO
3. IBL(환경 반사)이 PBR에서 중요한 이유
4. PBR 텍스처 세트 적용(Albedo/Normal/AO/Metal-Rough)
5. 실습: 금속/플라스틱/고무 재질 비교판 만들기
6. 흔한 문제와 체크리스트(실무 디버깅 루틴)
7. 따라하기: 산출물 완성 절차
블로그 최적화 정보

핵심 포인트

Metallic은 “재질 종류 스위치”에 가깝습니다. 금속(1)에 가까울수록 반사가 주인공이고, 비금속(0)에 가까울수록 기본색(확산)이 주인공입니다.
Roughness는 “유광↔무광”을 결정합니다. 낮으면 반사가 선명(거울 느낌), 높으면 반사가 흐릿(고무/무광 코팅 느낌)해집니다.
Normal은 메시를 실제로 울퉁불퉁하게 만들지 않아도 빛 반응만 바꿔 디테일을 만들어줍니다.
AO는 틈/굴곡을 눌러 “평평함”을 줄여줍니다. 다만 과하면 전체가 칙칙해집니다.
리스트 글머리 기호(•)와 문장이 떨어지는 현상은 대개 li 내부 p의 기본 margin 때문입니다. 본문 상단 CSS(이미 포함)로 예방하고, 리스트 항목을 p로 감싸지 않는 마크업 패턴을 추천합니다.

상세 설명

1) 핵심 개념 5종: albedo/metallic/roughness/normal/AO

PBR을 처음 접할 때 가장 헷갈리는 지점은 “각 맵이 무엇을 바꾸는지”입니다. 아래 표를 기준으로, 결과가 마음에 들지 않을 때 어떤 값을 만져야 하는지 빠르게 판단할 수 있도록 정리해 보겠습니다.

요소	화면에서의 역할(체감)	값/맵이 커지면	값/맵이 작아지면	가장 흔한 실수
Albedo (BaseColor)	기본 색/무늬(표면의 “염색”)	색이 진해지고 무늬가 강조됨	색이 빠지고 밋밋해짐	알베도에 그림자/하이라이트를 포함해 “빛이 두 번” 들어감
Metallic	금속/비금속 구분(반사 성질 변화)	금속처럼 반사가 강해지고 반사색이 재질색과 섞임	플라스틱/고무처럼 하이라이트가 중립색(흰빛 계열)로 보임	플라스틱인데 metallic을 올려 “금속 플라스틱”이 됨
Roughness	거칠기(반사 선명도/하이라이트 크기)	무광, 반사가 흐릿하고 넓게 퍼짐	유광, 반사가 선명하고 하이라이트가 날카로움	roughness만으로 모든 재질을 해결하려고 함(한계 발생)
Normal	미세 요철(빛 반응 디테일)	표면이 더 울퉁불퉁해 보임	표면이 매끈하고 단순해 보임	강도를 과하게 올려 고무가 돌처럼 보임
AO	틈/굴곡의 어두움(입체감 보조)	틈이 더 눌리고 깊어 보임	전체가 평평해 보임	AO를 과하게 적용해 전체가 칙칙해짐

이 표를 “원인-처방 매핑표”로 생각하시면 좋습니다. 예를 들어 금속이 플라스틱처럼 보이면 metallic/IBL/roughness 순으로, 전체가 지저분하면 albedo/AO 순으로 점검하는 식입니다.

2) IBL(환경 반사)이 PBR에서 중요한 이유

PBR은 반사를 굉장히 많이 사용합니다. 그런데 반사는 “반사할 환경”이 있어야 살아납니다. 실무에서 PBR이 갑자기 그럴듯해지는 순간은 대부분 environmentTexture(IBL)를 넣었을 때입니다.

IBL이 없으면 금속이 “반사할 것”이 없어 밋밋해지고, 금속 특유의 깊이가 사라집니다.
IBL이 있으면 표면이 주변 환경을 반사해 재질의 성격이 즉시 드러납니다(유광/무광 차이도 더 명확).

3) PBR 텍스처 세트 적용: 무엇을 어디에 꽂아야 하나요?

PBR 텍스처는 대개 “세트”로 움직입니다. 가장 흔한 구성은 아래 4종입니다.

Albedo(BaseColor): 기본색/무늬(가능하면 조명 그림자/하이라이트가 없는 깨끗한 베이스)
Normal: 미세 요철
AO: 틈 어두움(있으면 좋지만 과하면 칙칙)
Metallic/Roughness: 금속성/거칠기(한 장에 합쳐진 ORM/ARM 형태로 제공되는 경우가 많음)

실습에서는 “세트 적용 + roughness 변화 비교”가 목표이므로, 처음부터 모든 맵을 완벽히 갖추기보다 아래 우선순위를 추천합니다.

1순위: IBL + metallic/roughness(값 또는 맵) → 재질 감이 즉시 잡힙니다.
2순위: albedo → 무늬/색이 붙어 ‘재질 표정’이 생깁니다.
3순위: normal → 디테일이 살아납니다.
4순위: AO → 입체감 보조(과하면 역효과)

4) 실습: 금속/플라스틱/고무 재질 비교판 만들기

산출물은 한 화면에서 세 재질을 비교하는 보드입니다. 같은 조명/같은 배경/같은 형태에서 재질만 바꾸면, 차이가 “학습 가능한 수준”으로 확 커집니다. 또한 roughness를 슬라이더로 바꿔가며 유광→무광 변화를 직접 확인합니다.

코드 예시: 한 파일로 완성하는 “금속/플라스틱/고무 재질 비교판”

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>BabylonJS PBR Material Board</title>
  <style>
    html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#111; }
    #wrap { position:relative; width:100%; height:100%; }
    #renderCanvas { width:100%; height:100%; display:block; touch-action:none; }
    #panel {
      position:absolute; left:12px; top:12px; width:320px;
      background:rgba(0,0,0,0.65); color:#fff; padding:12px 12px 10px;
      border-radius:12px; font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      line-height:1.35;
    }
    #panel h4 { margin:0 0 10px; font-size:14px; }
    #panel .row { margin:10px 0; }
    #panel label { display:block; font-size:12px; opacity:0.92; margin-bottom:6px; }
    #panel input[type="range"] { width:100%; }
    #panel .hint { font-size:12px; opacity:0.82; margin-top:6px; }
    #panel .badge {
      display:inline-block; padding:2px 8px; border-radius:999px;
      background:rgba(255,255,255,0.14); font-size:12px; margin-left:6px;
    }
  </style>
  <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<div id="wrap">
  <canvas id="renderCanvas"></canvas>


PBR 재질 비교판Metal

```
<div class="row">
  <label>Roughness(거칠기): <span id="roughVal">0.20</span></label>
  <input id="rough" type="range" min="0" max="1" step="0.01" value="0.20" />
  <div class="hint">낮을수록 유광(반사 선명), 높을수록 무광(반사 흐림)</div>
</div>

<div class="row">
  <label>Metallic(금속성): <span id="metalVal">1.00</span></label>
  <input id="metal" type="range" min="0" max="1" step="0.01" value="1.00" />
  <div class="hint">0=비금속(플라스틱/고무), 1=금속(반사 중심)</div>
</div>

<div class="hint">팁: 구(재질)를 클릭하면 해당 재질이 선택됩니다.</div>
```

코드 예시: ARM(=AO/Roughness/Metallic) 텍스처 채널 해석 “핵심만”

// ARM/ORM 패킹 텍스처를 metallicTexture로 연결
mat.metallicTexture = texARM;

// 채널 의미를 명시(이걸 안 하면 결과가 애매하거나 뒤집혀 보일 수 있습니다)
mat.useAmbientOcclusionFromMetallicTextureRed = true; // R 채널 = AO
mat.useRoughnessFromMetallicTextureGreen = true;      // G 채널 = Roughness
mat.useMetallnessFromMetallicTextureBlue = true;      // B 채널 = Metallic

ARM/ORM은 실무에서 매우 흔합니다. 한 장에 정보를 합쳐 로딩과 용량을 줄이지만, 채널 의미가 바뀌면 재질이 즉시 “이상하게” 보입니다. 따라서 텍스처 다운로드 페이지나 제작툴 내보내기 옵션에서 “R/G/B가 무엇인지”를 먼저 확인하는 습관이 중요합니다.

5) 흔한 문제와 체크리스트(실무 디버깅 루틴)

문제: 금속이 플라스틱처럼 보입니다.
점검: 1) metallic이 1에 가까운지, 2) environmentTexture(IBL)가 있는지(없으면 반사 성분이 약해짐), 3) roughness가 너무 높지 않은지(0.6 이상이면 대부분 무광 느낌) 확인합니다.
문제: 전체가 너무 칙칙하고 더럽게 보입니다.
점검: 1) 알베도 텍스처에 그림자/하이라이트가 포함돼 있지 않은지(빛이 두 번 들어가면 칙칙해지기 쉬움), 2) AO가 과하게 들어가 있지 않은지(레벨/강도) 확인합니다.
문제: 노말이 과장되어 표면이 돌처럼 보입니다.
점검: bumpTexture.level(노말 강도)을 낮춰 보세요. 특히 고무는 노말이 강하면 “거친 돌고무”처럼 보이기 쉽고, 실사에서는 대체로 반사가 흐릿하고 부드럽습니다(roughness가 높은 편).
문제: 텍스처가 이상하게 밝거나 번쩍입니다.
점검: Albedo는 sRGB(감마), Normal/AO/Metal/Rough는 선형(Linear)로 다뤄지는지 확인합니다. gammaSpace 설정이 뒤집히면 결과가 크게 흔들립니다.

따라하기: 산출물(재질 비교판) 완성 절차

먼저 scene.environmentTexture를 넣어 IBL을 켭니다. PBR의 차이는 반사에서 가장 빨리 드러나므로, IBL 없이 재질을 만지면 판단이 흔들릴 수 있습니다.
같은 크기의 구(또는 박스) 3개를 나란히 배치합니다. 비교판의 핵심은 “조건 통제”입니다(형태/조명/배경 동일).
PBRMaterial을 3개 만들고, 기본값으로 재질 성격을 먼저 확정합니다. 금속은 metallic=1, 플라스틱/고무는 metallic=0으로 고정하고 시작하면 방향이 빠르게 잡힙니다.
roughness로 유광↔무광을 조절합니다. 금속은 0.1~0.4에서 마감(유광/헤어라인)을 잡고, 플라스틱은 0.2~0.5, 고무는 0.7~0.95에서 시작해보시면 체감이 빠릅니다.
텍스처 세트를 연결합니다(Albedo → Normal → AO/Metal-Rough 순). 처음엔 “알베도+노말”만 붙여도 그럴듯함이 확 올라갑니다.
슬라이더로 roughness를 바꿔가며 “반사 선명도가 바뀌는 느낌”을 눈으로 고정합니다. 오늘 목표는 외우는 것이 아니라 감으로 기억하는 것입니다.

추가로 생각해볼 점

재질이 그럴듯해 보이려면 “값”뿐 아니라 “조명과 배경”도 중요합니다. 스튜디오 조명처럼 단순한 환경에서도 IBL 하나만 넣어도 결과가 크게 개선됩니다.
현업 텍스처는 ORM/ARM 외에도 glossiness(반대 개념) 워크플로가 존재합니다. roughness가 뒤집혀 보이면 “맵이 반대 정의인지”부터 확인해 보시는 편이 좋습니다.
고무/플라스틱은 metallic=0이 대부분이지만, 코팅/오염/물기 표현은 roughness와 normal, 그리고 환경 반사 세팅으로 “상황”을 만드는 것이 핵심입니다.

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

BabylonJS 기초 7일차 : PBRMaterial로 “그럴듯함” 만들기