WebXR valguse hindamine: sügav sukeldumine realistlikku liitreaalsuse renderdamisse

Liitreaalsus (AR) pakub võimalust sujuvalt ühendada meie digitaalne ja füüsiline maailm. Oleme seda näinud tootevisualisatsioonides, mis lasevad sul paigutada virtuaalse diivani oma elutuppa, kaasahaaravates mängudes, kus tegelased jooksevad üle su köögilaua, ja hariduslikes rakendustes, mis äratavad ellu iidseid esemeid. Aga mis eristab veenvat AR-kogemust sellest, mis tundub kunstlik ja kohatu? Vastus on enamasti valgus.

Kui digitaalne objekt ei reageeri oma reaalse keskkonna valgusele, tunneb meie aju selle kohe ära kui võõrkeha. Lameda, üldise valgusega 3D-mudel näeb välja nagu ekraanile kleebitud pilt, mis murrab hetkega kohaloleku illusiooni. Tõelise fotorealismi saavutamiseks peavad virtuaalsed objektid olema valgustatud samade valgusallikatega, heitma samu varje ja peegeldama samu ümbrusi nagu nende kõrval olevad füüsilised objektid. Siin muutub WebXR valguse hindamise API veebiarendajate jaoks murranguliseks tööriistaks.

See põhjalik juhend viib teid sügavale WebXR valguse hindamise maailma. Uurime, miks on valgus AR-realismi nurgakivi, teeme selgeks API taga oleva tehnoloogia, käime läbi praktilised rakendamise sammud ja vaatame tulevikku kaasahaarava veebi renderdamise osas. See artikkel on mõeldud veebiarendajatele, 3D-kunstnikele, XR-entusiastidele ja tootejuhtidele, kes soovivad luua järgmise põlvkonna köitvaid AR-kogemusi otse avatud veebis.

Nähtamatu jõud: miks on valgus realistliku AR-i nurgakivi

Enne kui süveneme API tehnilistesse üksikasjadesse, on oluline mõista, miks valgus on usutava AR-i loomisel nii fundamentaalne. Eesmärk on saavutada see, mida tuntakse kui „tajulist realismi“. See ei tähenda tingimata ükikasjalike, miljoni polügooniga mudelite loomist; see tähendab inimsilma petmist, et see aktsepteeriks digitaalset objekti stseeni usutava osana. Valgus pakub olulisi visuaalseid vihjeid, mida meie aju kasutab objekti kuju, tekstuuri ja suhte mõistmiseks ümbritseva keskkonnaga.

Mõelgem realistliku valguse põhielementidele, mida me reaalses maailmas sageli iseenesestmõistetavaks peame:

• Ümbritsev valgus: See on pehme, suunata valgus, mis täidab ruumi. See põrkab seintelt, lagedelt ja põrandatelt, valgustades alasid, mis ei ole otsese valguse käes. Ilma selleta oleksid varjud täiesti mustad, luues ebaloomulikult karmi ilme.
• Suunatud valgus: See on valgus, mis lähtub peamisest, sageli kaugest allikast, nagu päike või ere laelamp. See loob selged heledad alad ja heidab teravate servadega varje, andes meile tugeva tunde objekti vormist ja asukohast.
• Peegeldused ja peegeldusläige: See, kuidas objekti pind peegeldab ümbritsevat maailma, annab meile teavet selle materjali omaduste kohta. Kroomkeral on teravad, peeglitaolised peegeldused, plastmänguasjal on pehmed, udused heledad alad (peegeldusläige) ja puidust klotsil peaaegu puuduvad. Need peegeldused peavad olema usutavad ja vastama reaalsele ümbrusele.
• Varjud: Varjud on vaieldamatult kõige olulisem vihje objekti reaalsusesse maandamiseks. Vari ühendab objekti pinnaga, andes sellele kaalu ja koha tunde. Varju pehmus, suund ja värv annavad rikkalikult teavet keskkonna valgusallikate kohta.

Kujutage ette, et asetate oma kontorisse virtuaalse, läikiva punase kera. Vaikimisi, stseenipõhise valgusega võib sellel olla üldine valge hele laik ja lihtne, tume ringikujuline vari. See näeb võlts välja. Nüüd, valguse hindamisega, võib sama kera peegeldada sinist valgust teie monitorilt, sooja kollast valgust laualambilt ja isegi moonutatud peegeldust aknast. Selle vari on pehme ja õigesti suunatud eemale peamisest valgusallikast. Äkitselt ei näe kera välja mitte ainult nii, nagu see oleks teie laual; see näeb välja, nagu see oleks teie laua keskkonnas. See on realistliku valguse jõud ja just seda WebXR valguse hindamise API võimaldab.

