VR(가상 현실)이나 AR(증강 현실)이라는 용어를 들으면 복잡하고 어려운 개념을 이해하고 그것을 바탕으로 구현해야 하는 기술이라고 생각하게 된다. 하지만 이 책은 기초 지식 및 고가의 장비가 없어도 가상/증강 현실을 웹에서 쉽게 구현할 수 있는 것을 보여준다. 기존의 3D 그래픽 필수 개념 설명과 단계별 실습을 WebXR API로 얼마나 간단하고 쉽게 구현할 수 있는지 경험할 수 있을 것이다. ◈ 이 책에서 다루는 내용 ◈ ◆ 웹 페이지를 위한 가상 현실 및 증강 현실 기능 생성 ◆ 인기 있는 기술의 프로젝트 포트폴리오를 통해 실감형 웹 개발자로 일할 준비 ◆ WebGL에서 셰이더 작성의 기본 사항 ◈ 이 책의 대상 독자 ◈ WebXR API에는 웹 개발자와 XR을 다루려는 사람에게 유용한 도구가 준비가 돼 있다. 모바일과 네이티브, 증강 및 가상 간의 구분이 흐려지면서 2D 기술과 실감형 기술을 사용하는 모든 애플리케이션이 점점 더 보편화될 것이다. 실감형 웹 경험을 설계하는 개발자 커뮤니티에 참여할 수 있도록 돕고자 이 책을 만들었다. 웹 개발 또는 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 엑스트라 ____애니메이션 믹서 컴포넌트 ____상대적 위치 변환 ____장면 실행 ____요약 __정리 __결론 찾아보기