Babylon.js란 무엇인가

Microsoft가 후원하는 오픈소스 JavaScript/TypeScript 3D 엔진. WebGL과 WebGPU 위에서 동작하며, 게임·시각화·XR 경험을 웹 브라우저에서 구현할 수 있습니다.

핵심 특징

• 장면 그래프(Scene Graph) 기반: 모든 3D 오브젝트는 Scene 아래 계층 구조로 관리됩니다.
• WebGPU 지원: 최신 브라우저에서 더 빠른 렌더링과 컴퓨트 셰이더 활용이 가능합니다.
• TypeScript 우선: 강력한 타입 시스템과 자동완성으로 개발 생산성이 높습니다.
• Playground: playground.babylonjs.com에서 별도 설치 없이 바로 실험 가능합니다.

다른 엔진과의 비교

설치와 첫 Scene 만들기

npm 설치 후 Engine → Scene → Camera → Light → Mesh 순으로 구성하는 것이 기본 흐름입니다.

패키지 설치

# 코어 + 로더 + GUI
npm install @babylonjs/core @babylonjs/loaders @babylonjs/gui

최소 동작 예제 (TypeScript)

import {
  Engine, Scene, ArcRotateCamera,
  HemisphericLight, MeshBuilder, Vector3
} from "@babylonjs/core";

const canvas = document.getElementById("c") as HTMLCanvasElement;
const engine = new Engine(canvas, true);
const scene  = new Scene(engine);

const camera = new ArcRotateCamera(
  "cam", -Math.PI/2, Math.PI/2.5,
  5, Vector3.Zero(), scene
);
camera.attachControl(canvas, true);

new HemisphericLight("h", new Vector3(0,1,0), scene);
MeshBuilder.CreateBox("box", { size: 1 }, scene);

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

핵심 빌딩 블록

Babylon.js의 모든 씬은 아래 5가지 요소의 조합으로 구성됩니다.

Engine

WebGL/WebGPU 컨텍스트를 감싸는 최상위 객체. Canvas와 1:1 매칭됩니다.

Scene

3D 공간 자체. 모든 카메라·라이트·메쉬의 컨테이너 역할.

Camera

시점. ArcRotateCamera(궤도), FreeCamera(FPS), UniversalCamera 등.

Light

Hemispheric(전역), Directional(태양광), Point(전구), Spot(스포트) 네 종류.

Mesh

실제 렌더링되는 기하 객체. 정점·인덱스·머티리얼을 가집니다.

좌표계 · 단위

Babylon.js는 왼손 좌표계(LH)가 기본이지만 scene.useRightHandedSystem = true로 glTF 호환을 위해 오른손으로 전환할 수 있습니다. 단위는 통상 1 unit = 1 meter로 다룹니다.

기본 도형과 간단한 인터랙션

MeshBuilder로 표준 도형을 만들고, ActionManager나 pointer 이벤트로 클릭·호버를 처리합니다.

자주 쓰는 MeshBuilder

MeshBuilder.CreateBox     ("b", { size: 1 }, scene);
MeshBuilder.CreateSphere  ("s", { diameter: 1, segments: 32 }, scene);
MeshBuilder.CreateGround  ("g", { width: 10, height: 10 }, scene);
MeshBuilder.CreateCylinder("c", { diameter: 1, height: 2 }, scene);

클릭 이벤트

import { ActionManager, ExecuteCodeAction } from "@babylonjs/core";

box.actionManager = new ActionManager(scene);
box.actionManager.registerAction(
  new ExecuteCodeAction(
    ActionManager.OnPickTrigger,
    () => { box.scaling.scaleInPlace(1.1); }
  )
);

Vue 3 컴포넌트로 래핑하기

Composition API + <script setup> 패턴으로 생명주기에 맞춰 엔진을 안전하게 생성/폐기합니다.

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import {
  Engine, Scene, ArcRotateCamera,
  HemisphericLight, MeshBuilder, Vector3
} from "@babylonjs/core";

const canvasRef = ref<HTMLCanvasElement>();
let engine: Engine | null = null;

