by Evaristo Caraballo

通过Evaristo Caraballo

如果您是JavaScript开发人员，为什么要进行增强现实-以及如何开始 (Why you should do Augmented Reality if you are a JavaScript developer — and how to start)

If you are a JavaScript coder who is still late to making up a definitive list of resolutions for 2019, let me give you a hand: Start figuring out how to get into Augmented Reality (AR).

如果您是一位JavaScript编码人员，但仍迟迟无法确定2019年的分辨率，请让我帮助您：开始弄清楚如何进入增强现实(AR)。

The Augmented/Mixed/Virtual Reality (AR/MR/VR) combo has enjoyed frenetic growth since 2016, coming from a marginal market value of bit more than $6 Billion to one that might reach the $210 Billion in sales (including hardware) by 2022. Of all, Augmented Reality is the one experiencing steady growth.

自2016年以来，增强/混合/虚拟现实(AR / MR / VR)组合一直获得疯狂增长，其边际市场价值略高于60亿美元，到2022年的销售额(包括硬件)可能达到2100亿美元总而言之，增强现实是经历稳定增长的领域。

At first, a JavaScript (web) developer wanting to get into the AR boat might feel discouraged when finding the usual required skills; and then there is who ask Machine Learning or Internet of Things. However if you are mainly a JavaScript developer, consider yourself blessed: the language is recurrently mentioned as one you should know to enter this sector. The reason? Right now a lot of AR development goes on the web. And this is where JavaScript reigns.

刚开始，想要进入AR之旅JavaScript(网络)开发人员在找到通常所需的技能时可能会灰心丧气。然后有人问机器学习或物联网。但是，如果您主要是JavaScript开发人员，请认为自己很幸运：经常提到该语言，这是您应该进入该领域的知识。原因？现在，许多AR开发都在网络上进行 。这就是JavaScript统治的地方。

JavaScript爱好者的增强工作-真的吗？ (Augmented Jobs for the JavaScript-fan — Really?)

Maybe not too fast. There are many examples where AR/MR/VR shines on its own, specially in niche markets, but the industry hasn’t completely figured out the full value of the technology for the general consumer. Once that it solved, the industry would be certainly making more AR/MR/VR products, which would translate into more jobs.

也许不太快。有很多例子表明，AR / MR / VR能够独树一帜，特别是在小众市场上，但业界尚未完全了解该技术对普通消费者的全部价值。一旦解决，行业肯定会制造更多的AR / MR / VR产品，这将转化为更多的工作。

For some analysts AR is expected to have the most pervasive impact, in part because it doesn't require specific devices and conditions to be implemented as VR does.

对于某些分析师而言，AR有望产生最广泛的影响，部分原因是它不需要像VR一样实现特定的设备和条件。

AR has utility for almost everything, overlaying useful and relevant information on the world around you. AR can be pervasive in a way that VR cannot.

AR具有几乎所有功能，可以将您周围的有用信息和相关信息重叠。 AR可以以VR无法实现的方式普及。

- David McQueen -Strategy Analytics- from an interview on Twice
-David McQueen-策略分析- 两次采访中

It rests on the industry to find how to make AR a more every day life tech. According to some companies, particularly within the mobile phone realm, exploiting better the AR potential reduces to a well-known rule: SIMPLICITY.

寻找如何使AR成为日常生活中的更多技术，取决于行业。根据一些公司的说法，尤其是在手机领域，更好地利用AR潜力会降低到一个众所周知的规则： SIMPLICITY 。

While Unity has become the default path for building AR apps, an increasing number need only a sprinkling of AR.

虽然Unity已成为构建AR应用程序的默认路径，但越来越多的数量只需要少量AR。

- from an article by Benjamin Devine, Homestory AR
-摘自Homestory AR的Benjamin Devine的文章

In many cases, resourcing onto the leading AR tools could be an overkill. Instead, a bunch of good UX-driven features over some 2D/3D assets could be more than enough to make striking products. Something a JavaScript developer regularly does.

在许多情况下，将资源配置到领先的AR工具上可能是过大的选择。取而代之的是，在某些2D / 3D资产上具有许多由UX驱动的良好功能，足以制造出引人注目的产品。 JavaScript开发人员经常做的事情。

It is then possible that any JavaScript developer will be embedding (non)standard AR/VR features as an extension of their traditional duties in the future. And if required, JavaScript is robust enough for more complex tasks. The sky is the limit.

这样，将来任何JavaScript开发人员都可能会嵌入(非)标准的AR / VR功能，作为其传统职责的扩展。而且，如果需要，JavaScript足够强大，可以执行更复杂的任务。天空才是极限。

成为JavaScript增强版 (Becoming JavaScript-Augmented)

Before starting, I would suggest to have a look at the several AR platforms and standards. The same technical constraints affecting the industry are also reflected in the AR world.

