오늘 웹에서 VR을 구축하는 방법

가상 현실은 2020 년까지 최대 70 억 달러의 가치가 있습니다.이 웹은이 기간 동안 독점적으로 2D 환경으로 남아 있지 않을 것입니다. 실제로 VR을 브라우저로 가져 오는 몇 가지 간단한 방법이 이미 있습니다. 함께 일하는 것도 엄청나게 재미 있습니다!

개발 모험을 가상 웹으로 시작하려면이 작업을 수행하는 세 가지 잠재적 방법이 있습니다.

JavaScript, Three.js 및 시청 장치 방향 JavaScript, Three.js 및 Webvr (새로운 선호하는 방법!)

css 및 webvr (아직 초기)

나는 각각을 넘어서 각각의 작동 방식에 대한 짧은 요약을 보여줄 것이다. 키 테이크 아웃 VR (Virtual Reality)은 세 가지 주요 방법을 통해 웹 개발에 통합 될 수 있습니다 : JavaScript, Three.js 및 시청 장치 방향; JavaScript, Three.JS 및 WebVR; 및 CSS 및 Webvr JavaScript, Three.JS 및 시청 장치 방향 방법은 장치 회전 및 틸트를 감지하여 VR 컨텍스트에서 카메라의 조정이 뷰어의 시선을 따라갈 수 있도록 장치 회전 및 틸트를 감지합니다. JavaScript, Three.js 및 WebVR은 현재 Oculus Rift와 같은 VR 헤드셋 방향에 액세스하는 데 가장 적합한 실험 방법입니다. VR 장치 정보에 대한 액세스를 제공하기 위해 WebVR API를 사용합니다.

현재 개발 초기 단계 인 CSS 및 WebVR 방법은 CSS 3D 변환을 VR 전체 화면 모드와 통합하는 것을 목표로합니다. 웹에 대한 VR 경험 생성은 VR 기술 채택을위한 핵심 동인으로 여겨지며, Boris SMU의 WebVR 보일러 플레이트는 웹에 대한 VR 경험을 구축하려는 개발자에게 가장 좋은 장소로 권장됩니다. >

JavaScript, Three.js 및 시청 장치 방향 대부분의 브라우저 기반 가상 현실 프로젝트가 현재 작동하는 방법 중 하나는 Deviceorientation Browser 이벤트를 통한 것입니다. 이를 통해 브라우저에 장치의 방향이 어떻게 지정되는지 알려줍니다. VR 관점 내 에서이 기능은 누군가를 둘러 보면 시선을 따라 가도록 카메라를 조정할 때 감지 할 수 있습니다. 브라우저 내에서 멋진 3D 장면을 달성하기 위해 3D 모양과 장면을 쉽게 만들 수있는 JavaScript 프레임 워크 인 Three.js를 사용합니다. 그것은 3D 경험을 모으는 데있어 대부분의 복잡성을 취하고 당신이 당신의 장면 내에서 함께 모 으려고하는 것에 집중할 수있게 해줍니다. . 나는 Sitepoint에서 장치 방향 방법을 사용하는 두 가지 데모를 작성했습니다.

Google Cardboard와 Three.js 로 VR을 웹에 가져 오십시오. VR에서 트위터 스트림을 3.js 및 노드로 시각화합니다.

3.JS를 처음 접하고 장면을 구성하는 방법이라면이 방법에 대한 자세한 내용을 위해 위의 두 기사를 살펴 보는 것이 좋습니다. 여기서 주요 개념을 다룰 것입니다. 그러나 더 높은 수준에있을 것입니다.

이 각각의 주요 구성 요소에는 다음 JavaScript 파일이 포함됩니다 (위의 예제 데모에서 이러한 파일을 가져올 수 있으며 3.js 예제 다운로드에서도 찾을 수 있습니다) :

3.min.js - 우리의 3.js 프레임 워크 DeviceorientationControls.js - 위에서 논의한 장치 방향을 제공하는 3.js 플러그인입니다. 그것은 우리의 장치의 움직임을 충족시키기 위해 카메라를 움직입니다.