onMounted(() => {
  engine = new Engine(canvasRef.value!, true);
  const scene = new Scene(engine);
  const cam = new ArcRotateCamera(
    "c",-Math.PI/2, Math.PI/2.5,5,
    Vector3.Zero(), scene
  );
  cam.attachControl(canvasRef.value!, true);
  new HemisphericLight("h", Vector3.Up(), scene);
  MeshBuilder.CreateBox("b", {}, scene);
  engine.runRenderLoop(() => scene.render());
});

onBeforeUnmount(() => engine?.dispose());
</script>

<template>
  <canvas ref="canvasRef" style="width:100%;height:100%" />
</template>

초급 체크리스트

여기까지 편하게 이해됐다면 중급으로 넘어갈 준비가 완료된 겁니다.

다음 단계에서 다룰 것

• StandardMaterial vs PBRMaterial의 차이와 색상·텍스처 적용
• Node Material Editor로 비주얼하게 셰이더 만들기
• GLSL로 직접 커스텀 셰이더 작성하기

머티리얼 — 객체에 색을 부여하는 방법

메쉬가 어떻게 빛에 반응하고 어떤 색·질감으로 보일지 결정하는 것이 Material입니다. Babylon.js는 4가지 접근을 제공합니다.

선택 가이드

StandardMaterial

레거시 Phong 기반. 가볍고 빠름. 간단한 단색/텍스처에 적합.

PBRMaterial

물리 기반 렌더링(금속성·거칠기). 사실적 비주얼의 표준.

NodeMaterial

노드 에디터로 셰이더를 시각적으로 구성. 커스텀 이펙트의 주력.

ShaderMaterial

GLSL을 직접 작성. 최대한의 자유도, 최대한의 책임.

StandardMaterial 빠른 적용

import { StandardMaterial, Color3, Texture } from "@babylonjs/core";

const mat = new StandardMaterial("m", scene);
mat.diffuseColor  = new Color3(0.75, 0.29, 1);  // 본체 색
mat.specularColor = Color3.Black();                 // 하이라이트 제거
mat.emissiveColor = new Color3(0.05, 0, 0.1);    // 자체 발광
mat.diffuseTexture = new Texture("/tex/wood.jpg", scene);
box.material = mat;

PBRMaterial — 사실적인 질감

금속성(metallic)과 거칠기(roughness)라는 두 축으로 거의 모든 실물 재질을 표현할 수 있습니다.

import { PBRMaterial, Color3, Texture } from "@babylonjs/core";

const pbr = new PBRMaterial("pbr", scene);
pbr.albedoColor     = Color3.FromHexString("#bf4aff");
pbr.metallic        = 0.9;   // 0 = 비금속, 1 = 금속
pbr.roughness       = 0.15;  // 0 = 거울, 1 = 완전 무광
pbr.environmentIntensity = 1.2;

// 환경 IBL (반사를 위해 권장)
scene.environmentTexture = CubeTexture.CreateFromPrefilteredData(
  "/env/studio.env", scene
);

sphere.material = pbr;

왜 PBR인가

• 아티스트 친화적: 값이 물리적 의미를 가져 직관적입니다.
• glTF 표준과 호환되어 외부 3D 자산을 그대로 쓸 수 있습니다.
• 다양한 조명 환경에서 일관된 결과를 줍니다.

Node Material Editor

셰이더를 코드가 아니라 노드 그래프로 설계하는 도구. 결과는 그대로 Babylon 씬에 저장·로드됩니다.

에디터 접근

nme.babylonjs.com에서 브라우저로 바로 실행. 상단의 Save를 눌러 .json으로 저장하면 그대로 Babylon에서 불러올 수 있습니다.

JSON으로 로드하기

import { NodeMaterial } from "@babylonjs/core";

const nodeMat = await NodeMaterial.ParseFromFileAsync(
  "myGlow",
  "/materials/glow.json",
  scene
);
mesh.material = nodeMat;

// 런타임에 파라미터 바꾸기
const timeBlock = nodeMat.getBlockByName("Time");
// 또는 Input block 값 변경
const colorInput = nodeMat.getInputBlockByPredicate(
  b => b.name === "tint"
);
colorInput!.value = new Color3(1, 0.3, 0.7);

