상세정보

최근 HTML5 웹 멀티미디어 기술에 대한 요구가 높아지면서 화려한 3D 그래픽을 웹에 구현할 수 있는 웹지엘(WebGL)에 대한 관심도 높아지고 있다. 이 책은 이런 시장의 요구에 맞춰 3D 그래픽을 웹에 구현하는 방법을 제시하는 완벽한 웹지엘 가이드다. 이 책을 시작으로 웹에서 펼쳐지는 화려한 그래픽을 접하고, 기하 정보, 조명, 애니메이션 등 기본 개념 또한 완벽하게 배울 수 있다.

웹지엘과 자바스크립트를 사용해 3D 웹 애플리케이션을 만들어보자!

『WebGL 3D 프로그래밍』은 웹지엘을 처음 시작하는 데 명쾌한 길을 제시한다. 각 장의 도입 부분에서 나아가야 할 목표를 제시한 다음, 자세한 설명이 뒤따르는 방법으로 기술되어 있어 내용을 이해하기 매우 쉽다. 이 책에서 다루는 그리기, 색상, 텍스처, 변환, 프레임버퍼, 빛, 표면, 기하 정보 등에 관한 풍부한 예제는 웹지엘의 본질을 알기 쉽게 설명해준다. 이 예제들과 함께 3D 그래픽 프로그래밍 스킬을 한 단계 더 업그레이드할 수 있을 것이다. 이 책은 3D 웹 애플리케이션을 만드는 데 있어 훌륭한 파트너가 될 것이다.


★ 이 책에서 다루는 내용 ★

■ 웹지엘 애플리케이션 구조
■ 웹지엘에서의 3D 오브젝트 생성과 그리기
■ JSON과 AJAX를 사용한 복잡한 모델 로드
■ 셰이더를 사용한 조명 모델 설정과 빛 반사, 조명 전략
■ 카메라 생성과 3D 씬에서의 움직임
■ 텍스처, 조명, 셰이딩 테크닉을 사용한 실감나는 3D 씬 제작
■ 마우스를 사용한 3D 씬 안에서의 오브젝트 선택
■ 훌륭한 고도의 시각 효과 생성을 위한 고급 기법


★ 이 책의 대상 독자 ★

이 책은 3D 웹 개발에 흥미가 있는 자바스크립트 개발자를 위해 쓰여졌다. 돔(DOM) 오브젝트, 제이쿼리(jQuery) 라이브러리, AJAX, JSON 같은 지식은 있으면 좋지만 잘 몰라도 상관 없다. 또한 웹지엘을 한 번도 공부해보지 않았더라도 이 책을 읽는 데는 전혀 지장이 없다. 하지만 기본적인 수학 지식은 필요하다.


★ 이 책의 구성 ★

1장 '웹지엘 시작하기'에서는 HTML5 캔버스를 소개하며, 캔버스에서 웹지엘 컨텍스트를 사용하는 방법을 소개한다. 그리고 웹지엘 애플리케이션과, '가상 자동차 쇼룸' 데모를 통해 3D 그래픽 애플리케이션에서 사용되는 웹지엘을 설명한다. 이 데모에서는 웹지엘의 요소들을 함께 소개한다.

2장 '기하 렌더링'에서는 오브젝트를 정의하고, 연산하고, 렌더링하는 웹지엘 API를 소개한다. 또한 AJAX와 JSON을 사용해 비동기적인 기하 정보 로딩 방법을 설명한다.

3장 '빛!'에서는 웹지엘에서의 셰이딩 언어인 ESSL을 소개한다. 또한 웹지엘에서 ESSL 셰이더를 이용해 그림자 효과를 주는 방법을 설명한다. 이 기법은 그림자와 빛 반사 효과로 이뤄지며, 몇 가지 예제를 실습해본다.

4장 '카메라'에서는 웹지엘에서 행렬 변환을 이용한 카메라 생성과 동작을 설명한다. 웹지엘의 원근 행렬과 정규 행렬, 그리고 이런 행렬들을 ESSL 셰이더에 적용해 모든 도형에 적용하는 방법도 설명한다. 또한 여러 예제를 통해 웹지엘 카메라 사용법을 익힌다.

