three.js 공부하기 전 용어 정리

mdn 문서  

webGL 용어 정리

Getting started with WebGL - Web API | MDN

• OpenGL 2.0 기반 API을 이용하여 브라우저의 HTML canvas에 렌더링하여 3D 웹 콘텐츠 제작을 가능하게 한다.
• 다른 HTML 요소들과 혼합될 수 있고, 페이지나 배경의 다른 부분과 합성 될 수 있음
• 아래는 3D그래픽 기본 개념
• 1. 3D 모델링: 3D 그래픽은 3차원 모델링을 통해 시작합니다. 3D 모델은 공간 내에서 객체를 표현하는데 사용되며, 이러한 모델은 다각형(주로 삼각형)으로 이루어진 망(mesh)으로 구성됩니다.
  2. 카메라: 3D 공간에서 보이는 화면을 결정하는데 사용되는 카메라는 시점, 시야각, 뷰포트 등의 속성을 가지고 있습니다. 카메라를 조작하여 3D 공간을 원하는 시각으로 보는 것이 가능합니다.
  3. 조명과 그림자: 조명은 3D 객체의 시각적 효과에 큰 영향을 미칩니다. 조명의 종류와 위치에 따라 객체의 밝기, 그림자, 하이라이트 등이 변할 수 있습니다.
  4. 머터리얼(Material): 머터리얼은 객체의 표면 속성을 정의합니다. 이것은 색상, 질감, 반사율 등을 나타냅니다. 머터리얼은 객체가 어떻게 빛을 반사하거나 흡수하는지를 결정합니다.
  5. 텍스처(Texture): 텍스처는 3D 객체의 표면에 이미지나 패턴을 적용하는 데 사용됩니다. 이것은 객체에 더 자연스러운 외관을 부여하거나 세부 정보를 추가하는 데 도움을 줍니다.
  6. 애니메이션: 3D 그래픽에서 애니메이션은 객체나 카메라의 움직임을 조절하는 것을 의미합니다. 이것을 통해 객체가 움직이고 변환하는 동안 시각적 효과를 만들 수 있습니다.
  7. 렌더링(Rendering): 렌더링은 3D 모델을 2D 화면에 표시하는 과정을 나타냅니다. 렌더링은 객체의 표면, 조명 및 카메라 설정을 고려하여 이미지를 생성하는 과정입니다.
  8. Z-버퍼(Z-Buffer): Z-버퍼는 3D 공간에서 객체들의 깊이(depth)를 추적하는 데 사용됩니다. 이것은 객체들이 서로 겹치는 경우 뒤에 있는 객체를 올바르게 렌더링하는 데 필요합니다.
  9. 폴리곤(Polygon): 폴리곤은 3D 객체를 구성하는 기본 요소 중 하나로, 삼각형, 사각형 및 다각형 형태로 표현됩니다. 폴리곤은 3D 모델을 효과적으로 나타내는 데 사용됩니다.
  10. 월드 좌표계와 로컬 좌표계: 객체의 위치와 방향을 정의하는 데 사용되는 좌표 시스템입니다. 월드 좌표계는 전체 공간을 나타내며, 로컬 좌표계는 개별 객체의 상대적인 위치와 방향을 나타냅니다.
• 아래는 ChatGPT가 알려준 webGL 용어들
• 1. WebGL (Web Graphics Library): 웹 브라우저에서 2D 및 3D 그래픽을 렌더링하고 상호 작용하기 위한 JavaScript API입니다.
  2. Canvas: <canvas> 요소는 WebGL 그래픽을 그릴 수 있는 HTML 요소입니다. WebGL 콘텍스트를 초기화하고 그래픽을 그릴 수 있도록 해줍니다.
  3. Context: WebGL 콘텍스트는 <canvas> 요소와 상호 작용하여 2D 또는 3D 그래픽을 렌더링합니다.
  4. Shader: Shader는 WebGL 그래픽의 핵심 구성 요소 중 하나입니다. Vertex shader와 Fragment shader로 나누어지며, 그래픽의 모양과 렌더링 방식을 정의합니다.
  5. Vertex Shader: Vertex shader는 그래픽 객체의 위치, 색상 및 변환 등을 정의하는 데 사용됩니다.
  6. Fragment Shader: Fragment shader는 픽셀 단위로 그래픽의 색상과 렌더링 효과를 계산하는 데 사용됩니다.
  7. Buffer: Buffer는 WebGL에서 데이터를 저장하고 전달하는 데 사용되며, 버퍼를 통해 쉽게 그래픽 데이터를 GPU로 전송할 수 있습니다.
  8. Texture: 텍스처는 2D 이미지 또는 데이터를 표현하고 그래픽 객체에 매핑할 때 사용됩니다. WebGL에서 텍스처를 사용하여 그래픽을 렌더링하거나 텍스처를 변경하여 효과를 적용할 수 있습니다.
  9. Framebuffer: 프레임 버퍼는 화면에 그리기 전에 그래픽을 렌더링하는 데 사용되는 메모리 버퍼입니다. WebGL에서 다양한 렌더링 패스 및 효과를 구현하는 데 중요합니다.
  10. WebGL 컨텍스트 손실 (WebGL Context Lost): WebGL 컨텍스트가 일시적으로 손실되는 상황을 의미하며, 이를 처리하기 위한 이벤트 및 메서드가 있습니다.
  11. Three.js: Three.js는 3D 그래픽을 구현하기 위한 인기 있는 JavaScript 라이브러리 중 하나로, WebGL을 기반으로 합니다.
  12. GLSL (OpenGL Shading Language): GLSL은 Shader를 작성하기 위한 프로그래밍 언어로, WebGL에서 사용됩니다.
  13. WebGL Debugging Tools: WebGL 애플리케이션을 디버깅하기 위한 도구와 라이브러리로, 오류를 찾고 성능을 최적화하는 데 도움이 됩니다.
  14. WebGL Extension: WebGL의 기능을 확장하기 위한 추가 모듈 또는 플러그인을 지칭합니다.
  15. Anti-aliasing: 렌더링된 이미지나 그래픽을 부드럽게 만드는 기술로, 화면의 계단 현상을 줄이는 데 사용됩니다.
  16. WebGL Renderer: WebGL을 사용하여 3D 그래픽을 화면에 렌더링하는 라이브러리 또는 엔진을 의미합니다.