TL; DR

html 웹페이지에 학습시킨 3D Gaussian Splatting scene 을 띄우는 방법을 알아보자. 웹알못이어도 상관없이 따라 하기만 하면 된다!

About the Project

Three-js 을 이용해 구현된 3D Gaussian Splatting for Three.js 을 이용할 것이다. 웹잘알이면 패키지 document 만 참고하면 될 듯 하다.


Step-by-Step

Step 1: Project Setup (CDN-based)

npm 등으로 threejs 와 GaussianSplats3D package 를 설치하는 것이 일반적이지만, (저자처럼) 웹에 친숙하지 않은 것을 가정하고 쓰는 글이기 때문에 CDN 을 이용해서 package 를 로드하여 사용하는 방법을 기술한다. 다음과 같이 필요한 패키지를 로드하여 사용하면 된다. 

<script type="importmap">
{
    "imports": {
        "three": "https://unpkg.com/three@0.150.0/build/three.module.js",
        "three/addons/": "https://unpkg.com/three@0.157.0/examples/jsm/",
        "GaussianSplats3D": "https://unpkg.com/@mkkellogg/gaussian-splats-3d@0.4.0/build/gaussian-splats-3d.module.js"
    }
}
</script>

Step 2: HTML Structure

필요 패키지를 로드하면 이제 description 에 맞게 3D GS scene 을 세팅하여 WebGL renderer 를 불러오면 된다. 3D GS ply scene 이면 모두 로드 가능하며, 본인의 3D GS scene 에 맡게 카메라나 GS 의 position, rotation 등을 수정하면 된다. 패키지 basic usgae 처럼 불러오면 화면 전체에 3D content 가 렌더링 되기 때문에 canvas div 를 선언하고 이 영역 내에서만 렌더링 되도록 작업하였다. 

<script type="module">
// Create a new THREE.js scene
import * as GaussianSplats3D from 'GaussianSplats3D';
import * as THREE from 'three';

// Set the desired render width and height
const renderWidth = 640;
const renderHeight = 360;

// Get the canvas container
const rootElement = document.getElementById('canvasContainer');
rootElement.style.width = renderWidth + 'px';
rootElement.style.height = renderHeight + 'px';

// Initialize WebGL renderer
const renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(renderWidth, renderHeight);
renderer.setClearColor(0xf8f9fa, 1);
rootElement.appendChild(renderer.domElement);

// Initialize camera
const camera = new THREE.PerspectiveCamera(65, renderWidth / renderHeight, 0.1, 500);
camera.position.copy(new THREE.Vector3().fromArray([-1.5, -2, 3]));
camera.up = new THREE.Vector3().fromArray([0, -1, -0.6]).normalize();
camera.lookAt(new THREE.Vector3().fromArray([0, 3, 0]));
                
// Initialize the GaussianSplats3D viewer
const viewer = new GaussianSplats3D.Viewer({
    'selfDrivenMode': true,
    'renderer': renderer,
    'camera': camera,
    'useBuiltInControls': true,
    'ignoreDevicePixelRatio': false,
    'gpuAcceleratedSort': true,
    'enableSIMDInSort': true,
    'sharedMemoryForWorkers': false,
    'integerBasedSort': true,
    'halfPrecisionCovariancesOnGPU': true,
    'dynamicScene': false,
    'webXRMode': GaussianSplats3D.WebXRMode.None,
    'renderMode': GaussianSplats3D.RenderMode.OnChange,
    'sceneRevealMode': GaussianSplats3D.SceneRevealMode.Instant,
    'antialiased': false,
    'focalAdjustment': 1.0,
    'logLevel': GaussianSplats3D.LogLevel.None,
    'sphericalHarmonicsDegree': 0,
    'enableOptionalEffects': false,
    'plyInMemoryCompressionLevel': 2,
    'freeIntermediateSplatData': false
});
                
// Load a 3D scene (replace with the actual path to your model)
viewer.addSplatScene('<path/to/your/gs path>', {
    'position': [-0.7, -0.3, 0.9],
    'rotation': [0, 1, 0.2, 0.1],
    'scale': [3, 3, 3]
})
.then(() => {
    requestAnimationFrame(update);
});

// Update function to render the scene

function update() {
    requestAnimationFrame(update);
    viewer.update();
    viewer.render();
}
</script>;

Tip.

  • CORS error 방지를 위해 'sharedMemoryForWorkers': false 로 설정하였다.

Example Result of Custom GS Scene

위 방법을 이용해 로드된 3D Gaussian Splatting scene 이다. Interactive 하게 canvas 안의 3d content 를 컨트롤 할 수 있다. 로드된 scene 은 직접 촬영 후 recon 한 미니어쳐 기타인데, artifacts 나 floaters 가 좀 있기는 하다 ㅠㅠ.

Closing

연구자라면 이 article 이 관심 없는 주제일지도 모르지만, 자기 pr 의 시대에 직접 학습시킨 gaussian splatting scene 을 개인 webpage 에 add 하는 방법 또한 누군가에게는 도움이 될 거라고 믿으며 글을 작성하였다. :)

You may also like,