在开始之前，我建议先看一下几种AR平台和标准。影响行业的相同技术限制也反映在AR世界中。

For example, there are several platforms, one for each Big Tech (Google = ARCode, Apple = ARKit, MS = ChakraCore, Facebook = AR Studio, React 360, Mozilla = aframe).

例如，有多个平台，每个适用于每个Big Tech(Google = ARCode ，Apple = ARKit ，MS = ChakraCore ，Facebook = AR Studio ， React 360 ，Mozilla = aframe )。

After having a quick look at the options, starting fully JavaScript’ed Augmented Reality projects is relatively easy. You can begin by taking any web/app dev framework like Cordova, Ionic, React Native or Vue Native to embed the AR framework of your choice — and deploy 3D assets on top of the real world.

快速浏览选项之后，相对容易地启动完全JavaScript的Augmented Reality项目。您可以首先使用任何Web /应用程序开发框架(例如Cordova ， Ionic ， React Native或Vue Native)嵌入您选择的AR框架-并在现实世界中部署3D资产。

If what you want is to deploy on the web using mostly marker-based AR, you could use GitHub repos like AR.js (free), argon.js (free but limited) or awe.js (paid PaaS but with an old GitHub repository still available). There are a few tailored ones that are harder for the novice, many of them focused on things like facial/head recognition (such as tracking.js and headtrackr).

如果您想要使用主要基于标记的AR在Web上进行部署，则可以使用GitHub存储库，例如AR.js (免费)， argon.js (免费但有限)或awe.js (付费PaaS，但带有旧的GitHub)存储库仍然可用)。有一些量身定制的产品对于新手来说比较难，其中许多产品专注于面部/头部识别之类的东西(例如tracking.js和headtrackr )。

Or you can boost your project capabilities if you are able to port available SDKs made by AR-related companies. There are many APIs that render as AR on browser too. For example, Mapbox follows that path and it is developed on JavaScript.

或者，如果您能够移植AR相关公司提供的可用SDK，则可以提高项目功能。在浏览器中也有许多API可以将其呈现为AR。例如， Mapbox遵循该路径，并且是在JavaScript上开发的。

I would suggest you to keep it simple but interactive.

我建议您保持简单但互动。

However if your ambitions point to also mastering design and animation in JavaScript, you definitively have to learn at least one 3D Javascript package, and THREE.js the most popular. Wait, though, until you have gained a good base of JavaScript and OpenGl as well as geometry, trigonometry, linear algebra or physics. And don’t expect more help from the existing 3D JS GUIs; in particular, THREE.js has none. Challenging but exciting!

但是，如果您的雄心勃勃还希望掌握JavaScript的设计和动画，那么您肯定必须学习至少一个3D Javascript包，其中THREE.js最流行。但是，请等待，直到您掌握了JavaScript和OpenGl以及几何，三角学，线性代数或物理学的良好基础。并且不要期望现有3D JS GUI会提供更多帮助。特别是THREE.js没有。充满挑战但令人兴奋！

奖金示例 (Bonus Example)

I wanted to prepare a quick demo just to explore the technology, so I took a nice CodePen and modified it to fit a marker-based web-rendered AR animation ported within a clone of Stemkoski's great work with AR.js.

我想准备一个快速演示来探索该技术，因此我使用了一个不错的CodePen并对其进行了修改，以适应在Stemkoski与AR.js 的出色合作中移植的基于标记的Web渲染AR动画。

For you to see the example you need a mobile device with a camera and internet (phone or tablet), and either a printed copy of the marker or another device to show it on screen.

为了让您看到示例，您需要一个带有照相机和互联网的移动设备 (电话或平板电脑)，以及标记的打印副本或其他设备以将其显示在屏幕上。

Ready? Now open this link using a browser in your mobile device:

准备？现在，使用移动设备中的浏览器打开此链接：

https://evaristoc.github.io/ARexample/

Give authorization to use your camera, and point the camera to a marker like below, either printed or in another screen.

授权使用您的相机，然后将相机指向如下所示的标记 (已打印或在另一个屏幕中)。

NOTE: works on Android and Chrome — it might not work for other devices and browsers ?.

注意：可在Android和Chrome上使用-可能不适用于其他设备和浏览器？

Happy New Year!

新年快乐！

I hope you will find this technology as fascinating as I do. If so, don't stay alone: contact us at the freeCodeCamp forum and share your questions and ideas.

我希望您会发现这项技术像我一样引人入胜。如果是这样，请不要孤单：在freeCodeCamp论坛上与我们联系，并分享您的问题和想法。

And if you liked this article, don't forget to give it a ? and to share it on social media.

如果您喜欢这篇文章，请别忘了给它一个？并在社交媒体上分享。

Thanks for reading, enjoy AR and Happy Coding!!

感谢您的阅读，享受AR和快乐编码！！