VR보기로 웹 전체에 가상 현실을 포함시킵니다-JS 튜토리얼-php.cn

VR보기로 웹 전체에 가상 현실을 포함시킵니다 키 테이크 아웃

웹에 대한 가상 현실 경험의 개발은 빠르게 발전하고 있으며 Google의 임베드 가능한 VR 뷰는 최근 추가되었습니다. VR View는 개발자가 360도 가상 현실 이미지와 비디오를 데스크탑과 모바일의 웹 사이트에 포함시킬 수 있습니다. Google의 VR보기는 최신 버전의 Chrome, Safari, Firefox, IE 11 및 Edge의 데스크탑 및 모바일과 호환됩니다. 데스크탑에서 VR 경험은 파노라마 경험으로 마우스와 함께보기가 조작됩니다. Google Cardboard를 사용하여 True VR보기를 통해 향상 될 수 있습니다.

웹 사이트에 VR보기를 포함시키는 것은 Google의 호스팅 된 VR보기를 사용하거나 자신의 버전을 호스팅하는 두 가지 방식으로 수행 할 수 있습니다. VR 뷰와 이미지가 다른 서버에서 호스팅 될 때 iOS 사파리에 문제가 있기 때문에 자신의 버전을 호스팅하는 것은 현재 더 신뢰할 수 있습니다. Google의 VR보기는 웹에 360 VR 컨텐츠를 쉽게 만들 수있는 방법입니다. YouTube 비디오를 포함시키는 것과 유사한 파노라마 컨텐츠를 빠르게 포함시킬 수 있습니다. 그러나 모든 플랫폼에서보다 신뢰할 수있는 경험을 위해 VR보기를 직접 호스팅하는 것이 좋습니다.

웹 개발자가 웹에 대한 가상 현실 경험을 구축 할 수있는 방법은 빠르고 흥미 진진한 속도로 성장하고 있습니다! 나는 이전에 작년에 웹에서 VR을 구축하는 방법을 다루었 고 그 이후로 이미 상당히 발전했습니다. 2016 년에 등장한 웹에 대한 가상 현실 경험을 구축하는 데 몇 가지 옵션이 있습니다. 지난 2 주 동안 우리는 오픈 소스 확장 가능한 VR 웹 프레임 워크 인 A- 프레임을 탐색했으며 Primrose를 사용하여 VR 내에서 VR을 구축했습니다. 지난 달 Google은 웹에 더 많은 VR을 가져 오도록 설정된 또 다른 흥미로운 옵션을 발표했습니다. vr views 란 무엇입니까? "VR Views"는 개발자가 360도 가상 현실 이미지와 비디오를 데스크탑 및 모바일의 웹 사이트에 포함시킬 수있는 기능을 제공합니다. VR보기는 Android 및 iOS의 기본 앱에 포함될 수도 있습니다. 이 기사에서는 기존 웹 사이트에 360 파노라마 이미지를 포함시키는 것이 얼마나 간단한 지 탐색 할 것입니다. 장치 호환성

Google의 VR보기는 데스크탑과 모바일에서 다음 브라우저의 최신 버전에서 작동합니다.

사파리 Windows, Mac OS X 및 Linux의 Firefox 즉 11 및 창에서 가장자리.

데스크탑 버전을 사용하면 "가상 현실"경험은 대부분 파노라마 경험입니다. 그들은이 버전의 경험을“마법의 창”이라고 부릅니다. 그것은 몇 년 전에 볼 수있는 데스크탑 QuickTime VR Panorama 경험과 유사합니다. 그러나 오늘 Google의 VR보기는 타사 플러그인이 아닌 JavaScript를 사용하여 수행되며 Google Cardboard를 사용하여 실제 VR보기를 통해 향상 될 수 있습니다. 파노라마 사진을 찍는 Google에는 Android에서 360도 파노라마 사진을 찍을 수있는 "Cardboard Camera"앱이 있습니다. iOS의 경우 360 장의 사진을 찍을 수있는 Optonaut라는 앱이 있습니다. Optonaut 사진이 다른 곳에서 얼마나 쉬운 지 잘 모르겠습니다. iOS 기기가 있고이를 위해 진행하면 Google Cardboard 카메라를 사용하면 화면의 지침에 따라 한 곳에 서서 원으로 이동하여 360 사진을 찍을 수 있습니다. 가장 효과적인 장면은 야외에서 촬영되는 장면이며, 넓은 열린 공간이 있으며 이미지의 맨 아래 또는 상단에 너무 디테일이 아닙니다. 작은 방의 사진을 찍는 경우 이미지가 올바르게 보이기 전에 이미지를 조정해야 할 수도 있습니다 (아래에서 수행하는 방법을 살펴 보겠습니다). 카메라로 사진을 찍을 때는/sdcard/dcim/cardboardcamera에서 휴대 전화에서 360 사진을 찾아야합니다. 당신이 당신의 개발을 수행 할 컴퓨터에 그것을 복사하십시오.

