WebXR로 만드는 AR/VR (WebGL, Three.js, A-Frame을 사용한 실감형 웹 개발)

라케쉬바루아

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

1장.시작하기
__WebGL
____브라우저
____렌더링엔진
__버퍼
__GPU
__현재그리고미래
__설치하기
__코드편집기
____하드웨어
____플랫폼
__로컬웹서버개발
____VisualStudioCode라이브서버설정하기
____노드JShttp-server패키지
____파이썬HTTP서버모듈
____Serverz-로컬웹개발을위한초간단웹서버
__WebXRAPI와호환되는웹브라우저
____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:WebXRAPI를통한XR세션생성
____1단계:WebXR이지원되는가?
____2단계:사용자에게XR기능알리기
____3단계:사용자활성화이벤트사용
____4단계:XR세션요청
____파트1요약
____실습6파트2:스코프,클로저,모듈,싱글톤
____Three.js의WebXRManager
____스코프
____클로저
____파트2요약
__실습6,파트3:홈스트레치
____로컬개발서버에서VR장치로포트포워딩활성화
____파트3요약
__정리

7장.Three.js와WebXRAPI를사용해증강현실웹사이트만들기
____실습7,파트1:떠있는정육면체
____WebXR의공간추적
____노드와노드패키지관리자로Three.js설치
____애플리케이션의생명주기개요
____장면구성요소로드
____초기화함수의본문작성
____버튼의이벤트리스너본문작성
____AR세션시작
____버튼요소의상태변경
____XR세션에참조저장
____XR세션의XRWebGL계층속성을Three.js렌더링콘텍스트로설정
____AR을위한XR세션의참조공간설정
____Three.jsXR매니저의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를위한엔티티컴포넌트시스템기반프레임워크
____엔티티
____컴포넌트
____기본요소
____시스템
____요약
__UsingThree.jsinA-Frame
__실습8-2:Three.js및A-Frame엔티티
____윈도우객체로서
____A-Frame안에있는Three.js속성
____DOMAPI접근하기
____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물리시스템
____장면엔티티에시스템로드
____엔티티에물리속성추가
____HTTPvs.HTTPS
____요약
__실습9-2
____슈퍼핸드
____터치컨트롤러컴포넌트
____A-FramePhysicsExtra시스템
____장면실행
____요약
__정리

10장.A-Frame및깃허브페이지를사용해AR에서3D애니메이션모델배포
__HTTPS및XR테스트
____GitHub
__실습10-1:GLTF모델을A-Frame에업로드하고
__깃허브페이지에퍼블리싱하기
____깃허브셋업
____GLTF에셋
____GLTF-Model엔티티컴포넌트
____장면실행
____요약
__실습10-2:A-Frame에서GLTF모델애니메이션
____A-Frame엑스트라
____애니메이션믹서컴포넌트
____상대적위치변환
____장면실행
____요약
__정리
__결론
찾아보기

◈이책에서다루는내용◈
◆웹페이지를위한가상현실및증강현실기능생성
◆인기있는기술의프로젝트포트폴리오를통해실감형웹개발자로일할준비
◆WebGL에서셰이더작성의기본사항

◈이책의대상독자◈
WebXRAPI에는웹개발자와XR을다루려는사람에게유용한도구가준비가돼있다.모바일과네이티브,증강및가상간의구분이흐려지면서2D기술과실감형기술을사용하는모든애플리케이션이점점더보편화될것이다.실감형웹경험을설계하는개발자커뮤니티에참여할수있도록돕고자이책을만들었다.웹개발또는3D프로그래밍에대한사전지식이없다고가정했다.WebXRAPI는새로운기술이기때문에숙련된개발자들도참고할수있다.

◈이책의구성◈
도구에는VisualStudioCode,WebGL,Three.js,A-Frame이포함돼있다.HTML,CSS,자바스크립트에익숙하지않아도이책의내용을활용할수있다.구성을살펴보자면1장에서는WebXRAPI의개념과실감모바일애플리케이션개발을시작하는데필요한도구를소개한다.2장에서는웹,WebGL의3D그래픽원리를설명한다.WebGL,HTML,자바스크립트로간단한프로젝트를만들어서WebXRAPI가브라우저안에서어떻게작동하는지에대한기본개념을빠르게살펴본다.3장에서는기본구문이서버,클라이언트,GPU를연결하는그래픽렌더링파이프라인의안팎을명확히설명하기때문에WebGL을계속사용한다.4장은2장과3장을기반으로WebGL을통한선형대수에대해설명한다.4장에서다루는간단하지만중요한선형대수의원칙은5장에서3D자바스크립트라이브러리인Three.js를통해실감형웹개발심층분석을위한기반으로제공한다.WebGL파이프라인의철저한이해와Three.js라이브러리로생성된편리함을통해로컬머신에가상현실프로젝트를생성하고6장의WebXRAPI를통해VR지원장치에로드를한다.7장에서는가상현실에서Three.js를이용한증강현실프로그래밍으로초점을이동한다.WebXRAPI의증강현실모듈기능을사용해서7장에서는애니메이션및사용자상호작용을포함하는모바일AR환경을만들기위한단계를제공한다.8장에서는Three.js를사용해서모바일XR경험을만드는프레임워크A-Frame의사용을소개하고자가상현실주제로돌아간다.9장과10장모두A-Frame에관한장으로9장은많은브라우저에내장된WebXRAPI의GamepadAPI구현을통해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프레임워크와WebXRAPI는AR/VR에대한배경지식과기본개념을전혀알고있지못하더라도웹으로누구나쉽게AR/VR을구현할수있도록해준다.웹의필수지식인HTML과자바스크립트를모르는초보자일지라도웹을통해AR/VR을쉽게구현할수있도록웹제작스킬과기술을한권에정리했다.각장마다실습을바탕으로쉽고자세하게소개해주고있으며,신기술과구기술의차이점에대한참고설명을통해기존개발에필요로됐던노력과시간을얼마만큼줄일수있는지보여준다.
이책은웹개발자와3D그래픽개발자의크로스오버퍼포먼스를할수있기를바라면서,좀더많은사람이웹을통해3D그래픽을쉽고간단히구현했으면하는바람에서만들어졌다.다방면의AR/VR기술구현및콘텐츠제작활용에도움이됐으면좋겠다.
서창수