[ 컴퓨터 그래픽스 ] 웹 GL(Web GL) 이란
∇ Web GL
- 웹 GL은 웹 브라우저 환경 기반 위에 3D 그래픽을 구현하는데에 사용되는 기술로,
웹 브라우저 상에서 하드웨어 가속 3D 그래픽(GPU)을 지원하기 위해 만들어진 JavaScript API입니다.
- 인터렉티브한 환경을 구현하고 싶은 웹 개발자들은 GLD를 통해서 3D 시각화와 인터렉티브한 웹 경험을
페이지에서 구현하여, 사용자들에게 제공할 수 있습니다.
＠예시들
Awwwards - Website Awards - Best Web Design Trends
Awwwards are the Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.
www.awwwards.com
1. Web GL이란 무엇인가????
- 웹 GL(Web GL)은 크로노스 그룹에서 개발한 웹 기반의 3D 그래픽 라이브러리 입니다.
- OpenGL ES 2.0을 기반코드로 하며,
HTML5의 canvas 엘리먼트와 함께 사용됩니다.
- 브라우저 환경이 WebGL과 호환된다면(지원한다면), 별도의 플러그인( 옛날의 플러시) 설치 없이도
3D 그래픽 환경을 렌더링 할 수 있습니다.
2. 굳이 Web GL을 사용하는 이유는 무엇인가????
- 웹 GL은 다음과 같은 이점들로 인해 사용됩니다.
- 뛰어난 성능 : 하드웨어 가속 기능을 사용하여, 고성능의 3D 그래픽을 구현 가능합니다.
- 크로스 플랫폼 : 웹 브라우저에서 실행되기 때문에,
디바이스의 운영체제나 디바이스 종류에 상관없이 동작이 가능합니다.
- 한층 더 깊은 인터렉티브 경험 : 웹과 사용자의 상호작용이 더 디테일하게 담은
다양한 3D 웹/앱을 만들 수 있습니다.
3. WebGL의 렌더링 과정.
√ 초기화 : WebGL 컨텐스트를 생성하고, 3D 씬(뷰)를 렌더링할 캔버스를 생성합니다.
√ 데이터 로딩 : 필요한 3D 모델이나 텍스처, 라이팅 등의 데이터를 로딩합니다.
√ 쉐이더 작성: 3D 객체를 렌더링 할 때 사용할 쉐이더를 작성하고 컴파일합니다.
쉐이더는 그래픽의 렌더링 파이프라인을 제어하는 역할을 합니다.
√ 렌더링 루프: 애니메이션과 상호작용을 위한 렌더링 루프를 설정합니다.
프레임마다 3D 씬이 업데이트되고 다시 그려집니다.
4. WebGL의 라이브러리와 프레임워크.
√ Three.js: 가장 널리 사용되는 3D 라이브러리 중 하나로, WebGL을 간편하게 사용 가능합니다.
√ Babylon.js : 주로 게임 개발에 사용되는 강력한 3D 엔진입니다.
√ PlayCanvas : 웹 기반의 3D 게임 개발에 특화된 플랫폼입니다.
5. WebGL의 성능면에서 주의해야 할 점은?
웹 GL은 하드웨어 가속을 사용하므로, 그래픽 성능에 따라 성능 차이가 큽니다.
너무 많은 3D 모델들이나 고품질의 텍스처/라이팅을 사용하면 웹 성능이 저하될 수 있으므로,
최적화를 고려해야 합니다..
또한 유저가 저사양의 디바이스를 사용하더라도, 웹 페이지가 부드럽게 동작하도록 유의하는 것이 좋습니다.
'3D Web Developer > computer_graphics' 카테고리의 다른 글
| [ 컴퓨터 그래픽스 ] OpenGL : Image Formation & Graphics pipeline (1) | 2024.10.19 |
|---|---|
| [ 컴퓨터 그래픽스 ] Open GL의 개념을 정리해보기. (0) | 2024.10.15 |
| [ 컴퓨터 그래픽스 ] 웹 그래픽이란 무엇인가? ( WebGL, OpenGL, WebGPU ) (4) | 2024.10.13 |