WebGL (Web Graphics Library)은 플러그인을 사용하지 않고 호환되는 웹 브라우저에서 인터렉티브한 3D와 2D 그래픽을 랜더링하기 위한 자바스크립트 라이브러리이다. WebGL은 HTML5 <canvas> elements에서 사용되는 OpenGL ES 2.0를 따르는 API의 도입을 통해 웹에 3D 그래픽을 제공합니다. WebGL은 Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ and Internet Explorer 11+에서 지원됩니다.
개발 주제
- WebGL 시작하기
- WebGL 컨텍스트 설정 방법.
- WebGL 컨텍스트에 2D 컨텐츠 추가하기
- WebGL을 사용하여 간단한 평면 도형을 렌더링 하는 방법
- WebGL에서 셰이더를 사용하여 색상 적용하기
- 셰이더를 사용하여 색상을 도형에 추가하는 방법을 보여줍니다.
- WebGL을 사용한 객체 애니메이션
- 간단한 애니메이션을 생성하여 객체 회전과 변형하는 방법을 보여줍니다.
- WebGL로 3D 객체 만들기
- 3D 객체인 정육면체를 생성하고 애니메이션하는 방법을 보여줍니다.
- WebGL에서 텍스쳐 사용하기
- 객체의 표면에 텍스처를 입히는 방법을 보여줍니다.
- WebGL에서 조명 효과 적용하기
- WebGL에서 조명 효과를 표현하는 방법을 알아봅니다.
- WebGL에서의 텍스쳐 애니메이션
- 회전하는 정육면체 표면에 Ogg 비디오를 입혀서, 텍스쳐에 애니메이션 효과를 적용하는 방법을 보여줍니다.
- WebGL 우수 사례
- WebGL 컨텐츠를 향샹시키기 위한 팁과 조언들
- 크로스-도메인 텍스처
- 텍스처를 자신의 컨텐츠에서 불러진 텍스처 이외에 다른 도메인으로 부터 불러오는 대한 정보
- 확장 기능 사용
- WebGL에서 사용할 수 있는 확장 기능 사용 방법
참고자료
- WebGL 명세
- WebGL 명세
- 크로노스 WebGL 사이트
- 크로노스 그룹에서 운영하는 WebGL 주요 사이트
- WebGL 배우기
- WebGL사용 방법이 나와있는 튜토리얼 사이트
- WebGL 기초
- WebGL 기초와 기본 튜토리얼
- The WebGL Cookbook
- WebGL 코드 작성 레시피를 다루는 웹 사이트
- Planet WebGL
- WebGL 커뮤니티에 참여하는 사람들을 위한 피드 웹사이트
- ewgl-matrices
- WebGL을 위한 불타는것과 같이 빠른 매트릭스 라이브러리
- glMatrix
- 고성능 WebGL앱들을 위한 자바스크립트 매트릭스와 벡터 라이브러리
- mjs
- WebGL 사용에 최적화된 자바스크립트 벡터와 배트릭스 수학 라이브러리
- Sylvester
- 벡터와 매트릭스를 조작하기 위한 오픈소스 라이브러리. 매우 강력하지만 WebGL에 최적화 되지 않았습니다.
- WebGL playground
- WebGL 프로젝트를 생성과 공유를 위한 온라인 도구. 빠른 프로토타입핑과 실험에 적합합니다.
- WebGL Academy
- webgl 프로그래밍의 기본을 배우기 위한 HTML/자바스크립트 튜토리얼 편집기
브라우저 호환성
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 4.0 (2.0) | 9 | 11 | 12 (experiment) | 5.1 (experiment) |
| Context name | experimental-webgl |
webgl |
n/a | experimental-webgl |
experimental-webgl |
OES_texture_float |
6.0 (6.0) | ? | ? | ? | ? |
OES_standard_derivatives |
10.0 (10.0) | ? | ? | ? | ? |
EXT_texture_filter_anisotropic |
13.0 (13.0) | ? | ? | ? | ? |
WEBGL_compressed_texture_s3tc |
15.0 (15.0) | ? | ? | ? | ? |
drawingBufferWidth and drawingBufferHeight attributes |
9.0 (9.0) | ? | ? | ? | ? |
| Feature | Firefox Mobile (Gecko) | Chrome for Android | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 4 | 25 (experiment) | Not supported | 12 (experiment) | Not supported |
| Context name | experimental-webgl | experimental-webgl | Not supported | experimental-webgl | Not supported |
drawingBufferWidth and drawingBufferHeight attributes |
9.0 (9.0) | 25 | ? | ? | ? |
OES_texture_float |
6.0 (6.0) | 25 | ? | ? | ? |
OES_standard_derivatives |
10.0 (10.0) | 25 | ? | ? | ? |
EXT_texture_filter_anisotropic |
13.0 (13.0) | 25 | ? | ? | ? |
OES_element_index_uint |
? | 25 | ? | ? | ? |
OES_vertex_array_object |
? | 25 | ? | ? | ? |
WEBGL_compressed_texture_s3tc |
15.0 (15.0) | 25 prefixed with WEBKIT_ |
? | ? | ? |
WEBKIT_EXT_texture_filter_nisotropic |
Not supported | 25 | Not supported | Not supported | ? |
호환성 노트
브라우저 이외에 GPU 자체도 기능을 제공합니다. 따라서 예를들면 S3 텍스처 압축(S3TC)은 오직 테그라 기반 테블렛에서 사용가능합니다.
게코 노트
WebGL 디버깅과 테스팅
Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7)을 사용하면 WebGL의 호환성을 테스트 목적으로 제어할수 있도록 두 가지 환경설정을 할 수 있습니다.
webgl.min_capability_mode- Boolean 속성으로 참일 경우 최소 호환성 모드로 사용 가능합니다. 이 모드에서 WebGL는 오직 최소한의 기능만 설정하고 WebGL 명세에서 필요한 기능만 지원하도록 설정되어 집니다. 이는 WebGL코드가 어떠한 디바이스나 브라우저에서 작동이 된다는 것을 보장합니다. 기본값으로는 거짓으로 설정되어 있습니다.
webgl.disable_extensions- Boolean 속성으로 참일 경우 WebGL 확장을 비활성화 하고 기본값은 거짓입니다.
참조
WebGL 첫경험: Nick Desaulniers