웹 브라우저 캔버스 위에 Babylon.js로 렌더링된 3D 회전 큐브를 표현한 개념 일러스트입니다.
2일차 – Babylon.js 개념 이해와 첫 3D 장면 만들기
한눈에 보는 요약
이 글에서는 웹 기반 3D 엔진인 Babylon.js의 전체 구조를 살펴보고, 회전하는 큐브 하나가 있는 첫 번째 3D 장면을 브라우저에 띄우는 과정을 정리합니다.
Engine, Scene, Camera, Light, Mesh와 같은 핵심 개념을 실제 코드와 함께 설명하고, 렌더링 루프와 윈도우 리사이즈 처리까지 포함한 기본 엔진 구조를 구축합니다.
CDN 방식과 NPM 방식 두 가지로 Babylon.js를 프로젝트에 불러오는 방법을 비교해, 학습 단계와 실전 단계에서 어떤 선택을 하는 것이 좋은지도 함께 안내합니다.
1주차 실습을 마치면 브라우저에서 자유롭게 회전하는 3D 큐브를 구현하고, 이후 주차에서 더 복잡한 장면으로 확장할 수 있는 기반을 갖추게 됩니다.
목차
- 1. Babylon.js 개념과 렌더링 루프 이해
- 2. HTML + JS/TS에서 Babylon.js 불러오기 (CDN vs NPM)
- 3. 기본 엔진 구조: Engine, Scene, Camera, Light, Mesh
- 4. 회전하는 큐브 장면 구성과 리사이즈 처리
- 5. 전체 코드 예시
- 6. 구성 요소·로딩 방식 비교 표
- 7. 실습 따라하기 체크리스트
핵심 포인트
- Babylon.js는 WebGL 기반의 고수준 3D 엔진으로, Engine + Scene + Camera + Light + Mesh 다섯 가지 축을 이해하는 것이 출발점입니다.
- 렌더링 루프는
engine.runRenderLoop(() => scene.render())구조로 구성되며, 이 안에서 매 프레임마다 장면이 다시 그려집니다. - 초기 학습 단계에서는 CDN 스크립트 한 줄로 Babylon.js를 불러오는 것이 가장 빠르며, 실전 환경에서는 NPM + 번들러(Webpack, Vite 등)를 조합하는 방식이 일반적입니다.
- 회전하는 큐브는
MeshBuilder.CreateBox와scene.registerBeforeRender를 이용해 간단히 구현할 수 있고, 윈도우 리사이즈 시engine.resize()호출로 자동 화면 크기 조정을 할 수 있습니다. - 1주차의 목표는 “멋진 3D 장면”이 아니라, “엔진 구조를 이해하고 처음부터 끝까지 한 번 실행해 보는 경험”에 있습니다.
상세 설명
1. Babylon.js란 무엇인가: 렌더링 루프, Engine, Scene
Babylon.js는 WebGL을 직접 다루지 않고도 복잡한 3D 장면을 브라우저에서 구현할 수 있게 해 주는 고수준 JavaScript/TypeScript 3D 엔진입니다. Three.js와 함께 웹 3D 분야에서 많이 사용되는 대표적인 라이브러리 중 하나입니다.
브라우저에서 3D를 표현하려면 기본적으로 캔버스 위에 GPU를 이용한 렌더링을 반복적으로 수행해야 합니다. 이때 “반복적으로 장면을 그리는” 과정을 렌더링 루프(rendering loop)라고 부르며, Babylon.js에서는 Engine이 이 루프를 관리합니다.
Babylon.js에서 자주 등장하는 세 가지 핵심 개념은 다음과 같습니다.
- Engine: WebGL 컨텍스트를 생성하고, 렌더링 루프를 관리하는 최상위 객체입니다.
- Scene: 실제로 그려지는 3D 세계(장면)의 집합으로, 카메라, 조명, 메쉬(오브젝트) 등이 모두 여기에 속합니다.
- 렌더링 루프: 매 프레임마다
scene.render()를 호출해서 최신 상태의 3D 장면을 캔버스에 그리는 반복 구조입니다.
1주차에서는 이 세 가지를 자연스럽게 연결해, “엔진을 만들고 → 장면을 만들고 → 루프를 돌려서 화면에 그리는” 전체 흐름을 몸으로 익히는 것이 목표입니다.
2. HTML + JS/TS에서 Babylon.js 불러오기 (CDN vs NPM)
Babylon.js를 프로젝트에 로딩하는 방법은 크게 두 가지로 나눌 수 있습니다.
- CDN 방식: HTML에
<script src="...">한 줄을 추가해 바로 사용하는 방식 - NPM 패키지 방식:
npm install로 의존성을 설치하고, ES 모듈로 import하여 빌드하는 방식
1주차 실습에서는 복잡한 빌드 환경 설정을 피하기 위해 CDN 방식을 우선 사용합니다. CDN 방식의 장점은 “HTML 파일 하나로 바로 실행해 볼 수 있다”는 점이며, 학습용 예제나 프로토타입에 적합합니다.
반면 NPM 방식은 TypeScript 지원, 트리 셰이킹, 코드 스플리팅 등 현대 웹 개발의 장점을 활용할 수 있어, 실제 서비스나 중대형 프로젝트에 적합합니다. 1주차에는 개념만 간단히 짚고, 추후 주차에서 본격적으로 다루는 구성으로 가져가는 것이 좋습니다.
3. 기본 엔진 구조: Engine, Scene, Camera, Light, Mesh
Babylon.js로 장면을 만든다는 것은 결국 다음 다섯 가지 요소를 적절히 조합하는 작업입니다.
- Engine: 캔버스와 WebGL 컨텍스트를 관리하고 렌더링 루프를 실행합니다.
- Scene: 3D 월드 전체를 표현하는 컨테이너로, 모든 객체의 루트 역할을 합니다.
- Camera: 사용자가 장면을 바라보는 시점을 정의하며, 위치, 회전, 줌(거리) 등을 제어합니다.
- Light: 장면에 조명을 더해, 입체감과 그림자를 표현합니다.
- Mesh: 화면에 실제로 보이는 3D 오브젝트(큐브, 구, 모델 등)를 뜻합니다.
엔진 객체가 캔버스를 기반으로 생성되면, 그 위에 여러 Scene을 올릴 수 있지만, 입문 단계에서는 보통 한 캔버스에 한 Scene만 사용하는 패턴이 가장 이해하기 쉽습니다. 각 Scene에는 카메라 1개 이상, 조명 1개 이상, 그리고 다양한 Mesh들이 포함됩니다.
4. 회전하는 큐브 장면 구성과 윈도우 리사이즈 처리
1주차 실습의 목표는 “회전하는 큐브 하나가 있는 간단한 씬”을 구현하는 것입니다. 구조는 다음과 같습니다.
- ArcRotateCamera를 사용하여 마우스로 회전/줌이 가능한 카메라를 배치합니다.
- HemisphericLight를 사용하여 위쪽에서 부드러운 조명을 비춥니다.
- MeshBuilder.CreateBox로 큐브 메쉬를 생성하고, 매 프레임마다 회전 값을 조금씩 증가시킵니다.
또한 실제 서비스에서 중요한 요소 중 하나가 윈도우 리사이즈 대응입니다. 브라우저 창 크기가 바뀌면 캔버스 크기도 바뀌어야 하고, 그에 맞춰 엔진의 뷰포트도 갱신되어야 합니다. Babylon.js에서는 다음과 같이 한 줄로 처리할 수 있습니다.
window.addEventListener("resize", () => engine.resize());
이 코드를 추가하면 브라우저 창 크기를 조정할 때마다 엔진이 자동으로 캔버스를 다시 맞추고, 장면이 항상 전체 화면에 맞게 표시됩니다.
코드 예시
<!-- index.html: Babylon.js 첫 장면을 위한 최소 HTML 구조 --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>Babylon.js 첫 3D 장면</title> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } #renderCanvas { width: 100%; height: 100%; touch-action: none; display: block; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <!-- CDN으로 Babylon.js 로딩 --> <script src="https://cdn.babylonjs.com/babylon.js"></script> <script src="app.js"></script> </body> </html> 위 예시는 CDN을 통해 Babylon.js를 불러오는 가장 기본적인 HTML 파일입니다. 전체 화면을 차지하는 캔버스를 정의하고, babylon.js 라이브러리 이후에 사용자 스크립트인 app.js를 로딩하는 구조입니다. 스타일에서 overflow: hidden을 설정해 스크롤 없이 “풀스크린 3D 캔버스”를 구현합니다.
// app.js: 회전하는 큐브가 있는 기본 Babylon.js 씬 // 1. 캔버스와 엔진 생성 const canvas = document.getElementById("renderCanvas"); const engine = new BABYLON.Engine(canvas, true); // 2. 씬 생성 함수 정의 function createScene() { const scene = new BABYLON.Scene(engine); // 2-1. 카메라 설정 (마우스로 회전/줌 가능) const camera = new BABYLON.ArcRotateCamera( "camera", Math.PI / 4, // 알파(수평 회전) Math.PI / 4, // 베타(수직 회전) 6, // 반지름(거리) BABYLON.Vector3.Zero(), // 타겟(원점) scene ); camera.attachControl(canvas, true); // 2-2. 조명 설정 const light = new BABYLON.HemisphericLight( "light", new BABYLON.Vector3(1, 1, 0), scene ); light.intensity = 0.9; // 2-3. 큐브 메쉬 생성 const box = BABYLON.MeshBuilder.CreateBox("box", { size: 2 }, scene); // 2-4. 렌더링 전에 큐브 회전 값 업데이트 scene.registerBeforeRender(() => { box.rotation.y += 0.02; box.rotation.x += 0.01; }); return scene; } // 3. 씬 생성 및 렌더링 루프 시작 const scene = createScene(); engine.runRenderLoop(() => { scene.render(); }); // 4. 윈도우 리사이즈 시 엔진 크기 자동 조정 window.addEventListener("resize", () => { engine.resize(); }); 이 자바스크립트 코드는 Babylon.js 기본 패턴을 그대로 따릅니다. 먼저 엔진과 씬을 생성하고, ArcRotateCamera와 HemisphericLight로 시점과 조명을 설정합니다. MeshBuilder.CreateBox로 큐브를 만든 뒤, registerBeforeRender 안에서 매 프레임마다 회전 값을 변경해 회전 애니메이션을 구현합니다. 마지막으로 runRenderLoop와 window.addEventListener("resize")로 렌더링 루프와 리사이즈 처리를 완성합니다.
# NPM을 이용한 Babylon.js 설치 예시 (참고용) npm install babylonjs NPM을 사용하는 경우에는 import { Engine, Scene, ArcRotateCamera, HemisphericLight, MeshBuilder } from "babylonjs";와 같이 ES 모듈 형태로 불러온 후, 번들러를 통해 빌드하여 배포합니다. 1주차에는 직접 빌드 환경을 구성하기보다, Babylon.js 구조에 집중하기 위해 CDN 방식을 먼저 익히고 이후에 단계적으로 NPM 활용으로 확장하는 전략이 효율적입니다.
구성 요소 및 로딩 방식 비교 표
아래 표는 Babylon.js의 핵심 구성 요소와, 학습 단계에서 자주 사용하는 로딩 방식을 요약한 것입니다.
| 항목 | 역할/내용 | 대표 클래스 또는 예시 | 비고 |
|---|---|---|---|
| Engine | WebGL 컨텍스트 관리, 렌더링 루프 실행 | BABYLON.Engine | 캔버스와 1:1로 생성하는 경우가 많음 |
| Scene | 카메라, 조명, 메쉬를 포함하는 3D 세계 | BABYLON.Scene | 프로젝트에 따라 여러 Scene을 사용할 수 있음 |
| Camera | 장면을 바라보는 관찰자 시점 | ArcRotateCamera, FreeCamera | 입문 단계에서는 ArcRotateCamera 사용을 추천 |
| Light | 조명 및 그림자 표현 | HemisphericLight, DirectionalLight | 기본 조명은 HemisphericLight 하나로 충분 |
| Mesh | 실제로 화면에 보이는 3D 오브젝트 | MeshBuilder.CreateBox, Sphere 등 | 모델 파일(.glb, .gltf)도 Mesh로 로드됨 |
| CDN 로딩 | 스크립트 태그 한 줄로 즉시 사용 | <script src="https://cdn.babylonjs.com/babylon.js"> | 학습/프로토타입에 적합, 설정이 매우 간단 |
| NPM 로딩 | 패키지 설치 후 모듈 import | npm install babylonjs | 실전 프로젝트에 적합, 빌드 설정 필요 |
실행 단계
- 프로젝트 폴더 생성 – 로컬에서
babylon-week1와 같은 새 폴더를 만들고, 코드 편집기(VS Code 등)로 폴더를 엽니다. 이후 모든 파일은 이 폴더 안에 생성합니다. - HTML 파일 작성 –
index.html파일을 만들고, 위 예시와 같이 전체 화면을 차지하는<canvas id="renderCanvas">와 Babylon.js CDN 스크립트를 포함하는 기본 구조를 작성합니다. - JavaScript 파일 작성 –
app.js파일을 생성하고, 엔진/씬/카메라/조명/큐브 메쉬를 생성하는 코드를 작성합니다.engine.runRenderLoop와registerBeforeRender를 통해 회전 애니메이션과 렌더링 루프를 구현합니다. - 윈도우 리사이즈 대응 추가 –
window.addEventListener("resize", () => engine.resize());한 줄을 추가하여, 브라우저 창 크기 변경 시에도 캔버스와 장면이 자동으로 화면 크기에 맞게 조정되도록 처리합니다. - 로컬에서 HTML 실행 – 간단히는 브라우저로
index.html파일을 열어볼 수 있고, 가능하다면 VS Code의 Live Server 확장이나 간단한 정적 서버를 띄워http://localhost:...형태로 접근하는 것이 좋습니다. - 카메라 조작과 회전 속도 테스트 – 실행된 화면에서 마우스로 드래그/휠을 움직여 카메라를 조작해 보고, 회전 속도를 원하는 대로 변경해 봅니다. 예를 들어
0.02를0.05로 바꾸면서 차이를 체감해 봅니다. - 추가 실험 – 큐브 대신 구체(sphere)를 생성하거나, 조명 색상과 강도, 카메라 초기 위치를 변경해 보는 등 작은 실험을 통해 Babylon.js의 기본 개념을 더욱 확실히 익힙니다.
추가로 생각해볼 점
- TypeScript를 사용하는 경우, Babylon.js의 풍부한 타입 정의를 활용해 자동 완성과 컴파일 타임 검증을 받을 수 있습니다. 이후 주차에서는 TS 환경에서의 설정과 모듈 import 패턴을 별도로 정리하는 것이 좋습니다.
- 1주차에서는 한 캔버스·한 Scene 구조만 사용하지만, 실제 프로젝트에서는 로딩 화면, 메인 게임 화면, UI 전용 Scene 등 여러 Scene을 조합할 수 있습니다. 구조 설계 관점에서 미리 구성을 고민해 보는 것도 도움이 됩니다.
- Babylon.js는 Debug Layer, Inspector 등 개발 편의 기능을 제공합니다. 나중에
scene.debugLayer.show()를 활용하면 장면 내 카메라/조명/메쉬 상태를 시각적으로 확인하면서 디버깅할 수 있습니다.
0 댓글