WebXR valguse hindamise API lahtimõtestamine

WebXR valguse hindamise API on moodul laiemas WebXR Device API spetsifikatsioonis. Selle missioon on lihtne, kuid võimas: analüüsida kasutaja reaalset keskkonda seadme kaamera kaudu ja pakkuda arendaja 3D-renderdusmootorile (nagu Three.js või Babylon.js) rakendatavaid valguse andmeid. See toimib sillana, võimaldades teie virtuaalse stseeni valgustust juhtida tegeliku füüsilise stseeni valgustuse abil.

Kuidas see töötab? Lihtsustatud vaade

Protsess ei hõlma maagiat; see on keerukas arvutinägemise rakendus. Kui valguse hindamisega WebXR-sessioon on aktiivne, analüüsib aluseks olev platvorm (nagu Google'i ARCore Androidis) pidevalt kaamera voogu. See analüüs tuletab mitu olulist omadust ümbritseva valguse kohta:

• Üldine heledus ja värv: See määrab valguse peamise intensiivsuse ja värvitooni. Kas tuba on eredalt valgustatud jahedate, valgete luminofoorlampidega või hämaralt valgustatud sooja, oranži päikeseloojanguga?
• Valguse suunatus: Kuigi see ei tuvasta iga üksikut lambipirni, suudab see määrata kõige domineerivamate valgusallikate üldise suuna.
• Keskkonna esitus: Kõige olulisemana genereerib see tervikliku esituse igast suunast tulevast valgusest.

See teave pakendatakse seejärel vormingutesse, mis on reaalajas 3D-graafika renderdamiseks optimeeritud. Kaks peamist andmevormingut, mida API pakub, on sfäärilised harmoonikud ja peegelduse kuupkaart.

API andmete kaks põhikomponenti

Kui taotlete oma WebXR-sessioonis valguse hinnangut, saate objekti `XRLightEstimate`. See objekt sisaldab kahte olulist andmeosa, mida teie renderdaja kasutab.

1. Sfäärilised harmoonikud (SH) hajusvalguse jaoks

See on võib-olla kõige keerulisema kõlaga, kuid põhimõtteliselt oluline osa API-st. Lihtsamalt öeldes on sfäärilised harmoonikud matemaatiline viis madalsagedusliku (st pehme ja hägusa) valgusteabe esitamiseks igast suunast. Mõelge sellele kui stseeni üldise ümbritseva valguse väga tihendatud ja tõhusale kokkuvõttele.

• Milleks see on: See sobib ideaalselt objektile langeva hajusvalguse arvutamiseks. Hajusvalgus on valgus, mis hajub ühtlaselt mattide objektide, nagu puit, kivi või poleerimata plastik, pinnalt. SH annab neile pindadele õige värvi ja varjundi, mis põhineb nende orientatsioonil keskkonna ümbritseva valguse suhtes.
• Kuidas see esitatakse: API pakub SH-andmeid koefitsientide massiivina (tavaliselt `Float32Array` 27 väärtusega 3. järku harmoonikute jaoks). Neid numbreid saab otse sisestada kaasaegsetesse füüsikaliselt põhjendatud renderdamise (PBR) varjutajatesse, mis kasutavad neid iga piksli lõpliku värvi arvutamiseks matil pinnal.

2. Peegelduse kuupkaardid peegeldusläike jaoks

Kuigi sfäärilised harmoonikud sobivad suurepäraselt mattidele pindadele, puudub neil läikivate pindade jaoks vajalik detailsus. Siin tulebki appi peegelduse kuupkaart. Kuupkaart on klassikaline arvutigraafika tehnika, mis koosneb kuuest tekstuurist, mis on paigutatud nagu kuubi tahud. Koos moodustavad nad 360-kraadise panoraampildi keskkonnast ühest punktist.

• Milleks see on: Kuupkaarti kasutatakse teravate ja detailsete peegelduste loomiseks peegeldavatel (läikivatel) pindadel. Kui renderdate metallist või läikivat objekti, kasutab renderdusmootor kuupkaarti, et välja selgitada, mida selle pinnal peegeldada. Reaalse ruumi realistliku peegelduse nägemine virtuaalsel kroomkeral on fotorealismi saavutamisel oluline tegur.
• Kuidas see esitatakse: API pakub seda kui `XRReflectionCubeMap`, mis on `WebGLTexture` objekt, mida saab otse kasutada oma 3D-stseeni keskkonnakaardina. Seda kuupkaarti uuendab süsteem dünaamiliselt, kui kasutaja liigub ringi või kui valgustingimused muutuvad.

Praktiline rakendamine: valguse hindamise lisamine oma WebXR-rakendusse

Nüüd, kui me mõistame teooriat, vaatame üle kõrgetasemelised sammud, mis on vajalikud selle funktsiooni integreerimiseks WebXR-rakendusse. Kuigi täielik rakenduskood võib olla keeruline ja sõltub suuresti teie valitud 3D-teegist, järgib põhiprotsess järjepidevat mustrit.

Eeltingimused

• Põhjalikud teadmised WebXR-i alustest, sealhulgas sessiooni käivitamisest ja renderdustsükli käitamisest.
• Tuttav olemine WebGL-põhise 3D-teegiga nagu Three.js või Babylon.js. Need teegid abstraheerivad suure osa madala taseme keerukusest.
• Ühilduv seade ja brauser. Selle kirjutamise hetkel on WebXR valguse hindamine kõige tugevamalt toetatud Chrome'is kaasaegsetel Android-seadmetel, millel on ARCore.
• HTTPS: Nagu kõik WebXR-i funktsioonid, peab teie sait olema serveeritud turvalise ühenduse kaudu.

Samm-sammuline integreerimine (kontseptuaalne)

Siin on kontseptuaalne ülevaade vajalikest sammudest. Teegipõhiseid abimehi arutame järgmises jaotises.

1. samm: taotlege funktsiooni 'light-estimation'
Te ei saa API-d kasutada, kui te seda oma AR-sessiooni loomisel selgesõnaliselt ei küsi. Selleks lisage `'light-estimation'` oma `requestSession` kutse `requiredFeatures` või `optionalFeatures` massiivi.

const session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['hit-test', 'dom-overlay', 'light-estimation'] });

