We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

 흔히 WebGL과 그 부모격 기술인 OpenGL을 3D 그래픽을 그리고  여기에 빛이나 텍스처, 그림자 등의 시각 효과를 적용하기 하기 위한 기술이라고 설명합니다. 이것이 WebGL의 가장 흔한 용례일 것입니다.
  사실 WebGL은 그 이상입니다.  WebGL은 그래픽 하드웨어인 GPU와 직접 통신할 수 있는 Web API입니다. GLSL이라 불리는 작은 프로그래밍 언어가 함께 제공되고, 여러분은 GLSL을 통해  GPU의 계산 능력을 여러분이 원하는 대로 활용할 수 있습니다. 2D/3D 그래픽스, 영상 처리,  절차적 텍스처, 지형 생성, 시각적 효과(반사, 굴절, 연기, 불, 유체), 뿐만 아니라  그래픽스와 무관하지만 파워풀한 GPU를 활용한 일반 연산까지도 모두 WebGL에서 가능합니다.  WebGL의 한계는 오직 하드웨어 자체의 능력과 여러분의 상상력 뿐입니다. 큰 힘에는 큰 책임이 따릅니다. 이 튜토리얼의 목적은 여러분께 어떻게 WebGL의 동작하는지와 WebGL의 올바른 사용법은 무엇인지에 대해 기본적인 지식을 전달하여 여러분이 WebGL을 최대한으로 활용할 수 있게 하는 것입니다.
 

기초

만약  OpenGL 이나 WebGL 라는 용어가 친숙하지 않으시다면 여기서 시작하세요:

필수 배경지식:
Getting started with the web –이 튜토리얼에서는 아주 간단한 HTMLCSS를 사용할 것이기 때문에, HTML과 CSS는 기초적인 이해만 있더라도 충분할 것입니다.
JavaScript – 반면 JavaScript는 HTML, CSS와는 달리 굉장히 많이 사용하게 될 텐데, WebGL이 JavaScript  API이기 때문입니다. 여러분은 JavaScript 언어에 대해, 좀더 세부적으로는 함수, 배열, 이벤트에 대해 견고한 지식을 갖추는게 좋을 것입니다. 클로저, 객체, 생성자, 프로토타입 체인에 대한 이해도 때때로 도움이 될 것입니다.
WebGL by example(WebGL 예시)
짧은 코멘트가 있는 라이브 샘플들을 주제와 난이도별로 분류해놓은 것입니다.  WebGL의 컨셉과 능력을 보여주는 쇼케이스입니다. 하지만 이게 전체 튜토리얼을 대체할 순 없습니다. 
Tutorial at API reference(WebGL 튜토리얼)
WebGL API 레퍼런스 페이지에 있는 WebGL 튜토리얼입니다. OpenGL에 익숙하고 OpenGL에 대응하는 JavaScript API를 익히고자 하는 분들께 맞춰진 튜토리얼입니다.

심화

여러분들이 기초들을 모두 익히고 난 후에 둘러봐야할 것들이 더 있습니다:

WebGL API reference(WebGL 레퍼런스)
WebGL API의 모든 인터페이스, 메서드, 프로퍼티, 상수에 대한 상세한 설명을 포함한 WebGL 레퍼런스 페이지입니다. 단순히 설명만 있는 것이 아니라 깊이있는 주제에 대한 아티클, 예제, WebGL 사용에 관한 팁도 있습니다. 
Guide to Graphics on the Web(웹 위에서 동작하는 그래픽스 가이드)
Web 개발자들을 위한 Web 그래픽스 가이드입니다. SVG, HTML 캔버스를 이용한 2D 그래픽스, 비디오등과 같이 WebGL이외의 그래픽스에 대해서도 배울 수 있습니다.
Game development(게임 개발)
MDN의 게임 개발자 페이지입니다. WebGL을 다른 API나 기술과 연동하는 방법을 배울 수 있습니다. 때문에 여러분은 다른 사람들에게 배포할 수 있는 수준의 결과물을 만들기 위한 완결성있는 경험을 하게 될 것입니다.

문서 태그 및 공헌자

이 페이지의 공헌자: rjs1197, sangwoo, chrisdavidmills
최종 변경: rjs1197,