Caesium Games · 버전 1
첫 번째 버전
예전 Caesium Games 웹사이트에 있던 첫 번째 버전이에요. 이미지 주변에 파란빛이 돌고, 셰이더로 만든 무늬가 움직여요.
작업한 부분
셰이더, 파티클, 빛을 겹치는 효과.
Three.js 프로젝트
아르카니스트 포털.
월드 오브 워크래프트를 참고해서 만든 아르카니스트 포털이에요. Three.js와 GLSL을 배우면서 지금까지 세 가지 버전을 만들었어요.
만든 과정버전 3 · 현재
현재 버전
가장 최근 버전이에요. 룬과 안개를 추가했고, 클릭하는 곳에 따라 다른 효과가 나와요.
가운데를 클릭하면 파문이 생기고, 고리를 클릭하면 다른 효과가 나와요. 룬을 클릭해서 불을 켤 수도 있어요. 일곱 개가 켜지면 더 큰 애니메이션이 시작돼요.
예전 웹사이트에서 나머지 페이지 내용은 빼고 포털만 가져왔어요.
01 / 아이디어
만들게 된 이유
마법사와 포털을 좋아해요. 아르카니스트의 이야기와도 잘 어울리고요.
월드 오브 워크래프트는 제가 가장 좋아하는 게임이에요. 제 게임과 웹사이트에도 포털을 넣고 싶어서 WoW의 포털을 참고했어요.
이때 Three.js Journey ↗ 강의를 따라 하면서 Three.js와 GLSL을 더 배웠어요. 배운 걸 포털에 적용해 볼 수 있었고, 그때부터 계속 고치고 있어요.
- 담당 역할
- 디자인 및 개발
- 사용 기술
- Three.js / React / GLSL
- 세계관
- Arcanyst
02 / 버전
달라진 점
예전 Caesium Games 웹사이트의 포털부터 시작했어요. 그다음에는 아르카니스트 버전을, 그리고 이 포트폴리오의 버전을 만들었어요.
Arcanyst · 버전 2
아르카니스트 버전
아르카니스트 웹사이트에서는 네 가지 배경이 자동으로 바뀌게 했어요. 고리는 회전하고, 주변에는 파티클이 움직여요. 포털을 클릭하면 도마뱀도 나와요.
작업한 부분
배경 전환, 표면 왜곡, 고리 회전, 도마뱀 애니메이션과 물리 효과.
포트폴리오 · 버전 3
현재 버전
제 포트폴리오에 있는 버전이에요. 룬과 안개를 넣고 효과도 더 추가했어요. 가운데를 클릭하면 파문이 생기고, 고리에는 별도의 클릭 효과가 있어요. 룬 일곱 개가 켜지면 포털 전체가 반응해요.
작업한 부분
굴절, 안개, 스프라이트 애니메이션, 룬과 포털의 효과.
03 / 디테일
각각 따로 만든 룬 26개
룬마다 SVG 파일을 따로 만들었어요. 다른 색으로도 쓸 수 있게 검은색으로 만들었고요. 포털에서는 무작위로 파란색이나 보라색 불이 켜져요. 직접 클릭할 수도 있어요. 일곱 개가 켜지면 큰 애니메이션이 나오고, 다시 처음부터 반복돼요.
아르카니스트의 다른 프로젝트
계속 고치는 중
늘 바꾸거나 개선하고 싶은 부분이 생겨요. 그래서 벌써 세 가지 버전이 됐어요.