5장 '액션'에서는 기하 정보 변환(이동, 회전, 확대/축소)을 수행하기 위한 행렬 사용법을 알아보며, 행렬 스택을 소개한다. 또한 행렬 스택을 이용해 한 번에 모든 오브젝트를 변환하는 방법을 알아본다. 그리고 자바스크립트 타이머와 행렬 스택을 이용한 애니메이션 기법을 알아본다. 각 기법은 예제를 통해 확인할 수 있다.

6장 '색상, 깊이 테스팅, 알파블렌딩'에서는 ESSL 셰이더의 색상을 통해 깊이 정보(z-order)를 알아본다. 또한 웹지엘에서 1개 이상의 광원을 정의하고 사용하는 방법을 소개하며, 깊이 테스팅과 알파블렌딩의 개념을 설명하고, 이들이 반투명 오브젝트를 만들 때 어떻게 사용되는지 알려준다. 그리고 여러 예제를 통해 쉽게 이해해본다.

7장 '텍스처'에서는 웹지엘에서 어떻게 텍스처를 생성하고, 관리하며, 사용하는지 보여준다. 그리고 텍스처 좌표와 매핑을 설명한다. 7장에서는 여러 가지 텍스처 매핑 기법을 논하며, 이 기법의 실습 예제를 제공한다. 또한 여러 개의 텍스처 사용법을 통해 큐브(정육면체)를 만들어본다.

8장 '픽킹'에서는 사용자 선택에 의한 오브젝트 동작인 픽킹을 알아본다. 그리고 사용자가 클릭한 좌표의 계산 방법과 사용자가 선택한 임의의 오브젝트를 렌더링하는 방법을 설명한다. 이 방법은 몇 개의 콜백 후킹을 이용해 특정 로직을 통해 구현되며, 픽킹을 다룬 예제 2개를 살펴본다.

9장 '모든 기법 적용해보기'에서는 이 책에서 언급한 모든 것을 함께 적용하는 방법을 설명한다. 9장에서는 1장 '웹지엘 시작하기'에서 나온 가상 자동차 쇼룸 데모를 좀 더 확장해볼 것이다. 가상 자동차 쇼룸 데모를 통해, 블렌더 모델을 웹지엘 씬에 적용하는 방법과 블렌더 모델에서의 ESSL 셰이더 사용법을 알아본다.

10장 '고급 기법'에서는 후처리 효과, 포인트 스프라이트, 법선 매핑, 광선 추적법 등의 고급 기법을 보여주며 각 기법당 예제가 제공된다. 『WebGL 3D 프로그래밍』을 다 읽고 난 후에는 여러분이 자신만의 고급 기법을 사용할 수 있기를 기원한다.


★ 저자 서문 ★

웹지엘(WebGL)은 별도의 소프트웨어 설치 없이 브라우저에서 하드웨어 가속이 가능한 3D 그래픽을 사용할 수 있는 새로운 기술이다. 웹지엘은 웹 개발자에게는 익숙하지 않지만, 오픈지엘(OpenGL)을 기반으로 하고 있어 웹 개발에서 3D 그래픽을 사용할 수 있는 새로운 길을 열어줬다.

이 책에서는 많은 예제를 통해 익숙하지 않은 웹지엘을 쉽게 배울 수 있게 했다. 각 장에서는 3D 그래픽 개발에 있어 중요한 요소들을 심도 있게 다루며, 여타 구현 방법도 소개한다. 그리고 예제들을 바로 테스트해보며 이해할 수 있게 했다.

