길벗·이지톡

새로운 HTML5 시대, 이제 웹지엘(WebGL)로 갈아타자!

그래픽 기본 이론과 풍부한 예제!
화려하고 사실적인 그래픽 구현을 위한 “웹지엘 입문 가이드” 

웹지엘(웹 기반 그래픽 언어)은 웹 브라우저 내에서 강력한 3D 그래픽을 구현할 수 있게 해주는 신기술이다. 이 책에서는 컴퓨터 그래픽 기법에 대한 기본 지식을 갖추고 그래픽에 관심 있는 독자를을 대상으로 여러 가지 셰이더를 살펴보고 보다 사실적이고 화려한 씬을 렌더링하는 법을 알려준다. 개발을 재미있게 하기 위해 디버깅 도구를 활용하는 법도 배우고 생산성을 최대로 끌어올릴 수 있는 라이브러리에 대해서도 살펴본다.

이 책의 구성 

* 1장: 씬 설정 
웹지엘을 통해 이미지를 렌더링하는 절차를 차례로 살펴본다. 이 과정에는 브라우저 지원 여부 검사와 정점 버퍼 객체(VBO) 및 기본 셰이더를 활용해 웹지엘 환경을 설정하는 내용이 포함된다. 이 장에서는 먼저 한 가지 색상으로 채색된 정적인 2D 이미지부터 렌더링하고, 장이 끝날 때쯤에는 여러 색상으로 이뤄진 움직이는 3D 메시를 렌더링한다. 
* 2장: 셰이더 101 
2장에서는 셰이더를 상세히 다룬다. 그래픽 파이프라인(고정 파이프라인과 프로그래 밍 가능 파이프라인)의 개요와 GL 셰이딩 언어(GLSL)의 배경, 정점 셰이더 및 프래그먼트 셰이더의 역할을 설명한다. 그런 다음 원시 타입과 GLSL 언어의 세부 내용, 웹 지엘 애플리케이션이 셰이더와 어떻게 상호작용하는지를 다룬다. 끝으로 GLSL을 활용한 예제를 몇 가지 소개한다. 
* 3장: 텍스처 및 조명 
텍스처와 간단한 조명을 적용하는 법을 보여준다. 텍스처 객체를 설명하고 이를 설정하는 법, 그리고 셰이더에서 텍스처와 광원을 결합하는 법을 알려준다. 
* 4장: 사실성 높이기 
좀 더 사실적인 광원 모델(퐁 조명)을 설명하고 구현한다. 플랫 셰이딩과 부드러운 셰이딩의 차이점과 정점 계산과 프래그먼트 계산의 차이점을 배운다. 또한 안개, 블렌드 객체를 추가하는 법을 보여주고 섀도우, 전역 광원, 반사, 굴절에 대해서도 자세하게 설명한다. 
* 5장: 물리 이론 
이 장에서는 중력, 탄성력, 마찰을 모델링하는 법을 보여준다. 충돌을 감지해 반응하고 운동량 보존 법칙, 위치 에너지, 운동 에너지를 다룬다. 
* 6장: 프랙탈, 높이 맵, 입자 시스템 
이 장에서는 GPU를 직접 사용해서 그리는 법을 보여주고, 프랙탈, 만델브로 집합과 줄리아 집합에 대해 설명한다. 또 텍스처를 통해 높이 맵을 만들고 지형을 생성하는 법을 보여준다. 끝으로 입자 시스템을 살펴본다. 
* 7장: Three.js 프레임워크 
Three.js 웹지엘 프레임워크를 소개한다. 이 라이브러리의 배경을 설명하고, 개발을 시작하는 법, 필요에 따라 2D 렌더링 컨텍스트를 활용하는 법, 카메라, 객체, 광원 생성을 위해 API를 호출하는 법을 다룬다. 또 기존 책 예제를 Three.js API 호출을 사용 한 예제와 비교하고 Three.js와 제이쿼리 선택자를 결합한 라이브러리인 tQuery를 소개한다. 
* 8장: 생산성 도구 
프레임워크를 사용할 때의 장점과 웹지엘 코어를 먼저 배울 때의 장점을 설명한다. 사용 가능한 몇 가지 프레임워크를 소개하고, GLGE와 philoGL 프레임워크의 사용 예를 제공한다. 또 기존 메시를 로드해 기존 셰이더와 텍스처를 찾는 법을 보여준다. 아울러 사용 가능한 물리 라이브러리를 모두 나열하고 physi.js 라이브러리의 활용 예제로 장을 마무리한다.
* 9장: 디버깅 및 성능 
오류가 들어 있는 코드를 식별해 수정하고 웹지엘 모범 기법에 따라 성능을 개선할 수 있게 도와주는 중요한 장이다. 
* 10장: 효과, 팁, 트릭 
이미지 처리, 비사실적 셰이더를 소개하고 구현한다. 또 화면 밖에 있는 프레임버퍼를 활용해 캔버스에서 객체를 선택하고 섀도우 맵을 구현하는 법을 보여준다. 

이 책을 통해 배울 수 있는 것들 
셰이더, 텍스처, 광원을 추가한 사실적인 씬의 생성
프랙탈, 높이 맵, 입자 시스템의 이해
Three.js 프레임워크를 활용한 개발 속도 개선
프로젝트에 적합한 생산성 툴의 선택
디버깅을 통한 성능 개선