by Evaristo Caraballo

通過Evaristo Caraballo

如果您是JavaScript開發(fā)人員，為什么要進(jìn)行增強(qiáng)現(xiàn)實(shí)-以及如何開始 (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年的分辨率，請(qǐng)讓我?guī)椭?#xff1a;開始弄清楚如何進(jìn)入增強(qiáng)現(xiàn)實(shí)(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年以來，增強(qiáng)/混合/虛擬現(xiàn)實(shí)(AR / MR / VR)組合一直獲得瘋狂增長(zhǎng)，其邊際市場(chǎng)價(jià)值略高于60億美元，到2022年的銷售額(包括硬件)可能達(dá)到2100億美元總而言之， 增強(qiáng)現(xiàn)實(shí)是經(jīng)歷穩(wěn)定增長(zhǎng)的領(lǐng)域。

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.

剛開始，想要進(jìn)入AR之旅JavaScript(網(wǎng)絡(luò))開發(fā)人員在找到通常所需的技能時(shí)可能會(huì)灰心喪氣。 然后有人問機(jī)器學(xué)習(xí)或物聯(lián)網(wǎng)。 但是，如果您主要是JavaScript開發(fā)人員，請(qǐng)認(rèn)為自己很幸運(yùn)： 經(jīng)常提到該語言，這是您應(yīng)該進(jìn)入該領(lǐng)域的知識(shí)。 原因？ 現(xiàn)在，許多AR開發(fā)都在網(wǎng)絡(luò)上進(jìn)行 。 這就是JavaScript統(tǒng)治的地方。

JavaScript愛好者的增強(qiáng)工作-真的嗎？ (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能夠獨(dú)樹一幟，特別是在小眾市場(chǎng)上，但業(yè)界尚未完全了解該技術(shù)對(duì)普通消費(fèi)者的全部?jī)r(jià)值。 一旦解決，行業(yè)肯定會(huì)制造更多的AR / MR / VR產(chǎn)品，這將轉(zhuǎn)化為更多的工作。

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.

對(duì)于某些分析師而言，AR有望產(chǎn)生最廣泛的影響，部分原因是它不需要像VR一樣實(shí)現(xiàn)特定的設(shè)備和條件 。

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具有幾乎所有功能，可以將您周圍的有用信息和相關(guān)信息重疊。 AR可以以VR無法實(shí)現(xiàn)的方式普及。

- 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成為日常生活中的更多技術(shù)，取決于行業(yè)。 根據(jù)一些公司的說法，尤其是在手機(jī)領(lǐng)域，更好地利用AR潛力會(huì)降低到一個(gè)眾所周知的規(guī)則： SIMPLICITY 。

While Unity has become the default path for building AR apps, an increasing number need only a sprinkling of AR.雖然Unity已成為構(gòu)建AR應(yīng)用程序的默認(rèn)路徑，但越來越多的數(shù)量只需要少量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.

在許多情況下，將資源配置到領(lǐng)先的AR工具上可能是過大的選擇。 取而代之的是，在某些2D / 3D資產(chǎn)上具有許多由UX驅(qū)動(dòng)的良好功能，足以制造出引人注目的產(chǎn)品。 JavaScript開發(fā)人員經(jīng)常做的事情。

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開發(fā)人員都可能會(huì)嵌入(非)標(biāo)準(zhǔn)的AR / VR功能，作為其傳統(tǒng)職責(zé)的擴(kuò)展。 而且，如果需要，JavaScript足夠強(qiáng)大，可以執(zhí)行更復(fù)雜的任務(wù)。 天空才是極限。

成為JavaScript增強(qiáng)版 (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平臺(tái)和標(biāo)準(zhǔn)。 影響行業(yè)的相同技術(shù)限制也反映在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).

例如，有多個(gè)平臺(tái)，每個(gè)適用于每個(gè)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.

快速瀏覽選項(xiàng)之后，相對(duì)容易地啟動(dòng)完全JavaScript的Augmented Reality項(xiàng)目。 您可以首先使用任何Web /應(yīng)用程序開發(fā)框架(例如Cordova ， Ionic ， React Native或Vue Native)嵌入您選擇的AR框架-并在現(xiàn)實(shí)世界中部署3D資產(chǎn)。

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).

如果您想要使用主要基于標(biāo)記的AR在Web上進(jìn)行部署，則可以使用GitHub存儲(chǔ)庫，例如AR.js (免費(fèi))， argon.js (免費(fèi)但有限)或awe.js (付費(fèi)PaaS，但帶有舊的GitHub)存儲(chǔ)庫仍然可用)。 有一些量身定制的產(chǎn)品對(duì)于新手來說比較難，其中許多產(chǎn)品專注于面部/頭部識(shí)別之類的東西(例如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相關(guān)公司提供的可用SDK，則可以提高項(xiàng)目功能。 在瀏覽器中也有許多API可以將其呈現(xiàn)為AR。 例如， Mapbox遵循該路徑，并且是在JavaScript上開發(fā)的。

I would suggest you to keep it simple but interactive.

我建議您保持簡(jiǎn)單但互動(dòng)。

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!

但是，如果您的雄心勃勃還希望掌握J(rèn)avaScript的設(shè)計(jì)和動(dòng)畫，那么您肯定必須學(xué)習(xí)至少一個(gè)3D Javascript包 ，其中THREE.js最流行。 但是，請(qǐng)等待，直到您掌握了JavaScript和OpenGl以及幾何，三角學(xué)，線性代數(shù)或物理學(xué)的良好基礎(chǔ)。 并且不要期望現(xiàn)有3D JS GUI會(huì)提供更多幫助。 特別是THREE.js沒有。 充滿挑戰(zhàn)但令人興奮！

獎(jiǎng)金示例 (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.

我想準(zhǔn)備一個(gè)快速演示來探索該技術(shù)，因此我使用了一個(gè)不錯(cuò)的CodePen并對(duì)其進(jìn)行了修改，以適應(yīng)在Stemkoski與AR.js 的 出色合作中移植的基于標(biāo)記的Web渲染AR動(dòng)畫。

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.

為了讓您看到示例，您需要一個(gè)帶有照相機(jī)和互聯(lián)網(wǎng)的移動(dòng)設(shè)備 (電話或平板電腦)，以及標(biāo)記的打印副本或其他設(shè)備以將其顯示在屏幕上。

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

準(zhǔn)備？ 現(xiàn)在，使用移動(dòng)設(shè)備中的瀏覽器打開此鏈接 ：

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

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.

授權(quán)使用您的相機(jī)，然后將相機(jī)指向如下所示的標(biāo)記 (已打印或在另一個(gè)屏幕中)。

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

注意：可在Android和Chrome上使用-可能不適用于其他設(shè)備和瀏覽器？

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.

我希望您會(huì)發(fā)現(xiàn)這項(xiàng)技術(shù)像我一樣引人入勝。 如果是這樣，請(qǐng)不要孤單：在freeCodeCamp論壇上與我們聯(lián)系，并分享您的問題和想法。

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

如果您喜歡這篇文章，請(qǐng)別忘了給它一個(gè)？ 并在社交媒體上分享。

Thanks for reading, enjoy AR and Happy Coding!!

感謝您的閱讀，享受AR和快樂編碼！！

翻譯自: https://www.freecodecamp.org/news/an-intro-to-augmented-reality-for-the-javascript-developer-with-an-example-71875ab184ee/

總結(jié)

以上是生活随笔為你收集整理的如果您是JavaScript开发人员，为什么要进行增强现实-以及如何开始的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。