『WebGL 3D 프로그래밍』에서는 웹지엘을 배울 수 있는 훌륭한 가이드 제공한다. 각 장의 서문에는 학습목표가 있으며, 각 학습목표에 따라 상세한 내용이 뒤따른다. 이 책에는 많은 예제가 있으며, 드로잉(drawing), 색상(color), 텍스처(texture), 변환(transformation), 프레임버퍼(framebuffer), 조명(light), 표면(surface), 기하 정보(geometry) 등의 최신 웹지엘 기법도 포함되어 있다. 각 장에서는 웹지엘을 직접 테스트해볼 수 있는 유용한 예제가 함께 제공되며, 이 예제를 통해 3D 그래픽 프로그래밍 실력을 한층 더 향상시킬 수 있을 것이다. 이 책에 담긴 여러 기법을 활용해 웹지엘과 자바스크립트로 멋진 3D 웹 애플리케이션을 만들기를 기원한다.


★ 옮긴이의 말 ★

2012년 IT 핫키워드는 단연 HTML5다. 하지만 비단 올해뿐만이 아니라 이전 몇 년간 HTML5는 IT계에서 늘 화두였으며 이후에도 마찬가지일 것이다. 이렇듯 많은 사람이 노력해 표준을 만들고 그 표준에 따라 산업의 최전방에서 사용자에게 가치를 줄 수 있는 여러 물건을 만들어보려 애쓰지만, 아직까지는 시장에 파급력이 큰 물건이 아직 나오지 못했다. 그러나 시장에 큰 이슈를 만들어낼 수 있는 서비스를 만들기 위해 여전히 수많은 훌륭한 개발자의 노력이 이어지고 있는데, 이런 노력 중 웹 멀티미디어를 빼놓을 수 없다.

웹 멀티미디어는 크게 오디오 부분, 비디오 부분, 웹지엘 부분으로 나눌 수 있다. 특히 웹지엘의 경우는 많은 사용자를 HTML5 세계로 끌어들이는 게임과 유려한 UI를 만드는 데 꼭 필요한 기술이다. 이는 독자 생태계 구축에 성공한 안드로이드와 아이폰을 보면 잘 알 수 있는데, 매력적인 게임과 유려한 UI를 제대로 지원하지 않으면 생태계 구축이 힘들다는 사실이 입증된 것이다.

