Three.js란 무엇인가?

Three.js는 웹페이지에서 3차원 그래픽을 표현할 수 있도록 도와주는 자바스크립트 라이브러리, API

Three.js는 특정 웹 브라우저나 플러그인에 의존하지 않고 자바스크립트 언어를 사용하여 웹 컨텐츠의 한 공간을 GPU에서 가속되는 3차원 컨텐츠를 만들 수 있도록 도와준다.

이를 가능하게 된 배경에는 WebGl 의 출현으로 가능하게 되었다.

Three.js에서 WebGL의 이해가 중요한 것 같다. 밑에서 WebGL에 대해서 알아보자.


WebGL이란 무엇인가?

WebGL은 Web Graphics Library의 약자로 웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 Javascript API이다. OpenGL ES 2.0을 기반으로 브라우저 엔진에 내장된 HTML5 Canvas 요소 위에 그려진다.

WebGL에 대해 잘 정리된 블로그를 참조했다.


WebGL의 장점

  • 로열티 없이 누구나 사용 가능하다.

  • 렌더링 가속화를 지원하는 그래픽 하드웨어(그래픽 카드 등)을 활용한다.

  • 별도의 플로그인이 필요 없으며, 웹 브라우저에 내장되어 실행된다.

  • OpenGL ES 2.0을 기반으로하므로, 이미 OpenGL API에 대한 경험이 있다면 다루기가 쉽다.

  • 자바스크립트 프로그래밍이 가능하다. 자바스크립트는 자동 메모리 관리를 지원하기 때문에 메모리를 수동으로 할당할 필요도 없고 WebGL이 자바스크립트의 기능을 상속 받는다.

  • 모바일 브라우저에서도 사용 가능하다(모든 모바일 브라우저를 의미하진 않습니다)

정리하자면, WebGL 을 지원하는 브라우저에서 사용가능하며, 자바스크립트로 프로그래밍이 가능한게 큰 매력인 것 같다. 스마트팩토리를 하는 나의 경우에는 실제 공장의 공간을 비슷하게 구현하여 웹에서 3D로 모니터링을 할 수 있도록 사용하면 좋을 것 같다.


렌더링(Rendering)

렌더링은 컴퓨터 프로그램을 사용하여 모델에서 이미지를 생성하는 프로세스이다. 렌더링 유형은 아래와 같다.

  1. 소프트웨어 렌더링
    • 모든 그래픽 계산을 CPU의 도움으로 처리
  2. 하드웨어 렌더링
    • 모든 그래픽 계산을 GPU에 의해 수행

이 말은, 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 통해 수행할 수 있다.

즉, 서버 사이드 렌더링으로 GPU를 통해 렌더링을 하거나, 클라이언트 사이드 렌더링으로 CPU에서 로컬로 수행할 수 있다는 장점이 있다.


브라우저의 WebGL 지원 여부

브라우저 지원여부
Mozilla Firefox 버전 4.0 이상
Google Chrome 버전 9 이상
Apple Safari 사파리 5.1 이상, 활성화 여부 확인
MS Edge 지원
internet explorer 지원안함, 하지만 IE11부터 마이크로소프트도 WebGL을 지원을 시작
  • Three.js는 구버전의 IE를 제외하고는 현재 모든 브라우저에서 제공된다고 보면 된다.


준비물

Three.js는 자바스크립트 라이브러리 이므로, 많은 준비물을 요구하지 않는다.

  1. TEXT 에디터
  2. 웹 브라우저
  3. HTML, JS, CSS


NEXT

다음 시간에는 웹서버를 구축하고, Three.js를 직접 구현해 보도록 해보자.

  • 웹서버 : python - FastAPI
  • 웹브라우저 : Chrome