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

기초 선형대수학부터 셰이더 최적화 기법까지

안드레아스 안유루 저자(글) · 윤영민 번역

에이콘출판 · 2015년 06월 26일

책 소개

웹지엘(WebGL)을 이용한 하드웨어 가속 3D 그래픽 개발에 필요한 모든 것을 담고 있다. 웹지엘은 웹개발자에게 놀라운 3D 그래픽을 제작하는 방법을 제공한다. 이 책은 웹지엘을 사용해서 3D 크로스 플랫폼 앱을 만드는 과정을 코드와 주석을 통해 방법과 원리에 대해 자세히 설명하고 있다. 웹지엘 그래픽 파이프라인, 3D 변환, 텍스처링과 광원 등의 중요한 기술들을 다루고 있으며, 버텍스 셰이더와 프래그먼트 셰이더의 작성법에 대해 알려준다. 또한 웹지엘 성능 최적화에 필요한 다양한 가이드와 팁을 제시하고 있다.

작가정보

저자(글) 안드레아스 안유루

저자 안드레아스 안유루(ANDREAS ANYURU)는 웹지엘을 포함한 다양한 웹 기술 분야에 능통한 전문가다. 웹 브라우저 통합과 모바일기기의 최적화와 관련해 다년간의 경험이 있다. 데스크톱과 안드로이드에서 사용되고 있는 구글 크롬엔진의 V8 자바스크립트 엔진 개발에 기여했으며, 룬드(Lund) 대학의 정보 통신 공학부에서 새로운 수업을 개발하고 가르쳤다.
ST 에릭슨(ST Ericsson)의 시니어 멤버로서, 주 업무 영역은 웹 기술이다. 현재는 ST 에릭슨의 리눅스 기반 모바일 플랫폼에 적용하는 웹 기술 최적화에 대한 책임을 맡고 있으며, 스웨덴의 룬드 대학 공학부에서 전기 공학 석사를 취득했다.

번역 윤영민

역자 윤영민은 대학원에서 그래픽 분야 석사를 전공했으며, 현재는 국내의 포털 회사에 근무하며 영상처리에 관한 연구 개발을 하고 있다. 다양한 컴퓨터 사이언스 분야에 대해 호기심이 많으며, 특히 컴퓨터 그래픽 & 비전, 영상처리 분야에 관심이 많다. 오픈지엘(OpenGL) 등을 이용한 3D 그래픽뿐만 CUDA 등의 GPGPU 분야에도 흥미가 있다.

작가의 말

오늘날 많은 사용자가 웹 브라우저가 있는 컴퓨터, 태블릿, 스마트폰을 이용해 문서를 작성하고, 이메일, 채팅, 뉴스 읽기, 영상 시청, 음악 듣기, 게임, 쇼핑 등을 하며 시간을 보낸다. 웹 브라우저는 대부분의 기기에서 가장 중요한 애플리케이션이 되었다. 결과적으로, 웹 기술은 매우 빠른 속도로 가히 혁신적일 정도로 변화 중이다. 더불어 웹 브라우저는 이전보다 더 빠르고 안정적이며, 더 높은 보안을 자랑함과 동시에 매일같이 쏟아지는 신기술을 다루는 데 적합한 방향으로 진화 중이다.
웹 기술의 진보는 웹 개발자에게는 희소식이다. 가능한 한 많은 사람에게 배포할 수 있는 애플리케이션을 만들고 싶다면, 웹은 이를 위한 최적의 플랫폼이다. 하지만 근래에 일어난 웹 애플리케이션의 엄청난 발전에도 불구하고, 네이티브 애플리케이션에 비해 게임이나 기타 다른 애플리케이션에서 필요한 실시간 3D 그래픽은 제대로 발전하지 못했다. 바로 여기에 웹지엘이 등장하며 새로운 바람을 일으켰다.
웹지엘은 이전의 웹에서 불가능했던 2차원과 3D 그래픽을 가능케 한다. 그래픽 하드웨어가 지닌 강력한 GPU와 함께 HTML, CSS, 자바스크립트를 이용해 웹 애플리케이션을 만들 수 있다. 웹지엘에 기반한 2차원과 3D 그래픽 애플리케이션을 만드는 모든 과정을 기초부터 차근차근 함께 알아보자. - 저자 안드레아 안유루

3D란 용어는 듣는 순간 사람을 설레게 하는 힘이 있는 것 같습니다. 개발자라면 누구나 한 번쯤 자신의 결과물을 멋진 그래픽으로 표현해서 사람들에게 보여주고 싶은 맘이 생기기 마련입니다. 웹지엘은 개발자의 그러한 열망을 쉽고 빠르게 브라우저를 통해서 3D로 표현할 수 있게 해주는 멋진 도구입니다.
이 책은 다양한 예제와 친절한 설명을 통해 웹지엘을 처음 접하는 사람에게 적합하도록 구성됐습니다. 특히 3D 그래픽 이해에 필수적인 지식인 선형대수학에 대해서도 따로 지면을 할애해 초보자들도 알 수 있게 친절히 설명합니다. 두꺼운 오픈지엘 책과 수학 책 없이 이 책만 가지고도 한걸음씩 차분히 읽어나가면 멋진 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 제한 웹지엘 성능 권고
  ____버텍스 제한 웹지엘 성능 권고
  ____픽셀 제한 웹지엘 성능 권고
  __블렌딩
  ____블렌딩 개요
  ____블렌딩 함수 설정
  ____그리기 순서와 깊이 버퍼
  ____불투명한 오브젝트와 반투명한 오브젝트 그리기
  ____블렌딩 공식의 기본 연산자 변경
  ____선곱셈 알파값 사용
  __나아가서
  ____웹지엘 프레임워크를 사용하자
  ____구글 크롬 웹 스토어에 등록
  ____추가적인 자료
  __정리

