WebGL 3D 프로그래밍

1장 웹지엘 시작하기
___시스템 요구사항
___웹지엘이 제공하는 렌더링
___웹지엘 애플리케이션 구조
___HTML5 캔버스 생성
______테두리를 위한 CSS 정의
______캔버스 애트리뷰트
______브라우저에서 캔버스를 지원하지 않을 경우
___웹지엘 컨텍스트 액세스
___상태 머신으로서의 웹지엘
______웹지엘 API에 접근하기 위한 컨텍스트 사용
___3D 씬 로드
______가상 자동차 쇼룸
___정리

2장 기하 렌더링
___버텍스(정점)와 인덱스
___웹지엘 렌더링 파이프라인 개요
______버텍스 버퍼 오브젝트
______버텍스 셰이더
______프래그먼트 셰이더
______프레임버퍼
______애트리뷰트, 유니폼, 베어링
___웹지엘에서의 기하 렌더링
______자바스크립트 배열을 이용한 기하 정보 정의
______웹지엘 버퍼 생성
_________웹지엘 버퍼 조작 방법
______VBO에 애트리뷰트 연결하기
______VBO 바인딩
_________바인딩한 VBO에 애트리뷰트를 지정
_________애트리뷰트 활성화
______렌더링
_________drawArrays와 drawElements
___모든 기법 적용해보기
___렌더링 모드
___상태 머신 웹지엘: 버퍼 조작
___고급 기하 정보 로드 테크닉: JSON과 AJAX
______JSON 소개: 자바스크립트 오브젝트 표기법
_________JSON 기반의 3D 모델 선언
_________JSON 인코딩과 디코딩
______AJAX 비동기 로드
_________웹 서버 설정
_________웹 서버 요구사항
___정리

3장 빛!
___광원, 법선, 재질
______광원
______법선
______재질
___파이프라인에서 광원, 법선 벡터, 재질 사용하기
_________애트리뷰트와 유니폼의 유사점과 차이점
___셰이딩 메소드와 광원 반사 모델
______셰이딩/보간법
_________고라우드 보간법
_________퐁 보간법
______광원 반사 모델
_________램버시안 반사 모델
_________퐁 반사 모델
___ESSL: 오픈지엘 ES 셰이딩 언어
______저장 제한자
______타입
______벡터 요소
______연산자와 함수
______버텍스 애트리뷰트
______유니폼
______베어링
______버텍스 셰이더
______프래그먼트 셰이더
___ESSL 프로그램 작성
______램버시안 반사와 고라우드 셰이딩
______퐁 반사와 고라우드 셰이딩
______퐁 셰이딩
___웹지엘로 돌아와서
______프로그램 생성
______애트리뷰트와 유니폼 초기화
___웹지엘과 ESSL 연결하기
___빛의 또 다른 설명: 위치성 광원
______닛산 GTS 예제
___정리

4장 카메라
___웹지엘에는 카메라가 없다
___버텍스 변환
______동차 좌표
______모델 변환
______뷰 변환
______투영 변환
______원근 분할
______뷰포트 변환
___법선 벡터 변환
______정규 행렬 계산
___웹지엘 수행
______자바스크립트 행렬
______자바스크립트 행렬을 ESSL 유니폼에 매핑
______ESSL에서 행렬 다루기
___모델뷰 행렬
______세계 공간 인코딩
_________회전 행렬
_________변환 벡터
_________이상한 네 번째 행
___카메라 행렬
______카메라 변환
______카메라 회전
______카메라 행렬은 모델뷰 역행렬이다
______웹지엘에서의 행렬 곱셈
___기본 카메라 타입
______궤도 카메라
______트래킹 카메라
_________카메라 위치에 따른 회전
_________시선에서의 카메라 이동
_________카메라 모델
___원근 행렬
______시야
______원근 투영 혹은 정사 투영
___웹지엘 예제의 구조
______WebGLApp
______지원하는 오브젝트
______라이프 사이클 함수
_________configure
_________load
_________draw
______행렬 조작 함수
_________initTransforms
_________updateTransforms
_________setMatrixUniforms
___정리