OrbitControls.js - 장치 방향 이벤트에 액세스 할 수있는 장치가없는 경우 마우스를 사용하여 카메라를 이동할 수있는 백업 컨트롤러입니다. stereoeffect.js - 화면을 입체 이미지로 나누는 3.js 효과는 VR에서와 같이 각 눈마다 약간 다르게 각도로 나뉩니다. 이것은 우리가 복잡한 일을 할 필요없이 실제 VR 분할 화면을 만듭니다.

장치 방향 장치 방향 제어를 활성화하는 코드는 다음과 같습니다.

Deviceorientation 이벤트 리스너는 호환 장치가있을 때 알파, 베타 및 감마 값을 제공합니다. 알파 값이없는 경우 장치 방향을 사용하여 대신 궤도 컨트롤을 사용할 수 있도록 컨트롤이 변경되지 않습니다. 이 알파 값이있는 경우 장치 방향 컨트롤을 생성하고 제어 할 카메라 변수를 제공합니다. 또한 사용자가 화면을 탭하면 장면을 전체 화면으로 설정하도록 설정했습니다 (VR에있을 때 브라우저의 주소 표시 줄을 쳐다보고 싶지 않습니다). 궤도 컨트롤

해당 알파 값이없고 장치의 장치 방향 이벤트에 액세스 할 수없는 경우이 기술은 마우스로 드래그하여 카메라를 이동하는 컨트롤을 제공합니다. 이것은 그렇게 보인다 :
• 위의 코드에서 혼란 스러울 수있는 주요 사항은 Nopan과 Nozoom입니다. 기본적으로, 우리는 마우스를 통해 현장 주변에서 육체적으로 움직이고 싶지 않으며 확대 또는 축소를 원하지 않습니다. 우리는 주변을 둘러보고 싶어합니다. . 스테레오 효과
스테레오 효과를 사용하려면 다음과 같이 정의합니다.
• 그런 다음 창의 크기를 내면 크기를 업데이트합니다.
각 requestAnimationFrame 내에서 우리는 효과를 통해 장면을 설정합니다.
• 이것이 VR을 달성하는 장치 방향 스타일의 기본입니다. Google Cardboard를 사용하여 멋지고 간단한 구현에 효과적 일 수 있지만 Oculus Rift에는 효과적이지 않습니다. 다음 접근법은 리프트에 훨씬 낫습니다.
JavaScript, Three.js 및 Webvr Oculus Rift와 같은 VR 헤드셋 방향에 액세스하고 싶으십니까? WebVR은 현재 그렇게하는 방법입니다. WebVR은 Oculus Rift 및 Google Cardboard와 같은 가상 현실 장치의 기능에 대한 액세스를 제공하는 초기 및 실험 JavaScript API입니다. 현재 Firefox Nightly와 모바일 크롬 및 크롬의 실험 빌드에서 사용할 수 있습니다. 명심해야 할 한 가지는 사양이 여전히 초안에 있고 변경 될 수 있다는 것입니다. 실험을 실험하지만 시간이 지남에 따라 조정해야 할 수도 있음을 알고 있습니다. . 전체적으로 WebVR API는 다음을 통해 VR 장치 정보에 대한 액세스를 제공합니다.