이미지 준비 장면에 많은 양의 하늘과 땅이 없다면, 그 영역에서 이미지가 이상하게 표시 될 가능성이 높습니다. 때로는 특히 실내 샷의 경우 피할 수 없습니다. 우리는 Sitepoint Office (Angela!)의 사진을 사용했는데,

는 바닥에 피할 수없는 세부 사항이 많이있는 이미지의 바닥이 다음과 같습니다.

이미지의 상단과 하단에 너무 많은 세부 사항을 피하려면 이미지 위와 아래에 공간을 추가하여 물건을 깔끔하게 보이게 할 수 있습니다. 너무 많이 긁히지 않는 멋진 상단 및 하단 영역을 제공하려고 시도 할 수있는 많은 기술이 있습니다. 지금까지 내가 가장 좋아하는 것은 상단과 하단에 흐릿한 반전 이미지를 추가하는 것입니다.

. 이 방법을 시도하려면 Photoshop에서 2048 x 1024 이미지를 만들고 파노라마 이미지 3 개를 붙여 넣으십시오.

캔버스를 채우도록 세 가지를 모두 늘리고 edit> transform>를 사용하여 상단 및 하단 이미지를 뒤집습니다.

처럼 보일 것입니다 : VR보기로 웹 전체에 가상 현실을 포함시킵니다

상단과 하단 이미지를 복제 한 다음 필터> Blur> 가우시안 블러

: 를 사용하여 중복을 흐리게합니다. 반경 값에 대해 다른 값을 시험해보십시오. 일부 장면은 더 흐릿하게 보이고 그 반대도 마찬가지입니다. 흐릿한 층 각각을 뻗어 이미지 너머로 확장되도록 (가장자리가 사라지고 우리는 캔버스의 가장자리에 사라지기를 원하지 않기 때문에) :

이미지에 대한 최종 결과는 그렇게 보일 것입니다 :

Photoshop 기술이 있다면 이미지의 바닥과 상단을 덜 눈에 띄게 만드는 다른 방법을 생각해 낼 수 있습니다. 일부 장면은 다른 장면보다 쉽고 덜 분명 할 것입니다! VR보기로 웹 전체에 가상 현실을 포함시킵니다

우리의 이미지를 포함시킨다 VR보기에 이미지를 포함시키는 두 가지 옵션이 있습니다. Google의 호스팅 된 VR보기를 포함하거나 자체 버전을 호스팅 할 수 있습니다. 현재 동일한 서버에서 자체 버전을 호스팅하는 것이 더 신뢰할 수 있습니다. VR보기와 이미지가 다른 서버에서 호스팅 될 때 iOS 사파리에서는 상황이 제대로 작동하지 않습니다. 이미지가있는 서버는 Google의 호스팅 된 VR보기를 사용하는 경우 CORS (Cross-Origin Resource Sharing)를 허용 할 수 있어야합니다. Google의 호스팅 된 VR보기 VR보기의 빠른 테스트를 위해 웹 페이지에 다음을 포함시킬 수 있습니다.

Google의 샘플 코드는 이와 같이 보입니다.

기본적으로, 당신은 산호초에서 물고기의 사랑스러운 360 파노라마 전망을 볼 수 있습니다! iframe의 URL에서 이미지 = 매개 변수를 변경하면 파노라마를 자신의 이미지로 설정할 수 있습니다. 이미지를 호스팅하는 데 사용하는 서버가 Cors와 함께 작동하는 한 작동해야합니다. VR보기로 웹 전체에 가상 현실을 포함시킵니다