Node Material 실전 패턴

자주 쓰이는 3가지 패턴 — 프로시저럴 그라디언트, 프레넬 림 라이트, UV 스크롤.

1. 그라디언트 (두 색 혼합)

2. 프레넬 (외곽 하이라이트)

3. UV 스크롤 (흐르는 텍스처)

GLSL 직접 쓰기 — ShaderMaterial

완전한 제어가 필요할 때는 정점 셰이더와 프래그먼트 셰이더를 직접 작성합니다.

// vertex.glsl
precision highp float;
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
uniform   mat4 worldViewProjection;
varying   vec2 vUV;
varying   vec3 vN;
void main() {
  vUV = uv; vN = normal;
  gl_Position = worldViewProjection * vec4(position, 1.0);
}

// fragment.glsl
precision highp float;
uniform float time;
varying vec2  vUV;
void main() {
  vec3 c = 0.5 + 0.5 * cos(time + vUV.xyx + vec3(0,2,4));
  gl_FragColor = vec4(c, 1.0);
}

import { ShaderMaterial, Effect } from "@babylonjs/core";

Effect.ShadersStore["myVertexShader"]   = vertexSrc;
Effect.ShadersStore["myFragmentShader"] = fragSrc;

const mat = new ShaderMaterial("my", scene,
  { vertex: "my", fragment: "my" },
  {
    attributes: ["position", "normal", "uv"],
    uniforms:   ["worldViewProjection", "time"]
  }
);

let t = 0;
scene.onBeforeRenderObservable.add(() => {
  t += engine.getDeltaTime() / 1000;
  mat.setFloat("time", t);
});

언제 무엇을 쓸 것인가

Thin Instance — 왜 필요한가

같은 메쉬를 수천·수만 개 그려야 할 때(풀잎, 별, 파티클, 복셀, 건물 타일…) 각 객체를 일반 Mesh로 만들면 드로우콜과 메모리가 폭발합니다.

세 가지 선택지

Mesh.clone()

완전 복제. 각자 변환·머티리얼 독립. 가장 무거움.

Mesh.createInstance()

GPU 인스턴싱. 각 인스턴스는 Node로 존재해 JS 오버헤드 존재. 수천 개까지.

Thin Instance

JS Node 없이 변환 행렬만 버퍼로 GPU에 올림. 수만~수십만 개에 적합.

성능 감각

같은 박스 50,000개 렌더 (데스크톱 기준, 참고용):

  Mesh 50,000개       →  프레임 1~3 FPS  (드로우콜 5만)
  Instance 50,000개   →  프레임 30~45 FPS (드로우콜 1, JS 비용 있음)
  Thin Instance 5만   →  프레임 60 FPS     (드로우콜 1, JS 비용 거의 0)

Thin Instance 기본 사용법

원본 메쉬 하나에 4×4 변환 행렬 버퍼를 넘기면 끝입니다.

import { MeshBuilder, Matrix } from "@babylonjs/core";

const base = MeshBuilder.CreateBox("b", { size: 0.2 }, scene);

const count = 50000;
const matrices = new Float32Array(count * 16);

for (let i = 0; i < count; i++) {
  const m = Matrix.Translation(
    (Math.random()-0.5) * 50,
    (Math.random()-0.5) * 50,
    (Math.random()-0.5) * 50
  );
  m.copyToArray(matrices, i * 16);
}

// 두 번째 인자 true → GPU staticBuffer로 최적화
base.thinInstanceSetBuffer("matrix", matrices, 16, true);

개별 갱신이 필요하면

// 정적이 아니라 매 프레임 바뀐다면 staticBuffer=false
base.thinInstanceSetBuffer("matrix", matrices, 16, false);

scene.onBeforeRenderObservable.add(() => {
  // 100번째 인스턴스만 회전
  const m = Matrix.RotationY(performance.now() * 0.001);
  m.copyToArray(matrices, 100 * 16);
  base.thinInstanceBufferUpdated("matrix");
});

편의 API와 인스턴스별 색상