나는 여기에서 많은 기술적 인 세부 사항을 다루지 않을 것입니다 (WebVR 편집자 초안을 자세히 알아 보려면 미래의 itepoint 기사에서 자세히 설명하겠습니다!). 내가 자세히 설명하지 않는 이유는 API를 구현하는 훨씬 쉬운 방법이 있기 때문입니다. WebVR API를 구현하는이 더 쉬운 방법은 Boris SMUS의 WebVR 보일러 플레이트를 사용하는 것입니다. WebVR을 구현하고 다른 장치에 대한 경험을 우아하게 저하시키는 수준의 기준 기능을 제공합니다. 현재 내가 본 가장 좋은 웹 VR 구현입니다. 웹에 대한 VR 경험을 구축하려는 경우 현재 시작하기에 가장 좋은 곳입니다! 이 방법을 사용하기 위해 github에서 webvr 보일러 플레이트를 다운로드하십시오. 당신은 index.html 편집 및 설정의 모든 파일을 사용하는 데 집중하거나 특정 플러그인을 자신의 프로젝트에 처음부터 구현할 수 있습니다. 각 구현의 차이점을 비교하려면 VR의 Twitter 스트림을 Three.js 및 Node 예제로 VR의 WebVR 전원 트위터 스트림으로 마이그레이션했습니다. 이 프로젝트를 처음부터 자체적으로 포함 시키려면 원하는 파일은 다음과 같습니다.

Three.Min.js - 우리의 Three.JS Framework of Court vrcontrols.js - webvr을 통해 VR 컨트롤을위한 3.js 플러그인 (이것은 보일러 플레이트 프로젝트의 bower_components/examples/examples/examples/js/controls/vrcontrols.js에서 찾을 수 있습니다)
• vreffect.js - Oculus Rift의 장면을 표시하는 VR 효과 자체를위한 3.js 플러그인 (이것은 BoilerPlate 프로젝트의 bower_components/avese/examples/exess/effects/vreffect.js에서 찾을 수 있습니다)
webvr-polyfill.js-아직 WebVR을 완전히 지원하지 않는 브라우저 용 폴리 필드입니다 (이것은 Github 및 Boor_components/webvr-polyfill/build/webvr-polyfill.js에서 찾을 수 있습니다. 코드) <..> webvr-manager.js-이것은 vr 모드를 입력하고 종료하는 방법을 제공하는 것을 포함하여 모든 것을 관리하는 보일러 플레이트 코드의 일부입니다 (build/webvr-manager.js에서 찾을 수 있습니다) .
• 구현하려면 장치 방향 방법에서 몇 가지 조정이 필요합니다. 이 방법을 시도하려는 사람들을위한 개요는 다음과 같습니다.
• 컨트롤 VR 컨트롤은 설정하기가 매우 간단합니다. 이전에 사용한 컨트롤 변수에 새 VRControls 객체를 할당 할 수 있습니다. 보일러 플레이트는 이제 VR 기능이없는 브라우저를 관리해야하므로 궤도 제어 및 장치 방향 제어는 필요하지 않아야합니다. 이것은 당신의 장면이 여전히 Google Cardboard에서도 잘 작동해야한다는 것을 의미합니다!
• vr 효과
그 효과는 stereoefect와 마찬가지로 구현과 매우 유사합니다. 그 효과를 새로운 Vreffect로 바꾸십시오 :
• 그러나 우리는이 방법에서 그 효과를 통해 렌더링하지 않습니다. 대신, 우리는 VR 관리자를 통해 렌더링합니다 VR 관리자
VR 관리자는 모든 VR이 입력/종료 등을 처리합니다. 그래서 이것이 우리의 장면이 마침내 렌더링되는 곳입니다. 우리는 처음에 다음을 통해 그것을 설정했습니다 VR 관리자는 사용자가 호환 브라우저에있는 경우 VR 모드를 입력 할 수있는 버튼을 제공하거나 브라우저가 VR을 사용할 수없는 경우 전체 화면 (전체 화면이 모바일에 원하는 것)을 제공합니다. HideButton 매개 변수는 해당 버튼을 숨길 것인지 여부를 말합니다. 우리는 확실히 그것을 숨기고 싶지 않습니다!

우리의 렌더 호출은 그렇게 보이며, Three.js의 update () 함수에서 나오는 타임 스탬프 변수를 사용합니다.

이 모든 상태에서 장치에 따라 다양한 형식으로 변환되는 작동하는 VR 구현이 있어야합니다.

renderer.getSize ()가 오류를 반환합니까? 이것은 몇 시간 동안 나를 화나게했지만 이것을 고치기 위해해야 ​​할 일은 - 3.js를 업데이트합니다!