당신은 거기에 is_stereo = true 속성을 볼 수 있습니다 - 이것은 이미지가 하나의 이미지에 파노라마의 복제본으로 설정된 시점입니다. 일을 단순하게 유지하기 위해 맞춤형 이미지 예제에서 그 경로를 내려 가지 않았습니다! 이에 대한 자세한 내용은 VR View의 Google 문서를 참조하십시오. vr을 주최하는 Google의 호스팅 된 VR보기는 매우 편리하며 유튜브 비디오를 포함시키는 것만 큼 간단합니다. 그러나 많은 플랫폼에서 많은 청중을 위해 이것을 사용하려면 VR View를 직접 호스팅하려고합니다. 그렇지 않으면 이미지는 iOS 사파리에 잘못된 방향 버그가 있습니다. 바라건대, 그것은 곧 해결 될 것이며 자조 주최가 더 이상 필요하지 않을 것입니다! 셀프 호스팅은 설정하기가 어렵지 않습니다. Google의 VR View Github에서 코드를 다운로드하여 공개 액세스로 어딘가에 호스팅하십시오. 서버의 "vrview"라는 폴더 내에 보관하면 //yourdomain.com/vrview/?image=examples/coral.jpg&is_stereo=true에서 액세스 할 수 있습니다. 이를 위해 직접 호스팅을 설정 한 경우 (또는 도메인 이름이 직접 가리키는 경우) /vrview 비트를 피할 수 있습니다.

