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和快樂編碼！！