3D 모델링과 좌표계 설계 그리고 최적화 (작성중)
맨땅에 헤딩은 아프다 하지만 개발해야만한다.
개요
DOMS 프로젝트를 하면서 3D 모델링을 하기 위해 다뤘던 기술적인 내용들이다.
WebGL 이란
Web Graphics Library 의 약자로 2D 및 3D 를 렌더링 하기 위한 JavaScript API 이다. OpenGL ELS2.0 기반으로 HTML5 의 Canvas 위에 그려진다.
Three.js
일반적인 웹개발자들이 쉽게 WebGL 을 활용할 수 있도록 친절히 three.js 라는 라이브러리를 만들어 놓았다. Three.js는 WebGL의 상위 레이어로, WebGL의 복잡한 API를 감싸서 더 사용하기 쉬운 API를 제공한다. 이를 통해 우리는 더 적은 코드로 강력한 3D 그래픽을 만들 수 있었다. Three.js는 내부적으로 WebGL을 사용하여 렌더링을 수행한다. WebGL 을 다루는 라이브러리는 three.js 말고도 여러가지가 있었지만, 우리는 Three.js 를 선택했다.
Babylon.js: 매우 강력한 3D 엔진으로, 게임 개발과 같은 복잡한 3D 어플리케이션을 만드는 데 적합하다. 물리 엔진, 애니메이션, 충돌 감지 등 다양한 기능을 제공한다.
PlayCanvas: 클라우드 기반의 3D 게임 엔진으로, 협업 기능이 뛰어나고 실시간으로 편집할 수 있는 기능을 제공한다. 상업적 프로젝트에 많이 사용됩니다.
A-Frame: Mozilla에서 개발한 웹 프레임워크로, 특히 VR(가상 현실) 콘텐츠 제작에 최적화되어 있다. HTML과 같은 간단한 태그를 사용하여 3D 장면을 정의할 수 있다.
PixiJS: 2D 렌더링에 중점을 둔 라이브러리지만, WebGL 기반으로 매우 빠르고 효율적이다. 2D 게임이나 애니메이션을 만들 때 많이 사용된다.
Three.js 의 기본 구성 요소
three.js 는 3차원 객체로 구성되는 장면(Scene) 이 있고, 이 장면을 모니터와 같은 출력 장치에 출력할 수 있는, 즉 렌더링 할 수 있는 Renderer 가 있다. Scene 을 렌더링할 때는 어떤 시점에서 Scene 을 보는가에 따라 다양한 모습으로 렌더링 된다. 그 시점을 Camera 로 정의한다.
다시, Scene 은 Light 와 3차원 모델인 Mesh 로 구성된다. 3차원 형상이 화면 상에 표시되기 위해서는 적절한 광원이 필요하기 때문에, light 가 필요하다.
그리고 이 mesh 는 object3D 의 파생 클래스인데, Mesh 는 형상 등을 정의하는 Geometry 와 색상 및 투명도를 정의하는 Material 로 정의된다.
보다 자세한 내용은 fundamentals 를 참조해서 보길 바란다.
카메라 설정하기
3D 환경에 View 를 구성하기 위해서는 우선 동적으로 움직일 수 있는 카메라를 설정해야만 했다. drei 의 OrbitControls 를 사용해서,
라이브러리 분석
Three.js 는 3D 장면 생성부터 조명, 카메라, 텍스처, 애니메이션까지 쉽게 사용할 수 있다.
Scene : 3D 공간에서 오브젝트를 배치하는 기본 단위이다. 장면(Scene) 내에 여러 오브젝트, 카메라, 조명을 추가하여 전체 3D 를 구성한다.
Camera : 사용자가 3D 를 어떻게 보는지에 대해 정의한다. PerspectiveCamera, OrthographicCamera 같은 다양한 카메라 유형을 지원한다.
Renderer : 씬을 카메라 관점에서 렌더링하는 역할을 한다. Three.js 의 WebGLRenderer 가 주로 사용되며, CanvasRenderer 등의 대체 렌더러도 존재한다.
Mesh : Geometry(모양)과 Material(표면 처리)로 구성된 기본 오브젝트이다. 다양한 기본 도형을 사용하거나 커스텀 모델을 만들어 Mesh 로 사용할 수 있다.
Geometry : 3D 공간에서 오브젝트 모양을 정의하는 객체이. BoxGeometry, SphereGeomtry 등의 기본 도형이나 커스텀 Gemoetry 를 만들 수 있다.
Material : 오브젝트 표면의 속성을 정의한다. 광택, 불투명도, 반사광 등 다양한 속성을 제공하며, MeshBasicMaterial, MeshStandardMaterial 과 같은 다양한 유형이 있다.
Textrue : 오브젝트 표면에 적용할 이미지를 정의하며, 디테일을 더욱 사실적으로 표현할 수 있게 된다.
조명과 그림자 : 여러 종류의 조을 제공하여 오브젝트와 장면을 사실적으로 표현할 있다. AmbientLight, DirectionalLight, PointLight 등을 사용하여 조명 효과를 구현.
3D 모델링 과정
좌표계 설계 과정
3D 최적화의 필요성
Last updated