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