안녕하세요. 오랜만에 돌아온 에디터M 입니다.
최근에 Three.js에 관심이 생겨서 검색해보고 개인적인 일들이 있어서 몇주 동안 블로그를 포스팅 하지 못했네요.
요즘 장마라서 기분도 별로 좋지 않더라고요. 전 비가 오면 밖에 나가기도 싫어서...
개인적인 이야기는 여기 까지 하고 오늘은 Three.js의 기본 뼈대인 WebGL에 대해 알아 볼게요.
저도 지금 혼자서 공부하고 있는 수준이라 실수 하는 부분도 있는데 잘못 된 부분 댓글로 부탁드려요.
WebGL 이란??
WebGL은 웹 브라우저에서 2D 및 3D 그래픽을 렌더링하기 위한 JavaScript API입니다. WebGL은 WebGL 1.0과 WebGL 2.0 두 가지 버전이 있으며, 모두 웹 브라우저에서 하드웨어 가속 그래픽을 사용하여 고품질의 그래픽을 표현할 수 있습니다.
WebGL은 웹 개발자들이 WebGL API를 사용하여 인터랙티브한 그래픽 경험을 웹 애플리케이션에 추가할 수 있게 해줍니다. WebGL은 HTML5의 일부로서 웹 브라우저에서 기본적으로 지원되므로 추가 플러그인이나 확장 프로그램을 설치할 필요가 없습니다.
WebGL은 기본적으로 OpenGL ES API를 기반으로 하며, GPU의 하드웨어 가속 기능을 활용하여 그래픽을 처리합니다. 이를 통해 웹 애플리케이션에서 실시간 2D 및 3D 그래픽을 만들고 제어할 수 있습니다. WebGL을 사용하면 웹에서 게임, 시뮬레이션, 데이터 시각화, 제품 미리 보기, 교육 앱 등 다양한 그래픽 기반 애플리케이션을 개발할 수 있습니다.
WebGL은 WebGL 컨텍스트를 생성하고 셰이더 프로그램을 작성하여 그래픽을 렌더링합니다. WebGL 셰이더는 C 스타일의 GLSL(OpenGL Shading Language)을 사용하여 작성되며, 그래픽 파이프라인의 여러 단계에서 실행됩니다. 개발자는 셰이더를 사용하여 정점(vertex) 및 픽셀(pixel) 수준에서 그래픽 처리를 제어할 수 있습니다.
WebGL은 기존의 2D 캔버스 그래픽을 사용하는 것보다 더 복잡한 그래픽 효과와 상호 작용을 가능하게 해줍니다.
하지만 WebGL은 상대적으로 낮은 수준의 API로서, 그래픽 프로그래밍 경험이 필요하며, 최적화와 성능에 대한 고려가 필요할 수 있습니다.
WebGL의 특징
- WebGL은 GPU(그래픽 처리 장치)를 활용하여 그래픽을 가속화합니다. 이를 통해 웹 애플리케이션에서 고성능의 2D 및 3D 그래픽을 렌더링할 수 있습니다.
- WebGL은 웹 표준으로서 HTML5의 일부로 포함되어 있습니다. 따라서 별도의 플러그인이나 확장 프로그램을 설치할 필요 없이 대부분의 모던 웹 브라우저에서 지원됩니다.
- WebGL은 저수준의 그래픽 API로서, 개발자가 그래픽 파이프라인의 다양한 단계를 직접 제어할 수 있습니다. 이를 통해 더 세밀한 그래픽 처리를 할 수 있으며, 복잡한 그래픽 효과를 구현할 수 있습니다.
- WebGL은 플랫폼에 독립적으로 동작합니다. 즉, Windows, macOS, Linux 등 다양한 운영 체제에서 동일한 WebGL 애플리케이션을 실행할 수 있습니다.
- WebGL은 셰이더 프로그래밍을 지원합니다. 셰이더는 그래픽 처리의 핵심이며, 개발자가 정점 및 픽셀 수준에서 그래픽을 제어할 수 있게 합니다. 셰이더를 사용하여 높은 수준의 그래픽 효과를 만들고 사용자 정의할 수 있습니다.
- WebGL은 데이터 시각화와 시뮬레이션 분야에서 많이 사용됩니다. 대용량 데이터 세트를 시각화하거나 물리 시뮬레이션, 입자 시스템 등을 구현할 수 있습니다.
- WebGL은 다른 웹 기술과 쉽게 통합될 수 있습니다. HTML, CSS, JavaScript와 함께 사용하여 웹 페이지의 일부로 그래픽 애플리케이션을 개발할 수 있습니다.
렌더링(Rendering) 이란?
렌더링은 컴퓨터 그래픽스에서 화면에 이미지를 생성하거나 표시하는 과정입니다.
이 과정은 모델링, 변환, 조명 및 재질 설정, 클리핑, 투영, 래스터화, 그리기 등의 단계로 이루어집니다.
이 단계를 통해 2D 또는 3D 객체를 화면에 그리고, 색상, 텍스처 등의 속성을 적용하여 그래픽을 표현합니다.
렌더링 단계
- 모델링: 렌더링될 객체 또는 장면의 모델링 단계입니다. 2D 또는 3D 모델링 도구를 사용하여 객체의 형상, 구조, 재질 등을 정의합니다.
- 변환(Transformations): 모델을 원하는 위치, 크기, 회전 등으로 변환하는 단계입니다. 이 단계에서는 객체의 위치, 방향, 크기 등을 조절하여 장면을 구성합니다.
- 조명과 재질 설정: 빛의 속성과 재질을 설정하는 단계입니다. 조명을 추가하여 객체에 광원의 영향을 주고, 재질을 설정하여 표면의 색상, 반사율, 광택 등을 정의합니다.
- 클리핑(Clipping): 뷰포트에 맞지 않는 부분을 제거하는 단계입니다. 장면의 일부가 화면에 들어가지 않는 경우 해당 부분을 제외합니다.
- 투영(Projection): 3D 공간의 객체를 2D 화면에 투영하는 단계입니다. 3D 공간에서의 객체의 위치와 시야 등을 고려하여 2D 화면에 표현될 좌표를 계산합니다.
- 래스터화(Rasterization): 3D 객체를 픽셀로 변환하는 단계입니다. 화면에 그려질 픽셀들로 객체를 채웁니다. 이 단계에서는 표면의 색상, 텍스처 매핑 등이 적용됩니다.
- 그리기(Drawing): 래스터화된 픽셀들을 실제 화면에 그리는 단계입니다. 픽셀들을 화면 버퍼에 그리고, 최종적으로 화면에 표시됩니다.
Canvas??
Canvas는 HTML5에서 도입된 요소로, 웹 페이지에 그래픽을 그리기 위한 표준화된 방법을 제공합니다. Canvas를 사용하면 JavaScript를 통해 그래픽을 그리고 조작할 수 있습니다.
Canvas 요소는 일반적으로 '<canvas>' 태그로 표시되며, 크기 및 속성을 설정하여 원하는 그래픽 영역을 만들 수 있습니다.
Canvas는 비트맵 그래픽을 처리하며, 2D 그래픽을 그리기 위한 API인 "Canvas 2D Context"를 제공합니다.
Canvas를 사용하면 다양한 그래픽 요소를 그릴 수 있습니다. 직선, 곡선, 다각형, 텍스트 등의 기본 도형을 그리거나, 이미지를 삽입하고, 색상, 선 스타일, 그림자 등의 스타일을 설정할 수 있습니다.
또한 애니메이션, 상호 작용 및 게임 개발에도 활용됩니다.
Canvas는 JavaScript를 사용하여 그래픽을 그리기 때문에 동적이고 인터랙티브한 그래픽 애플리케이션을 개발할 수 있습니다. Canvas의 API는 저수준으로 설계되어 있어 개발자가 직접 그래픽 처리를 제어할 수 있습니다.
제가 글 재주가 없어서 잘 작성 했는지 모르겠지만 잘못된 부분 알려주시면 감사드리겠습니다.
오늘은 제가 아는 지식으로 글을 작성하고 여러 문서를 참고해서 WebGL과 렌더링, Canvas에 대해 알아 보았는데요.
다음 시간 부터 Three.js에 대해 같이 알아 보도록 해요.
'공부일지 > Three.js' 카테고리의 다른 글
| Three.js 공부하기 3D 큐브 만들기 (7) | 2023.07.19 |
|---|---|
| Three.js 공부 하기 : Three.js 심화 학습 (7) | 2023.07.14 |
| Three.js 공부 하기 : Three.js 알아보기 (8) | 2023.07.12 |
