mozilla

WebGL

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

문서 태그 및 공헌자

Contributors to this page: JeongSeongDae, jaejoonjung, bassam, hanmomhanda
최종 변경: hanmomhanda,