[Three.js] Three.js를 시작해보자

글또를 시작한 후, 쓰리제이에스해보자또 소모임에 가입하여 Three.js 스터디를 하게 되었다. 저번주 전체 온보딩에 이어 이번주 스터디조 오프라인 모임을 했는데, 2주간의 Three.js 스터디 기록을 해보려고한다.

 

 쓰리제이에스해보자또, 첫 번째 오프라인 모임

사실 쓰리제이에스해보자또 첫 회의는 온라인으로 진행되었는데, 깜빡 잠들어서 참여하지 못했다. 그래서 첫 번째 오프라인 모임은 무슨 일이 있어도 참여해야겠다고 생각했고, 시험 전날이지만 튜링의 사과까지의 왕복 3시간 모험을 감행했다.

 

오프라인 모임에서는 "Three.js란 무엇인가"에 대해서 스터디장님께서 발표해주셨다. 발표에서 가장 기억에 남는 내용은 CPU와 GPU의 차이에 대한 설명이었다. 왜 컴퓨터에서 그래픽을 다루기 위해 GPU를 써야 하는가..CPU를 쓰면 최신 core i9를 기준으로도 1초간 화면 표시를 위해 76.4초간 연산이 필요하다. 반면 GPU는 병렬적으로 연산을 진행해서 리얼타임 렌더링이 가능하다. CPU와 GPU의 구조를 기반으로도 설명해주셔서, 그래픽스에서 GPU의 우위를 쉽게 이해할 수 있었다.

 

조 오프라인 모임 

10월 25일 금요일에 조별 모임을 가졌다. 스터디에서 제공된 커리큘럼을 바탕으로, 먼저 개인 공부를 진행한 뒤 조별로 모여 내용을 공유했다. 

 

조원 중 스터디장님이 계서서 거의 과외 받는 수준으로 세세한 설명을 들을 수 있었다. 전공 과정 중 컴퓨터 그래픽스와 OpenGL을 다룬 경험이 있어 개념을 어느 정도 알고 있다고 생각했지만, 스터디장님의 설명을 들으면서 "왜" 그런지에 대해 깊이 알게 되다 . 그래픽스에서의 카메라 원리, 벡터와 스칼라, 그리고 투영 등 three.js나 코드보다도 그래픽스의 기본적인 개념에 대해서 깊게 이해할 수 있는 시간이었다.

 

---

 

Three.js란

WebGL 등의 복잡한 로우레벨 코드를 추상화, 단순화 시킨 고수준 API를 통해, 개발 과정을 단순화하는 3D 그래픽 라이브러리

 

 3D 그래픽 도구에는 여러가지가 있다. OpenGl, WebGl, Three.js, Babylon.js 등이 대표적인데, 각 도구들은 저마다의 추상화 계층을 가지고 있다.

 

- OpenGL:  최하위 레벨로, 하드웨어와 직접 통신을 하며 세밀한 제어가 가능하다. 하지만 진입 장벽이 높다는 단점이 있다.

- WebGL:  웹 브라우저를 위한 OpenGL ES 기반 API로, 자바스크립트로 접근 가능하다. 여전히 복잡한 보일러플레이트 코드가 필요하며 다루기 어렵다.

- Three.js:  WebGL 기반의 고수준 자바스크립트 라이브러리이다.  직관적인 API를 제공하며, 웹 브라우저 내부에서 고수준의 추상화 레이어에서 동작한다. 빠른 개발이 가능하며, R3F 등 더 편한 3D 구현을 위한 툴도 있다.

 

 

위 도구들은 컴퓨터 상에서 3D 그래픽을 구현하는 데 사용되지만, 과연 이들로 생성하는 것이 진짜 3D일까?

 

사실, OpenGL 자체는 3D 그래픽 도구가 아니다😮 . OpenGL은 좌표 평면에서 점, 선, 삼각형을 그리는 일종의 그래픽 파이프라인이다. 3D 공간을 표현하기 위해서는 투영이라는 과정이 필요하다

 

투영

투영이란 3D 공간의 객체를 2D 화면에 그릴 때, 3차원 좌표를 2차원 평면으로 변환하는 과정이다. 투영을 통해 깊이와 입체감을 가진 3차원 객체가 평면에 드러나며, 이를 통해 인간의 눈은 화면 속 그래픽을 3D로 인식하게 된다.

 

투영에는 두 가지 종류가 있다.

1. 직교투영(Orthographic Projection) : 객체가 카메라와 얼마나 가까운지와 상관없이 동일한 크기로 보이도록 표현

2. 원근투영(Perspective Projection) : 실제 시야처럼 거리에 따라 객체 크기가 달라지도록 표현. 큰 물체는 크게, 먼 물체는 작게

 

투영을 통해 3차원 정보가 평면에 투영되면, 인간의 눈은 그 안에서 깊이와 거리감을 느껴 3D처럼 인식할 수 있는 것이다. 

 

투영의 활용

특정 목적이나 스타일을 위해다양한 투영 방식이 활용된다. 예를 들어, 어안 렌즈 투영과 등각 투영은 일반적인 시각과는 다른 방식으로 3D 공간을 표현하여, 정보를 효과적으로 전달하거나 독특한 시각적 효과를 제공할 수 있다. 이러한 방식들은 인간의 시각에 구애받지 않고 더욱 다양한  시각적 경험을 가능하게 한다.   

 

 

OpenGL을 사용하면 3D 표현을 위해 별도의 투영이 필요하지만, Three.js는 이러한 연산을 대신 해준다. 따라서 보다 더 쉽게, 3D를 표현할 수 있는 것이다.

 

---

 

Three.js 스터디 목표

전공 수업 중 OpenGL을 배우면서, 기말 프로젝트로 태양계 프로젝트를 만들었었다. 텍스쳐 매핑도 실패하여 날 것 그대로의 오브젝트이고, 기능도 변변찮지만 며칠 밤낮을 세우며 만들었던터라 정말 애정을 가지고 있는 프로젝트이다. 나름 이중 삼중으로 오브젝트 쌓아 스타일링, 토성 띠 디테일까지 챙김

 

이 프로젝트를 계기로  컴퓨터 그래픽스에 관심을 가지게 되었고, Three.js에도 관심을 가지게 되었던 것 같다. 그래서 이번 Three.js 최종 목표는 OpenGL로 만들었던 태양계 프로젝트를 Three.js로 이식해보는 것으로 정했다. 태양계가 돌아가는 인터렉션 블로그 만들기를 목표로, Three.js 스터디 화이팅