평화로운 어느 하루 Youtube를 뒤적거리다가 3D를 이용해 포토폴리오 웹사이트 제작하는 영상을 발견하였다.
3D로 웹페이지를 만들 수 있다는게 흥미로워서 나도 모르게 영상을 클릭 하였고
약 3일 만에 똑같이 만들수 있었다. 거의 3시간 짜리 영상이였는데 하루에 5시간씩 했는데도 3일이나 걸렸다. ㄷㄷ
일단 코드를 따라 쳐서 만들긴 했는데 이대로 끝내긴 아쉬우니까 내 포토폴리오를 만들어 보려고 한다.
얼마전에 교수님이 내 포폴 보고 빠꾸 먹였는데 잘됐군..
이번엔 아주 멋있게 만들어서 교수님께 보여드려야 겠다.
들어가기에 앞서 웹페이지에 3D 물체를 그리기 위해선 Three.js를 사용한다고 한다. 이제부터 한번 알아보자
Three.js 란?
웹 브라우저에서 3차원 컴퓨터 그래픽스 애니메이션을 만들고 표현하기 위해 사용되는 JavaScript 라이브러리자 API 이라고 한다.
오픈소스 프로젝트로 깃허브에 공개 되어있다.
Three.js는 JavaScipt 언어를 사용해 웹 컨텐츠의 한 부분으로써 GPU에서 가속되는 3차원 컨텐츠를 만들수 있도록 해준다. 이는 WebGL의 출현으로 가능하게 되었다.
Three.js = WebGL 아님?
엄밀히 말하자면 아닙니다. 정확하게는 Three.js > WebGL 이 맞겠네요. Three.js는 WebGL 기반으로 만들어 진거기 때문에 포함관계라고 생각하면 됩니다. WebGL은 저수준API로 유연하지만 코드 양도 많고 디테일하게 다뤄야 해서 어렵습니다.
반면, Three.js는 WebGL의 복잡한 부분을 감춰 더 간단하고 직관적으로 작업이 가능합니다.
React Three Fiber(R3F) 란?
three.js를 React에서 사용하기 편하게 도와주는 라이브러리 입니다.
기본적으로 Canvas 태그를 제공해 주고 재사용 가능하므로 구축하기 편하다는 장점이 있습니다.
써보니까 편하더라구요 three.js 사용하시는 분들은 같이 써보시는걸 추천 드립니다!
npm install three @react-three/fiber
Three.js 기능 파헤치기
장면을 만들기 위해선 어떤 요소들이 필요할까? 세가지가 필요하다.
바로 장면, 카메라, 렌더 이다. 이를 통해 카메라를 사용해 장면을 렌더링 할 수 있다.
코드를 한번 읽어보자.
<Canvas
shadows
frameloop="demand"
gl={{ preserveDrawingBuffer: true }}
camera={{
fov: 45,
near: 0.1,
far: 200,
position: [-4, 3, 6],
}}
>
<Suspense fallback={<CanvasLoader />}>
<OrbitControls
autoRotate
enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>
<Phone wallpaperImage={wallpaperImage} />
<ambientLight intensity={6.5} />
</Suspense>
<Preload all />
</Canvas>
Canvas
3D 장면을 랜더링 할 수 있는 기본 컴포넌트
쉽게 설명하자면 그림을 그리기 위한 빈 도화지라고 생각하면 된다.
shadow
그림자를 활성화 하는 옵션
3D 물체에서 발생하는 그림자를 계산하고 표시하게 도와준다.
frameloop
기본적으로 매프레임(1초에 60번 정도) 장면을 렌더링하는데 이런 방식을 Continuous Rendering이라고 한다.
모든 프레임을 렌더링 하므로 복잡한 장면에서 성능 부담이 있을수도 있다.
이런 것들은 옵션을 붙여 조정할 수 있다.
- demand 옵션 : 장면에 변화가 있을 때만 렌더링이 일어남. CPU와 GPU 사용량이 줄어 성능 최적화
- always 옵션 : 기본 옵션으로 설정 하지 않으면 자동 설정 됨 (게임 같은 경우 이걸로 하면 된다.)
- never 옵션 : 상태 업데이트와 무관하게 렌더링 중단. 랜더링 끝난 후 변경이 아예 없는 정적 콘텐츠에 적합
gl
프레임 버퍼를 초기화 해서 이전 프레임의 데이터를 지우고 새로 그리는 것
기본 옵션은 false이다.
- true : 이전 프레임 유지 (스크린샷, 드로잉 앱, 캔버스 데이터 저장)
- false : 이전 프레임이 지워짐 (일반적인 애니메이션, 실시간 렌더링)
쓰다보니 시간이 훌쩍 지나갔네요.
나머지 내용은 다음 포스팅으로 뵙겠습니다.
감사합니다.