출판사 서평

★ 이 책에서 다루는 내용 ★

■ 웹지엘 기초
■ 웹지엘과 다른 그래픽 기술 비교
■ 선형대수학
■ 트러블슈팅과 디버깅 테크닉
■ 웹지엘 API를 사용한 그리기
■ 자바스크립트 라이브러리와 3D 변환
■ 버텍스 셰이더와 프래그먼트 셰이더 작성
■ 텍스처링과 조명
■ 애니메이션과 사용자 입력
■ 오픈지엘(OpenGL) ES 셰이딩 언어
■ 웹지엘 성능 최적화

★ 이 책의 대상 독자 ★

이 책의 주 독자층은 웹 제작의 기본적인 지식을 갖추고 있으며, 웹지엘을 이용해 2D와 3D 그래픽을 적용한 웹 애플리케이션이나 웹 페이지를 만들고자 하는 웹 개발자다. 그리고 이전에 3D 그래픽 API(오픈지엘이나 Direct3D)를 이용한 경험을 바탕으로, 웹 제작에 웹지엘을 이용하고자 하는 개발자를 대상으로 한다.
또한, 웹지엘을 3D 그래픽 수업에 활용하거나 프로토타입 제작과 테스트에 사용하고자 하는 학생에게도 유용할 것이다. 애플리케이션 제작에 웹지엘을 지원하는 브라우저와 텍스트 에디터만 있으면 되기 때문에 완벽한 툴 체인 설정이 필요한 다른 3D 그래픽 API에 비해 접근성이 높은 편이다.

★ 이 책의 구성 ★

이 책을 처음부터 끝까지 차례로 읽었을 때 가장 학습 효과가 크도록 준비했다. 그러나 독자마다 배경지식이 다르므로, 자신에게 맞는 방법으로 읽어도 상관없다. 다음의 전체적인 개요가 책을 읽는 데 도움이 될 것이다.
1장은 웹지엘의 배경지식과 다른 그래픽 기술과의 차이점에 대해 설명한다. 웹지엘의 그래픽 파이프라인과 그래픽 하드웨어의 전체적인 내용과 3D 그래픽과 웹지엘의 이해를 돕기 위해 선형 대수학의 내용을 일부 다룬다. 1장에서 다루는 내용의 사전 지식이 충분하다면, 생략하고 2장으로 건너가자.
2장에서는 좀 더 실용적인 지식을 배워보자. 첫 번째 웹지엘 애플리케이션을 만들고 버텍스 셰이더와 프래그먼트 셰이더를 어떻게 작성하는지 알아본다. 웹지엘의 학습효과를 높이기 위한 유용한 기법과 디버깅 툴도 소개한다. 또한 웹지엘 애플리케이션 제작시 발생하는 문제를 해결하기 위한 방법도 살펴본다.
3장에서는 웹지엘에서 그리기(drawing)를 사용하기 위한 여러 가지 옵션과 메소드, 프리미티브(primitives)를 배운다.
4장에서는 웹지엘 애플리케이션에서 쓰이는 벡터와 행렬 연산 시에 유용한 3개의 간단한 자바스크립트 라이브러리를 소개한다. 또한 3D 세계(world)의 오브젝트 방향과 위치 변환에 대해서도 배운다. 4장은 매우 중요하므로 3D 그래픽에 대한 사전 지식이 없다면 충분한 시간을 들여 읽자.
5장은 웹지엘의 텍스처링 구현에 대해 알아본다. 텍스처링은 3D 오브젝트를 실감나게 보이기 위해 매우 중요한 단계다. 그리고 웹지엘에서 컨텍스트 상실을 처리해 견고한 애플리케이션을 만드는 방법을 알아본다. 실제 애플리케이션을 만들기 전에 5장을 꼭 읽어서 견고한 애플리케이션을 만드는 데 참고하자.
6장에서는 웹지엘 장면에서 애니메이션을 사용해 움직임을 만드는 방법에 대해 알아본다. 그리고 자바스크립트에서 이벤트 핸들링에 대해 자세히 알아보고 키 입력과 마우스 입력이 웹지엘 장면에 미치는 영향에 대해 알아본다.
7장에서는 웹지엘의 흥미 있는 분야인 조명에 대해 알아본다. 다양한 조명 모델에 대해 알아보고 조명 모델을 구현하는 버텍스 셰이더와 프래그먼트 셰이더를 작성해본다. 조명은 웹지엘 장면을 사실적으로 만드는 데 매우 중요한 재료가 된다.
8장에서는 웹지엘 애플리케이션의 성능을 최상의 상태로 만드는 여러 가지 가이드라인과, 팁, 트릭에 대해 알아본다. 웹지엘의 성능 문제를 측정하고, 병목 지점을 찾아 제거하는 방법에 대해 알아볼 것이다. 8장은 실제 모바일 산업의 사례를 바탕으로 웹지엘의 하부에서 동작하는 주요 소프트웨어와 하드웨어를 살펴보고, 어떤 일이 일어나는지에 대해서도 다룬다.

기본정보

ISBN	9788960776197
발행(출시)일자	2015년 06월 26일
쪽수	424쪽
크기	188 * 250 * 24 mm / 880 g
총권수	1권
시리즈명	에이콘 웹 프로페셔널 시리즈
원서(번역서)명/저자명	Professional WebGL Programming: Developing 3D Graphics for the Web/Andreas Anyuru

Klover 리뷰 (3)

[ca******]

업무에 도움이 많이 될 것 같아요.

[ki*******]

좋아요! 코드 공부하기 좋네요