Кеңейтилген реалдуулук веб -браузери: 9 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:41

Бүгүн биз Android үчүн Augmented Reality веб браузерин жасоону баштайбыз.

Бул идея ExpressVPN менден демөөрчүлүк кылган YouTube видеосун жасоону сураганда башталды. Бул менин биринчи ишим болгондуктан, мен алардын продуктусуна тиешелүү болгон нерсени кылгым келди. Мен дароо эле ойлондум, оо, мен жөн гана кеңейтилген реалдуулук веб браузерин жасайм, ошондо биз вебди ARде VPN аркылуу карап чыга алабыз. Бул кыйын болушу мүмкүн эмес, туурабы? Туура эмес. Мен бул долбоорго кээ бир чектөөлөрдү койгом, анткени мен аны жаңы нерселерди үйрөнүү үчүн колдонгум келген.

Мен Android үчүн болушун каалаган биринчи номер, анткени мен дайыма IOS менен иштейм.

Экинчи номер Мен эч кандай акы төлөнүүчү API колдонууну каалаган жокмун, мен ар бир адам бул долбоорду жүктөп алып, онлайнда эч нерсе төлөбөй иштете алгыдай болушун кааладым. Ошентип, IBM Watson жок, Google API жок жана Unity Asset дүкөнүнөн эч нерсе жок.

БАШТАЙБЫЗ!

1 -кадам: Биринчи нерсе биринчи

Мен иштегим келген биринчи нерсе, текстти сүйлөө үчүн жакшы чечим, ошондуктан биз үнүбүз менен интернеттен издөө жүргүзө алдык. Ошондой эле, менин оюмча, үн - ARде өз ара аракеттенүүнүн эң сонун ыкмасы, жок дегенде бизде колго көз салуу боюнча жакшы чечим болмоюнча. Мен билем, Androidде текст функциялары үчүн бир аз эне тили бар, ошондуктан тез Google издөө бизге Unity үчүн кээ бир плагиндерди табууга жардам берет.

Мен бул плагинге биринчи жолу биримдик үчүн келдим:

www.google.com/search?rlz=1C5CHFA_enUS816U…

Мен муну сынап көрдүм жана ал абдан жакшы иштеди. Бир гана көйгөй, аны ARCore менен колдонгондо, ал жергиликтүү калкып чыкма кутучаны пайда кылат жана Биримдиктин фонунда көрүнөт жана сиз көз салууну жоготуп коёсуз.

Бул идеалдан да аз болчу.

2 -кадам: Android үчүн иштөө үчүн текстти алуу

Ошентип, мен жергиликтүү калкыма кутучаны алып келбеген жана көп таба албаган плагиндерди издей баштадым, бирок акыры бул андроид китепканасын таптым:

github.com/maxwellobi/Android-Speech-Recog…

Эми мен Android түзмөктөрүнүн өнүгүшү жөнүндө эч нерсе билбейм, бирок мен өзүмдү сынап көргүм келди, ошондуктан мен бул китепкана үчүн көпүрө кодун жазууга жана аны Unityде колдонуу үчүн Android плагинине айландырууга аракет кыларымды түшүндүм. бир нече саатка чейин капалануу.

Анан акыры иштеди…

3 -кадам: алынган сабактар

Ошентип, мен бул процессте бир нерсе үчүн Android плагинин кантип жасоо керектигин дароо эле билбеген эки нерсени билдим.

Биринчиден, эгер сиз плагин кызыктуу бир нерсе кыла турган болсо, Android колдонмосунун контекстине шилтеме алышыңыз керек болот. Сиз муну китепкана катары Android долбооруңузга Unity орнотуусунан class.jar файлын кошуу менен жасай аласыз. Ошентип, файлдын долбоорунун структурасына өтүңүз, андан кийин колдонмо модулуна көз карандылыктар өтмөгүн тандаңыз. Бул жерде сиз jar файлын кошуу үчүн плюс баскычын чыкылдата аласыз. Биримдик түзүмүңүзгө, ойнотуу кыймылдаткычтарына, андроид ойнотуучуга, вариацияларга, моно, иштеп чыгууга, класстарга жана акыры class.jar. Бир гана компиляция үчүн чөйрөнү өзгөртүңүз. Эми, жаңы java файлында сиз жасай аласыз:

UnityPlayer.currentActivity.getApplicationContext ();

жана бул шилтемени каалаган убакта колдонуңуз.