직접 Float32Array를 다루지 않아도 되는 헬퍼가 있고, 인스턴스마다 다른 색도 줄 수 있습니다.

편의 메서드

// 개수만 지정해 한 번에 할당 (행렬은 Identity로 초기화)
base.thinInstanceCount = 10000;

// 한 개씩 추가하는 패턴
for (let i = 0; i < 10; i++) {
  const m = Matrix.Translation(i, 0, 0);
  base.thinInstanceAdd(m);      // refresh=true가 기본
}

// 특정 인덱스 덮어쓰기
base.thinInstanceSetMatrixAt(3, Matrix.Scaling(2,2,2));

인스턴스별 색상

const colors = new Float32Array(count * 4);
for (let i = 0; i < count; i++) {
  colors[i*4+0] = Math.random();
  colors[i*4+1] = Math.random();
  colors[i*4+2] = Math.random();
  colors[i*4+3] = 1;
}

base.thinInstanceSetBuffer("color", colors, 4, true);

// StandardMaterial은 vertex color를 쓰도록 알려야 함
(mat as StandardMaterial).diffuseColor = Color3.White();
(mat as any).useVertexColors = true;

피킹, 컬링, 그림자

Thin Instance는 Node가 아니기 때문에 일반 기능 몇 가지를 명시적으로 켜줘야 합니다.

개별 피킹 활성화

// 기본적으로 thin instance는 하나의 메쉬로 피킹됨
base.thinInstanceEnablePicking = true;

scene.onPointerDown = () => {
  const pick = scene.pick(scene.pointerX, scene.pointerY);
  if (pick?.pickedMesh === base) {
    console.log("클릭한 인스턴스 인덱스:", pick.thinInstanceIndex);
  }
};

프러스텀 컬링

기본값은 원본 메쉬의 바운딩 박스로 전체가 같이 컬링됩니다. 인스턴스가 넓게 퍼져 있다면 다음 중 하나를 쓰세요.

// 1) 수동으로 큰 바운딩 박스 설정
base.setBoundingInfo(new BoundingInfo(
  new Vector3(-100,-100,-100),
  new Vector3(100, 100, 100)
));

// 2) 인스턴스별 개별 컬링 활성화 (오버헤드 있음)
base.thinInstanceEnablePicking = true;
base.thinInstanceRefreshBoundingInfo(true);

종합 예제 — 64,000개 큐브 그리드

지금까지 배운 것을 한 번에: 40×40×40 그리드에 색상 그라디언트를 입힌 큐브를 단 1회 드로우콜로 렌더링합니다. Babylon.js Playground의 대표 Thin Instance 데모를 TypeScript + Vue 3로 옮긴 버전입니다.

createScene 함수 (TypeScript)

import {
  Engine, Scene, ArcRotateCamera, Vector3,
  MeshBuilder, Matrix, StandardMaterial, Color3
} from "@babylonjs/core";

export const createScene = (
  engine: Engine,
  canvas: HTMLCanvasElement
): Scene => {
  const scene = new Scene(engine);

  const camera = new ArcRotateCamera(
    "Camera", -Math.PI / 5, Math.PI / 3, 200,
    Vector3.Zero(), scene
  );
  camera.attachControl(canvas, true);

  const box = MeshBuilder.CreateBox("root", { size: 1 }, scene);
  const numPerSide = 40;
  const size = 100;
  const ofst = size / (numPerSide - 1);
  const m = Matrix.Identity();
  let col = 0, index = 0;
  const instanceCount = numPerSide ** 3; // 64,000
  const matricesData = new Float32Array(16 * instanceCount);
  const colorData    = new Float32Array(4  * instanceCount);

  for (let x = 0; x < numPerSide; x++) {
    m.m[12] = -size / 2 + ofst * x;
    for (let y = 0; y < numPerSide; y++) {
      m.m[13] = -size / 2 + ofst * y;
      for (let z = 0; z < numPerSide; z++) {
        m.m[14] = -size / 2 + ofst * z;
        m.copyToArray(matricesData, index * 16);
        const coli = Math.floor(col);
        colorData[index*4]   = ((coli & 0xff0000) >> 16) / 255;
        colorData[index*4+1] = ((coli & 0x00ff00) >>  8) / 255;
        colorData[index*4+2] = ((coli & 0x0000ff)       ) / 255;
        colorData[index*4+3] = 1.0;
        index++; col += 0xffffff / instanceCount;
      }
    }
  }
  box.thinInstanceSetBuffer("matrix", matricesData, 16);
  box.thinInstanceSetBuffer("color",  colorData,    4);
  const mat = new StandardMaterial("material", scene);
  mat.disableLighting = true;
  mat.emissiveColor   = Color3.White();
  box.material = mat;
  return scene;
};
export default createScene;

