간편결제, 신용카드 청구할인
네이버페이 1%
(네이버페이 결제 시 적립)
NH(올원페이)카드 12% (23,760원)
(3만원 이상 결제/최대 1만원 할인)
북피니언 롯데카드 30% (18,900원)
(최대할인 3만원 / 3만원 이상 결제)
EBS 롯데카드 20% (21,600원)
(최대할인 3만원 / 3만원 이상 결제)
인터파크 NEW 우리V카드 10% (24,300원)
(최대할인 3만원 / 3만원 이상 결제)
인터파크 현대카드 7% (25,110원)
(최대할인 3만원 / 3만원 이상 결제)
Close

WebGL 3D 프로그래밍 : HTML5와 자바스크립트 웹지엘로 만드는 웹 3D 그래픽

2013년 9월 9일 이후 누적수치입니다.

판매지수 33
?
판매지수란?
사이트의 판매량에 기반하여 판매량 추이를 반영한 인터파크 도서에서의 독립적인 판매 지수입니다. 현재 가장 잘 팔리는 상품에 가중치를 두었기 때문에 실제 누적 판매량과는 다소 차이가 있을 수 있습니다. 판매량 외에도 다양한 가중치로 구성되어 최근의 이슈도서 확인시 유용할 수 있습니다. 해당 지수는 매일 갱신됩니다.
Close
공유하기
정가

30,000원

  • 27,000 (10%할인)

    1,500P (5%적립)

할인혜택
적립혜택자동적립
배송정보
주문수량
감소 증가
  • 이벤트/기획전

  • 연관도서(319)

  • 사은품(2)

출판사 서평

웹지엘과 자바스크립트를 사용해 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 프로그래밍]을 다 읽고 난 후에는 여러분이 자신만의 고급 기법을 사용할 수 있기를 기원한다.

목차

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

본문중에서

웹지엘(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)다. 실제 프로젝트에 투입되는 기술과는 약간 거리가 있다. 하지만 웹지엘에 관심이 있는 사람이거나 기존 오픈지엘에서 웹지엘로 진입하는 사람, 아니면 새로 입문하는 사람에게는 웹지엘의 기본 개념을 익히는 데 필독서가 될 것이다. 이 책을 시작으로 웹지엘의 매력에 빠지는 계기가 되길 기원한다.
(/ 옮긴이의 말 중에서)

저자소개

디에고 켄토(Diego Cantor) [저] 신작알림 SMS신청 작가DB보기
생년월일 -
출생지 -
출간도서 0종
판매수 0권

1980년 콜롬비아 보고타에서 태어났다. 디에고는 컴퓨터와의 상호작용 메커니즘인 시선 추적을 연구하는 컴퓨터 비전 시스템 개발학과를 2002년도에 졸업했다.
2005년도에는 컴퓨터 공학의 소프트웨어 아키텍처와 의학 이미지 처리에 관한 석사학위를 마쳤다. 석사학위를 진행하면서 프랑스 리옹에 있는 이미지 처리 연구실인 CREATIS에서 인턴을 지냈고, 학위 수료 후에는 호주 브리즈번에 있는 Australian E-Health Research Centre에서 재직했다.
현재는 런던에 있는 웨스턴대학교에서 생물의학공학 분야 박사과정을 밟고 있으며, 캐나다에서 신경외과 수술 시스템 개

펼쳐보기
브랜든 존스 [저] 신작알림 SMS신청 작가DB보기
생년월일 -
출생지 -
출간도서 0종
판매수 0권

브라우저 분야에서 웹지엘이 처음 등장한 2010년부터 웹지엘 데모를 개발했다. 그는 8년간에 걸친 웹 프로그래밍 경력과 실시간 그래픽 분야를 잘 접목해 완벽한 조합을 찾아냈다. 브랜든은 현재 모토로라 모빌리(Motorola Mobility)에서 HTML5 개발에 앞장서고 있다.

생년월일 -
출생지 -
출간도서 0종
판매수 0권

오랜 시간 윈도우 개발에 종사하다가, 지금은 모바일 웹 브라우저 회사인 오비고에서 HTML5와 웹 플랫폼, N스크린 관련 연구 개발을 하고 있다. 웹킷 기반 프로젝트를 다수 수행했으며, 현재는 웹 오디오, 비디오, 웹지엘 등 웹 멀티미디어 표준을 연구 중이다.

이 상품의 시리즈

acorn+PACKT 시리즈(총 351권 / 현재구매 가능도서 320권)

펼쳐보기

이 책과 내용이 비슷한 책 ? 내용 유사도란? 이 도서가 가진 내용을 분석하여 기준 도서와 얼마나 많이 유사한 콘텐츠를 많이 가지고 있는가에 대한 비율입니다.

    리뷰

    0.0 (총 0건)

    기대평

    작성시 유의사항

    평점
    0/200자
    등록하기

    기대평

    0.0

    교환/환불

    교환/환불 방법

    ‘마이페이지 > 취소/반품/교환/환불’ 에서 신청함, 1:1 문의 게시판 또는 고객센터(1577-2555) 이용 가능

    교환/환불 가능 기간

    고객변심은 출고완료 다음날부터 14일 까지만 교환/환불이 가능함

    교환/환불 비용

    고객변심 또는 구매착오의 경우에만 2,500원 택배비를 고객님이 부담함

    교환/환불 불가사유

    반품접수 없이 반송하거나, 우편으로 보낼 경우 상품 확인이 어려워 환불이 불가할 수 있음
    배송된 상품의 분실, 상품포장이 훼손된 경우, 비닐랩핑된 상품의 비닐 개봉시 교환/반품이 불가능함

    소비자 피해보상

    소비자 피해보상의 분쟁처리 등에 관한 사항은 소비자분쟁해결기준(공정거래위원회 고시)에 따라 비해 보상 받을 수 있음
    교환/반품/보증조건 및 품질보증 기준은 소비자기본법에 따른 소비자 분쟁 해결 기준에 따라 피해를 보상 받을 수 있음

    기타

    도매상 및 제작사 사정에 따라 품절/절판 등의 사유로 주문이 취소될 수 있음(이 경우 인터파크도서에서 고객님께 별도로 연락하여 고지함)

    배송안내

    • 인터파크 도서 상품은 택배로 배송되며, 출고완료 1~2일내 상품을 받아 보실 수 있습니다

    • 출고가능 시간이 서로 다른 상품을 함께 주문할 경우 출고가능 시간이 가장 긴 상품을 기준으로 배송됩니다.

    • 군부대, 교도소 등 특정기관은 우체국 택배만 배송가능하여, 인터파크 외 타업체 배송상품인 경우 발송되지 않을 수 있습니다.

    • 배송비

    도서(중고도서 포함) 구매

    2,000원 (1만원이상 구매 시 무료배송)

    음반/DVD/잡지/만화 구매

    2,000원 (2만원이상 구매 시 무료배송)

    도서와 음반/DVD/잡지/만화/
    중고직배송상품을 함께 구매

    2,000원 (1만원이상 구매 시 무료배송)

    업체직접배송상품 구매

    업체별 상이한 배송비 적용