. webvr 보일러 플레이트가 어떻게 보이는지 여기 내 트위터 예제의보기가 VR을 지원하는 브라우저에서 어떻게 보이는지 :

여기에 VR 아이콘을 클릭 할 때 나타나는 Oculus Rift보기 내에 있습니다.

이것은 스마트 폰에서보기의 모습이며, 장치 방향을 사용하면 여전히 장면을 둘러 볼 수 있으며 분할 화면이 없습니다. 내용에 대한 대응적인 견해 :

모바일에서 VR 아이콘을 클릭하면 Google Cardboard 스타일 장치에 대한 전체 화면보기가 나타납니다. CSS 및 WebVr Mozilla는 VR 시청 기능을 Firefox Nightly 버전의 브라우저에 도입하는 것을 목표로하고 있지만 초기에는 초기입니다! Mac과 Oculus 설정에서 일하는 것이 운이 좋지 않았습니다. Firefox의 Vladimir Vukićević가 언급 한 컨벤션의 종류에는 CSS 3D 변환을 VR 전체 화면 모드와 통합하는 것이 포함됩니다. Vladimir의 블로그 게시물의 예를 들어, 그는 변환 스타일의 요소 : Preserve-3D가 두 뷰 포인트에서 두 번 렌더링되어 VR :
라고 말합니다. VR 및 CSS를 사용하는 데모를 알고 있다면 알려주십시오! 나는 어떤 추적을 추적 할 수 없었습니다. 웹의 HTML과 CSS를 VR로 가져 오는 아이디어는 의심 할 여지없이 정말 흥미로운 개념입니다. 우리 모두가 VR 장치로 천천히 전환함에 따라 웹이 어느 시점에서 VR 영역에 들어가는 것은 불가피합니다!

.

결론 기술의 세계는 우리의 기술 능력이 우리의 야생 열망과 일치함에 따라 향후 몇 년 동안 가상 현실을 느리게 받아 들일 것입니다! VR 채택과 그 가치를 이끌어 낼 수있는 한 가지는 콘텐츠입니다. VR 사용자가 즐길 수 있도록 VR 컨텐츠를 가져와야합니다! 웹을 통해보다 더 좋고 쉬운 방법은 무엇입니까? 이 코드를 사용하여 급락하여 VR 데모를 구축하면 댓글에 공유하거나 트위터 (@ThatPatrickGuy)에서 나와 연락하십시오. 나는 Oculus Rift 또는 Google Cardboard를 착용하고 스핀을 위해 가져 가고 싶습니다!

. 나는 빠른 참조를 원하는 사람들을 위해 JavaScript를 통해 VR 및 AR에 큐 레이트 된 링크 세트가 있습니다. Dev Diner로 가서이 기사에 언급 된 두 링크, 기타 훌륭한 itepoint 기사 등으로 가득 찬 JavaScript Developer Guide와 함께 Dev Diner VR 및 AR을 확인하십시오. 내가 나열하지 않은 다른 훌륭한 리소스가 있다면 - 알려주세요!

웹에서 VR을 구축하는 것에 대해 자주 묻는 질문입니다 웹에서 VR을 구축하기위한 전제 조건은 무엇입니까?
웹에서 VR을 구축하기 위해서는 HTML, CSS 및 JavaScript에 대한 기본적인 이해가 필요합니다. 또한 2D 및 3D 그래픽을 렌더링하기위한 JavaScript API 인 WebGL에 익숙해야합니다. 3D 그래픽을 만들기위한 인기있는 JavaScript 라이브러리 인 Three.JS에 대한 지식도 유리합니다. 또한 VR 경험을 테스트하기위한 VR 헤드셋이 있어야합니다.

JavaScript를 사용하여 VR 경험을 어떻게 만들 수 있습니까?