Кийинки кызык маселе, бул үн функциясын негизги жипте гана иштетсе болот, болбосо каталарды аласыз. Биримдикте муну кылуу үчүн, сиз функцияларды жана плагинди UI Threadте AndroidJavaRunnable катары иштетүүңүздү жогорудагы сүрөттө көрсөтүлгөндөй айтышыңыз керек.

4 -кадам: күрөш

Бул жерде мен Android адиси деп ойлоп жатам

Мен онлайн режиминде андроид иштеп чыгууга арыз берип жатам, мен андроид наклейкаларына жана футболкаларга заказ берем. Жашоо керемет. Эми мен Unityде веб -баракчаны кантип көрсөтүүнү билүүгө өтүүгө даярмын. Бир аз изилдөө жүргүзгөндөн кийин, кабыл алынган чечим Android WebView колдонуу экенин көрөм. Бул жөн гана Android классы, браузерге баарын жүктөбөстөн, Android тиркемесинин ичинде интерактивдүү веб-сайттарды көрсөтүүгө мүмкүндүк берет. Негизинен, колдонуучуларды колдонмоңузда сактай аласыз. Биринчи бизнес тартиби - бул кимдир бирөө ачык булак үчүн биримдик плагинин жараткандыгын көрүү. Мен алгач бул плагинди сынап көрөм:

github.com/gree/unity-webview

бирок ал WebView программасын Unity GUI катмарына гана көрсөтөт, андыктан ал иштебейт. Анан VR үчүн бул плагинди табам:

github.com/IanPhilips/UnityAndroidVRBrowse…

Бул WebView текстурасына жана ал тургай өз ара аракеттешүүгө мүмкүндүк берет, бул сонун. Мен бул аракетти сынап көргөнгө чейин жана менин бардык чыкылдатуумду биримдикке тоскоол кылып жатканга чейин жооп деп ойлогом.

5 -кадам: Сүрөт тактасына кайтуу

Мен бул үчүн плагинди жасоого аракет кылам, анткени мага веб -сайттын сүрөтүн биримдикке жөнөтүү керек. Бул боюнча бир аз изилдөө жүргүзүп жатып, мен андроид кенепти битмапка сактап, анан аны pngге коддоп, ошол байттарды Биримдикке жөнөтө алаарымды билип, ошол байттардын массиви менен жаңы текстураны түзөм жана мен жакшымын. Дагы бир нече сааттан кийин көңүлүм чөгүп, менин бар экенимди сурашты …

Акыры иштеди.

Эми мен веб -сайттан скриншот алам, андыктан анын аркор менен кантип иштээрин карап көрөлү …

Бул болбойт.

Айтайын дегеним, мен эң жаңы телефон эмес galaxy s7 колдонуп жатам, бирок бул WebView нерселери дагы деле колдонмону тоңдуруп жатат жана негизинен жараксыз. Мен муну WebView жана ARCore экөө тең негизги жипти ашыкча жүктөгөндүктөн деп ойлойм, бирок мен так билбейм. Сүрөт тактасына кайтуу. Эгерде биз бул ишти жасагыбыз келсе, анда оор жүктү кандайдыр бир серверге жүктөөгө туура келет. Бир аз Google иштеп чыккандан кийин, Node.js үчүн WebShot деп аталган китепканасы бар веб -сайттын скриншотун алсаңыз болот, ал Phantom JSти жазат, ал башы жок серепчи.

6 -кадам: Акыры биз бир жерге жетип жатабыз

Эми мен тозокту Node.js кантип колдонууну түшүнүшүм керек ….

Белгилүү бир порт номерин уккан Node.js сценарийин түзө аласыз жана ал ошол портко тийгенде кээ бир маалыматты кайтарып бере алат. Биз муну 3000 портунда угула турган кичинекей салам дүйнөлүк скриптин түзүү аркылуу текшере алабыз. Биз сценарий менен каталогго кирип, аны түйүн, анан скрипт аталышы менен иштете алабыз. Эгерде биз IP дарегибизге, андан кийин браузерибиздеги 3000 портуна өтсөк, анда ал салам дүйнөгө кайтып келгенин көрө алабыз. Азыр түйүндү кичине түшүнсөм, мен аны серверимде иштете алам, анда мен веб -сайттарымды hawkhost.com деп коем. Мен серверге SSH киргизип, бир нече салам node.js сценарийлерин иштетүүгө аракет кылам … жана эч нерсе иштебейт. Дагы бир нече саат баш аламандыктан кийин, менин хостинг серверимде эки порту бар экенин билем, бул 3000 жана 12001.