Vue 3 컴포넌트에서 쓰기

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { Engine } from "@babylonjs/core";
import createScene from "./createScene";
const canvasRef = ref<HTMLCanvasElement>();
let engine: Engine | null = null;
onMounted(() => {
  const canvas = canvasRef.value!;
  engine = new Engine(canvas, true);
  const scene = createScene(engine, canvas);
  engine.runRenderLoop(() => scene.render());
  window.addEventListener("resize", () => engine?.resize());
});
onBeforeUnmount(() => engine?.dispose());
</script>
<template><canvas ref="canvasRef" style="width:100%;height:100vh" /></template>

원본 JS → TS 변환 포인트

var → const/let

재할당되는 변수만 let, 나머지는 const.

BABYLON.*

전역 대신 @babylonjs/core에서 이름 임포트 — 트리쉐이킹에 유리.

BoxBuilder

최신 API는 MeshBuilder.CreateBox로 통합. BoxBuilder는 레거시.

엔진 주입

전역 engine/canvas 대신 파라미터로 받아 테스트·재사용이 쉬워짐.

실무 체크리스트 & 다음 목적지

Thin Instance 운영 원칙

• 정적이면 staticBuffer = true, 동적이면 false로 명확히 분리
• 가능한 한 애니메이션은 셰이더 안에서 처리 (CPU 오프로드)
• 피킹이 필요하면 thinInstanceEnablePicking, 넓게 퍼지면 바운딩 수동 설정
• 섀도우 · 반사 리스트에 원본 메쉬를 등록
• 인스턴스 수가 극단적이면 청크로 분할해 필요할 때만 업로드

더 파볼 만한 주제

WebGPU

컴퓨트 셰이더로 인스턴스 변환을 GPU에서 생성하기

GPU Particles

파티클은 Thin Instance보다 전용 시스템이 더 적합한 경우가 많음

LOD

거리별 다른 메쉬를 Thin Instance 세트로 교체

Havok Physics

Thin Instance는 기본적으로 물리 바디가 없음 → 필요 시 수동 동기화

행렬과 3D 변환의 기초

3D 공간에서 모든 물체의 위치·방향·크기는 결국 하나의 4×4 행렬로 표현됩니다. Position, Rotation, Scale이 어떻게 행렬로 합쳐지는지 살펴봅니다.

세 가지 변환 요소

Translation (이동)

물체를 X·Y·Z 방향으로 얼마나 이동시킬지. Babylon에서는 mesh.position (Vector3).

Rotation (회전)

물체를 각 축 기준으로 얼마나 돌릴지. mesh.rotation(오일러) 또는 mesh.rotationQuaternion.

Scale (크기)

물체를 각 축 방향으로 얼마나 늘리거나 줄일지. mesh.scaling (Vector3).

4×4 행렬이 필요한 이유

3D 공간은 3개의 축(x, y, z)이 있지만 이동(Translation)을 곱셈으로 표현하려면 4×4 행렬이 필요합니다. 이를 동차 좌표계(Homogeneous Coordinates)라 합니다. 4번째 성분(w)을 1로 설정하면 이동·회전·크기 변환을 모두 하나의 행렬 곱셈으로 처리할 수 있습니다.

[ Sx·Rxx  Rxy   Rxz   Tx ]
[  Ryx   Sy·Ryy Ryz   Ty ]   ←  4×4 변환 행렬
[  Rzx    Rzy  Sz·Rzz Tz ]
[   0      0     0    1  ]

Babylon.js에서 행렬 얻기

