Intro
웹그래픽 두 번째 실무 프로젝트.
-vertex shader와 fragment shader를 중점적으로 사용.
-Audio파일 재생 시 음량에 맞춰서 파형과 색이 반응하는 그래픽 객체를 생성하는 업무.
-기본 geometry와 material로는 클라이언트의 요구 퀄리티에 미치지 못하기에 위의 두 셰이더(vertex, fragment) 사용.
-재활용성을 위해 자주쓰이는 세팅은 코드를 분리하는 작업 수행.
-vite, javascript로 진행
-사용한 플러그인 : gsap(혹은 anime도 무관), three
Step.1 - 기본세팅
웹그래픽의 기초 세팅인 renderer, camera, composer들을 export하여 다른 곳에서도 사용할 수 있도록 작업했습니다.
- core-utils.js (세팅용)
- main.js (app 실행 파일)
Step.2 - 레퍼런스 찾기
클라이언트에게 제공 가능한 그래픽 기술 레퍼런스 서치 및 확보
위의 레퍼런스가 가장 적합하다는 판단하에 개발 진행했습니다.
Step.3 - 커스터마이징
레퍼런스의 내용을 정리해보면 다음과 같은 구조로 오브젝트를 조종하고 있었습니다.
1. THREE.PlaneGeometry에 구분선을 추가
2. 위의 PlaneGeometry의 가로선에 THREE.Points 를 활용하여 점들이 배치될 예정입니다.
3. fragment,vertex 셰이더가 ShaderMaterial로 연결되어있습니다.
(fragment와 vertex코드 내부의 내용은 수학적 계산이 복잡하게 설계되어있어서 이 곳에는 첨부하지 않겠습니다.)
4. 기존의 레퍼런스에 추가한 기능이며 post-processing작업을 통해서 Mesh가 형광빛을 내도록 후처리를 진행했습니다.
(위의 코드는 post-processing처리한 코드 내용의 일부입니다)
Step.4 - 애니메이션
오디오의 볼륨값을 받아오는 기능을 구현합니다.
변하는 값 data를 받아와서 애니메이션으로 실행합니다. 이 때 변하는 값은 vertex와 fragment의 변수값으로 들어갑니다.
애니메이션은 첨부하지 못하였으나 다음과 같은 결과물을 얻었습니다!
마치며
- 처음 THREE.js를 사용했을 때 이런저런 레퍼런스를 살펴보았으나 기본개념이 부족하여 작동 원리를 파악하는 데 많은 어려움이 있었습니다.
- 독학을 한 달 가량 한 후에 접한 이번 프로젝트에서는 THREE.js의 원리와 개념에 대한 이해가 지난 번 보다 성장했다고 느낄 만큼 그래픽을 다루는 데 수월했습니다.
- 물론 vertex와 fragment는 공부가 더 필요한 것 같습니다.
- 웹개발과 웹그래픽 분야의 최적화 기술이 많이 차이나는 것 같았습니다. 웹개발은 최적화 작업을 많이 진행해도 눈에 띌 만큼 성과가 나타나지 않았으나 웹그래픽은 최적화를 진행할수록 버벅거림이 줄어들고 퀄리티가 상향하는 것을 체감할 만큼 최적화의 영향이 컸습니다.
