WebGL과 Three.js 토이 프로젝트

웹 그래픽스에 다시 끌리다

Reddit에서 three.js 서브레딧을 둘러보다가, WebGL의 매력에 제대로 빠져버렸다. 사실 그래픽스를 처음 접한 건 대학교 1학년 때 게임 개발을 공부하면서였다. 그때 OpenGL도 아주 얕게나마 만져봤고, “이 분야가 어떤 느낌인지” 정도는 알고 있었다.

문제는 그 시절의 난이도였다. C++ 문법도 벅찬데 선형대수까지 같이 오니까, 머리가 아니라 심장이 먼저 도망가더라. 결국 “게임 개발은 내 길이 아닌가 보다” 하고 접어뒀다.

그런데 요즘 웹 개발을 하면서 조금 여유가 생기니, 다시 호기심이 올라왔다. 내가 원래 화려한 걸 좋아하는 편이라, WebGL 같은 그래픽스 API는 웹 프론트엔드랑도 잘 맞을 것 같았다. 무엇보다 웹의 큰 장점은 만든 걸 배포하고 공유하기 쉽다는 것. “내가 만든 걸 링크 하나로 보여줄 수 있다”는 생각만 해도 신난다. 🔥

강의 선택: Bruno Simon의 Three.js Journey

three.js 서브레딧에서 추천이 많던 강의를 결국 구매했다. 가격은 무려 13만 원 💸.

그래도 이쪽에서 꽤 유명한 분이고, 프라이빗 디스코드 커뮤니티도 운영 중이라 “한 번 믿어보자”는 마음으로 결제했다.

구성은 영상 하나당 대략 1시간, 총 66개. 얼핏 비싸 보이지만, 전체 분량을 생각하면 오히려 가성비는 괜찮은 편이다. 다만 아쉬운 점이 있다면 강의가 영어고, 강사가 프랑스인이라 발음이 조금 낯설다는 것… (그래도 내 영어 발음보단 낫다.)

영상 아래에는 텍스트 버전도 제공되는데, 강의 초반엔 시각 자료가 없으면 이해가 어려운 내용이 많아서 결국 영상 위주로 봤다.

강의 링크: https://threejs-journey.com/

강의 후기

7월 초부터 하나씩 듣기 시작했고, 8월 말 기준으로 약 10편 정도 남겨둔 상태다.

중간에 Shader 파트에서 잠깐 멈췄다. Vertex/Fragment Shader로 뭔가 멋진 걸 만들긴 하는데, 설명이 빠르게 지나가거나 “왜 이렇게 되는지”가 부족하게 느껴지는 구간이 있었다. 그래서 일단은 넘기고, 나중에 WebGL 기초를 따로 잡은 뒤에 다시 돌아오기로 했다.

강의를 다 보고 퀴즈를 통과하면 수료증도 준다고 하니, 완주한 뒤에는 이 글도 “완주 후기 버전”으로 한 번 더 업데이트할 예정이다.

Practice 01 - 3D Text

배포 사이트: 클릭!

• Used helvetica font in typeface format to generate a simple 3d text.
• Utilized built-in controlers (Orbit) to move around the space.
• Created a hundred donut-like objects around the text to make it just look better...

Practice 02 - Haunted house

배포 사이트: 클릭!

• Applied shadow mapping to improve performance
• Converted texture images into webp format

Practice 03 - Galaxy

배포 사이트: 클릭!

• Used simple Trigonometry to generate a galaxy
• Used vertex&fragment shaders to animate(spin) the galaxy

Practice 04 - Portal

배포 사이트: 클릭!

• Create the whole scene except fireflies with Blender.
• Animate the fireflies with shaders.
• Optimize through joining all the meshes into one to reduce draw calls.

Practice 05 - Laptop

배포 사이트: 클릭!

• Used a free 3D GLTF model and attached my blog HTML to its screen.
• Placed 3D text on the right side of the laptop.
• Added a point light above the laptop to slightly illuminate it with an orange light.

Practice 06 - Marble Race

배포 사이트: 클릭!

• Game: Marble Race
• Used react-three-rapier for realistic physics like collisions and gravity