JavaScript와 함께 3.js 및 a-frame과 같은 라이브러리와 함께 할 수 있습니다. VR 경험을 만드는 데 사용됩니다. Three.JS는 WebGL과의 작업 프로세스를 단순화하는 반면 A- 프레임을 사용하면 HTML 유사 구문을 사용하여 VR 장면을 구축 할 수 있습니다. 이 도구를 사용하여 3D 객체를 만들고, 텍스처와 조명을 추가하고, 카메라 움직임을 제어 할 수 있습니다.

웹의 WebVR은 무엇이며 웹에서 VR과 어떤 관련이 있습니까?

WebVR은 JavaScript API입니다. 이는 웹 브라우저에서 Oculus Rift, HTC Vive 및 Google Cardboard와 같은 다양한 가상 현실 장치를 지원합니다. 이를 통해 개발자는 VR 장치와 호환 브라우저를 가진 사람이 액세스 할 수있는 웹에서 몰입 형 VR 경험을 만들 수 있습니다.

웹에서 VR을 구축하기 위해 JavaScript 외에 다른 프로그래밍 언어를 사용할 수 있습니까?

JavaScript는 VR을 포함한 웹 개발의 주요 언어입니다. 그러나 TypeScript 또는 CoffeeScript와 같은 JavaScript로 컴파일하는 언어를 사용할 수 있습니다. 또한 WebAssembly는 브라우저에서 근처 속도로 C와 같은 언어로 작성된 코드를 실행할 수 있습니다.

웹에 대한 VR 경험을 최적화 할 수 있습니까?

웹에는 대기 시간을 줄이고 메모리를 효율적으로 관리하며 렌더링을 최적화해야합니다. 비동기 적재, 텍스처 압축 및 LOD (Detail)와 같은 기술을 사용하여 성능을 향상시킬 수 있습니다. 또한 사용자의 하드웨어 및 네트워크 조건의 한계를 고려하십시오.

VR 장치가없는 사용자가 VR 경험에 액세스 할 수 있도록하려면 VR 장치가없는 사용자를위한 폴백을 만들 수 있습니다. 예를 들어, Devicorientation API를 사용하여 사용자가 모바일 장치를 이동하여 VR 장면을 탐색 할 수 있습니다. 또한 사용자가 마우스 나 터치로 탐색 할 수있는 360도보기를 제공 할 수 있습니다.

웹에서 VR 경험을 어떻게 테스트 할 수 있습니까?

A를 사용하여 VR 경험을 테스트 할 수 있습니다. VR 헤드셋. 헤드셋이없는 경우 Chrome 및 Firefox에는 WebVR 에뮬레이터 확장을 사용할 수 있습니다. 이 도구는 WebVR API를 시뮬레이션하고 VR 장면의 3D 뷰를 제공합니다.

VR 작품을 3.js에서 A- 프레임으로 내보내는 방법은 무엇입니까? GLTF Expler를 사용할 수 있습니다. 3D 모델에서 3D 모델을 A- 프레임을 읽을 수있는 형식으로 내보내기 위해. GLTF (GL Transmission Format)는 3D 장면 및 모델의 표준 파일 형식입니다. 웹에서 VR을 구축 할 때 직면 할 수있는 몇 가지 과제는 무엇입니까?
몇 가지 문제에는 3D 환경에서 사용자 입력 처리, 성능 최적화 및 다양한 VR 장치 및 브라우저의 호환성 보장이 포함됩니다. 또한 현실적인 3D 그래픽 및 애니메이션을 만드는 것은 복잡 할 수 있습니다.

웹에서 VR을 구축하는 것에 대해 자세히 알아볼 수있는 곳은 어디입니까?

온라인에서 사용할 수있는 많은 리소스가 있습니다. Mozilla의 WebVR 문서는 훌륭한 출발점입니다. 또한 Three.JS 및 A- 프레임 웹 사이트에서 자습서 및 예제를 확인할 수도 있습니다. 또한 질문을하고 작업을 공유 할 수있는 수많은 온라인 커뮤니티가 있습니다.

위 내용은 오늘 웹에서 VR을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!