2. samm: looge XRLightProbe
Kui sessioon on alanud, peate sellele teada andma, et soovite hakata valguse teavet saama. Selleks loote sessioonile valgussonde. Saate määrata ka oma eelistatud peegelduskaardi vormingu.

const lightProbe = await session.requestLightProbe();

3. samm: pääsege juurde valguse andmetele renderdustsüklis
Valguse andmeid uuendatakse iga kaadriga. Oma `requestAnimationFrame` renderdustsükli tagasikutse funktsiooni sees (mis saab argumentideks `time` ja `frame`) saate oma sondi jaoks uusima hinnangu.

function onXRFrame(time, frame) {
// ... get pose, etc. ...

const lightEstimate = frame.getLightEstimate(lightProbe);

if (lightEstimate) {
// Meil on valguse andmed! Nüüd saame neid rakendada.
applyLighting(lightEstimate);
}

// ... render the scene ...
}
Oluline on kontrollida, kas `lightEstimate` eksisteerib, kuna süsteemil võib esimese hinnangu genereerimiseks pärast sessiooni algust kuluda mõni kaader.

4. samm: rakendage andmed oma 3D-stseenile
Siin tuleb mängu teie 3D-mootor. Objekt `lightEstimate` sisaldab `sphericalHarmonicsCoefficients` ja `reflectionCubeMap`.

• Sfääriliste harmoonikute rakendamine: Te edastaksite `sphericalHarmonicsCoefficients` massiivi oma PBR-materjalidele, sageli uuendades `LightProbe` objekti oma 3D-mootoris. Mootori varjutajad kasutavad seejärel neid andmeid hajusvalguse arvutamiseks.
• Peegelduse kuupkaardi rakendamine: `reflectionCubeMap` on `WebGLTexture`. Peate kasutama oma sessiooni `XRWebGLBinding`-ut, et saada sellest versioon, mida teie renderdaja saab kasutada, ja seejärel määrama selle oma stseeni globaalseks keskkonnakaardiks. See paneb kõik metalli- või karedusväärtusega PBR-materjalid seda peegeldama.

