babylon.js를 이용하면 웹에서 3D 오브젝트를 간편하게 생성할 수 있다.

아래는 ms에 있는 자습서를 보고 바빌론.js를 따라 생성해 보았다.

자습서에는 webXR을 이용하여 기기로도 사용할 수 있게끔 만들어져 있는데 이 부분은 제외하고 정리해 보았다.

자습서 : Babylon.js를 사용하여 첫 번째 WebXR 애플리케이션 만들기

https://learn.microsoft.com/ko-kr/windows/mixed-reality/develop/javascript/tutorials/babylonjs-webxr-helloworld/introduction-01

이 자습서에서 다음과 같은 작업을 수행하는 방법을 알 수 있다.

기본 3D 요소를 만드는 babylon.js API
장면 만들기
카메라 추가
광원 추가
기본 3D 요소 추가
상호작용 추가

바빌론.js 자습서 초기세팅

먼저 기본 html 태그를 만들고 Babylon.js javascript 파일을 가져온 후, canvas html요소를 본문 내에 추가한다.

<html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body, #renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
    </body>
</html>

바빌론.js 자습서 scene 생성

canvas 요소 아래 스크립트 태그를 추가하고 다음 코드를 추가하여 검은색으로 채워진 장면을 생성한다.

<script type="text/javascript">
    const canvas = document.getElementById("renderCanvas");
    const engine = new BABYOLON.Engine(canvas, true);
    const createScene = function(){
        const scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color3.Black;
        return scene;
    }
    const sceneToRender = createScene();
</script>

화면은 기본적으로 자동으로 계속 렌더링 되지 않는다.

장면이 계속 바뀔 수 있으니 표시되는 장면을 반복적으로 리렌더링 하려면 만들어진 sceneToRender에 아래 함수를 실행시켜야 한다.

engine.runRenderLoop(
    function(){
        sceneToRender.render();
    }
);

바빌론.js 자습서 기본 3D 요소 추가

3D 가상 세계에서 물체는 메시(Mesh)로 만들어진다.

개발자는 미리 정의된 메시를 사용하거나, 고유한 사용자 지정의 메시를 만들 수 있으며, 여기서는 미리 정의된 박스 메시를 사용 한다.

//매개변수는 박스의 이름, 옵션을 지정할 수 있음
const box = BABYLON.MeshBuilder.CreateBox("box", {});
box.position.x = 0.5;
box.position.y = 1;

이러고 개발자 도구를 보면 콘솔 탭에 카메라를 찾을 수 없다고 나온다.

카메라 찾을 수 없음 콘솔

카메라 없이는 장면을 볼 수 없기 때문에 카메라를 추가해야 함.

바빌론.js 자습서 카메라 추가

가상 세계를 보고 상호작용 하려면 카메라를 캔버스에 연결해야 한다.

대상을 중심으로 회전할 수 있는 BABYLON.ArcRotateCamera 유형의 카메라를 추가해 보자.

카메라 인스턴스를 만드는 데 필요한 매개변수는 다음과 같다.

name : 이름
alpha : 세로축을 따른 각도 라디안
beta : 가로축을 따른 각도 라디안
radius : 대상으로 부터 카메라의 거리
target : 카메라가 항상 향하는 지점
scene : 카메라가 있는 장면

카메라 매개변수 요소 이미지

createScene 함수에 다음 코드를 추가한다.

const alpha = Math.PI /. 4;
const beta = Math.PI /. 3;
const radius : 8;
const target = new BABYLON.Vector3(0, 0, 0);
const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
camera.attachControl(canvas, true);

이후 화면을 보아도 박스가 보이지 않는데 이는 광원(빛)이 없어서 그렇다.

바빌론.js 자습서 광원 추가

다양한 조명 속성과 함께 사용할 수 있는 광원의 종류에는

포인트, 방향, 스폿, 반구의 네 가지 유형이 있다.

다음과 같은 방법으로 반구 광원을 추가해 보자

const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

그러면 박스 메시에 빛이 비춰지며 박스가 보이는 것을 알 수 있다.

광원에 의해 박스가 보이는 이미지

바빌론.js 자습서 3D 개체와 상호작용

먼저 큐브에 색을 지정해 보자

boxMaterial에 박스의 재질과 색을 결정하여 메쉬에 입힐 수 있다.

const boxMaterial = new BABYLON.StandardMaterial("material", scene);
//diffuse Color로 연결된 메시 전체에 색을 분산시킬 수 있다.
boxMaterial.diffuseColor = BABYLON.Color3.Random();
box.material = boxMaterial;

이제 큐브가 임의의 색으로 칠해졌으니 두 가지 상호작용을 추가해 보자

1. 큐브를 클릭했을 때 이벤트 발생 + 색 변경

2. 색 변경 후 큐브의 위치 이동

상호작용을 추가하려면 Babylon의 ActionManager를 이용한다.

액션의 등록은

box.actionManager.registerAction(
    new BABYLON.ExecuteCodeQAction("이벤트트리거", (evt)=>{
        //이벤트 시 일어날 일
    })
)

이렇게 이루어져 있다.

이벤트 객체를 콘솔로 찍어보면,

이벤트 요소 콘솔 이미지

위와 같은 형태로 찍히는데 여기에

소스(클릭된 메쉬 개체), 소스이벤트(이벤트 정보)와 추가적인 정보들이 기록되어 있다.

일반적인 상황에서 모든 객체는 우주공간이 아니면 바닥에 붙어있다!

지금은 공중에 붕 떠있는 상자처럼 보이는데 지면을 줘서 안정감을 챙겨보자.

아래 코드를 추가하면 씬에 바닥이 추가된다.

const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 4, height: 4});

바닥이 추가된 이미지

바빌론.js나 three.js같은 javascript 3D Library를 이용하면

입체를 만들 수 있어서 더 다양한 표현이 가능하다.

다음엔 리액트에서 3D 라이브러리를 사용하여 구현해 보아야 겠다.