5장 액션
___행렬 스택
___3D 씬 애니메이션 만들기
______requestAnimFrame 함수
______자바스크립트 타이머
___타이밍 전략
______애니메이션 전략
______시뮬레이션 전략
______애니메이션 전략과 시뮬레이션 전략 합치기
______웹 워커: 자바스크립트 멀티스레딩
___갱신 구조
______WebGLApp 분석
______행렬 스택 지원 추가
______렌더링 비율 설정
______애니메이션 타이머 생성
___행렬 스택과 자바스크립트 타이머의 연결
___매개 곡선
______초기 단계
______애니메이션 타이머 설정
______애니메이션 동작
______현재 위치에 있는 볼 그리기
___최적화 전략
______성능 최적화
______버텍스 셰이더에서의 이동 수행
___보간법
______선형 보간법
______다항식 보간법
______B-스플라인
___정리

6장 색상, 깊이 테스팅, 알파블렌딩
___웹지엘에서의 색상 사용법
___오브젝트의 색상 사용
______상수 컬러링
______버텍스 컬러링
______프래그먼트 컬러링(per-fragment coloring)
___조명이 있을 때의 색 사용
______여리 개의 조명과 확장 문제
_________유니폼은 얼마나 많이 사용할 수 있을까?
_________문제 단순화
___구조 갱신
______조명 오브젝트 지원 추가
_________유니폼을 ESSL 프로그램에 전달하는 방법 개선
______여러 개의 조명 모델에서 유니폼 배열 사용하기
______유니폼 배열 선언
_________자바스크립트 배열 매핑
___색상 사용
______투명성
______갱신한 렌더링 파이프라인
___깊이 테스팅
______깊이 함수
___알파블렌딩
______블렌딩 함수
______블렌딩 함수 분리하기
______블렌딩 연산식
______블렌드 색상
______웹지엘 알파블렌딩 API
______알파블렌딩 모드
_________더하기 블렌딩
_________빼기 블렌딩
_________곱하기 블렌딩
_________보간 블렌딩
___투명 오브젝트 생성하기
___정리

7장 텍스처
___텍스처 매핑이란?
___텍스처 생성과 업로딩
___텍스처 좌표 사용
___셰이더에서 텍스처 사용하기
___텍스처 필터 모드
_________가장 가까운 모드(NEAREST)
_________선형 모드(LINEAR)
______밉매핑
_________NEAREST_MIPMAP_NEAREST
_________LINEAR_MIPMAP_NEAREST
_________NEAREST_MIPMAP_LINEAR
_________LINEAR_MIPMAP_LINEAR
______밉맵 생성
___텍스처 래핑
_________CLAMP_TO_EDGE
_________REPEAT
_________MIRRORED_REPEAT
___여러 개의 텍스처 사용하기
___큐브 맵
___정리

8장 픽킹
___픽킹
___오프스크린 프레임버퍼
______색상을 저장하기 위한 텍스처 생성
______깊이 정보를 저장할 렌더버퍼 생성
______오프스크린 렌더링을 위한 프레임버퍼 생성
___오브젝트당 1개의 색 할당
___오프스크린 프레임버퍼 렌더링
___캔버스에서의 클릭
___오프스크린 프레임버퍼에서 픽셀 읽기
___히트 살펴보기
___히트 처리
___구조 갱신
______Picker 구조
___유일한 오브젝트 라벨 동작
___정리

9장 모든 기법 적용해보기
___웹지엘 애플리케이션 생성
___구조를 알아보자
___가상 자동차 쇼룸 애플리케이션
______모델의 복잡함
______셰이더 품질
______네트워크 지연과 대역폭 소비
___GUI 형태 정의
______웹지엘 지원 추가
___셰이더 동작
___씬 설정
___웹지엘 속성 설정
______카메라 설정
______카메라 동작 생성
______SceneTransforms 오브젝트
______조명 생성
______프로그램 애트리뷰트와 유니폼 매핑
______유니폼 초기화
___자동차 로드
______블렌더 모델 내보내기
______OBJ 포맷
______OBJ 파일 파싱
______웹지엘 씬으로 자동차 로드
___렌더링
___정리

10장 고급 기법
___후처리
______프레임버퍼 만들기
______기하 정보 만들기
______셰이더 설정
___구조 갱신
___포인트 스프라이트
___법선 매핑
___프래그먼트 셰이더에서의 광선 추적법
___정리