프로젝트와 공부를 따로 보기
워프레임 허브는 워프레임을 처음 시작한 플레이어가 복잡한 게임 시스템과 진행 순서를 이해하도록 돕는 초보자 가이드 사이트다. 그 안의 스타차트에는 Three.js와 React Three Fiber로 구성한 3D 장면이 있다. 하지만 화면이 만들어진 것과 내가 그 구성을 설명할 수 있는 것은 별개다.
완성된 소스코드부터 읽으니 따라가기 어려웠다. 그래서 공통 기초 → Three.js의 작은 장면 → WebGL → WebGPU → vgpu → 스타차트의 행성 하나 순서로 돌아가기로 했다. 각 기술을 모두 숙달한 뒤 넘어가는 과정이 아니라, 작은 예제를 비교하며 역할을 알아보는 순서다.
이 글은 학습 계획이다. 아래 예제는 블로그에서 개념을 확인하도록 새로 만든 장면이며, 내가 직접 완료한 실습 기록으로 세지 않는다.
행성으로 돌아가기 전 작은 예제
일단 대기나 여러 행성은 빼고 구체 하나만 본다. Geometry가 구체의 모양을 만들고, Texture의 격자와 표식이 표면을 감싼다. Material의 거친 정도와 금속성을 바꾸면 빛에 반응하는 모습이 달라진다.
아래 버튼을 누르면 3D 장면을 불러옵니다.
격자와 색 표식은 Material의 map에 연결한 Texture입니다. Texture를 끄면 구체 모양은 남고 무늬만 사라집니다. 실제 게임 자산 대신 별도로 만든 학습용 장면입니다.
값을 하나씩 바꾸고 이유를 설명해 보세요. 예제를 여는 것만으로 퀘스트가 완료되지는 않습니다.
여기에는 대기 셰이더가 없다. 앞으로 스타차트에 돌아갔을 때, 구체의 모양과 대기의 색·투명도를 각각 어느 부분이 만드는지 나눠서 설명할 예정이다.
적용할 때 남길 기록
실제로 값을 바꾸는 학습을 하면 아래 네 가지를 같은 글에 묶는다.
- 예상: 어느 부분이 어떻게 바뀔 거라고 생각했나?
- 변경: 어떤 값 하나를 바꿨나?
- 관찰: 실제 화면은 어땠나? 예상과 다른 이유는 무엇인가?
- 다음 질문: 아직 설명하지 못하는 부분은 어디인가?
성능 비교를 하는 날에는 기기, 화면 크기, 장면 조건과 반복 측정값도 함께 적는다. 아직 측정하지 않은 개선 수치는 적지 않는다.