HDRI 텍스쳐는 가상공간에서 360도 전 방향의 배경을 표현하는 텍스쳐인데요.
3차원 공간 배경으로 자주 활용됩니다.
바빌론 JS에서 바로 hdri 배경을 사용하는 방법이 있긴 하나 워낙 속도가 느리더라구요.
그래서 CUBEMAP 으로 변환해 사용하는게 속도가 나고 좋은데요. 오늘은 해당 부분을 공유드리겠습니다.
멋진 360 배경텍스쳐 다운로드
PolyHaven 사이트 ( https://polyhaven.com/hdris ) 에는 엄청난 퀄리티의 360 배경HDRI 파일이 많이 있는데요.
기본 영어이지만 우측 상단 국가를 선택, 한국어를 선택하면 보기 편합니다.
마음에 드는 배경을 선택하여 3D 버튼을 선택하면,
3차원 공간을 마우스로 드래그하여 미리 둘러볼 수 있습니다.
정말로 마음에 들면 '다운로드' 버튼을 눌러 다운로드받으시면 되며,
기본으로 HDR 파일이 다운로드됩니다.
CUBEMAP 변환
이제 babylonjs 에서 사용할수 있도록 변환할 차례입니다.
바빌론 공식 사이트에 변환기가 있지만 ( https://www.babylonjs.com/tools/ibl ),
현재 작동되지 않기 때문에 다른 사이트를 이용해야 하는데요. ( 2024. 9. 16 현재 )
매더오위스라는 사이트가 아주 훌륭하더라구요.
https://matheowis.github.io/HDRI-to-CubeMap/
사용법은 단순합니다.
UPLOAD HDRI 버튼을 선택 후 hdr 파일을 선택하면,
바로 미리보기가 나와 공간을 둘러볼 수 있습니다.
이어서 CUBEMAP VIEW 탭을 선택하고,
SAVE 버튼을 선택하여 저장하면 되는데요. Exposure 로 밝기를 사전 조정할 수 있습니다.
이어서 Chose Your Layout 팝업창이 나올텐데요.
해상도 기본값 256은 너무 화질이 안 좋습니다.
512나 1024 정도를 선택,
이어서 맨, 아래 항목 ( 각 파일 분리 )을 선택, PROCESS 버튼 선택,
한번 더 SAVE 버튼을 선택하면,
Standard-Cube-Map...zip 파일이 다운로드됩니다.
이 파일의 압축을 풀면, 6개의 파일이 나오는데요.
각각 파일명을 아래와 같이 변경해주면, 바빌론JS에서 사용할 준비는 끝입니다.
(파일명 앞 skybox_ , 확장자는 jpg 로 변경 )
바빌론JS 소스 구성
이제 index.html, main.js 파일을 아래와 같이 구성해 주세요.
물론 사전에 cdn 파일을 다운로드받아 내 PC나 서버에 cdn 파일이 있다는 것을 전제로 합니다.
CDN 을 다운로드하여 구성하는 방법은 아래 게시글 참조.
https://itadventure.tistory.com/707
바빌론JS - CDN 파일을 내 서버에
바빌론JS 에서는 프로덕트 ( 상용서비스) 환경에서 자기네 CDN 서버를 사용하지 말라고 하는데요.그 이유는 파일이 갑자기 변경될 수도 있고 CDN 서버 요금 발생 때문도 아닐까 생각됩니다 :)꼭 그
itadventure.tistory.com
index.html 소스 코드 구성
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Babylon.js sample code</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
#canvasZone {
width: 100%;
height: 100%;
}
</style>
<!-- Babylon.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
<script src="https://assets.babylonjs.com/generated/Assets.js"></script>
<script src="../snapshot/recast.js"></script>
<script src="../snapshot/ammo.js"></script>
<script src="../snapshot/havok/HavokPhysics_umd.js"></script>
<script src="../snapshot/cannon.js"></script>
<script src="../snapshot/Oimo.js"></script>
<script src="../snapshot/earcut.min.js"></script>
<script src="../snapshot/babylon.js"></script>
<script src="../snapshot/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="../snapshot/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="../snapshot/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="../snapshot/loaders/babylonjs.loaders.js"></script>
<script src="../snapshot/serializers/babylonjs.serializers.min.js"></script>
<script src="../snapshot/gui/babylon.gui.min.js"></script>
<script src="../snapshot/inspector/babylon.inspector.bundle.js"></script>
</head>
<body>
<div id="canvasZone"><canvas id="renderCanvas"></canvas></div>
<script>
var canvas = document.getElementById("renderCanvas");
var startRenderLoop = function (engine, canvas) {
engine.runRenderLoop(function () {
if (sceneToRender && sceneToRender.activeCamera) {
sceneToRender.render();
}
});
}
var engine = null;
var scene = null;
var sceneToRender = null;
var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false}); };
</script>
<script src="./main.js"></script>
<script>
window.initFunction = async function() {
var asyncEngineCreation = async function() {
try {
return createDefaultEngine();
} catch(e) {
console.log("the available createEngine function failed. Creating the default engine instead");
return createDefaultEngine();
}
}
window.engine = await asyncEngineCreation();
if (!engine) throw 'engine should not be null.';
startRenderLoop(engine, canvas);
window.scene = createScene();
};
initFunction().then(() => {
sceneToRender = scene
// scene.then(returnedScene => { sceneToRender = returnedScene; });
});
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>main.js 소스 코드 구성
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.createDefaultCameraOrLight(true, true, true);
var texture = new BABYLON.CubeTexture("skybox", scene);
scene.createDefaultSkybox(texture, true, 10000);
return scene;
};각 파일은 아래와 같이 구성해주시면 됩니다.
결과는 아래 동영상 참조!
실습이 어려우신 분은 아래 결과물 사이트를 참조해 주셔도 됩니다.
http://dreamplan7.cafe24.com/babylon/ex24/
마무~리
오늟은 360 배경을 스카이박스로 변환하여 바빌론js에서 활용하는 방법을 알아 보았습니다.
필요하신 분께 도움이 되셨을지 모르겠네요.
오늘도 방문해주신 모든 분들께 감사드립니다~
다음 게시글 : https://itadventure.tistory.com/713
바빌론JS - 그라운드 배경
지난 게시글에서는 HDRI를 큐브맵으로 전환, 가상공간 배경으로 활용해보았는데요.https://itadventure.tistory.com/712 CUBEMAP" data-og-description="HDRI 텍스쳐는 가상공간에서 360도 전 방향의 배경을 표현하는
itadventure.tistory.com