用JavaScript和Google紙板過濾現實

鑰匙要點

• 利用JavaScript和HTML5，該項目通過Google Cardboard將移動瀏覽器轉換為增強現實（AR）查看器，利用手機的攝像頭來覆蓋現實世界環境上的過濾器。
>實現涉及通過手機的攝像機捕獲視頻輸入，應用各種視覺過濾器（例如，灰度，棕褐色，sepia，epia，像素化的，倒數顏色），並在立體鏡面視圖中顯示了修改後的輸出，以獲得類似VR的體驗。
• >
。
• 技術設置包括使用三庫庫來處理3D渲染和立體效果，以確保適合VR耳機中每隻眼睛的雙顯示器。
>
• >一個值得注意的功能是基於用戶的凝視方向的過濾器的動態切換，特別是在低頭時，由deviceorientationEvent促進。
由於Chrome之類的瀏覽器中的安全更新，運行AR體驗需要HTTPS連接，突出了安全上下文對於訪問相機功能的重要性。
• 該項目強調了將網絡技術和VR硬件組合起來的潛力，直接從網絡瀏覽器中創建沉浸式AR體驗，為創新的教育，娛樂和商業應用鋪平了道路。
• >在移動瀏覽器中運行虛擬現實的能力是增強和令人興奮的能力。 Google Cardboard和其他類似的VR設備使其令人難以置信的簡單，只需將手機放入持有器中即可！我之前介紹了將VR帶到網絡上的Google Cardboard和Thrive.js，在那裡我討論了構建吸引Web數據的VR環境的基礎知識。人們真的很喜歡這篇文章（我真的很喜歡構建該演示），所以我認為我會以不同的想法擴展它。與其引入網絡API，為什麼不帶您的手機相機並將其變成增強的現實體驗？ 在本文中，我將探討如何使用HTML5和JavaScript刪除相機數據並將其顯示回。我們將通過立體視覺效果來完成所有這些操作，為Google紙板和其他VR設備創造增強的現實體驗。我們將在相機流中應用一些不同的過濾器 - 卡通灰度過濾器，棕褐色膜樣式過濾器，像素化過濾器（我的最愛）和倒色過濾器。
>如果您是使用HTML5，Canvas Tag和JavaScript過濾圖像的新手，那麼我在Learnable上有一個關於該主題的整個課程，稱為JavaScript In Motion In Motion In Motion！我將以您了解畫布和視頻標籤以及如何將視頻流式傳輸到畫布標籤的假設，以此來接近這篇文章。或假設您有足夠的信心，可以隨身攜帶！

>

演示代碼

如果您渴望直接進入代碼並嘗試一下，則可以在GitHub上找到它。

>是否想在行動中嘗試？我在這里托管了一個跑步版本：真實過濾器。

>

>注意：Chrome處理相機輸入的最新變化要求通過HTTPS運行該頁面才能正常工作！ 這將如何工作

>我們將從以前的Google Cardboard文章中進行相同的初始設置，即通過立體效果展示的三個.js場景。這種效果使我們可以為每隻眼睛顯示一個顯示，使事物在VR中看起來非常好。但是，我們沒有從上一篇文章中浮動粒子，而是刪除大多數元素，並將一個簡單的三個js網眼放在播放我們的相機供稿的相機前。

我們的代碼解釋了

>查看我們的變量聲明，對於那些經歷過以前的演示的人來說，這裡的大多數變量看起來都會熟悉。準備三個。 JS場景，相機，渲染器，我們的畫布輸出的元素，放置該元素的容器以及存儲我們立體鏡的變量的變量都是相同的。

>

>我們與相機提要相關的三個新變量是視頻，畫布和上下文。

<span>var scene,
</span>      camera<span>, 
</span>      renderer<span>,
</span>      element<span>,
</span>      container<span>,
</span>      effect<span>,</span>

>視頻 - 我們的實際HTML5

>

video<span>,
</span>      canvas<span>,
</span>      context<span>,</span>

畫布 - 一種虛擬帆布元素，它將具有我們視頻元素的內容。我們將在此畫布的視頻數據中閱讀，然後將其內容添加到我們的三個js場景之前。

上下文 - 我們用來對其執行大多數功能的畫布‘2D上下文。 >
我們還有其他一些與我們的濾波器功能相關的變量。
• >
主題 - 我們過濾器的名稱的數組。

>

currestheme - 我們當前在主題數組中查看的索引。 >

尋找attrock-無論我們是否看過地面（這很快就會變得更有意義）。

themes <span>= ['blackandwhite', 'sepia', 'arcade', 'inverse'],
</span>      currentTheme <span>= 0,
</span>      lookingAtGround <span>= false;</span>

• 我們從init（）函數開始設置場景，相機等，如以前：
這次我們沒有通過設備方向事件進行任何相機運動功能。與VR體驗相比，我們不需要在此三個場景中更改實際的相機位置。我們將場景保持在同一位置 - 當用戶環顧四周時，相機提要將移動。
• >我們從上一個示例中保留的一個偵聽器是一個事件偵聽器，如果我們點擊場景，可以全屏進行全屏。這從我們的視圖中刪除了Chrome地址欄。

用於deviceerientationEvent

>在此演示中，對於deviceorientationevent有了新的用途。我們將其設置為關注設備方向的更改，並將其用作切換過濾器的觸發器。我們實際上沒有任何物理控件來觸發事件，因此我們可以通過用戶尋找的位置來控制事物。特別是，我們任何時候都會更改過濾器。

<span>var scene,
</span>      camera<span>, 
</span>      renderer<span>,
</span>      element<span>,
</span>      container<span>,
</span>      effect<span>,</span>

在此代碼中，我們注意evt.gamma是否在-1和1之間。如果是，他們正在看地面。這是一個非常精確的地麵點，如果您發現它太小且難以觸發，則可以將範圍增加到-1.5至1.5…等。

>當他們在此範圍內查看時，當fookatground為false時，我們運行主題切換器代碼。這將CurrentTheme調整為我們主題數組的下一個索引編號。我們將LookingAtground設置為True，並在4秒後將其設置回。這樣可以確保我們最多只能每四秒更改一次過濾器。

>

>檢索我們的主相機供稿

為了過濾我們周圍的世界，我們需要訪問智能手機上的“環境”面向攝像頭。我們首先創建一個

以上是用JavaScript和Google紙板過濾現實的詳細內容。更多資訊請關注PHP中文網其他相關文章！