import { Matrix } from "@babylonjs/core";

// 메쉬의 월드 변환 행렬 (TRS 합성)
const worldMatrix: Matrix = mesh.getWorldMatrix();

// 직접 TRS 행렬 조합
const t = Matrix.Translation(1, 2, 3);
const r = Matrix.RotationYawPitchRoll(yaw, pitch, roll);
const s = Matrix.Scaling(2, 2, 2);
const m = s.multiply(r).multiply(t); // S→R→T

오일러각 vs 쿼터니언

회전을 표현하는 두 가지 방식의 차이와, 실무에서 쿼터니언을 써야 하는 이유를 짐벌락(Gimbal Lock)을 중심으로 설명합니다.

오일러각 (Euler Angles)

세 축(X·Y·Z)을 순서대로 회전시키는 방식. 직관적이지만 순서에 따라 결과가 달라지며, 특정 상황에서 자유도를 잃는 문제가 있습니다.

짐벌락이란?

예를 들어 Y축을 90° 회전시키면 X축과 Z축이 겹쳐버려 한 축의 자유도가 사라지는 현상입니다. 항공기·카메라 등 연속 회전이 많은 경우에 특히 문제가 됩니다.

쿼터니언 (Quaternion)

4개의 숫자 (x, y, z, w)로 회전을 표현하는 방식. 임의 축을 중심으로 한 번에 회전을 정의하므로 짐벌락이 수학적으로 불가능합니다.

짐벌락 없음

어떤 각도에서도 세 축이 독립적으로 유지됨.

SLERP 보간

두 회전 사이를 구면 선형 보간(Spherical Linear Interpolation)으로 자연스럽게 전환.

연산 효율

행렬(16개 값)보다 적은 데이터(4개), 연속 곱셈 시 오차 누적도 적음.

import { Quaternion, Vector3 } from "@babylonjs/core";

// 오일러 → 쿼터니언 변환
const q = Quaternion.FromEulerAngles(pitch, yaw, roll);

// SLERP: 두 회전 사이를 0~1 t로 보간
const blended = Quaternion.Slerp(qStart, qEnd, 0.5);

// 메쉬에 적용 (rotationQuaternion 사용 시 rotation 무시됨)
mesh.rotationQuaternion = q;

변환 행렬 (Transformation Matrix)

Translation·Rotation·Scale 세 요소를 하나로 합친 행렬이 변환 행렬입니다. Thin Instance에서 인스턴스마다 행렬 하나를 GPU에 전달하는 이유가 바로 여기에 있습니다.

변환 행렬 = T × R × S

import { Matrix, Quaternion, Vector3 } from "@babylonjs/core";

const position = new Vector3(3, 0, 1);
const rotation = Quaternion.FromEulerAngles(0, Math.PI / 4, 0); // Y 45°
const scale    = new Vector3(2, 2, 2);

// 세 가지를 하나의 4×4 행렬로 합성
const matrix = Matrix.Compose(scale, rotation, position);

Thin Instance와 변환 행렬

Thin Instance는 인스턴스별로 개별 mesh.position·rotation이 없습니다. 대신 각 인스턴스의 변환 행렬을 Float32Array(16개 값 × 인스턴스 수)로 묶어 GPU에 한꺼번에 전달합니다.

const count = 1000;
const buffer = new Float32Array(16 * count);

for (let i = 0; i < count; i++) {
  const m = Matrix.Compose(
    new Vector3(1, 1, 1),                          // scale
    Quaternion.Identity(),                           // rotation
    new Vector3(i * 2, 0, 0)                        // position
  );
  m.copyToArray(buffer, i * 16);
}

mesh.thinInstanceSetBuffer("matrix", buffer, 16);

로컬 공간 vs 월드 공간

로컬 공간

물체 자신을 기준으로 한 좌표계. Matrix.Compose로 만든 행렬은 보통 로컬 변환.

월드 공간

씬 전체 기준 좌표계. mesh.getWorldMatrix()는 부모 계층까지 포함한 최종 행렬.

부모-자식 계층

자식의 월드 행렬 = 부모 월드 행렬 × 자식 로컬 행렬. Babylon이 자동으로 계산.

