출판사 서평
새로운 HTML5 시대, 이제 웹지엘(WebGL)로 갈아타자!
《WebGL 개발 입문》은 모바일을 포함한 모든 브라우저에서 고품질 3D 그래픽을 구현하는 법을 알려주고 있다. 좀 더 사실적이고 아름다운 그래픽을 만드는 법을 보여줌으로써 여러분의 그래픽 기술을 한 단계 높여주며 웹 페이지에서 실시간 3D 그래픽을 만들 수 있는 강력한 언어인 WebGL(웹지엘)을 쉽고 빠르게 가르쳐준다.
고급 조명 모델, 섀도우, 블렌딩, 텍스처를 활용해 사실적인 씬(scene)을 렌더링하는 법을 배울 수 있다. 또한 수학을 활용해 프랙탈과 ...
새로운 HTML5 시대, 이제 웹지엘(WebGL)로 갈아타자!
《WebGL 개발 입문》은 모바일을 포함한 모든 브라우저에서 고품질 3D 그래픽을 구현하는 법을 알려주고 있다. 좀 더 사실적이고 아름다운 그래픽을 만드는 법을 보여줌으로써 여러분의 그래픽 기술을 한 단계 높여주며 웹 페이지에서 실시간 3D 그래픽을 만들 수 있는 강력한 언어인 WebGL(웹지엘)을 쉽고 빠르게 가르쳐준다.
고급 조명 모델, 섀도우, 블렌딩, 텍스처를 활용해 사실적인 씬(scene)을 렌더링하는 법을 배울 수 있다. 또한 수학을 활용해 프랙탈과 입자 시스템을 모델링하는 법과 고급 정점 셰이더 및 프래그먼트 셰이더를 통해 최고 수준의 결과를 만드는 법도 살펴볼 수 있다.
그래픽 기본 이론과 풍부한 예제!
화려하고 사실적인 그래픽 구현을 위한 “웹지엘 입문 가이드”
웹지엘(웹 기반 그래픽 언어)은 웹 브라우저 내에서 강력한 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 프레임워크를 활용한 개발 속도 개선
● 프로젝트에 적합한 생산성 툴의 선택
● 디버깅을 통한 성능 개선

이 책의 독자
● 컴퓨터 그래픽 기법에 대한 기본 지식을 갖추고 그래픽에 관심 있는 사람

목차
Chapter 01 씬 설정
01_ 캔버스
02_ 컨텍스트 가져오기
03_ WebGL 컴포넌트
04_ 2차원 렌더링
05_ 뷰: 1부
06_ 색상 추가
07_ 애니메이션 및 모델 움직임
08_ 뷰: 2부
09_ 3차원 렌더링
10_ 정리 80
Chapter 02 셰이더 101
01_ 그래픽 파이프라인
02_ GL 셰이딩 언어
03_ 기본 사용법
04_ GLSL 명세 자세히 살펴보기
05_ 내장 함수
06_ 인터랙티브 GLSL 환경
07_ 절차적 셰이더
08_ 정리
Chapter 03 텍스처 및 조명
01_ 텍스처
02_ 텍스처 옵션
03_ 3D 객체에 대한 텍스처 적용
04_ 상태 토글
05_ 다중 텍스처
06_ 조명
07_ 광원 모델
08_ 텍스처 및 조명의 결합
09_ 정리
Chapter 04 사실성 높이기
01_ 설정
02_ 조명 다시 살펴보기
03_ 안개
04_ 섀도우
05_ 심도 버퍼
06_ 블렌딩
07_ 반사와 굴절
08_ 한데 결합하기
09_ 정리
Chapter 05 물리 이론
01_ 배경
02_ 우리에게 작용하는 힘
03_ 코드 설정
04_ 중력
05_ 3차원에서의 속도
06_ 상호충돌
07_ 발사체
08_ 위치 에너지
09_ 정리
Chapter 06 프랙탈, 높이 맵, 입자 시스템
01_ GPU를 통한 직접 페인팅
02_ 프랙탈
03_ 프랙탈의 생성
04_ TRIANGLE_STRIP 호출을 통한 그리드 메시 렌더링
05_ 높이 맵
06_ 마우스를 통한 뷰 회전
07_ 지형
08_ 입자 시스템
09_ 정리 290
Chapter 07 Three.js 프레임워크
01_ 배경
02_ 설정
03_ 기본 사용법
04_ 객체 업데이트
05_ 2D 캔버스 컨텍스트를 통한 대체 지원
06_ 셰이더
07_ 이 책의 기존 코드 다시 살펴보기
08_ 고급 활용
09_ 정리
Chapter 08 생산성 도구
01_ 프레임워크
02_ 메시
03_ 셰이더
04_ 텍스처
05_ 물리 엔진
06_ 정리
Chapter 09 디버깅 및 성능
01_ 디버깅
02_ 성능
03_ 정리
Chapter 10 효과, 팁, 트릭
01_ 효과
02_ 앤티앨리어싱
03_ 비사실적 렌더링
04_ 프레임버퍼
05_ 객체 집기
06_ 섀도우 맵 구현체
07_ 정리
맺음말 웹지엘의 미래
01_ 지원
02_ 채택 수준
03_ 활발한 개발
04_ 마무리 말
부록 A HTML5와 자바스크립트의 기본
부록 B 그래픽 이론 복습
부록 C 기타 웹지엘 명세
부록 D 추가 자료