Ошентип, бул портторду жана менин хостинг серверлеримди колдонуп, мен дүйнөлүк мисал менен иштей алам. Андан кийин мен WebShot модулун орнотуп, URL өткөрүп бере турган кичинекей скрипт түзөм, ал мага ошол веб -дарек боюнча веб -сайттын сүрөтүн кайтарып берет. Эми мен ошол түйүн сценарийин баштап, сервердин белгилүү бир IP жана порт номерине Unityден http POST сурамын жөнөтө алам, ал мага ошол веб -сайттын сүрөтү болгон байт массивин кайтарып берет. Эми дагы бир көйгөй - мен терминалды жапканымда процесс бүтүп, угууну токтотот. Мен дагы бир аз изилдөө жүргүзөм жана түбөлүк деп аталган модулду табам. NPM түбөлүккө орнотулат, эми мен түбөлүккө чуркай алам жана сценарийди түбөлүккө баштай алам жана ал кирип, кайра токтотмойунча иштей берет.

7 -кадам: Бул иштейт

Абдан жакшы. Бирок ал жетишерлик салкын эмес.

ARде вебди кароонун мааниси жөнүндө ойлонгондо, ал боштуктун кошулушунан келип чыгат. Биз мындан ары бир эле экран менен чектелбейбиз, ошондуктан мен изимди көз алдымда элестетүүгө мүмкүндүк берген нерсени жасагым келет. Келгиле, биринчи издөө баракчасын жүктөп, анан ошол баракты сойлотуп, ар бир издөө жыйынтыгын шилтеме катары чыгаралы, аны биз башкы экраныбыздын үстүндө сүрөт катары жүктөй алабыз. Биз муну Google жыйынтыктарынын биринчи баракчасын кырып, аны түбөлүккө үзгүлтүксүз иштете турган башка Node.js скрипти менен жасай алабыз. Бул Google издөө API менен алда канча эффективдүү түрдө жасалышы мүмкүн, бирок бул долбоордун экинчи эрежеси акы төлөнүүчү API болгон эмес, андыктан биз азырынча мындай кылабыз. Эми бизде ар бир шилтеме үчүн сүрөттөр бар, биз аларды басканда жана бумда чоң экранга жүктөй алабыз, бизде бул жерде кичинекей браузер бар. Бул толугу менен иштебейт, бирок мен аны кабыл алам. Макул, эгер сиз бул долбоорду өзүңүз иштеткиңиз келсе, анда менин Github'ума кирип, expressVPN долбоорун жүктөп алыңыз:

github.com/MatthewHallberg/ARBrowserExpres…

8 -кадам: Баарын иштетүү

Аны Биримдикте ачыңыз жана келгиле, баары сиздин машинаңызда локалдык түрдө иштей берсин. Биринчиден, сиз машинаңыздын IP дарегин табышыңыз керек, эгер сиз Macта болсоңуз, опцияны кармап туруп, IP белгини ачуу үчүн wifi символун басыңыз.

Биримдикке кайтып, браузердин контролеринин скриптин ачып, ошол жерге IP дарегиңизди киргизип, алмашуу буферине көчүрүңүз. NodeScripts папкасын таап, аны столго коюңуз, папканы ачыңыз жана эки кеңейтүүнү.jsке өзгөртүңүз. Ар бир скриптти ачыңыз жана IP дарегиңизди IPге өзгөртүңүз. Эми терминалды ачыңыз жана биз кээ бир нерселерди орнотушубуз керек. Эгер сизде жок болсо, HomeBrew орнотуңуз.

-бриваны орнотуу түйүнү

-npm веб -сүрөтүн орнотуу

-npm инсталлятор

-npm орнотуу профсоюзу

-npm cheerio орнотуу

Эми биз эки сценарийди nodescripts папкасына баштап, getimage.js түйүнүн жасай алабыз, андан кийин жаңы терминал терезесин ачып, getlinks.js түйүнүн жасайбыз, эки терминалдык терезени тең иштетип, кайра редакторго кайтабыз. Эгерде биз басууну ойносок, баары жакшы иштеши керек. Биз ошондой эле файлга кирип, жөндөөлөрдү түзөбүз жана курууну басып, чуркап, аны телефонго түшүрө алабыз! Эгерде сиз серверлерди токтоткуңуз келсе, c контролун же q терминалын басып, бүт терминалды жабыңыз.

ДАЛ УШУЛ!