이 책에서 소개하는 웹지엘은 원서 제목대로 입문서(Beginner's Guide)다. 실제 프로젝트에 투입되는 기술과는 약간 거리가 있다. 하지만 웹지엘에 관심이 있는 사람이거나 기존 오픈지엘에서 웹지엘로 진입하는 사람, 아니면 새로 입문하는 사람에게는 웹지엘의 기본 개념을 익히는 데 필독서가 될 것이다. 이 책을 시작으로 웹지엘의 매력에 빠지는 계기가 되길 기원한다.

정보제공 :

목차
저자 소개 = 6
기술 감수자 소개 = 8
옮긴이 소개 = 10
옮긴이의 말 = 11
들어가며 = 23
예제를 실행하는 방법 = 31
1 웹지엘 시작하기 = 33
 시스템 요구사항 = 34
 웹지엘이 제공하는 렌더링 = 35
 웹지엘 애플리케이션 구조 = 36
 HTML5 캔버스 생성 = 37
  실습 예제｜HTML5 캔버스 만들기 = 37
  테두리를 위한 CSS 정의 = 38
  캔버스 애트리뷰트 = 39
  브라우저에서 캔버스를 지원하지 않을 경우 = 39
 웹지엘 컨텍스트 액세스 = 39
  실습 예제｜웹지엘 컨텍스트 액세스 = 40
 상태 머신으로서의 웹지엘 = 42
  실습 예제｜웹지엘 컨텍스트 애트리뷰트 설정 = 42
  웹지엘 API에 접근하기 위한 컨텍스트 사용 = 45
 3D 씬 로드 = 46
  가상 자동차 쇼룸 = 46
  실습 예제｜완성된 씬 보기 = 46
 정리 = 48
2 기하 렌더링 = 49
 버텍스(정점)와 인덱스 = 49
 웹지엘 렌더링 파이프라인 개요 = 50
  버텍스 버퍼 오브젝트 = 51
  버텍스 셰이더 = 51
  프래그먼트 셰이더 = 51
  프레임버퍼 = 52
  애트리뷰트, 유니폼, 베어링 = 52
 웹지엘에서의 기하 렌더링 = 52
  자바스크립트 배열을 이용한 기하 정보 정의 = 52
  웹지엘 버퍼 생성 = 53
   웹지엘 버퍼 조작 방법 = 56
  VBO에 애트리뷰트 연결하기 = 57
   VBO 바인딩 = 58
   바인딩한 VBO에 애트리뷰트를 지정 = 58
   애트리뷰트 활성화 = 59
  렌더링 = 59
   drawArrays와 drawElements 함수 = 59
 모든 기법 적용해보기 = 63
  실습 예제｜사각형 렌더링 = 63
 렌더링 모드 = 66
  실습 예제｜렌더링 모드 = 66
 상태 머신 웹지엘: 버퍼 조작 = 69
  실습 예제｜버퍼 상태 가져오기 = 70
 고급 기하 정보 로드 테크닉: JSON과 AJAX = 72
  JSON 소개: 자바스크립트 오브젝트 표기법 = 72
   JSON 기반의 3D 모델 선언 = 72
   JSON 인코딩과 디코딩 = 74
  실습 예제｜JSON 인코딘과 디코딩 = 74
  AJAX 비동기 로드 = 75
   웹 서버 설정 = 78
   웹 서버 요구사항 = 78
  실습 예제｜AJAX＋JSON으로 원뿔 로드하기 = 79
 정리 = 81
3 빛! = 83
 광원, 법선, 재질 = 84
  광원 = 84
  법선 = 85
  재질 = 86
 파이프라인에서 광원, 법선 벡터, 재질 사용하기 = 86
  애트리뷰트와 유니폼의 유사점과 차이점 = 87
 셰이딩 메소드와 광원 반사 모델 = 88
  셰이딩／보간법 = 88
   고라우드 보간법 = 89
   퐁 보간법 = 89
  광원 반사 모델 = 90
   램버시안 반사 모델 = 90
   퐁 반사 모델 = 91
 ESSL: 오픈지엘 ES 셰이딩 언어 = 92
  저장 제한자 = 93
  타입 = 93
  벡터 요소 = 94
  연산자와 함수 = 95
  버텍스 애트리뷰트 = 96
  유니폼 = 96
  베어링 = 97
  버텍스 셰이더 = 97
  프래그먼트 셰이더 = 99
 ESSL 프로그램 작성 = 99
  램버시안 반사와 고라우드 셰이딩 = 100
  실습 예제｜실시간 유니폼 갱신 = 102
  퐁 반사와 고라우드 셰이딩 = 104
  실습 예제｜고라우드 셰이딩 = 107
  퐁 셰이딩 = 110
  실습 예제｜퐁 셰이딩과 퐁 라이팅 = 113
 웹지엘로 돌아와서 = 113
  프로그램 생성 = 1115
  애트리뷰트와 유니폼 초기화 = 117
 웹지엘과 ESSL 연결하기 = 118
  실습 예제｜벽면 모델 = 120
 빛의 또 다른 설명: 위치성 광원 = 123
  실습 예제｜위치성 광원 동작 = 124
  닛산 GTS 예제 = 126
 정리 = 127
4 카메라 = 129
 웹지엘에는 카메라가 없다 = 130
 버텍스 변환 = 130
  동차 좌표 = 130
  모델 변환 = 132
  뷰 변환 = 133
  투영 변환 = 134
  원근 분할 = 135
  뷰포트 변환 = 136
 법선 벡터 변환 = 137
  정규 행렬 계산 = 137
 웹지엘 수행 = 139
  자바스크립트 행렬 = 140
  자바스크립트 행렬을 ESSL 유니폼에 매핑 = 141
  ESSL에서 행렬 다루기 = 142
 모델뷰 행렬 = 143
  세계 공간 인코딩 = 144
   회전 행렬 = 144
   변환 벡터 = 145
   이상한 네 번째 행 = 145
 카메라 행렬 = 145
  카메라 변환 = 146
  실습 예제｜변환 탐색(3D 세계 공간과 카메라 공간) = 146
  카메라 회전 = 148
  실습 예제｜회전 탐색(세계 공간과 카메라 공간) = 148
  카메라 행렬은 모델뷰 역행렬이다 = 151
  웹지엘에서의 행렬 곱셈 = 151
 기본 카메라 타입 = 153
  궤도 카메라 = 153
  트래킹 카메라 = 153
   카메라 위치에 따른 회전 = 153
   시선에서의 카메라 이동 = 154
   카메라 모델 = 154
  실습 예제｜닛산 GTX 탐색 = 155
 원근 행렬 = 160
  시야 = 160
  원근 투영 혹은 정사 투영 = 160
  실습 예제｜정사 투영과 원근 투영 = 161
 웹지엘 예제의 구조 = 165
  WebGLApp = 166
  지원하는 오브젝트 = 167
  라이프 사이클 함수 = 168
   configure = 168
   load = 168
   draw = 168
  행렬 조작 함수 = 168
   initTransforms = 169
   updateTransforms = 169
   setMatrixUniforms = 170
 정리 = 170
5 액션 = 173
 행렬 스택 = 174
 3D 씬 애니메이션 만들기 = 175
  requestAnimFrame 함수 = 176
  자바스크립트 타이머 = 176
 타이밍 전략 = 177
  애니메이션 전략 = 177
  시뮬레이션 전략 = 178
  애니메이션 전략과 시뮬레이션 전략 합치기 = 179
  웹 워커: 자바스크립트 멀티스레딩 = 181
 구조 갱신 = 181
  WebGLApp 분석 = 181
  행렬 스택 지원 추가 = 182
  렌더링 비율 설정 = 182
  애니메이션 타이머 생성 = 183
 행렬 스택과 자바스크립트 타이머의 연결 = 183
  실습 예제｜간단한 애니메이션 = 183
 매개 곡선 = 185
  초기 단계 = 186
  애니메이션 타이머 설정 = 187
  애니메이션 동작 = 188
  현재 위치에 있는 볼 그리기 = 188
  실습 예제｜버운싱 볼 = 189
 최적화 전략 = 191
  성능 최적화 = 191
  버텍스 셰이더에서의 이동 수행 = 192
 보간법 = 194
  선형 보간법 = 194
  다항식 보간법 = 195
  B-스플라인 = 196
  실습 예제｜보간법 = 197
 정리 = 199
6 색상, 깊이 테스팅, 알파블렌딩 = 201
 웹지엘에서의 색상 사용법 = 202
 오브젝트의 색상 사용 = 202
  상수 컬러링 = 203
  버텍스 컬러링 = 203
  프래그먼트 컬러링 = 204
  실습 예제｜큐브 색칠하기 = 205
 조명이 있을 때의 색 사용 = 208
  여리 개의 조명과 확장 문제 = 209
   유니폼은 얼마나 많이 사용할 수 있을까? = 210
   문제 단순화 = 210
 구조 갱신 = 210
  조명 오브젝트 지원 추가 = 211
   유니폼을 ESSL 프로그램에 전달하는 방법 개선 = 212
  실습 예제｜파란 조명 추가하기 = 214
  여러 개의 조명 모델에서 유니폼 배열 사용하기 = 220
   유니폼 배열 선언 = 221
   자바스크립트 배열 매핑 = 222
  실습 예제｜하얀 조명 추가하기 = 223
  실습 예제｜방향성 위치 조명 = 225
 색상 사용 = 230
  투명성 = 230
  갱신한 렌더링 파이프라인 = 231
 깊이 테스팅 = 232
  깊이 함수 = 233
 알파블렌딩 = 234
  블렌딩 함수 = 234
  블렌딩 함수 분리하기 = 235
  블렌딩 연산식 = 236
  블렌드 색상 = 237
  웹지엘 알파블렌딩 API = 237
  알파블렌딩 모드 = 238
   더하기 블렌딩 = 238
   빼기 블렌딩 = 239
   곱하기 블렌딩 = 239
   보간 블렌딩 = 239
  실습 예제｜블렌딩 워크벤치 = 240
 투명 오브젝트 생성하기 = 241
  실습 예제｜추려내기 = 243
  실습 예제｜투명 벽 생성 = 244
 정리 = 247
7 텍스처 = 249
 텍스처 매핑이란? = 249
 텍스처 생성과 업로딩 = 250
 텍스처 좌표 사용 = 253
 셰이더에서 텍스처 사용하기 = 254
  실습 예제｜큐브 텍스처 작업 = 255
 텍스처 필터 모드 = 258
  실습 예제｜다른 필터 모드 적용해보기 = 261
   가장 가까운 모드(NEAREST 필터) = 262
   선형 모드(LINEAR 필터) = 262
  밉매핑 = 263
   NEAREST_MIPMAP_NEAREST = 265
   LINEAR_MIPMAP_NEAREST = 265
   NEAREST_MIPMAP_LINEAR = 265
   LINEAR_MIPMAP_LINEAR = 265
  밉맵 생성 = 266
 텍스처 래핑 = 267
  실습 예제｜여러 래핑 모드 설정 = 267
   CLAMP_TO_EDGE = 268
   REPEAT = 269
   MIRRORED_REPEAT = 269
 여러 개의 텍스처 사용하기 = 270
  실습 예제｜멀티텍스처링 = 272
 큐브 맵 = 274
  실습 예제｜큐브 맵 사용 = 277
 정리 = 279
8 픽킹 = 281
 픽킹 = 281
 오프스크린 프레임버퍼 = 283
  색상을 저장하기 위한 텍스처 생성 = 283
  깊이 정보를 저장할 렌더버퍼 생성 = 284
  오프스크린 렌더링을 위한 프레임버퍼 생성 = 284
 오브젝트당 1개의 색 할당 = 285
 오프스크린 프레임버퍼 렌더링 = 286
 캔버스에서의 클릭 = 288
 오프스크린 프레임버퍼에서 픽셀 읽기 = 290
 히트 살펴보기 = 291
 히트 처리 = 293
 구조 갱신 = 293
  실습 예제｜픽킹 = 295
  Picker 구조 = 297
 유일한 오브젝트 라벨 동작 = 298
  실습 예제｜유일한 오브젝트 라벨 = 298
 정리 = 309
9 모든 기법 적용해보기 = 311
 웹지엘 애플리케이션 생성 = 311
 구조를 알아보자 = 313
 가상 자동차 쇼룸 애플리케이션 = 314
  모델의 복잡함 = 315
  셰이더 품질 = 316
  네트워크 지연과 대역폭 소비 = 316
 GUI 형태 정의 = 316
  웹지엘 지원 추가 = 318
 셰이더 동작 = 320
 씬 설정 = 321
 웹지엘 속성 설정 = 321
  카메라 설정 = 322
  카메라 동작 생성 = 322
  SceneTransforms 오브젝트 = 322
  조명 생성 = 323
  프로그램 애트리뷰트와 유니폼 매핑 = 324
  유니폼 초기화 = 325
 자동차 로드 = 325
  블렌더 모델 내보내기 = 326
  OBJ 포맷 = 327
  OBJ 파일 파싱 = 330
  웹지엘 씬으로 자동차 로드 = 331
 렌더링 = 332
  실습 예제｜애플리케이션 개조하기 = 334
 정리 = 337
10 고급 기법 = 339
 후처리 = 339
  프레임버퍼 만들기 = 340
  기하 정보 만들기 = 341
  셰이더 설정 = 342
 구조 갱신 = 344
  실습 예제｜후처리 효과 = 345
 포인트 스프라이트 = 349
  실습 예제｜포인트 스프라이트를 사용해 불꽃분수 만들기 = 351
 법선 매핑 = 355
  실습 예제｜법선 매핑 = 357
 프래그먼트 셰이더에서의 광선 추적법 = 360
  실습 예제｜광선 추적 = 361
 정리 = 365
찾아보기 = 366