WebGL을 스스로 학습하기 위한 목적으로 Giles Thomas씨가 운영중인 Learning WebGL의 레슨을 번역하며 실행해 보기로 마음먹었습니다. Giles씨 역시 WebGL을 학습하기 위한 목적으로 시작한 레슨이라고 합니다. 여기에 소개된 레슨중 10개는 NeHe OpenGL 튜토리얼들을 기반으로 했다고 합니다.
WebGL 시작하기
WebGL을 배우기위한 첫 번째 단계는 WebGL을 지원하는 브라우저를 사용하는 것입니다. 현재 파이어폭스4, 사파리(OS X 10.6) nightly, 구글 크롬10 이상의 브라우저에서 WebGL을 공식으로 지원하고 있습니다. 자신이 사용하는 브라우저가 WebGL을 지원하는지 알아보기 위해서 두 번째 레슨에 사용된 WebGL 예제를 확인해 보세요. 색상이 입혀진 삼각형과 사각형 모양을 볼 수 있다면 WebGL을 지원하는 브라우저를 사용하는 것입니다.
WebGL 레슨 목차
- Lesson 1: 삼각형과 사각형
- WebGL의 개요와 작동방식에 대하여 이해하고 삼각형과 사각형을 만듭니다. - Lesson 2: 색상 추가
- Lesson 1에 이어 개체에 색상을 추가합니다. - Lesson 3: 회전 운동
- Lesson 2에 이어 개체가 돌아가는 운동을 부여합니다. - Lesson 4: 실제 3D 개체
- Lesson 3에 이어 3차원 개체로 만듭니다. - Lesson 5: 텍스쳐에 대하여
- 이미지 파일을 3차원 개체에 입힙니다. - Lesson 6: 키보드 입력과 텍스쳐 필터
- 진보된 텍스처 사용법과 키보드를 이용하여 장면을 이동합니다. - Lesson 7: 조명 기초
- 조명을 사용하는 두가지 단순한 형태를 소개합니다. - Lesson 8: 색상 혼합과 투명도
- WebGL에서 투명한 소재를 사용하는 방법과 이론에 대하여 알아봅니다. - Lesson 9: 대량 개체를 다룰때 프로그램 구조 개선
- 객체지향 기법을 사용하여 동시에 많은 개체가 이동하는 애니메이션을 제작합니다. - Lesson 10: 카메라 워크 기본
- 지금까지 배운 기술을 응용하여 카메라의 장면 이동과 트릭에 대하여 알아봅니다. - Lesson 11: 구체, 회전 매트릭스, 그리고 마우스 이벤트
- 마우스 이벤트에 의해 구체가 회전하는 코드를 작성해봅니다. - Lesson 12: 포인트 조명
- 조명이 이동하는 3D 장면을 연출합니다. - Lesson 13: 파편 조명과 멀티플 프로그램
- 효율적인 조명 처리방법에 대하여 알아봅니다. - Lesson 14: 반사 강조와 JSON 모델 호출
- 멋진 조명을 만들기 위해 반사 강조 효과를 JSON 파일로 불러온 3D 개체에 사용합니다. - Lesson 15: 반사 매핑
- 개체의 표면에 빛의 반사 강도를 조정하여 사실감을 높이는 방법을 알아봅니다. - Lesson 16: 텍스쳐 렌더링
- 3차원 개체가 렌더링된 텍스쳐를 또 다른 개체에 입히는 정교한 트릭에 대하여 알아봅니다.
현재 위와 같은 총 17개의 레슨으로 구성되어 있으며, 그 중 10개의 레슨을 번역(의역)하고 이해하는 것을 첫 번째 목표로 삼고있습니다. 3D 프로그래밍에 대한 개념이 없으니 아무리 소스를 열어보고 이해해 보려해도 도무지 감을 잡을 수가 없어서 시작하게 되었습니다. 한 레슨이 완료될 때 마다 위 목차에 링크를 걸면서 완성해 가도록 하겠습니다. 이거 간만에 불타오르겠군요!
WebGL 레슨 0 - 시작하기 - Firejune
