[BABYLON] babylon기초

 

먼저 3D 기초부터 언급하고 넘어가겠습니다.

 

렌더링

컴퓨터를 사용하여 물체를 3차원으로 표현하는 과정으로,

점(vertices), 선(Edges), 면(faces)로 이루어져있음

 

이 것들을 X,Y,Z축을 2D스크린으로 옮기는 과정이 렌더링,

ex)텍스처와 매핑, 조명과 쉐이딩, 애니메이션

 

 * 3차원 모델 좌표계 정점을 2차원으로 바꿔주며,

 * 면에 그려지는 객체의 색체와 조명 또는 매칭을 하는 과정들

 

투영 -> 클리핑 -> 은면처리 -> 쉐이딩 -> 매핑 순으로 이뤄지며

투영은 3차원 모델을 2차원 스크린에 비춰주고

클리핑은 디스플레이 밖 오브젝트 부분을 처리해주는 과정이며

은면은 오브젝트의 보이지 않는 부분과 보이는 부분을 처리해주고

쉐이딩은 음영, 조명빛, 광원빛, 반사광, 투명빛 등을 처리합니다

매핑은 오브젝트 표면에 텍스처 등을 통해 질감과 반사된 풍경을 처리 해줍니다

 

CPU가 GPU에 오브젝트를 그리라고 명령을 호출하는데 이것이 Draw Call입니다

 

 

기하학 및 수학 기초

3D는 벡터, 행렬, 좌표 변환 등 수학적 개념을 기반으로 작동 함

 

벡터(Vector) : 크기와 방향을 가진 위치, 속도, 가속도 등을 나타내는 데 사용

행렬(Matrix) : 숫자나 수학적 객체들을 직사각형 그리드에 배열한 것으로,

 - 이동 변환은 객체의 위치를 변경

 - 회전 변환은 객체를 회전,

 - 스케일 변환은 객체의 크기를 조절

좌표 변환 (Coordinate Transformation) : 한 좌표계에서 다른 좌표계로 점이나 벡터를 변환하는 과정

3D장면의 객체는 월드 좌표계에서 정의되며, 카메라의 뷰 좌표계로 변환된 후에 사용자의 스크린 좌표계로 변환 됨

 

 

조명과 쉐이딩

조명은 장면의 분위기와 깊이를 설정하는데 중요한 역할로

Hemispheric, Directional, Point, Spot 타입이 있습니다.

- Hemispheric : 반구 형태의 조명으로, 주변 조명 역할 및 scene 전체에 부드러운 빛을 제공

- Directional : 멀리 떨어진 광원(태양)과 같은 빛으로 방향성을 갖고 있어 주로 그림자를 생성하는데에 사용

- Point : 하나의 지점에서 모든 방향으로 빛을 발산하는 주변 조명으로 전구나 촛불같은 빛이며, 위치에 따라 주변 객체에 영향을 줌

- Spot(스포트라이트) : 특정 방향으로 빛을 집중하여 손전등이나 무대 조명과 같은 효과

 

쉐이딩은 3D모델의 표면에 적용되는 색상과 질감 처리 방법으로

물체의 형태와 재질을 결정하며, 시각적 효과를 줄 수 있습니다

Flat, Phongm PBR이 있습니다

Secen에 있는 객체의 색상을 계산하는 렌더링 프로세스로 물체의 표면이나 볼륨에 빛이 어떻게 반응하는지 결정하는 과정,

- 쉐이더 : GPU에서 처리되는 프로그램으로 데이터를 조작하여 개별 픽셀을 생성하고, 화면 이미지를 생성

  + Vertex, fragment로 구성되어 WebGL에서는 GLSL, Unity등에서는 HLSL등의 쉐이더 언어가 존재

  + 파도, 날개짓, 눈 쌓임 등 여러가지 효과를 표현할 수 있음

 

 

 

텍스처와 매핑, 재질

텍스처 : 3D모델의 표면에 적용되는 이미지나 패턴, 디테일을 추가하여 시각적으로 풍부하고 현실적으로 보이게함

 - Diffuse Map : 기본 색상

 - Specular Map : 빛을 반사하는 방식과 강도

 - Normal Map : 물체의 표면에 미세한 디터일 추가(질감의 표면을 표현)

 - Bump Map : 표면의 높낮이를 조절하여 입체감 부여

 - Opacity Map : 투명도 또는 불투명도를 조절

 - Emissive Map : 발광을 표현

 - Reflection Map : 반사를 표현

 

매핑 : 3D모델의 각 점에 텍스처를 어떻게 적용할 지 결정하는 과정으로 2D텍스처 이미지를 3D 모델의 표면에 올바르게 투영하는 방법을 정의

 - UV Mapping : 3D 모델의 각 정점에 UV 좌표를 할당하여 텍스처를 정확한 위치에 매핑

   + UV좌표는 텍스처 이미지의 2D 좌표를 의미하여 U는 가로, V는 세로 이다

 - Projection Mapping : 텍스처를 특정 방향에서 모델에 투사하는 방식으로 원통형, 구형, 평면 투영이 있다

 

재질 : 3D 객체의 표면이 어떻게 빛과 상호작용하며, 어떤 시각적 특성을 보여주는지를 정의

색상, 질감, 광택, 반사도, 투명도 등의 시각적 특성을 부여하여, 모델이 더욱 사실적으로 보일 수 있게 함

StandardMaterial, PBRMaterial 등이나 Diffuse/Albedo, Spcular, Emissive, Transparency등의 텍스처 정보를 갖음

 - StandardMaterial : 기본적인 재질 유형으로 색상, 텍스처, 광택, 반사 등

 - PBRMaterial : 물리기반 렌더링을 사용하는 재질로 금속성과 거칠기(Roughness) 속성을 지원

 - Shadermaterial : 사용자 정의 쉐이더 사용

 

 

---

 

Babylon.js 는 HTML5를 통해 웹 브라우저에서 실시간 3D 그래픽을 표시하기 위한 JavaScript 라이브러리이자 3D 엔진 입니다 .

 

 

Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best

바빌론 사이트는 위와 같고

 

메뉴를 간략히 살펴 보자면

feature demo를 통해 바빌론에서 구현한 것들을 볼 수 있으며

보통 tools에서 playgound를 통해 테스트를 하고 sandbox에서 모델링 미리보기가 가능합니다

documentation을 통해 원하는 기능을 검색하거나 해서 직접 보는 것도 가능합니다.

 

babylon을 사용하는 방법은 여러가지 방법이 있는데

저는 VSC에서 npm으로 babylon.js를 설치 후 사용중 입니다.

codepen.io에서도 가능하다고 하니 편하게 사용도 가능할 것 같아요

보통 playground에서 테스트하고, 실제 프로젝트에 적용 중 입니다.