인터넷서점 인터파크도서

VR(가상 현실)이나 AR(증강 현실)이라는 용어를 들으면 복잡하고 어려운 개념을 이해하고 그것을 바탕으로 구현해야 하는 기술이라고 생각하게 된다. 하지만 이 책은 기초 지식 및 고가의 장비가 없어도 가상/증강 현실을 웹에서 쉽게 구현할 수 있는 것을 보여준다. 기존의 3D 그래픽 필수 개념 설명과 단계별 실습을 WebXR API로 얼마나 간단하고 쉽게 구현할 수 있는지 경험할 수 있을 것이다.

◈ 이 책에서 다루는 내용 ◈ ◆ 웹 페이지를 위한 가상 현실 및 증강 현실 기능 생성 ◆ 인기 있는 기술의 프로젝트 포트폴리오를 통해 실감형 웹 개발자로 일할 준비 ◆ 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으로 불러와 애니메이션을 제작하고 증강 현실 속에서 보는 방법을 설명한다. ◈ 옮긴이의 말 ◈ 2021년 IT 핫키워드는 단연 메타버스다. 하지만 올해뿐만 아니라 이후 몇 년간 계속 지속될 것이라 예상된다. 이렇게 많은 사람이 관심을 갖는 것은 인터넷이 우리 생활의 패턴을 송두리째 바꿨던 것처럼 메타버스도 그 정도 파급력이 있을 것으로 추측하기 때문이다. 메타버스를 구현할 개발 플랫폼으로 우선 유니티나 언리얼 같은 게임 엔진이 있다. 또 다른 진영으로 웹을 기반으로 둔 WebGL 및 WebXR을 통해서 몰입도 높은 3D 콘텐츠를 직접 만들거나 가상/증강 현실 하드웨어에서 실행할 수 있는 엔진이다. 이 엔진들은 기본적으로 가상/증강/혼합 현실 개발을 위한 기능을 모두 제공한다. 실사례로 최근에 WebXR을 도입한 메타버스 전시회가 있었다. VR 기기 및 웹 접속을 통해 전시장에 들어서면 자동으로 관람객 아바타가 생성되며, 서로 ...다른 곳에서 접속한 관람자라도 아바타를 통해 함께 전시를 관람하고, 의견을 나누는 기능이 있다고 한다. 초기에 WebGL을 통해 웹 브라우저에 3D 객체를 올려놓는 것에 만족했다면, WebXR을 통해서 많은 사용자를 가상세계로 끌어들이는 효과를 이뤘으며, 최종적으로 A-Frame 같은 WebXR을 기반한 쉬운 프레임워크가 나와서 누구나 쉽게 게임과 같은 화려한 UI를 만들 수 있는 환경이 됐다. 이렇게 많은 사람이 노력해 표준을 만들고, 그 표준을 더 쉽게 쓸 수 있도록 애쓰고 있다. 그러나 아직 초기시장이라 할 일이 무궁무진하다. 이 책은 입문서이기 때문에 실제 프로젝트에 투입되는 기술과는 약간 거리가 있다. 하지만 웹 기반한 가상 현실을 구현하고자 하는 사람, WebGL, WebXR의 기본 개념을 익히고자 하는 사람, 최신 프레임워크인 A-Frame을 학습하고자 하는 사람들에게 필독서가 될 것이다. 최재철 꽤 오래전부터 가상 현실(VR), 증강 현실(AR)이란 기술이 소개됐고 조금씩 우리 생활 속에서 사용자 서비스 위주로 경험해 볼 수 있었다. 갑자기 찾아온 코로나 사태 이후 온라인에서의 만남과 소통이 늘어 재미있고 서로 교감할 수 있는 온라인 서비스를 찾으면서 AR/VR의 입지가 높아졌다. 불과 1년 반의 시간 동안 우리는 이제 대면보다 비대면에 익숙해졌고, 재택근무를 하는 기업과 화상으로 수업, 회의를 진행하는 일상이 더 이상 낯설지 않다. 일상의 변화로 온라인 입학식, 졸업식, 워크숍, 회의, 수업 등 기존 오프라인에서 이뤄졌던 사회활동이 비대면으로 전환되고 온라인상의 가상공간에서 사용자를 대신한 아바타를 통해 감정/생각/행동을 표현하는 것이 자연스러워졌다. AR/VR 콘텐츠들이 우리의 일상으로 들어오게 된 만큼 AR/VR의 기술에 대한 관심이 높아졌고 이를 실제로 구현해 보고 싶어하는 사람들도 자연스럽게 늘어났다. 그러나 AR/VR을 구현하려면 그 기초인 3D 그래픽에 대한 배경 지식과 이해가 필요하고 이는 많은 노력과 시간이 필요해 쉽게 도전하지 못하고 있다. 이 책에서 소개하는 A-Frame 프레임워크와 WebXR API는 AR/VR에 대한 배경 지식과 기본 개념을 전혀 알고 있지 못하더라도 웹으로 누구나 쉽게 AR/VR을 구현할 수 있도록 해준다. 웹의 필수 지식인 HTML과 자바스크립트를 모르는 초보자일지라도 웹을 통해 AR/VR을 쉽게 구현할 수 있도록 웹 제작 스킬과 기술을 한 권에 정리했다. 각 장마다 실습을 바탕으로 쉽고 자세하게 소개해 주고 있으며, 신기술과 구기술의 차이점에 대한 참고 설명을 통해 기존 개발에 필요로 됐던 노력과 시간을 얼마만큼 줄일 수 있는지 보여준다. 이 책은 웹 개발자와 3D 그래픽 개발자의 크로스오버 퍼포먼스를 할 수 있기를 바라면서, 좀 더 많은 사람이 웹을 통해 3D 그래픽을 쉽고 간단히 구현했으면 하는 바람에서 만들어졌다. 다방면의 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 엑스트라 ____애니메이션 믹서 컴포넌트 ____상대적 위치 변환 ____장면 실행 ____요약 __정리 __결론 찾아보기

라케쉬 바루아 [저]

뉴욕에 거주하며 뉴미디어, 영화, TV 분야에서 15년의 경력을 가진 작가이며 제작자다. 콜럼비아 대학교에서 영화 각본과 연출에 관한 순수 예술 석사를 마치고, 인기 있는 황금시간대 방송 드라마의 작가 그룹에 보조로 들어갔다. 그 경험으로 TV의 한계와 실감나는 3D 콘텐츠 성공 기회를 눈뜨게 됐다. 2016년에는 스타트업, 부트캠프, 마이크로소프트 사무실 그리고 컴퓨터 앞에서 수많은 시간을 보내며 혼합 현실 디자인을 향한 자기주도적 여정을 시작했다. 가상 현실과 유니티 게임 엔진에 관한 책의 저자이며, 이 책으로 컴퓨터 비전 분야에서 NVIDIA 인증 나노 학위를 받았다. 현재 위스콘신주 밀워키시에 있는 고등학교에서 컴퓨터 과학을 가르치고 있다. 수학 삼각법보다 영어 수업을 선호하는 사람을 위해 특별히 고안된 스타일로 내용을 설명하고자 한다.

서창수 [저]

현재 SK C&C에서 AI 플랫폼 솔루션 기획과 개발 업무를 담당하고 있다. 미국 유타 주립대에서 컴퓨터공학을 전공했으며 모바일 커머스 서버 개발, AI 플랫폼 솔루션 기획/개발에 참여했으며, IT 신기술에 관심 갖고 품질 좋은 플랫폼 솔루션을 만들고자 노력하고 있다.