Babylon Inspector 활용 가이드

Inspector는 씬 구조·머티리얼·라이트·성능 상태를 실시간으로 확인하는 디버깅 도구입니다. 개발 단계에서 가장 먼저 켜야 하는 도구입니다.

열기

import { Inspector } from "@babylonjs/inspector";

scene.debugLayer.show({
  embedMode: true,
  handleResize: true
});

Inspector에서 꼭 볼 항목

• Scene Explorer: 메시 계층과 활성/비활성 상태 확인
• Material: PBR 파라미터와 텍스처 슬롯 즉시 검증
• Stats: FPS, Draw Calls, Active Meshes 추적
• Debug: Bounding Box, Normals, Wireframe로 시각 디버깅

실무 팁

Inspector를 켜면 뜨는 창, 초보자용 해설

처음 Inspector를 열면 패널이 많아 보이지만, 실제로는 “무엇이 그려졌는지 / 왜 느린지 / 어디가 잘못됐는지”를 순서대로 보는 도구입니다.

1) Scene Explorer (왼쪽 트리)

• 무엇? 씬에 있는 Camera / Light / Mesh / TransformNode 목록.
• 언제? “분명 만든 메시가 안 보여요” 같은 상황에서 가장 먼저 확인.
• 어떻게? 트리에서 메시를 클릭하면 선택 상태가 되고, 활성/비활성 여부를 바로 볼 수 있습니다.

2) Properties / Material / Texture 패널

• 무엇? 선택한 객체의 위치·회전·스케일, 머티리얼 파라미터, 텍스처 슬롯.
• 핵심 포인트: PBR의 metallic, roughness, 알베도 텍스처 연결 상태.
• 초보 실수: 노멀맵을 알베도 슬롯에 꽂거나, 색 공간(sRGB/Linear)을 잘못 써서 색이 이상해짐.

3) Stats / Debug 패널

FPS

현재 프레임 속도. 떨어지는 순간의 씬 상태를 같이 봐야 원인을 찾기 쉽습니다.

Draw Calls

GPU에게 “그려라”라고 요청한 횟수. 값이 급증하면 병목 가능성이 큽니다.

Active Meshes

이번 프레임에 실제 렌더링 대상이 된 메시 수.

Debug View

Wireframe, Bounding Box, Normals를 켜서 보이지 않는 문제를 시각적으로 추적.

Draw Call / 바인딩 / 박스 추적 실전 루틴

문제가 생겼을 때 “어디서 비용이 터졌는지”를 단계적으로 좁히는 방식입니다. 아래 순서대로 하면 초보자도 재현 가능한 디버깅 루틴을 만들 수 있습니다.

Step 1. Draw Call 급증 확인

• Inspector의 Stats에서 Draw Calls를 보고 기능 ON/OFF 전후를 비교합니다.
• 예: 120 → 430으로 증가했다면, 객체 분할/머티리얼 분기/투명 오브젝트 증가를 의심합니다.

Step 2. Material/Texture 바인딩 의심 구간 확인

바인딩(Binding)은 GPU에 파이프라인·텍스처·버퍼를 연결하는 과정입니다. 오브젝트마다 머티리얼이 조금씩 다르면 바인딩 변경이 잦아지고 Draw Call이 증가하기 쉽습니다.

Step 3. Bounding Box / Frustum Culling 검증

• Debug에서 Bounding Box를 켜서 화면 밖 객체가 계속 활성화되는지 확인.
• 박스가 과하게 크면 컬링이 안 되어 Active Meshes가 불필요하게 높아질 수 있습니다.

Step 4. 기록 기반으로 원인 고정

기능 토글 전후 수치를 팀 문서에 남기면, “체감”이 아닌 수치 중심으로 회귀를 잡을 수 있습니다.

[성능 기록 예시]
기능: 그림자 품질 High
FPS: 58 -> 41
Draw Calls: 145 -> 312
Active Meshes: 90 -> 91
판단: 메시 수 증가는 거의 없음, Draw Call 급증 -> 머티리얼/쉐도우 패스 분기 확인