WebXR로 만드는 AR/VR

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 엑스트라
____애니메이션 믹서 컴포넌트
____상대적 위치 변환
____장면 실행
____요약
__정리
__결론
찾아보기