WebGL을 활용한 3D 그래픽 프로그래밍

1장 웹지엘 소개
__웹지엘의 기초
__왜 웹지엘인가?
__그래픽 API 설계
____즉시 모드 API
____보류 모드 API
__그래픽 장치의 개요
____GPU
____프레임 버퍼
____텍스처 메모리
____비디오 컨트롤러
__웹지엘 그래픽 파이프라인
____버텍스 셰이더
____프리미티브 어셈블리
____래스터화
____프래그먼트 셰이더
____프래그먼트 연산
__다른 그래픽 기술과의 비교
____오픈지엘
____오픈지엘 ES 2.0
____Direct 3D
____HTML 5 캔버스
____스케일러블 벡터 그래픽
____VRML과 X3D
__3D 그래픽을 위한 선형대수학
____좌표계
____점 혹은 버텍스
____벡터
____내적 혹은 스칼라 곱
____외적
____동차 좌표계
____행렬
____아핀 변환
__정리

2장 간단한 웹지엘 예제
__삼각형 그리기
____웹지엘 컨텍스트 생성
____버텍스 셰이더와 프래그먼트 셰이더 생성
____셰이더 컴파일
____프로그램 객체 생성과 셰이더 링크
____버퍼 설정
____장면 그리기
__웹지엘 코딩 스타일의 이해
__웹지엘 애플리케이션 디버깅
____크롬 개발자 도구 사용
____파이어버그 사용
____웹지엘 오류 처리 및 오류 코드
____웹지엘 인스펙터
____웹지엘 트러블슈팅
__DOM API를 사용해서 셰이더 로드
__고급 예제로 나아가기
____코드 실험
__정리

3장 그리기
__웹지엘 프리미티브와 그리기
____프리미티브
____두르기 순서의 중요성
____웹지엘의 그리기 메소드
__타입 배열
____버퍼와 뷰
____지원하는 뷰 타입
__여러 가지 그리는 방법
____gl.drawArrays( )와 gl.TRIANGLES
____gl.drawArrays( )와 gl.TRIANGLE_STRIP
____gl.drawElements( )와 gl.TRIANGLES
____gl.drawElements( )와 gl.TRIANGLE_STRIP
____비교 정리
____선변환 버텍스 캐시와 후변환 버텍스 캐시
__성능 향상을 위한 버텍스 데이터 끼워 넣기
____구조적 배열 사용
__버텍스 배열 혹은 상수 버텍스 데이터 사용
__종합 예제
____실험해볼 만한 것
__정리

4장 소형 자바스크립트 라이브러리와 변환
__자바스크립트에서의 행렬과 백터
____Sylvester
____WebGL-mjs
____glMatrix
__변환 사용
____변환을 이용하는 방법
__변환 파이프라인 이해
__변환 적용
____오브젝트 좌표에 필요한 버퍼 설정
____자바스크립트에서 변환 행렬을 만들고 셰이더에 전송
____변환 행렬을 GPU의 버텍스 셰이더에 업로드
____그리기 메소드 호출
__변환 순서의 중요성
____고정좌표계 이용
____지역좌표계 이용
____변환 행렬 삽입 삭제
__예제: 여러 변환된 오브젝트 그리기
____웹지엘에서 큐브 제작
____뷰 변환과 모델 변환 구성
__정리

5장 텍스처링
__컨텍스트 상실 이해
____컨텍스트 상실 대응에 필요한 설정
____컨텍스트 상실을 처리할 때 고려할 점
__2차원 텍스처와 큐브맵 텍스처 소개
__텍스처 로딩
____WebGLTexture 객체 생성
____텍스처 바인딩
____이미지 데이터 로드
____GPU에 텍스처 올리기
____텍스처 파라미터 설정
____텍스처 로딩 절차 이해
__텍스처 좌표 정의
__셰이더에서 텍스처 사용
____텍스처 이미지 유닛의 동작
__텍스처 필터링 작업
____확대 이해
____축소 이해
____밉매핑
__텍스처 좌표 래핑 이해
____gl.REPEAT 랩 모드 사용
____gl.MIRRORED_REPEAT 랩 모드 사용
____gl.CLAMP_TO_EDGE 랩 모드 사용
__텍스처 예제 완성
__이미지를 텍스처로 사용
____무료 텍스처 다운로드
____사진으로 텍스처 제작
____이미지 그리기
____텍스처 구입
__동일 출처 정책과 크로스 오리진 리소스 셰어링 이해
____이미지에 적용된 동일 출처 정책
____텍스처에 적용되는 동일 출처 정책 이해
____크로스 오리진 리소스 셰어링
__정리

6장 애니메이션과 유저 입력
__장면 움직이기
____setTimeout( )과 setInterval( ) 사용
____requestAnimationFrame( ) 사용
____프레임 레이트 변화에 따른 움직임 보정
____애니메이션의 부드러움을 측정하는 FPS 카운터 제작
____FPS를 측정값으로 사용할 때 발생하는 문제점
__유저 인터랙션을 위한 이벤트 핸들링
____DOM 레벨 0을 사용하는 기본적인 이벤트 핸들링
____DOM 레벨 2를 이용한 고급 이벤트 핸들링
____키 입력
____마우스 입력
__적용
__정리

7장 광원
__광원 이해
__지역 조명 모델
__퐁 반사 모델 이해
____앰비언트 반사
____디퓨즈 반사
____스펙큘러 반사
____퐁 반사 모델의 완전한 공식과 셰이더
____텍스처링에 조명 사용
__웹지엘 조명에 필요한 자바스크립트 코드 이해
____버텍스 노멀에 필요한 버퍼 설정
____노멀 행렬을 계산하고 셰이더에 전송
____셰이더에 빛 정보 전송
__셰이딩에 사용되는 여러 보간 기법
____플랫 셰이딩
____고라우 셰이딩
____퐁 셰이딩
__벡터 정규화의 필요성
____버텍스 셰이더에서 정규화
____프래그먼트 셰이더의 정규화
__여러 가지 타입 빛 사용
____방향성 빛
____점 광원
____스포트 광원
__빛의 감쇄 이해
__라이트 매핑
__정리

8장 웹지엘 성능 최적화
__웹지엘 파헤치기
____웹지엘을 지원하는 하드웨어
____주요 소프트웨어 요소
__웹지엘 성능 최적화
____초보적인 실수 피하기
____병목 지점 찾아내기
____일반적인 성능 향상 조언
____CPU 제한 웹지엘 성능 권고
____버텍스 제한 웹지엘 성능 권고
____픽셀 제한 웹지엘 성능 권고
__블렌딩
____블렌딩 개요
____블렌딩 함수 설정
____그리기 순서와 깊이 버퍼
____불투명한 오브젝트와 반투명한 오브젝트 그리기
____블렌딩 공식의 기본 연산자 변경
____선곱셈 알파값 사용
__나아가서
____웹지엘 프레임워크를 사용하자
____구글 크롬 웹 스토어에 등록
____추가적인 자료
__정리