用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中文网其他相关文章！