- 현재 위치
- home > 컴퓨터·ICT·어학 > 컴퓨터·IT 도서 > IT에세이 > WebXR로 만드는 AR/VR[에이콘출판]
;)
VR(가상 현실)이나 AR(증강 현실)이라는 용어를 들으면 복잡하고 어려운 개념을 이해하고 그것을 바탕으로 구현해야 하는 기술이라고 생각하게 된다. 하지만 이 책은 기초 지식 및 고가의 장비가 없어도 가상/증강 현실을 웹에서 쉽게 구현할 수 있는 것을 보여준다. 기존의 3D 그래픽 필수 개념 설명과 단계별 실습을 WebXR API로 얼마나 간단하고 쉽게 구현할 수 있는지 경험할 수 있을 것이다.
저자: 라케쉬 바루아
1장. 시작하기
__WebGL
____브라우저
____렌더링 엔진
__버퍼
__GPU
__현재 그리고 미래
__설치하기
__코드 편집기
____하드웨어
____플랫폼
__로컬 웹 서버 개발
____Visual Studio Code 라이브 서버 설정하기
____노드JS http-server 패키지
____파이썬 HTTP 서버 모듈
____Serverz - 로컬 웹 개발을 위한 초간단 웹 서버
__WebXR API와 호환되는 웹 브라우저
____XR 디바이스
____WebXR 에뮬레이터
__정리
2장. WebGL의 시작과 실행
__HTML의 형성과 기능
__캔버스
__실습 2-1: 첫 번째 WebGL 애플리케이션
__캔버스에 대한 참조
__WebGL 콘텍스트
____WebGL 콘텍스트 그리기
____캔버스 크기 조정
__셰이더
____소스
____컴파일링
____연결
__버퍼
____정점 위치 설정
____셰이더와 버퍼 연결
__그리기
____해상도
____그리기 모드
__정리
3장. WebGL의 3차원을 향해
__XYZ의 기초
__실습 3-1: 3차원의 그림 그리기
____WebGL 파이프라인
____시작하기
____관심사 분리
____여러 가지 가능성
____문자 그대로 해석하기
____포인터 이동
____그리기 모드 호출
__실습 3-2: 정사각형 제곱
____Z 타운
____두 번째 색
__실습 3-3: 3차원의 3면
____더 많은 모양, 더 많은 정점, 더 많은 좌표
____수학 마술
__정리
4장. WebGL의 행렬, 변환, 관점
__지도 상자
__대수학 2에서 놓친 내용
____변환
____확장
____회전
__여러 개에서 하나로
__트리에 있는 GPU와 행렬
__실습 4-1: 행렬 혁명
____GLMatrixjs 가져오기
____셰이더의 유니폼
____실패의 순서
____행렬의 메모리 만들기
____가져오기 순서
____나는 누구인가?
____행렬로 움직이기
____애니메이션
____애니매이션 루프
____파트1 요약
__정형 및 투시 행렬 투영법
____절두체 보기
____실습 3, 파트 2: 원근감의 변화
____파트 2 재점검
__정리
5장. Three.js 살펴보기
__Three.js 란?
____3D 그래픽을 위한 신디사이저
____WebGL 보다 더 쉽게
__실습 5- 1 : 매트릭스 리믹스
____Three.js 소스 코드 다운로드
____자바스크립트 모듈 시스템 활용
____콘텍스트 만들기
____카메라 만들기
____장면 만들기
____지오메트리
____재질
____메시
____애니메이션 렌더링
____검정색 화면
____조명
____완벽한 픽셀
____요약
__실습 5-2: 재질, 텍스처
____구 지오메트리
____Lambert 재질
____텍스처
____Three.js의 TextureLoader
____조명모델
____요약
__실습 5-3: 안개, 배경, 주변 조명, 노멀 맵
____장면 배경
____안개
____노멀 맵 적용
____밉매핑
____이방성
____평면의 노멀 매핑
____주변조명
____파라메트릭 방정식을 사용한 애니메이션
____요약
__정리
6장. WebXR을 통한 VR 진입
__디버그 환경 설정
____오큘러스 퀘스트에서 WebXR 디버깅
__실감형 웹에서 데모 실행
__실감형 VR 화면 준비
____WebXR 애플리케이션의 생명 주기
__실습 6 파트1: WebXR API를 통한 XR 세션 생성
____1단계: WebXR이 지원되는가?
____2단계: 사용자에게 XR 기능 알리기
____3단계: 사용자 활성화 이벤트 사용
____4단계: XR 세션 요청
____파트 1 요약
____실습 6 파트 2: 스코프, 클로저, 모듈, 싱글톤
____Three.js의 WebXRManager
____스코프
____클로저
____파트2 요약
__실습 6, 파트 3: 홈스트레치
____로컬 개발 서버에서 VR 장치로 포트 포워딩 활성화
____파트 3 요약
__정리
7장. Three.js와 WebXR API를 사용해 증강 현실 웹사이트 만들기
____실습 7, 파트 1: 떠 있는 정육면체
____WebXR의 공간 추적
____노드와 노드 패키지 관리자로 Three.js 설치
____애플리케이션의 생명 주기 개요
____장면 구성 요소 로드
____초기화 함수의 본문 작성
____버튼의 이벤트 리스너 본문 작성
____AR 세션 시작
____버튼 요소의 상태 변경
____XR 세션에 참조 저장
____XR 세션의 XR WebGL 계층 속성을 Three.js 렌더링 콘텍스트로 설정
____AR을 위한 XR 세션의 참조 공간 설정
____Three.js XR 매니저의 XR 세션 속성을 현재 XR 세션으로 설정
____animate( ) 함수 호출
____render( ) 함수 집합을 콜백으로 사용해 Three.js의 SetAnimationLoop( ) 호출
____세션 종료에 대한 이벤트 처리 함수 생성
____애플리케이션 상태를 재설정하는 함수 생성
____파트 1 요약
__실습 7 파트 2: 히트 테스트
____컨트롤러와 이벤트
____레티클 생성
____XR 쿼리 함수 이동
____WebXR 공간 앵커 모듈
____장면 실행
____파트 2 요약
__정리
8장. A- Frame으로 웹용 VR 구축
__복습
__A- Frame 무엇인가?
__실습 8-1: A- Frame의 기본 뼈대
____설치하기
____더 나은 제품으로
____추상화로 인한 손실도 감소해야 한다
____엔티티 컴포넌트 시스템
____A-Frame: Three.js를 위한 엔티티 컴포넌트 시스템 기반 프레임워크
____엔티티
____컴포넌트
____기본 요소
____시스템
____요약
__Using Three.js in A-Frame
__실습 8-2: Three.js 및 A-Frame 엔티티
____윈도우 객체로서
____A-Frame 안에 있는 Three.js 속성
____DOM API 접근하기
____Three.js 그룹과 getObject3D( )
____장면 실행
____요약
__A-Frame에서 커스텀 컴포넌트
__실습 8-3: 커스텀 A-Frame 컴포넌트 빌드
____시작하기
____registerComponent( )
____컴포넌트 내부에서 컴포넌트 데이터 참조
____엔티티에 커스텀 컴포넌트 추가
____커스텀 컴포넌트를 통한 Three.js 속성
____‘this.el’
____장면 실행
____요약
__두 마리의 새, 하나의 컴포넌트
__실습 8-4: 잔디 지면
____평면 엔티티에 사용자 지정 컴포넌트 추가
____사용자 지정 컴포넌트 속성 추가
____조건부 로직을 통한 컴포넌트 다양성
____조명 모델이 유지됨
____컴포넌트로서의 안개
____요약
__정리
9장. A- Frame의 물리 엔진과 UI
__게임 엔진은 어디에 있나요?
__실습 9-1: A-Frame에서 물리 시스템 가져오기
____A-Frame과 시스템 설치하기
____A-Frame 개발자 에코시스템
____A-Frame 물리 시스템
____장면 엔티티에 시스템 로드
____엔티티에 물리 속성 추가
____HTTP vs. HTTPS
____요약
__실습 9-2
____슈퍼핸드
____터치 컨트롤러 컴포넌트
____A-Frame Physics Extra 시스템
____장면 실행
____요약
__정리
10장. A-Frame 및 깃허브 페이지를 사용해 AR에서 3D 애니메이션 모델 배포
__HTTPS 및 XR 테스트
____GitHub
__실습 10-1: GLTF 모델을 A-Frame에 업로드하고
__깃허브 페이지에 퍼블리싱하기
____깃허브 셋업
____GLTF 에셋
____GLTF-Model 엔티티 컴포넌트
____장면 실행
____요약
__실습 10-2: A-Frame에서 GLTF 모델 애니메이션
____A-Frame 엑스트라
____애니메이션 믹서 컴포넌트
____상대적 위치 변환
____장면 실행
____요약
__정리
__결론
찾아보기
__WebGL
____브라우저
____렌더링 엔진
__버퍼
__GPU
__현재 그리고 미래
__설치하기
__코드 편집기
____하드웨어
____플랫폼
__로컬 웹 서버 개발
____Visual Studio Code 라이브 서버 설정하기
____노드JS http-server 패키지
____파이썬 HTTP 서버 모듈
____Serverz - 로컬 웹 개발을 위한 초간단 웹 서버
__WebXR API와 호환되는 웹 브라우저
____XR 디바이스
____WebXR 에뮬레이터
__정리
2장. WebGL의 시작과 실행
__HTML의 형성과 기능
__캔버스
__실습 2-1: 첫 번째 WebGL 애플리케이션
__캔버스에 대한 참조
__WebGL 콘텍스트
____WebGL 콘텍스트 그리기
____캔버스 크기 조정
__셰이더
____소스
____컴파일링
____연결
__버퍼
____정점 위치 설정
____셰이더와 버퍼 연결
__그리기
____해상도
____그리기 모드
__정리
3장. WebGL의 3차원을 향해
__XYZ의 기초
__실습 3-1: 3차원의 그림 그리기
____WebGL 파이프라인
____시작하기
____관심사 분리
____여러 가지 가능성
____문자 그대로 해석하기
____포인터 이동
____그리기 모드 호출
__실습 3-2: 정사각형 제곱
____Z 타운
____두 번째 색
__실습 3-3: 3차원의 3면
____더 많은 모양, 더 많은 정점, 더 많은 좌표
____수학 마술
__정리
4장. WebGL의 행렬, 변환, 관점
__지도 상자
__대수학 2에서 놓친 내용
____변환
____확장
____회전
__여러 개에서 하나로
__트리에 있는 GPU와 행렬
__실습 4-1: 행렬 혁명
____GLMatrixjs 가져오기
____셰이더의 유니폼
____실패의 순서
____행렬의 메모리 만들기
____가져오기 순서
____나는 누구인가?
____행렬로 움직이기
____애니메이션
____애니매이션 루프
____파트1 요약
__정형 및 투시 행렬 투영법
____절두체 보기
____실습 3, 파트 2: 원근감의 변화
____파트 2 재점검
__정리
5장. Three.js 살펴보기
__Three.js 란?
____3D 그래픽을 위한 신디사이저
____WebGL 보다 더 쉽게
__실습 5- 1 : 매트릭스 리믹스
____Three.js 소스 코드 다운로드
____자바스크립트 모듈 시스템 활용
____콘텍스트 만들기
____카메라 만들기
____장면 만들기
____지오메트리
____재질
____메시
____애니메이션 렌더링
____검정색 화면
____조명
____완벽한 픽셀
____요약
__실습 5-2: 재질, 텍스처
____구 지오메트리
____Lambert 재질
____텍스처
____Three.js의 TextureLoader
____조명모델
____요약
__실습 5-3: 안개, 배경, 주변 조명, 노멀 맵
____장면 배경
____안개
____노멀 맵 적용
____밉매핑
____이방성
____평면의 노멀 매핑
____주변조명
____파라메트릭 방정식을 사용한 애니메이션
____요약
__정리
6장. WebXR을 통한 VR 진입
__디버그 환경 설정
____오큘러스 퀘스트에서 WebXR 디버깅
__실감형 웹에서 데모 실행
__실감형 VR 화면 준비
____WebXR 애플리케이션의 생명 주기
__실습 6 파트1: WebXR API를 통한 XR 세션 생성
____1단계: WebXR이 지원되는가?
____2단계: 사용자에게 XR 기능 알리기
____3단계: 사용자 활성화 이벤트 사용
____4단계: XR 세션 요청
____파트 1 요약
____실습 6 파트 2: 스코프, 클로저, 모듈, 싱글톤
____Three.js의 WebXRManager
____스코프
____클로저
____파트2 요약
__실습 6, 파트 3: 홈스트레치
____로컬 개발 서버에서 VR 장치로 포트 포워딩 활성화
____파트 3 요약
__정리
7장. Three.js와 WebXR API를 사용해 증강 현실 웹사이트 만들기
____실습 7, 파트 1: 떠 있는 정육면체
____WebXR의 공간 추적
____노드와 노드 패키지 관리자로 Three.js 설치
____애플리케이션의 생명 주기 개요
____장면 구성 요소 로드
____초기화 함수의 본문 작성
____버튼의 이벤트 리스너 본문 작성
____AR 세션 시작
____버튼 요소의 상태 변경
____XR 세션에 참조 저장
____XR 세션의 XR WebGL 계층 속성을 Three.js 렌더링 콘텍스트로 설정
____AR을 위한 XR 세션의 참조 공간 설정
____Three.js XR 매니저의 XR 세션 속성을 현재 XR 세션으로 설정
____animate( ) 함수 호출
____render( ) 함수 집합을 콜백으로 사용해 Three.js의 SetAnimationLoop( ) 호출
____세션 종료에 대한 이벤트 처리 함수 생성
____애플리케이션 상태를 재설정하는 함수 생성
____파트 1 요약
__실습 7 파트 2: 히트 테스트
____컨트롤러와 이벤트
____레티클 생성
____XR 쿼리 함수 이동
____WebXR 공간 앵커 모듈
____장면 실행
____파트 2 요약
__정리
8장. A- Frame으로 웹용 VR 구축
__복습
__A- Frame 무엇인가?
__실습 8-1: A- Frame의 기본 뼈대
____설치하기
____더 나은 제품으로
____추상화로 인한 손실도 감소해야 한다
____엔티티 컴포넌트 시스템
____A-Frame: Three.js를 위한 엔티티 컴포넌트 시스템 기반 프레임워크
____엔티티
____컴포넌트
____기본 요소
____시스템
____요약
__Using Three.js in A-Frame
__실습 8-2: Three.js 및 A-Frame 엔티티
____윈도우 객체로서
____A-Frame 안에 있는 Three.js 속성
____DOM API 접근하기
____Three.js 그룹과 getObject3D( )
____장면 실행
____요약
__A-Frame에서 커스텀 컴포넌트
__실습 8-3: 커스텀 A-Frame 컴포넌트 빌드
____시작하기
____registerComponent( )
____컴포넌트 내부에서 컴포넌트 데이터 참조
____엔티티에 커스텀 컴포넌트 추가
____커스텀 컴포넌트를 통한 Three.js 속성
____‘this.el’
____장면 실행
____요약
__두 마리의 새, 하나의 컴포넌트
__실습 8-4: 잔디 지면
____평면 엔티티에 사용자 지정 컴포넌트 추가
____사용자 지정 컴포넌트 속성 추가
____조건부 로직을 통한 컴포넌트 다양성
____조명 모델이 유지됨
____컴포넌트로서의 안개
____요약
__정리
9장. A- Frame의 물리 엔진과 UI
__게임 엔진은 어디에 있나요?
__실습 9-1: A-Frame에서 물리 시스템 가져오기
____A-Frame과 시스템 설치하기
____A-Frame 개발자 에코시스템
____A-Frame 물리 시스템
____장면 엔티티에 시스템 로드
____엔티티에 물리 속성 추가
____HTTP vs. HTTPS
____요약
__실습 9-2
____슈퍼핸드
____터치 컨트롤러 컴포넌트
____A-Frame Physics Extra 시스템
____장면 실행
____요약
__정리
10장. A-Frame 및 깃허브 페이지를 사용해 AR에서 3D 애니메이션 모델 배포
__HTTPS 및 XR 테스트
____GitHub
__실습 10-1: GLTF 모델을 A-Frame에 업로드하고
__깃허브 페이지에 퍼블리싱하기
____깃허브 셋업
____GLTF 에셋
____GLTF-Model 엔티티 컴포넌트
____장면 실행
____요약
__실습 10-2: A-Frame에서 GLTF 모델 애니메이션
____A-Frame 엑스트라
____애니메이션 믹서 컴포넌트
____상대적 위치 변환
____장면 실행
____요약
__정리
__결론
찾아보기
◈ 이 책에서 다루는 내용 ◈
◆ 웹 페이지를 위한 가상 현실 및 증강 현실 기능 생성
◆ 인기 있는 기술의 프로젝트 포트폴리오를 통해 실감형 웹 개발자로 일할 준비
◆ WebGL에서 셰이더 작성의 기본 사항
◈ 이 책의 대상 독자 ◈
WebXR API에는 웹 개발자와 XR을 다루려는 사람에게 유용한 도구가 준비가 돼 있다. 모바일과 네이티브, 증강 및 가상 간의 구분이 흐려지면서 2D 기술과 실감형 기술을 사용하는 모든 애플리케이션이 점점 더 보편화될 것이다. 실감형 웹 경험을 설계하는 개발자 커뮤니티에 참여할 수 있도록 돕고자 이 책을 만들었다. 웹 개발 또는 3D 프로그래밍에 대한 사전 지식이 없다고 가정했다. WebXR API는 새로운 기술이기 때문에 숙련된 개발자들도 참고할 수 있다.
◈ 이 책의 구성 ◈
도구에는 Visual Studio Code, WebGL, Three.js, A-Frame이 포함돼 있다. HTML, CSS, 자바스크립트에 익숙하지 않아도 이 책의 내용을 활용할 수 있다. 구성을 살펴보자면 1장에서는 WebXR API의 개념과 실감 모바일 애플리케이션 개발을 시작하는 데 필요한 도구를 소개한다. 2장에서는 웹, WebGL의 3D 그래픽 원리를 설명한다. WebGL, HTML, 자바스크립트로 간단한 프로젝트를 만들어서 WebXR API가 브라우저 안에서 어떻게 작동하는지에 대한 기본 개념을 빠르게 살펴본다. 3장에서는 기본 구문이 서버, 클라이언트, GPU를 연결하는 그래픽 렌더링 파이프 라인의 안팎을 명확히 설명하기 때문에 WebGL을 계속 사용한다. 4장은 2장과 3장을 기반으로 WebGL을 통한 선형대수에 대해 설명한다. 4장에서 다루는 간단하지만 중요한 선형대수의 원칙은 5장에서 3D 자바스크립트 라이브러리인 Three.js를 통해 실감형 웹 개발 심층 분석을 위한 기반으로 제공한다. WebGL 파이프라인의 철저한 이해와 Three.js 라이브러리로 생성된 편리함을 통해 로컬 머신에 가상 현실 프로젝트를 생성하고 6장의 WebXR API를 통해 VR 지원 장치에 로드를 한다. 7장에서는 가상 현실에서 Three.js를 이용한 증강 현실 프로그래밍으로 초점을 이동한다. WebXR API의 증강 현실 모듈 기능을 사용해서 7장에서는 애니메이션 및 사용자 상호작용을 포함하는 모바일 AR 환경을 만들기 위한 단계를 제공한다. 8장에서는 Three.js를 사용해서 모바일 XR 경험을 만드는 프레임워크 A-Frame의 사용을 소개하고자 가상 현실 주제로 돌아간다. 9장과 10장 모두 A-Frame에 관한 장으로 9장은 많은 브라우저에 내장된 WebXR API의 Gamepad API 구현을 통해 VR 장면에서 실제 물리학과 사용자 상호작용을 구현하는 방법을 설명한다. 마지막으로 10장에서는 깃허브(Github) 페이지를 통해 3D 모델을 A-Frame으로 불러와 애니메이션을 제작하고 증강 현실 속에서 보는 방법을 설명한다.
◆ 웹 페이지를 위한 가상 현실 및 증강 현실 기능 생성
◆ 인기 있는 기술의 프로젝트 포트폴리오를 통해 실감형 웹 개발자로 일할 준비
◆ WebGL에서 셰이더 작성의 기본 사항
◈ 이 책의 대상 독자 ◈
WebXR API에는 웹 개발자와 XR을 다루려는 사람에게 유용한 도구가 준비가 돼 있다. 모바일과 네이티브, 증강 및 가상 간의 구분이 흐려지면서 2D 기술과 실감형 기술을 사용하는 모든 애플리케이션이 점점 더 보편화될 것이다. 실감형 웹 경험을 설계하는 개발자 커뮤니티에 참여할 수 있도록 돕고자 이 책을 만들었다. 웹 개발 또는 3D 프로그래밍에 대한 사전 지식이 없다고 가정했다. WebXR API는 새로운 기술이기 때문에 숙련된 개발자들도 참고할 수 있다.
◈ 이 책의 구성 ◈
도구에는 Visual Studio Code, WebGL, Three.js, A-Frame이 포함돼 있다. HTML, CSS, 자바스크립트에 익숙하지 않아도 이 책의 내용을 활용할 수 있다. 구성을 살펴보자면 1장에서는 WebXR API의 개념과 실감 모바일 애플리케이션 개발을 시작하는 데 필요한 도구를 소개한다. 2장에서는 웹, WebGL의 3D 그래픽 원리를 설명한다. WebGL, HTML, 자바스크립트로 간단한 프로젝트를 만들어서 WebXR API가 브라우저 안에서 어떻게 작동하는지에 대한 기본 개념을 빠르게 살펴본다. 3장에서는 기본 구문이 서버, 클라이언트, GPU를 연결하는 그래픽 렌더링 파이프 라인의 안팎을 명확히 설명하기 때문에 WebGL을 계속 사용한다. 4장은 2장과 3장을 기반으로 WebGL을 통한 선형대수에 대해 설명한다. 4장에서 다루는 간단하지만 중요한 선형대수의 원칙은 5장에서 3D 자바스크립트 라이브러리인 Three.js를 통해 실감형 웹 개발 심층 분석을 위한 기반으로 제공한다. WebGL 파이프라인의 철저한 이해와 Three.js 라이브러리로 생성된 편리함을 통해 로컬 머신에 가상 현실 프로젝트를 생성하고 6장의 WebXR API를 통해 VR 지원 장치에 로드를 한다. 7장에서는 가상 현실에서 Three.js를 이용한 증강 현실 프로그래밍으로 초점을 이동한다. WebXR API의 증강 현실 모듈 기능을 사용해서 7장에서는 애니메이션 및 사용자 상호작용을 포함하는 모바일 AR 환경을 만들기 위한 단계를 제공한다. 8장에서는 Three.js를 사용해서 모바일 XR 경험을 만드는 프레임워크 A-Frame의 사용을 소개하고자 가상 현실 주제로 돌아간다. 9장과 10장 모두 A-Frame에 관한 장으로 9장은 많은 브라우저에 내장된 WebXR API의 Gamepad API 구현을 통해 VR 장면에서 실제 물리학과 사용자 상호작용을 구현하는 방법을 설명한다. 마지막으로 10장에서는 깃허브(Github) 페이지를 통해 3D 모델을 A-Frame으로 불러와 애니메이션을 제작하고 증강 현실 속에서 보는 방법을 설명한다.
