목차 일부

저자 소개 ... 6
기술 감수자 소개 ... 8
옮긴이 소개 ... 10
옮긴이의 말 ... 11
들어가며 ... 23
예제를 실행하는 방법 ... 31
1 웹지엘 시작하기 ... 33
   시스템 요구사항 ... 34
   웹지엘이 제공하는 렌더링 ... 35
   웹지엘 애플리케이션 구조 ... 36
   HTML5 캔버스 생성 ... 37
     ...

더보기

목차 전체

저자 소개 ... 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

더보기 닫기