BabylonJS 기초 6일차: StandardMaterial 기초 — diffuse/specular/emissive, texture tiling로 바닥 타일 씬 만들기
한눈에 보는 요약
StandardMaterial은 BabylonJS에서 가장 전통적인(Phong 계열) 재질로, “색(확산)”, “광택(하이라이트)”, “자체발광(빛과 무관한 밝기)”을 분리해서 조절할 수 있습니다. 이 3가지를 분리해 생각하면, 조명이 바뀌어도 왜 물체가 그렇게 보이는지 원인을 빠르게 짚을 수 있습니다.
diffuse는 물체의 기본색(빛을 받으면 드러나는 색), specular는 반짝임(광원 반사 하이라이트), emissive는 조명 없이도 스스로 보이는 밝기입니다. 텍스처는 보통 diffuseTexture로 넣고, diffuseColor와 곱해져 최종 색감을 결정합니다.
“바닥 타일”처럼 반복되는 패턴은 텍스처의 uScale/vScale(반복), uOffset/vOffset(이동), wAng(회전)을 조절해 만들 수 있습니다. 실습에서는 바닥에 타일 텍스처를 적용하고, 반복·회전·오프셋으로 정렬감을 맞춘 뒤, 광택을 조절해 현실적인 바닥 느낌을 만듭니다.
목차
- 1. StandardMaterial을 배우는 이유(감 잡기 좋은 재질)
- 2. diffuse/specular/emissive를 ‘시각적 역할’로 이해하기
- 3. Texture tiling: 반복/회전/오프셋의 원리
- 4. 실습: 이미지 텍스처 적용 & 바닥 타일 씬 구성
- 5. 흔한 문제(너무 반짝임, 이음새, 흐림)와 해결 체크
- 6. 따라하기: “바닥 타일 텍스처” 씬 완성 절차
- 블로그 최적화 정보
핵심 포인트
- diffuse: “빛을 받았을 때 드러나는 기본색”입니다. 텍스처를 붙이면 보통 diffuseTexture가 이 역할을 담당합니다.
- specular: “광원 하이라이트(반짝임)”입니다. 값이 크면 플라스틱/유광 느낌, 낮추면 무광 타일 느낌이 납니다.
- emissive: “조명과 무관하게 스스로 보이는 밝기”입니다. 네온/LED/표지판 같은 효과에 유용하지만 과하면 ‘어색하게 빛나는’ 느낌이 납니다.
- uScale/vScale로 반복 횟수를 늘리고, uOffset/vOffset로 패턴 시작점을 이동하며, wAng로 텍스처를 회전합니다.
- LEFT/RIGHT가 아니라 “기준은 UV(0~1)”입니다. 바닥 메시는 기본적으로 UV가 깔려 있고, 스케일/오프셋/회전은 UV 좌표를 변형해 “찍는 방식”을 바꿉니다.
상세 설명
1) StandardMaterial을 배우는 이유(감 잡기 좋은 재질)
BabylonJS에는 PBRMaterial 같은 현대적인 재질도 있지만, 처음에는 개념이 한 번에 너무 많이 들어옵니다. StandardMaterial은 “색(확산) + 반짝임(하이라이트) + 자체발광”처럼 화면에서 보이는 요소가 비교적 직관적으로 나뉘어 있어, 재질 감각을 익히기에 좋습니다.
특히 “왜 내 오브젝트가 너무 번쩍거릴까?”, “왜 어두운 곳에서도 너무 밝지?” 같은 질문에 대해, StandardMaterial은 문제 원인을 채널 단위로 빠르게 분리해서 잡을 수 있습니다. 이 감각은 이후 PBR로 넘어가도 그대로 도움이 됩니다.
2) diffuse/specular/emissive를 ‘시각적 역할’로 이해하기
세 채널을 물리 용어로 외우기보다, “화면에서 어떤 부분을 담당하는지”로 이해하는 것이 빠릅니다. 아래 표를 기준으로, 결과가 마음에 들지 않을 때 무엇을 만져야 하는지 바로 판단할 수 있도록 정리해 보겠습니다.
채널 역할 비교 표
StandardMaterial에서 자주 건드리는 3개 채널을 “보이는 결과” 중심으로 정리한 표입니다.
| 채널 | 화면에서 보이는 역할 | 대표 속성 | 자주 하는 실수 | 바닥 타일 추천 방향 |
|---|---|---|---|---|
| diffuse | 빛을 받으면 드러나는 기본색/질감 | diffuseColor, diffuseTexture | 텍스처가 있는데 diffuseColor를 너무 진하게 넣어 전체가 탁해짐 | diffuseColor는 중립(흰색)에 가깝게 두고 텍스처를 살리는 편이 안전 |
| specular | 반짝임(광원 하이라이트)과 유광 느낌 | specularColor, specularPower | 기본 specular가 강해 타일이 플라스틱처럼 번쩍거림 | 무광 타일은 specularColor를 낮추거나 0에 가깝게, 필요 시 power 조절 |
| emissive | 조명과 무관하게 스스로 밝게 보임 | emissiveColor, emissiveTexture | emissive를 올려 어두운 씬에서도 ‘이상하게 빛남’ | 바닥은 보통 emissive는 0에 가깝게, 특별한 효과가 있을 때만 사용 |
핵심은 “diffuse는 질감의 주역”, “specular는 유광/무광의 결정타”, “emissive는 조명 규칙을 무시하는 특수효과”라는 역할 분리입니다. 이 구분이 잡히면 재질 튜닝이 매우 빨라집니다.
3) Texture tiling: 반복/회전/오프셋의 원리
바닥 타일은 보통 하나의 텍스처 이미지를 바닥 전체에 크게 늘려 붙이지 않습니다. 대신 “작은 패턴을 여러 번 반복”시켜 자연스러운 타일감을 만듭니다. 이때 텍스처의 좌표계(UV)를 조절하는 것이 texture tiling입니다.
간단히 말하면, 메시는 UV(0~1)를 가지고 있고, 텍스처는 그 UV에 맞춰 “어디를 찍을지”를 결정합니다. uScale/vScale을 키우면 UV가 더 크게 ‘샘플링’되어 텍스처가 더 많이 반복됩니다. uOffset/vOffset은 시작점을 이동시키며, wAng는 UV 공간에서 텍스처를 회전시킵니다.
텍스처 변형 속성 빠른 표
실습에서 사용할 텍스처 속성을 “무엇을 바꾸는지” 중심으로 정리합니다.
| 속성 | 효과 | 값 예시 | 실무 팁 |
|---|---|---|---|
| uScale / vScale | 가로/세로 반복(타일링) 횟수 | 4, 8, 12... | 너무 크게 하면 패턴이 작아져 ‘노이즈’처럼 보일 수 있습니다. |
| uOffset / vOffset | 패턴 시작점 이동 | 0.1, -0.25... | 벽/오브젝트 경계에 패턴이 어색하게 걸릴 때 미세조정에 유용합니다. |
| wAng | 텍스처 회전(보통 Z축 회전처럼 체감) | Math.PI / 4 | 바닥이 45도 방향 타일처럼 보이게 만들 때 자주 사용합니다. |
| wrapU / wrapV | 반복 방식(감기/클램프 등) | WRAP / CLAMP | 반복이 안 되고 가장자리 색이 늘어나면 wrap 모드를 점검하세요. |
4) 실습: 이미지 텍스처 적용 & 바닥 타일 씬 구성
이번 실습의 목표는 “바닥 타일이 그럴듯하게 보이게” 만드는 것입니다. 따라서 (1) 바닥 메시 생성, (2) StandardMaterial 생성, (3) diffuseTexture 적용, (4) 타일링/회전/오프셋 조절, (5) 반짝임 억제 순으로 진행하면 안정적입니다.
코드 예시: 전체 HTML 한 파일로 실행하기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>BabylonJS - Floor Tile Texture</title>
<style>
html, body { width:100%; height:100%; margin:0; overflow:hidden; }
#renderCanvas { width:100%; height:100%; touch-action:none; display:block; }
</style>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
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 / 3, 10,
new BABYLON.Vector3(0, 0, 0),
scene
);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("hemi",
new BABYLON.Vector3(0, 1, 0),
scene
);
light.intensity = 0.9;
// 바닥(타일)
const ground = BABYLON.MeshBuilder.CreateGround("ground",
{ width: 10, height: 10, subdivisions: 2 },
scene
);
const mat = new BABYLON.StandardMaterial("tileMat", scene);
// 텍스처(원격 이미지 예시: 본인 이미지로 교체 가능)
const tex = new BABYLON.Texture(
"https://assets.babylonjs.com/textures/floor.png",
scene
);
// 타일링(반복), 회전, 오프셋
tex.uScale = 6;
tex.vScale = 6;
tex.wAng = Math.PI / 4;
tex.uOffset = 0.02;
tex.vOffset = 0.01;
mat.diffuseTexture = tex;
// 무광 타일 느낌: 반짝임 줄이기
mat.specularColor = new BABYLON.Color3(0.05, 0.05, 0.05);
mat.specularPower = 32;
// 바닥은 보통 자체발광을 쓰지 않음
mat.emissiveColor = new BABYLON.Color3(0, 0, 0);
ground.material = mat;
// 기준 물체(광택 비교용)
const box = BABYLON.MeshBuilder.CreateBox("box", { size: 1 }, scene);
box.position.y = 0.5;
return scene;
};
const scene = createScene();
engine.runRenderLoop(() => scene.render());
window.addEventListener("resize", () => engine.resize());
```
위 코드는 “바닥 타일 텍스처” 산출물을 한 파일로 실행할 수 있도록 구성한 예시입니다. 바닥에 StandardMaterial을 적용하고, diffuseTexture로 타일 이미지를 붙인 뒤 uScale/vScale로 반복 횟수를 늘렸습니다. wAng로 45도 회전을 주어 타일 방향을 바꿨고, uOffset/vOffset으로 미세한 정렬감을 맞췄습니다. 마지막으로 specularColor/specularPower를 낮춰 바닥이 과하게 번쩍거리지 않도록 조정했습니다.
코드 예시: 텍스처 반복/회전/오프셋만 빠르게 조절하기
// 반복(Scale): 숫자가 커질수록 더 촘촘하게 반복됩니다.
tex.uScale = 8;
tex.vScale = 8;
// 회전(Angle): 라디안 단위입니다. 90도 = Math.PI / 2
tex.wAng = Math.PI / 4;
// 오프셋(Offset): 0~1 범위에서 한 타일 내 위치를 이동시키는 느낌으로 이해하면 쉽습니다.
tex.uOffset = 0.10;
tex.vOffset = -0.05;이 블록은 “바닥 타일처럼 반복되는 패턴”을 만드는 핵심 조작만 모아둔 것입니다. uScale/vScale은 반복 횟수를 결정하므로 가장 먼저 잡아야 하고, wAng는 방향성을 바꾸는 데 유용합니다. 오프셋은 타일이 경계에서 어색하게 끊기는 느낌을 줄이거나, 다른 오브젝트와 패턴을 맞출 때 미세 조정으로 쓰기 좋습니다.
5) 흔한 문제(너무 반짝임, 이음새, 흐림)와 해결 체크
-
문제: 바닥이 플라스틱처럼 번쩍거립니다.
해결: mat.specularColor를 낮추거나 거의 0으로 두고, specularPower도 함께 조절합니다. “무광”을 원하면 specularColor를 먼저 줄이는 것이 체감이 빠릅니다. -
문제: 타일이 반복되지 않고 가장자리 색이 늘어납니다.
해결: 텍스처의 wrapU/wrapV 모드를 점검합니다. 반복이 목적이라면 WRAP 계열 주소 모드가 필요합니다(환경에 따라 기본값이 다를 수 있으니 의도적으로 지정하는 습관이 안전합니다). -
문제: 멀리서 텍스처가 흐리거나 번져 보입니다.
해결: 바닥 같은 표면은 시선 각도가 누워서 보이는 경우가 많습니다. 가능한 경우 텍스처 필터링(예: anisotropic filtering) 옵션을 점검하고, 텍스처 해상도도 함께 확인합니다. -
문제: 이음새(seam)가 눈에 띕니다.
해결: 이미지 자체가 “완전한 타일(Seamless) 텍스처”인지 확인합니다. 타일링이 아무리 잘 되어도 원본 이미지가 seamless가 아니면 반복 경계가 드러납니다. -
문제: 어두운 씬인데 바닥이 이상하게 밝습니다.
해결: emissiveColor가 올라가 있지 않은지 확인합니다. 바닥은 기본적으로 emissive를 0에 가깝게 두는 것이 자연스럽습니다.
따라하기: “바닥 타일 텍스처” 씬 완성 절차
-
씬 기본 골격(카메라/조명)을 먼저 만듭니다.
재질은 조명의 영향을 받기 때문에, 조명이 없는 상태에서 재질을 튜닝하면 판단이 흔들립니다. HemisphericLight 하나로 시작하고, 강도(intensity)를 0.8~1.0 정도로 고정해두면 비교가 쉬워집니다. -
바닥 메시(ground)를 만들고 StandardMaterial을 할당합니다.
먼저 diffuseColor만으로 바닥의 기본 톤을 확인해 보십시오. 이후 diffuseTexture를 붙이면 “텍스처가 색감을 얼마나 바꾸는지”가 명확히 보입니다. -
diffuseTexture를 붙이고 uScale/vScale로 반복 횟수를 잡습니다.
바닥은 넓기 때문에 기본(1,1)으로 두면 텍스처가 지나치게 크게 늘어나는 경우가 많습니다. 4~10 사이에서 반복 횟수를 조정하며 “타일 크기”가 자연스러운 지점을 찾습니다. -
wAng로 회전, uOffset/vOffset으로 정렬감을 맞춥니다.
바닥이 대각선 타일처럼 보이게 하려면 wAng를 활용합니다. 오프셋은 미세조정이므로, 반복이 먼저 잡힌 뒤에 적용하는 편이 시행착오가 줄어듭니다. -
specular을 줄여 ‘무광 타일’ 느낌을 만듭니다.
바닥이 너무 반짝이면 공간 전체가 장난감처럼 보입니다. specularColor를 낮추고, 필요하면 specularPower를 조절해 하이라이트가 날카롭게 박히는 느낌을 완화합니다. -
비교용 오브젝트(박스/구) 하나를 놓고 결과를 확인합니다.
바닥만 보면 반짝임이 잘 안 느껴질 수 있습니다. 옆에 기본 재질의 박스를 하나 두고, 바닥의 광택이 상대적으로 과한지/적당한지 비교하면 튜닝 속도가 빨라집니다.
추가로 생각해볼 점
- StandardMaterial은 학습용으로 매우 좋지만, 사실적인 재질 표현을 목표로 한다면 이후 PBRMaterial(roughness/metallic 등)로 확장하는 것이 일반적입니다. 다만 그때도 “diffuse/광택/자체발광”에 해당하는 감각은 그대로 도움이 됩니다.
- 바닥이 더 현실적으로 보이게 하려면 bumpTexture(또는 normal map)를 추가해 요철감을 주는 방법이 있습니다. 단, 오늘 목표는 “색/광택/타일링 감 잡기”이므로 다음 단계로 확장하는 편이 학습 흐름에 좋습니다.
- 타일이 너무 규칙적으로 보이면 uOffset/vOffset을 애니메이션처럼 살짝 변화시키기보다, 서로 다른 바닥 영역에 서로 다른 타일 텍스처(또는 디칼)를 섞어 “반복 패턴 피로감”을 줄이는 접근도 효과적입니다.
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
0 댓글