Mootoripõhised näited: Three.js ja Babylon.js

Õnneks tegelevad populaarsed WebGL-i teegid suurema osa 4. sammu raskest tööst, muutes protsessi arendajate jaoks palju lihtsamaks.

Three.js-i rakendamise märkused

Three.js-il on erakordne `WebXRManager` ja spetsiaalne abiklass, mis muudab valguse hindamise peaaegu „ühenda ja kasuta“ funktsiooniks.

Võtmeteguriks on klass XREstimatedLight. Saate luua selle klassi eksemplari ja lisada selle oma stseeni. Oma renderdustsüklis edastate lihtsalt `xrFrame.getLightEstimate(lightProbe)` tulemuse ja `lightProbe` enda valguse `update()` meetodile. Abiklass hoolitseb kõige muu eest:

• See sisaldab Three.js `LightProbe` objekti ja uuendab automaatselt selle `sh` omadust sfääriliste harmoonikute koefitsientidega.
• See uuendab automaatselt `scene.environment` omadust peegelduse kuupkaardiga.
• Kui valguse hinnang pole saadaval, võib see langeda tagasi vaikimisi valgustuse seadistusele, tagades sujuva kogemuse.

See kõrgetasemeline abstraktsioon tähendab, et saate keskenduda oma 3D-sisu loomisele ja lasta `XREstimatedLight`-il tegeleda tekstuuride sidumise ja varjutajate uniformide värskendamise keerukusega.

Babylon.js-i rakendamise märkused

Babylon.js pakub samuti kõrgetasemelist, funktsioonipõhist süsteemi oma `WebXRDefaultExperience` abimehe jaoks.

Funktsiooni lubamiseks pääsete lihtsalt juurde funktsioonihaldurile ja lubate selle nime järgi:

const xr = await scene.createDefaultXRExperienceAsync({ /* options */ });
const lightEstimationFeature = xr.featuresManager.enableFeature(WebXRLightEstimation.Name, { /* options */ });

Pärast lubamist funktsioon automaatselt:

• Haldab `XRLightProbe` loomist ja elutsüklit.
• Uuendab stseeni peamist `environmentTexture` API-st saadud peegelduse kuupkaardiga.
• Pakub juurdepääsu sfääriliste harmoonikute koefitsientidele, mida Babyloni PBR-materjalide süsteem saab kasutada hajusvalguse arvutamiseks.
• Sisaldab kasulikke jälgitavaid sündmusi (observables) nagu `onLightEstimatedObservable`, mida saate tellida kohandatud loogika jaoks, kui uued valguse andmed saabuvad.

See lähenemine, sarnaselt Three.js-ile, võimaldab arendajatel selle täiustatud funktsiooni kasutusele võtta vaid paari koodireaga, integreerides selle sujuvalt olemasolevasse Babylon.js-i renderdustorustikku.

Praeguse tehnoloogia väljakutsed ja piirangud

Kuigi WebXR valguse hindamine on monumentaalne samm edasi, on oluline läheneda sellele realistliku arusaamaga selle praegustest piirangutest.

• Jõudluskulu: Kaamera voo pidev analüüsimine, kuupkaartide genereerimine ja sfääriliste harmoonikute töötlemine kulutab märkimisväärselt protsessori ja graafikaprotsessori ressursse. See on kriitiline jõudluse kaalutlus, eriti akutoitel mobiilseadmetes. Arendajad peavad tasakaalustama täiusliku realismi soovi ja vajadust sujuva, kõrge kaadrisagedusega kogemuse järele.
• Hinnangu täpsus: Nimi ütleb kõik – see on hinnang. Süsteemi võivad petta ebatavalised valgustingimused, väga keerulised stseenid paljude värviliste tuledega või eriti kiired valguse muutused. See pakub usutava lähenduse, mitte füüsiliselt täiusliku mõõtmise.
• Seadme- ja brauseritugi: Funktsioon ei ole veel universaalselt saadaval. Selle sõltuvus platvormispetsiifilistest AR-raamistikest nagu ARCore tähendab, et see on peamiselt saadaval kaasaegsetel Android-seadmetel, mis kasutavad Chrome'i. Tugi iOS-seadmetel on laialdaseks kasutuselevõtuks oluline puuduv lüli.
• Puuduvad selgesõnalised varjud: Praegune API on suurepärane ümbritseva ja peegeldava valguse jaoks, kuid ei paku otseselt teavet domineerivate suunatud valgusallikate kohta. See tähendab, et see ei saa teile öelda: „Seal on tugev valgus, mis tuleb sellest konkreetsest suunast.“ Selle tulemusena nõuab teravate ja täpsete reaalajas varjude heitmine virtuaalsetelt objektidelt reaalsetele pindadele endiselt lisatehnikaid. Arendajad kasutavad sageli SH-andmeid, et tuletada kõige eredama valguse suund ja paigutada oma stseeni standardne suunatud valgus, kuid see on lähendus.