. 다른 이미지를 추가하려면 서버 내에 선호하는 곳 (예 : 이미지/yourimage.jpg)에 포함 된 다음 위의 URL을 변경 하여이 새로운 이미지를 찾으십시오 (예 : //yourdomain.com/vrview/?image = images/yourimage.jpg).

자신의 이미지로 빨리 테스트하고 자신의 호스팅 준비가 없다면 Github 페이지를 사용하는 것이 좋습니다. github 페이지에서 VR보기를 호스팅합니다 Github 페이지를 사용하여 Github 계정에서 호스팅하여 VR보기를 다운로드하고 호스팅하지 않아도됩니다. 시작하려면 Google의 VR보기 Github Repo로 이동하여 "Fork"를 클릭하십시오.

그런 다음 리포의 포크 내부에서 CNAME 파일을 찾아 클릭하십시오.

이 파일은 도메인 이름을 GitHub 페이지에 할당합니다. 도메인 이름을 사용할 준비가되어 있고이 작업을 수행하도록 설정하려면 Github 페이지가있는 사용자 정의 도메인 사용에 대한 Github 가이드를 읽으십시오. 그렇지 않으면 오른쪽의 쓰레기통 아이콘을 클릭하여 포크 버전의 레포 에서이 파일을 제거하십시오. 대신 일반적인 http://you.github.io/ 주소를 사용할 수 있습니다.

<:> 그 변화를 커밋하십시오 :

마지막으로, VR보기의 포크 버전에서 새 지점을 만들어 “gh-pages” 이제 http://you.github.io/vrview/?image=examples/coral.jpg를 방문하면 VR보기의 자신만의 작업 버전이 있어야합니다! . 여기에서 위의 자조 주최와 마찬가지로 원하는 곳에 자신의 이미지를 추가 할 수 있습니다. 이 경우 해당 이미지를 브랜치에 직접 추가하거나 mas 🎜> 거기에서 분기. GitHub를 처음 사용하는 경우 명령 줄의 많은 혼란을 피하고 이미지 폴더가 열리는 동안 이미지를 브라우저 창으로 드래그 할 수 있습니다. 일단 이미지를 업데이트 한 후에는 해당 이미지를 대상으로 URL을 변경하고 (예 : http://you.github.io/vrview/?image=yourimage.jpg) 영광스러운 360 파노라마에서 볼 수 있어야합니다! 행동 중! 다음은 Sitepoint Office에서 일하는 것과 같은 360 번의 몰래 엿볼 수 있습니다. 마지막으로 모든 Sitepoint 직원은 여가 시간에 사실상 사무실을 다시 방문 할 수 있습니다! 오른쪽 하단의 전체 화면 아이콘을 클릭하여 전체 화면에서 볼 수 있습니다. 스마트 폰에 있다면 옆에 VR 아이콘이 있습니다. Google Cardboard 헤드셋이 있고 즐기는 경우 클릭하십시오! 당신은 내 VR보기 github 페이지에서 자체적으로 VR 뷰를 볼 수 있습니다! 결론 Google의 VR보기는 웹에 360 VR 컨텐츠를 생성하기위한 또 다른 간단한 옵션을 추가하며 조립하기가 매우 쉽습니다! 자신의 360 조회를 구성한다면, 나는 당신이 만든 것을보고 싶습니다! 아래 의견에 알려 주거나 @ThatPatrickGuy의 Twitter에서 저와 연락하십시오. VR 뷰를 사용하여 웹 전체에 가상 현실을 포함시키는 것에 대해 자주 묻는 질문 내 웹 사이트에 VR보기를 어떻게 포함 할 수 있습니까? 웹 사이트에 VR보기를 포함시키는 것은 간단한 프로세스입니다. 먼저 360도 이미지 또는 비디오 파일이 필요합니다. 그런 다음 웹 사이트에 360도 콘텐츠를 포함시킬 수있는 JavaScript API 인 웹에 Google의 VR보기를 사용할 수 있습니다. HTML 파일에 VR보기 스크립트를 포함시킨 다음 'AddVrview'기능을 사용하여 표시하려는 이미지 또는 비디오 파일을 지정하면됩니다. 초기 카메라 각도 또는 이미지 해상도와 같은 다른 매개 변수를 설정하여 VR 뷰를 사용자 정의 할 수도 있습니다.

VR보기에 어떤 유형의 파일을 사용할 수 있습니까?

VR 뷰는 모두 지원합니다. 이미지 및 비디오 파일. 이미지의 경우 JPEG 또는 PNG 파일을 사용할 수 있으며 비디오의 경우 MP4 파일을 사용할 수 있습니다. 그러나 파일은 360도 형식이어야한다는 점에 유의해야합니다. 즉, 장면의 전체 360도보기를 포함해야합니다. 360도 카메라 또는 3D 렌더링 소프트웨어를 사용하여 이러한 파일을 만들 수 있습니다. 모바일 장치에서 VR 뷰를 사용할 수 있습니까?

예, VR보기는 모바일 장치와 완전히 호환됩니다. 실제로 사용자는 장치를 이동하여 360도 콘텐츠를 탐색 할 수 있기 때문에 모바일 장치에 대한 몰입 형 경험을 제공합니다. 또한 장치에 자이로 스코프가있는 경우 VR 뷰는 장치의 방향에 응답하여보다 현실적인 경험을 제공 할 수 있습니다.

VR 뷰의 모양을 사용자 정의 할 수 있습니까?

'addvrview'함수에서 다른 매개 변수를 설정하여 VR보기의 모양을 사용자 정의하십시오. 예를 들어, 초기 카메라 각도, 이미지 해상도 또는 VR보기의 크기를 설정할 수 있습니다. VR 모드를 활성화하거나 비활성화 할 수 있습니다. 이는 사용자가 VR 헤드셋으로 컨텐츠를 볼 수 있습니다.

VR 헤드셋과 함께 VR 뷰를 사용할 수 있습니까?

예, VR보기는 호환됩니다. VR 헤드셋. VR 모드가 활성화되면 사용자는 360도 컨텐츠를 입체 모드에서 볼 수 있으며, 이는보다 몰입 형 경험을 제공합니다. 그들은 또한 머리를 움직여 콘텐츠를 탐색 할 수 있습니다.

VR 뷰를 사용하기위한 기술적 요구 사항은 무엇입니까?

VR 뷰를 사용하려면 VR보기에 서비스를 제공 할 수있는 웹 서버가 필요합니다. 스크립트 및 360도 컨텐츠. 컨텐츠는 360도 형식이어야하며 URL을 통해 액세스 할 수 있어야합니다. 또한 웹 브라우저는 3D 그래픽을 렌더링하기위한 JavaScript API 인 WebGL을 지원해야합니다.

웹 애플리케이션에서 VR보기를 사용할 수 있습니까?

예, VR 뷰를 A에서 사용할 수 있습니다. 웹 응용 프로그램. 응용 프로그램의 HTML 파일에 VR보기 스크립트를 포함시킨 다음 'addvrview'기능을 사용하여 360도 컨텐츠를 표시해야합니다. API의 기능 및 이벤트를 사용하여 프로그래밍 방식으로 VR 뷰와 상호 작용할 수도 있습니다.

VR 뷰를 위해 360도 컨텐츠를 어떻게 만들 수 있습니까?