[WebGL2-My Cosmos-01] 프로젝트 세팅

프로젝트 아이디어

WebGL2로 웹에서 3D 그래픽을 구현하고자 내가 좋아하는 우주를 배경으로 시작하고 싶었다.

입력한 이름이 은하모양으로 구성되면 재미있을 것 같다는 생각을 했다.

홈 화면 - 이름 입력 / 코스모스 화면 - 입력한 이름으로 이루어진 은하 생성으로 큰 방향을 잡았다.

 

홈의 배경화면에도 WebGL2를 사용하여 효과를 주고 싶었기에 iframe 태그를 이용하기로 하였다.

<iframe id="home-background" src="home-background.html"></iframe>

 

index.html 파일에 홈 화면과 코스모스 화면의 요소가 같이 들어있다.

두 화면 모두 WebGL2를 사용해야 하므로 WebGL2로 렌더링 되는 배경과 UI요소를 분리하면 UI 변경과 배경이 서로 영향을 주지 않아 유지보수가 편해지며 다른 화면에서도 재사용이 가능해 확장성도 높아진다.

 

프로젝트 세팅

프로젝트 세팅은 이전에 써놓은 글을 참고하여 진행하였다. 

[Canvas-불꽃놀이-01] 프로젝트 초기화

[Canvas-불꽃놀이-01] 프로젝트 초기화

 

Github 주소

my-cosmos 프로젝트 Github Repo

GitHub - jinsk9268/my-cosmos: 나만의 우주 탐험하기