WebXR valguse tulevik: mis saab edasi?

Reaalajas renderdamise ja arvutinägemise valdkond areneb uskumatu kiirusega. Kaasahaarava veebi valguse tulevik on helge ja silmapiiril on mitmeid põnevaid edusamme.

Täiustatud suunatud valguse ja varjude API-d

Arendajate kogukonna sage soov on, et API pakuks selgemaid andmeid peamise(te) valgusallika(te) kohta, sealhulgas suunda, värvi ja intensiivsust. Selline API muudaks füüsiliselt täpsete, teravate servadega varjude heitmise triviaalseks, mis oleks tohutu hüpe edasi realismi suunas. Seda saaks integreerida tasapinna tuvastamise API-ga, et heita varje reaalsetele põrandatele ja laudadele.

Kõrgema täpsusega keskkonnakaardid

Mobiiliprotsessorite võimsamaks muutudes võime oodata, et süsteem genereerib kõrgema eraldusvõimega ja kõrgema dünaamilise ulatusega (HDR) peegelduse kuupkaarte. See toob kaasa elavamad ja detailsemad peegeldused, hägustades veelgi piiri reaalse ja virtuaalse vahel.

Laiem platvormide tugi

Lõppeesmärk on, et need funktsioonid muutuksid standardiseerituks ja oleksid saadaval kõigis suuremates brauserites ja seadmetes. Kuna Apple jätkab oma AR-pakkumiste arendamist, on lootust, et Safari iOS-is võtab lõpuks kasutusele WebXR valguse hindamise API, tuues need kõrgetasemelised kogemused palju suurema ülemaailmse publikuni.

Tehisintellektipõhine stseeni mõistmine

Kaugemale tulevikku vaadates võivad masinõppe edusammud võimaldada seadmetel mitte ainult hinnata valgust, vaid mõista stseeni semantiliselt. Seade võib ära tunda „akna“, „lambi“ või „taeva“ ja kasutada seda teadmist veelgi täpsema ja robustsema valgustusmudeli loomiseks, mis sisaldab mitut valgusallikat ja keerulisi varjude interaktsioone.

Kokkuvõte: valgustades teed kaasahaaravale veebile

WebXR valguse hindamine on enamat kui lihtsalt järkjärguline funktsioon; see on alustehnoloogia liitreaalsuse tulevikuks veebis. Võimaldades digitaalsetel objektidel olla realistlikult valgustatud nende füüsilisest ümbrusest, tõstab see AR-i uudselt trikilt tõeliselt kaasahaaravaks ja veenvaks meediumiks.

See sulgeb tajulise lõhe, mis nii sageli muudab AR-kogemused katkendlikuks. E-kaubanduse jaoks tähendab see, et klient näeb, kuidas metallist lamp päriselt peegeldab valgust tema kodus. Mängude jaoks tähendab see, et tegelased tunduvad olevat rohkem kohal ja integreeritud mängija maailma. Hariduse jaoks tähendab see, et ajaloolisi esemeid saab vaadata sellise realismitasemega, mis varem veebibrauseris oli võimatu.

Kuigi jõudluse ja platvormideülese toe väljakutsed püsivad, on tänapäeval kättesaadavad tööriistad, eriti kui need on ühendatud võimsate teekidega nagu Three.js ja Babylon.js, muutnud selle kunagi keeruka tehnoloogia märkimisväärselt kättesaadavaks. Soovitame kõigil veebiarendajatel ja loojatel, kes on huvitatud kaasahaaravast veebist, uurida WebXR valguse hindamise API-d. Alustage katsetamist, nihutage piire ja aidake valgustada teed järgmise põlvkonna realistlikele AR-kogemustele ülemaailmsele publikule.