[WebGL] Babylonejs 특징

Babylonjs 란?

HTML5를 이용한 Web rendering engine 으로 얼마전(2022-01-15) version 5.0 release 하였다.
web api를 직접 다루지 않아도 비교적 쉽게 그래픽을 다룰수 있게 한다.
웹 게임 엔진으로 보는게 맞아 보인다.

License

Apache-2.0

역사 및 현재

2013년 마이크로소프트 직원 2명이 개발하며 출발 했고 2015년 WebGL 컨퍼런스에서 공개됨
현재 405명의 기여자가 있고 주요 12명의 메인테이너들이 있다.
버전 5 릴리즈

구현 언어

마이크로소프트 개발자들이 founder인 만큼 기존 javascript를 Typescript로 refactor
현재는 Typescript로만 개발 하고 있다.
Documentation 및 Learn
Documentation (https://doc.babylonjs.com/ 에서 확인가능하고 한글 지원되지 않는다.)
구성은 체계적이고 설명도 자세한 편이다.
가장 큰 특징은 설명하는 기능과 해당 기능이 playground와 쌍을 이루고 있는 점이다.

위 캡처에서 각 배울 기능에 1, 2, 3 순서로 배워 나갈 수 있다.

3번은 누르면 playground가 개별 창으로 실행 되며, 직접 코드를 수정 하며 학습 가능하다.

Learn

기본적으로 문서 기준으로 학습하기 좋아 보인다.
A to Z 스타일로 다가가기 보다 기능 별로 작성된 감이 있어 막 입문한 사람은 다른 학습방법과 병행하면 더 좋을것 같다.
부가적으로 babylonjs를 이용해 만든 게임 데모들이 있는데 공식 문서에 있는 프로젝트를 참조하는것도 좋은 방법인것 같다.

스페이스 해적: https://github.com/BabylonJS/spacepirates
다양한 게임: https://www.babylonjs.com/community/

Trouble shooting은 공식 홈에서 재공하는 Forum이 잘 되어 있어 이용하기 좋아 보인다.
질문, 버그, 기능 요구, 데모나 사용 프로젝트 등의 카테고리 별로 구성되어 있고 디자인이 잘 되어 편해 보인다.(https://forum.babylonjs.com/)
물론 다른 경로도 이용 하면 좋을것 같다. (Stackoverflow같은 사이트)
https://www.youtube.com/c/BabylonJSEngine/playlists 유튜브 채널이 있고 Engine 및 Tool 사용법을 설명 한다.
API 검색이 쉬운 편이고 전체 API dictionary가 있어 참조하기 편하다. 

특징

webgpu 지원

2019년 google I/O에서 발표된 스펙으로 브라우저에서 GPU통신을 위한 성능에 염두를 두고있다.
babylonjs는 webgpu 워크 그룹에 참여 하고 있으며 webgpu 스팩을 완전히 지원한다.
https://doc.babylonjs.com/advanced_topics/webGPU/computeShader

Cross-platform

웹, Windows, Mac, iPhone 또는 Android Phone을 대상으로 하는 Babilon.js 5.0에서는 렌더링 코드를 한 번 작성하여 원하는 플랫폼에 배포하거나 브라우저를 사용하거나 기본 응용 프로그램으로 배포 가능하다.
https://doc.babylonjs.com/divingDeeper/multiplePlatforms

Demo

게임 개발자 들을 위한 데모가 준비 되어 있다.
https://github.com/BabylonJS/spacepirates

Animation Editor

ACE(Animation Curve Editor)가 추가되어 있어 Babilon 장면에서 애니메이션 데이터를 직접 만들고 수정할 수 있다.
모든 Babylonjs Platform 도구와 마찬가지로 Babylonjs Sniffet Server에 애니메이션 데이터를 저장하고 코드 한 줄로 Babylonjs 화면에 다시 로드할 수 있다.
https://doc.babylonjs.com/toolsAndResources/tools/animationCurveEditor

Performance profiler

성능 디버깅 및 관리를 수행
씬(scene)의 주요 성능 지표에 대한 실시간 그래프를 볼 수 있으며, 모두 실시간으로 연결

https://doc.babylonjs.com/toolsAndResources/tools/performanceProfiler

Morph target

모핑은 자연 스럽게 이미지가 변하는것을 의미한다.
무제한의 Morph target으로 복잡한 애니메이션 가능하다.
https://playground.babylonjs.com/#1PD3Q7#2
https://doc.babylonjs.com/divingDeeper/mesh/morphTargets#limitations

GUI editor (beta)

유저 인터 페이스를 도와주는 GUI 디자인을 에디팅 하게 해주는 툴
https://gui.babylonjs.com/
https://doc.babylonjs.com/toolsAndResources/tools/guiEditor

Order independent transparency

투명한 객체를 랜더링하는것은 복잡하다.
scene.useOrderIndependentTransparency = true 명령으로 투명객체 랜더링시 복잡함을 제거 할 수 있다.

Material editor

GLSL 셰이더를 생성 할 수 있다. 재공하는 도구 중 가장 고급 도구
https://nme.babylonjs.com/
https://doc.babylonjs.com/divingDeeper/materials/node_material/nodeMaterial

glTF 로더

glTF2.0 파일 형식을 지원하며 랜더링 가능하다. 관련하여 extension들을 지원한다.
glTF는 3차원 장면과 모델을 표현하는 파일 포맷으로 JSON 표준에 기반하고 있다.
glTF 포맷은 크로노스 그룹 의 3D Format WORKING GROUP에서 제정한 표준이며, HTML5DevConf 2016 행사에서 처음 발표되었다.
https://www.google.com/searchq=gltf+%ED%8C%8C%EC%9D%BC&rlz=1C1GCEU_koKR960KR960&oq=gltf&aqs=chrome.1.69i57j0i512l5j69i60l2.4292j0j1&sourceid=chrome&ie=UTF-8

MRTK 라이브러리 업데이트 지원

3D 인터페이스 구성 요소로 해당 라이브러리를 추가하면 고급 webXR UX 요소를 추가 가능.
MRTK(Mixed Reality Toolkit)는 Mixed Reality 하드웨어 및 플랫폼에 대한 지원을 제공하여 플랫폼 간 Mixed Reality 애플리케이션 개발을 가능하게 하는 패키지 컬렉션.https://docs.microsoft.com/ko-kr/windows/mixed-reality/mrtk-unity/packages/mrtk-packages?view=mrtkunity-2021-05

Assets librarian

200개 이상의 Creative Commons 0 asstets를 사용 할 수 있다.
https://playground.babylonjs.com/#ABDDD6#1
https://doc.babylonjs.com/toolsAndResources/assetLibrarian

Material Plugin Manager

실시간 Shader를 만드는 데 성능, 유연성은 중요하다.
Material Plugin Manager에서 사용자 지정 코드를 추가 할 수 있다.
PBR(Physically Based Rendering) 같은 고급 shader를 사용자 지정 가능하다.
https://doc.babylonjs.com/divingDeeper/materials/using/materialPlugins

Tool

개발 생산성과 성능에 기여하는 다양한 Tool을 제공한다.

1. 씬(scene)의 계층 보기
2. 객체 속성을 동적으로 변경할 수 있는 다중 속성 그리드
3. 스켈레톤 뷰어 등과 같은 특정 도우미.

Playground

핵심 Tool로 babylonjs 코드를 실험해 볼수 있는 공간이다. 코드를 작성하고 RUN 버튼을 누르면 해당 코드가 실행되어 랜더링한다.
코드는 Javascript, Typescript 모두 작성 가능하다.

Inspector

inspector는 장면에서 발생할 수 있는 문제를 정확하게 파악하기 위해 만들어진 시각적 디버깅 도구이다.
아래와 같은 기능을 제공 합니다.
Embeded 모드로 소스에서 실행하는것이 가능하다.
https://playground.babylonjs.com/#LQF5QR#2

ACE(Animation Curve Editor)

Sphere에 애니메이션을 적용한다면 아래와 같은 코드로 작동 시킨다.

예제 코드

let animations = await BABYLON.Animation.ParseFromFileAsync(null, "https://doc.babylonjs.com/examples/animations.json");
sphere.animations = animations;
scene.beginAnimation(sphere, 0, 100, true);

이때 참조하는 애니메이션 정보가 담긴 json을 만들어 내는 editor 가 ACE다.
editor에서 애니메이션을 설정하고 export 하여 사용할 Mesh에 적용하는것이 일반적인 패턴으로 보인다.

Gui Editor

canvas 상에서 사용자와 interaction이 필요 할때 Gui 가 필요하다.
Babylonjs에서도 다양한 GUI 요소를 가지고 있는데 직접 코드를 이용해 사용해도 되지만 복잡한 UI의 경우는 Editor를 이용해 디자인 가능하다.

위 와 같은 WYSWYG 방식의 에디터로 구현이 쉬워 보인다.
완료된 GUI 는 zip 파일로 해당 UI가 구현된 index.html로 코드로 export 된다.

NME(Node Material Editor)

우리가 Shader를 만들때는 Shader동작과 Shader 코드인 GLSL에 대한 이해가 필요하기 때문에 쉽지 않은 작업이다. (코드 구현, 디버그 등등)
babylon.js 4.1부터 노드 재료 편집기가 도입되었고 해당 도구는 블록을 연결하여 shader를 만들 수 있는 시각적 편집기이다.
다양한 export 방법이 있다.

Shader Code (GLSL 코드)
json (diagram 정보)
javascript code (babylonjs 코드)
Particle Editor
particle은 입자라는 뜻으로 여기서는 particle system을 다룹니다. 해당 Particle을 에디팅 할 수 있는 툴이다.

Sprite Editor

스프라이트는 프레임별 이미지를 순서대로 랜더링 함으로 활동 이미지 처럼 보여주는 기술로 별도 코드 없이 구현 가능하게 해주는 기능.
Inspector의 내장기능으로 동작한다.

Texture Inspector

텍스처 검사기는 바빌론 내부에서 텍스처를 디버깅할 수 있도록 설계되었다.
사용자는 종종 텍스처를 로드하지만 예상대로 표시되지 않는다.
예상치 못한 결과는 투명도, 자외선 또는 큐브 맵과 같은 고유한 텍스처 유형과 관련이 있을 수 있다.
텍스처 검사기를 사용하면 문제를 조사하고 엔진에서 문제를 해결할 수 있다.

Skelecton Viewer

뼈와 관절을 렌더링하는 것부터 피부 무게를 시각화
Inspector에 내장
scene 내에서 연결 문제를 디버깅 가능

Performance Profiler

시각적 성능 디버깅 도구
scene에서 성능과 정상적이지 않은 동작을 확인 가능
검사기의 Statistics(통계) 탭에서 사용할 수 있다.
최신 숫자를 한 순간에 보는 대신 시간 경과에 따라 데이터를 시각화