유용한 Stats.js과 dat.gui 적용하기

Stats.js 

Stats.js 는 JavaScript 성능 모니터 도구입니다.  적용하면 웹사이트 상단에 UI가 표현되며 해당 페이지의  성능 모니터링을 할 수 있습니다.

• FPS:  초당 렌더링된 프레임수(높을 수록 부드럽게 애니메이션이 동작)
• MS : 한 프레임을 렌더링하는 데 걸리는 시간 (milliseconds)
• MEM: 할당된 메모리(Mbytes).

화면 기록 2023-09-21 오후 8.13.14.mov

4.99MB

stats.js 사용법

three.js 에 stats 가 들어가 있기 때문에 따로 설치할 필요는 없습니다.

npm i stats.js

//...
import Stats from "three/examples/jsm/libs/stats.module"
//...
const stats = new Stats() //프레임 렌더링 계산
document.body.appendChild(stats.dom)

//...
function animate() {
//     // 초당 60프레임으로 동작
    requestAnimationFrame(animate)

    // cube.rotation.x += 0.01
    // cube.rotation.y += 0.01

    render()
    stats.update() //추가
}

function render() {
    renderer.render(scene, camera)
}

animate()

dat.gui

dat.gui 는 자바스크립트 오브젝트의 속성값을 웹페이지상 그래픽기반의 ui로 바로 조절할 수 있도록 제공하는 도구입니다. 

 

dat.gui 사용법

설치해봅시다.

npm install dat.gui --save-dev

npm install @types/dat.gui --save-dev

1. dat.gui 를 생성하기 

import { GUI } from 'dat.gui'

const gui = new GUI();

2. 어떤 오브젝트의 속성을 어떻게 조절할 건지 설정하기 

기존에 만들어 둔 정육각형 모양의 mesh 변수가 있다고 가정해봅시다. 이 object의 postion 의 y를 -5 부터 5까지 0.01씩 조절하고 싶으면 다음과 같이 작성하면 됩니다.

gui.add(mesh.postion,"y",-5,5,0.01);

• 1 번째 인자 : 어떤 object의 속성을 제어할 건지 결정
• 2 번째 인자 : 속성값의 최소값
• 3 번째 인자 : 속성값의 최댓값
• 4번째 인자 :  속성값의 간격

폴더구조로 dat.gui 여러 속성값 제어하기  

만약  카메라의 z 속성값도  페이지에서 바로 제어하고 싶고, object의 x,y,z 값도 제어하고 싶습니다. 모든 속성들이 화면에 정리되지 않고 흩뿌려져 있다면 화면이 지저분해보일 것입니다. 이때는 여러 속성값을 폴더화시켜 원하는 폴더만 열어 제어할 수 있습니다. 

const cubeFolder= gui.addFolder("cube") // 큐브라는 이름에 폴더를 만듭니다. 
//cubeFolder 안에는 큐브를 회전할 수있는 x 축, y축, z 축이 담겨있습니다. 

cubeFolder.add(cube.rotation,"x",0, Math.PI *2)
cubeFolder.add(cube.rotation,"y",0, Math.PI *2)
cubeFolder.add(cube.rotation,"z",0, Math.PI *2)

//cubeFolder 가 오픈된 상태가 디폴트로 페이지가 렌더링됩니다.
cubeFolder.open()

const cameraFolder = gui.addFolder("camera")
cameraFolder.add(camera.position,"z",0,20)

 

전체 코드 

//...
import { GUI } from 'dat.gui'
//...


const gui = new GUI()
const cubeFolder= gui.addFolder("cube")
cubeFolder.add(cube.rotation,"x",0, Math.PI *2)
cubeFolder.add(cube.rotation,"y",0, Math.PI *2)
cubeFolder.add(cube.rotation,"z",0, Math.PI *2)
//두번째 인자는 문자열, 3번째 최소값 4번째 최댓값
cubeFolder.open()

const cameraFolder = gui.addFolder("camera")
cameraFolder.add(camera.position,"z",0,20)
cameraFolder.open()//폴더가 열린채가 디폴트가 된다.
//그전에 카메라 z위치로 설정해준값이 디폴트로 자리잡아 랜더된다. 
// 우리는 그전에 2로 설정했기때문에  2로 랜더된다.

Boilerplate statsgui Branch

물론~ 보일러플레이트가 존재합니다 :)

git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git
cd Three.js-TypeScript-Boilerplate
git checkout statsgui
npm install
npm run dev