WebXR apšvietimo įvertinimas: išsami tikroviško papildytosios realybės vaizdavimo analizė

Papildytoji realybė (AR) žada sklandžiai sujungti mūsų skaitmeninį ir fizinį pasaulius. Tai matėme produktų vizualizacijose, leidžiančiose virtualią sofą pastatyti savo svetainėje, įtraukiančiuose žaidimuose, kur personažai bėgioja po jūsų virtuvės stalą, ir edukacinėse programėlėse, kurios atgaivina senovinius artefaktus. Tačiau kas skiria įtikinančią AR patirtį nuo tos, kuri atrodo dirbtinė ir ne vietoje? Atsakymas dažniausiai yra šviesa.

Kai skaitmeninis objektas nereaguoja į realaus pasaulio aplinkos šviesą, mūsų smegenys iškart atpažįsta jį kaip apgaviką. 3D modelis su plokščiu, bendriniu apšvietimu atrodo kaip ant ekrano priklijuotas lipdukas, akimirksniu sugriaunantis buvimo iliuziją. Norint pasiekti tikrą fotorealizmą, virtualūs objektai turi būti apšviesti tais pačiais šviesos šaltiniais, mesti tokius pačius šešėlius ir atspindėti tą pačią aplinką kaip ir šalia esantys fiziniai objektai. Būtent čia WebXR apšvietimo įvertinimo API tampa transformuojančiu įrankiu interneto kūrėjams.

Šis išsamus gidas leis jums pasinerti į WebXR apšvietimo įvertinimo pasaulį. Išnagrinėsime, kodėl apšvietimas yra AR realizmo pagrindas, demistifikuosime už API slypinčią technologiją, žingsnis po žingsnio aptarsime praktinio įgyvendinimo etapus ir pažvelgsime į įtraukiančio žiniatinklio vaizdavimo ateitį. Šis straipsnis skirtas interneto kūrėjams, 3D menininkams, XR entuziastams ir produktų vadovams, norintiems kurti naujos kartos patrauklias AR patirtis tiesiogiai atvirajame žiniatinklyje.

Nematoma jėga: kodėl apšvietimas yra tikroviškos AR pagrindas

Prieš gilinantis į technines API specifikacijas, labai svarbu suprasti, kodėl apšvietimas yra toks fundamentalus kuriant įtikinančią AR. Tikslas yra pasiekti tai, kas vadinama „suvokimo realizmu“. Tai nebūtinai reiškia kurti itin detalius, milijonų poligonų modelius; tai reiškia apgauti žmogaus regos sistemą, kad ji priimtų skaitmeninį objektą kaip tikėtiną scenos dalį. Apšvietimas suteikia esmines vizualines užuominas, kurias mūsų smegenys naudoja objekto formai, tekstūrai ir santykiui su aplinka suprasti.

Apsvarstykite pagrindinius tikroviško apšvietimo elementus, kuriuos realiame pasaulyje dažnai laikome savaime suprantamais:

• Aplinkos šviesa: Tai minkšta, nekryptinė šviesa, užpildanti erdvę. Ji atsimuša nuo sienų, lubų ir grindų, apšviesdama sritis, kurios nėra tiesioginėje šviesoje. Be jos šešėliai būtų visiškai juodi, sukuriant nenatūraliai griežtą vaizdą.
• Kryptinė šviesa: Tai šviesa, sklindanti iš pirminio, dažnai tolimo šaltinio, pavyzdžiui, saulės ar ryškios lubų lempos. Ji sukuria aiškius akcentus ir meta aštrių kraštų šešėlius, suteikdama mums stiprų objekto formos ir padėties pojūtį.
• Atspindžiai ir blizgesys: Tai, kaip objekto paviršius atspindi aplinkinį pasaulį, mums pasako apie jo medžiagos savybes. Chromuota sfera turės aštrius, veidrodinius atspindžius, plastikinis žaislas – minkštus, neryškius akcentus (blizgesį), o medinis blokas – beveik jokių. Šie atspindžiai turi atitikti realaus pasaulio aplinką, kad būtų įtikinami.
• Šešėliai: Šešėliai yra bene svarbiausia užuomina, įtvirtinanti objektą realybėje. Šešėlis sujungia objektą su paviršiumi, suteikdamas jam svorio ir vietos pojūtį. Šešėlio minkštumas, kryptis ir spalva suteikia daugybę informacijos apie aplinkos šviesos šaltinius.

Įsivaizduokite, kad savo biure pastatote virtualią, blizgančią raudoną sferą. Naudojant numatytąjį, scenos pagrindu sukurtą apšvietimą, ji gali turėti bendrinį baltą akcentą ir paprastą, tamsų apskritą šešėlį. Ji atrodo netikra. Dabar, naudojant apšvietimo įvertinimą, ta pati sfera gali atspindėti mėlyną šviesą nuo jūsų monitoriaus, šiltą geltoną šviesą nuo stalinės lempos ir net iškreiptą lango atspindį. Jos šešėlis yra minkštas ir teisingai nukreiptas nuo pagrindinio šviesos šaltinio. Staiga sfera ne tik atrodo, kad yra ant jūsų stalo; atrodo, kad ji yra jūsų stalo aplinkoje. Tai yra tikroviško apšvietimo galia, kurią atveria WebXR apšvietimo įvertinimo API.

WebXR apšvietimo įvertinimo API demistifikavimas

WebXR apšvietimo įvertinimo API yra modulis platesnėje WebXR Device API specifikacijoje. Jo misija yra paprasta, bet galinga: išanalizuoti vartotojo realaus pasaulio aplinką per įrenginio kamerą ir pateikti apčiuopiamus apšvietimo duomenis kūrėjo 3D atvaizdavimo varikliui (pvz., Three.js ar Babylon.js). Ji veikia kaip tiltas, leidžiantis jūsų virtualios scenos apšvietimui būti valdomam tikros fizinės scenos apšvietimo.

Kaip tai veikia? Supaprastintas požiūris

Šis procesas nėra magija; tai sudėtingas kompiuterinės regos taikymas. Kai aktyvuojama WebXR sesija su įjungtu apšvietimo įvertinimu, pagrindinė platforma (pvz., Google ARCore Android įrenginiuose) nuolat analizuoja kameros vaizdo srautą. Išanalizavus nustatomos kelios pagrindinės aplinkos apšvietimo savybės:

• Bendras ryškumas ir spalva: Nustatomas pagrindinis šviesos intensyvumas ir spalvų atspalvis. Ar kambarys ryškiai apšviestas šaltomis, baltomis fluorescencinėmis lempomis, ar blankiai apšviestas šilto, oranžinio saulėlydžio?
• Šviesos kryptingumas: Nors ji tiksliai nenustato kiekvienos lemputės, ji gali nustatyti bendrą dominuojančių šviesos šaltinių kryptį.
• Aplinkos atvaizdavimas: Svarbiausia, kad ji sukuria holistinį šviesos, sklindančios iš visų krypčių, atvaizdavimą.

Ši informacija tada supakuojama į formatus, kurie yra labai optimizuoti realaus laiko 3D grafikos atvaizdavimui. Du pagrindiniai API teikiami duomenų formatai yra sferinės harmonikos (Spherical Harmonics) ir atspindžių kubo žemėlapis (Reflection Cubemap).

Du pagrindiniai API duomenų komponentai

Kai paprašote apšvietimo įvertinimo savo WebXR sesijoje, gaunate `XRLightEstimate` objektą. Šiame objekte yra dvi esminės duomenų dalys, kurias naudos jūsų atvaizdavimo variklis.

1. Sferinės harmonikos (SH) difuziniam apšvietimui

Tai galbūt sudėtingiausiai skambanti, bet iš esmės svarbiausia API dalis. Paprastai tariant, sferinės harmonikos yra matematinis būdas atvaizduoti žemo dažnio (t. y. minkštą ir neryškią) apšvietimo informaciją iš visų krypčių. Įsivaizduokite tai kaip labai suspaustą, efektyvią bendro aplinkos apšvietimo scenoje santrauką.

• Kam tai skirta: Puikiai tinka apskaičiuoti difuzinę šviesą, kuri patenka ant objekto. Difuzinė šviesa yra šviesa, kuri tolygiai išsisklaido nuo matinių objektų paviršių, pavyzdžiui, medžio, akmens ar nepoliruoto plastiko. SH suteikia šiems paviršiams teisingą spalvą ir šešėliavimą, atsižvelgiant į jų orientaciją aplinkos šviesos atžvilgiu.
• Kaip tai pateikiama: API pateikia SH duomenis kaip koeficientų masyvą (paprastai `Float32Array` su 27 vertėmis 3-iosios eilės harmonikoms). Šiuos skaičius galima tiesiogiai perduoti į modernius fiziškai pagrįsto atvaizdavimo (PBR) šešėliuoklius, kurie juos naudoja galutinei kiekvieno pikselio spalvai ant matinio paviršiaus apskaičiuoti.

2. Atspindžių kubo žemėlapiai (Reflection Cubemaps) veidrodiniam apšvietimui

Nors sferinės harmonikos puikiai tinka matiniams paviršiams, joms trūksta detalumo, reikalingo blizgiems paviršiams. Čia praverčia atspindžių kubo žemėlapis. Kubo žemėlapis (cubemap) yra klasikinė kompiuterinės grafikos technika, susidedanti iš šešių tekstūrų, išdėstytų kaip kubo sienelės. Kartu jos sudaro 360 laipsnių panoraminį aplinkos vaizdą iš vieno taško.

• Kam tai skirta: Kubo žemėlapis naudojamas ryškiems, detaliems atspindžiams ant veidrodinių (blizgių) paviršių sukurti. Kai atvaizduojate metalinį ar blizgų objektą, atvaizdavimo variklis naudoja kubo žemėlapį, kad nustatytų, kas turėtų atsispindėti jo paviršiuje. Realistiškas tikro kambario atspindys virtualiame chromuotame rutulyje yra svarbus veiksnys siekiant fotorealizmo.
• Kaip tai pateikiama: API tai pateikia kaip `XRReflectionCubeMap`, kuris yra `WebGLTexture` objektas, galintis būti tiesiogiai naudojamas kaip aplinkos žemėlapis jūsų 3D scenoje. Šis kubo žemėlapis yra dinamiškai atnaujinamas sistemos, kai vartotojas juda arba keičiasi apšvietimo sąlygos.

Praktinis įgyvendinimas: apšvietimo įvertinimo integravimas į jūsų WebXR programą

Dabar, kai suprantame teoriją, pažvelkime į aukšto lygio žingsnius, reikalingus šiai funkcijai integruoti į WebXR programą. Nors visas įgyvendinimo kodas gali būti sudėtingas ir labai priklauso nuo jūsų pasirinktos 3D bibliotekos, pagrindinis procesas vyksta pagal nuoseklų modelį.

Būtinosios sąlygos

• Tvirtas WebXR pagrindų supratimas, įskaitant tai, kaip pradėti sesiją ir paleisti atvaizdavimo ciklą.
• Patirtis dirbant su WebGL pagrįsta 3D biblioteka, pavyzdžiui, Three.js ar Babylon.js. Šios bibliotekos abstrahuoja didelę dalį žemo lygio sudėtingumo.
• Suderinamas įrenginys ir naršyklė. Šio rašymo metu WebXR apšvietimo įvertinimas yra tvirčiausiai palaikomas Chrome naršyklėje šiuolaikiniuose Android įrenginiuose su ARCore.
• HTTPS: Kaip ir visos WebXR funkcijos, jūsų svetainė turi būti pasiekiama per saugų ryšį.

Žingsnis po žingsnio integracija (konceptuali)

Pateikiame konceptualų reikalingų žingsnių aprašymą. Kitame skyriuje aptarsime specifinius bibliotekų pagalbininkus.

1 žingsnis: paprašykite „light-estimation“ funkcijos
Negalite naudoti API, jei aiškiai to nepaprašote kurdami AR sesiją. Tai daroma pridedant `'light-estimation'` į `requiredFeatures` arba `optionalFeatures` masyvą `requestSession` iškvietime.

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

2 žingsnis: sukurkite XRLightProbe
Prasidėjus sesijai, turite jai pranešti, kad norite pradėti gauti apšvietimo informaciją. Tai daroma sukuriant šviesos zondą (light probe) sesijai. Taip pat galite nurodyti pageidaujamą atspindžių žemėlapio formatą.

const lightProbe = await session.requestLightProbe();

3 žingsnis: pasiekite apšvietimo duomenis atvaizdavimo cikle
Apšvietimo duomenys atnaujinami su kiekvienu kadru. Savo `requestAnimationFrame` atvaizdavimo ciklo atgalinio iškvietimo funkcijoje (kuri gauna `time` ir `frame` kaip argumentus), galite gauti naujausią savo zondo įvertinimą.

function onXRFrame(time, frame) {
// ... gauname pozą ir t. t. ...

const lightEstimate = frame.getLightEstimate(lightProbe);

if (lightEstimate) {
// Turime apšvietimo duomenis! Dabar galime juos pritaikyti.
applyLighting(lightEstimate);
}

// ... atvaizduojame sceną ...
}
Svarbu patikrinti, ar `lightEstimate` egzistuoja, nes sistemai gali prireikti kelių kadrų, kad sugeneruotų pirmąjį įvertinimą po sesijos pradžios.

4 žingsnis: pritaikykite duomenis savo 3D scenai
Čia įsijungia jūsų 3D variklis. `lightEstimate` objekte yra `sphericalHarmonicsCoefficients` ir `reflectionCubeMap`.

• Sferinių harmonikų taikymas: `sphericalHarmonicsCoefficients` masyvą perduotumėte savo PBR medžiagoms, dažnai atnaujindami `LightProbe` objektą savo 3D variklyje. Variklio šešėliuokliai tada naudoja šiuos duomenis difuziniam apšvietimui apskaičiuoti.
• Atspindžių kubo žemėlapio taikymas: `reflectionCubeMap` yra `WebGLTexture`. Turite naudoti savo sesijos `XRWebGLBinding`, kad gautumėte versiją, kurią galėtų naudoti jūsų atvaizdavimo variklis, ir tada nustatyti jį kaip visuotinį aplinkos žemėlapį savo scenai. Tai privers visas PBR medžiagas su metalo ar šiurkštumo verte jį atspindėti.

Specifiniai variklių pavyzdžiai: Three.js ir Babylon.js

Laimei, populiarios WebGL bibliotekos atlieka didžiąją dalį sunkaus darbo nuo 4 žingsnio, todėl procesas kūrėjams tampa daug paprastesnis.

Three.js įgyvendinimo pastabos

Three.js turi išskirtinį `WebXRManager` ir specialią pagalbinę klasę, kuri apšvietimo įvertinimą paverčia beveik „plug-and-play“ (įjunk ir naudok) funkcija.

Svarbiausia yra XREstimatedLight klasė. Galite sukurti šios klasės egzempliorių ir pridėti jį į savo sceną. Savo atvaizdavimo cikle tiesiog perduodate `xrFrame.getLightEstimate(lightProbe)` rezultatą ir patį `lightProbe` į šviesos `update()` metodą. Pagalbinė klasė pasirūpina viskuo kitu:

• Joje yra Three.js `LightProbe` objektas ir ji automatiškai atnaujina jo `sh` savybę sferinių harmonikų koeficientais.
• Ji automatiškai atnaujina `scene.environment` savybę atspindžių kubo žemėlapiu.
• Kai apšvietimo įvertinimas nepasiekiamas, ji gali grįžti prie numatytojo apšvietimo nustatymo, užtikrindama sklandžią patirtį.

Ši aukšto lygio abstrakcija reiškia, kad galite sutelkti dėmesį į savo 3D turinio kūrimą ir leisti `XREstimatedLight` tvarkytis su tekstūrų susiejimo ir šešėliuoklių uniformų atnaujinimo sudėtingumu.

Babylon.js įgyvendinimo pastabos

Babylon.js taip pat siūlo aukšto lygio, funkcijomis pagrįstą sistemą savo `WebXRDefaultExperience` pagalbininkui.

Norėdami įjungti šią funkciją, tiesiog pasiekite funkcijų tvarkyklę ir įjunkite ją pagal pavadinimą:

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

Įjungus, ši funkcija automatiškai:

• Valdo `XRLightProbe` kūrimą ir gyvavimo ciklą.
• Atnaujina scenos pagrindinę `environmentTexture` su API pateiktu atspindžių kubo žemėlapiu.
• Suteikia prieigą prie sferinių harmonikų koeficientų, kuriuos Babylon PBR medžiagų sistema gali naudoti difuzinio apšvietimo skaičiavimams.
• Apima naudingus stebėtojus (įvykius), pavyzdžiui, `onLightEstimatedObservable`, kuriuos galite prenumeruoti, kad gautumėte pasirinktinę logiką, kai gaunami nauji apšvietimo duomenys.

Šis metodas, panašus į Three.js, leidžia kūrėjams pasirinkti šią pažangią funkciją vos keliomis kodo eilutėmis, integruojant ją sklandžiai į esamą Babylon.js atvaizdavimo srautą.

Dabartinės technologijos iššūkiai ir apribojimai

Nors WebXR apšvietimo įvertinimas yra milžiniškas žingsnis į priekį, svarbu į jį žiūrėti realistiškai suprantant dabartinius jo apribojimus.

• Našumo kaina: Nuolatinis kameros vaizdo srauto analizavimas, kubo žemėlapių generavimas ir sferinių harmonikų apdorojimas sunaudoja daug procesoriaus (CPU) ir vaizdo plokštės (GPU) išteklių. Tai yra kritinis našumo aspektas, ypač baterijomis maitinamuose mobiliuosiuose įrenginiuose. Kūrėjai turi subalansuoti tobulos realybės troškimą su poreikiu užtikrinti sklandžią, aukšto kadrų dažnio patirtį.
• Įvertinimo tikslumas: Pavadinimas sako viską – tai yra įvertinimas. Sistemą gali suklaidinti neįprastos apšvietimo sąlygos, labai sudėtingos scenos su daug spalvotų šviesų arba itin greiti šviesos pokyčiai. Ji pateikia tikėtiną aproksimaciją, o ne fiziškai tobulą matavimą.
• Įrenginių ir naršyklių palaikymas: Funkcija dar nėra visuotinai prieinama. Jos priklausomybė nuo platformai specifinių AR sistemų, tokių kaip ARCore, reiškia, kad ji daugiausia prieinama šiuolaikiniuose Android įrenginiuose, kuriuose veikia Chrome. Palaikymas iOS įrenginiuose yra didelė trūkstama dalis plačiam pritaikymui.
• Jokių aiškių šešėlių: Dabartinė API puikiai tinka aplinkos ir atspindėtai šviesai, bet tiesiogiai neteikia informacijos apie dominuojančius kryptinės šviesos šaltinius. Tai reiškia, kad ji negali jums pasakyti: „Iš šios konkrečios krypties sklinda stipri šviesa.“ Dėl to norint mesti ryškius, tikslius realaus laiko šešėlius nuo virtualių objektų ant realaus pasaulio paviršių vis dar reikia papildomų metodų. Kūrėjai dažnai naudoja SH duomenis, kad numanytų ryškiausios šviesos kryptį ir savo scenoje pastatytų standartinę kryptinę šviesą, tačiau tai yra aproksimacija.

WebXR apšvietimo ateitis: kas toliau?

Realaus laiko vaizdavimo ir kompiuterinės regos sritys vystosi neįtikėtinu greičiu. Įtraukiančio žiniatinklio apšvietimo ateitis yra šviesi, horizonte matyti keletas įdomių patobulinimų.

Patobulintos kryptinės šviesos ir šešėlių API

Dažnas kūrėjų bendruomenės prašymas yra, kad API pateiktų aiškesnius duomenis apie pirminį (-ius) šviesos šaltinį (-ius), įskaitant kryptį, spalvą ir intensyvumą. Tokia API leistų lengvai mesti fiziškai tikslius, aštrių kraštų šešėlius, o tai būtų didžiulis šuolis realizmo link. Tai galėtų būti integruota su plokštumų aptikimo API, kad būtų galima mesti šešėlius ant realaus pasaulio grindų ir stalų.

Aukštesnės kokybės aplinkos žemėlapiai

Mobiliųjų procesorių galiai didėjant, galime tikėtis, kad sistema generuos aukštesnės raiškos, didesnio dinaminio diapazono (HDR) atspindžių kubo žemėlapius. Tai lems gyvesnius ir detalesnius atspindžius, dar labiau ištrins ribą tarp realaus ir virtualaus.

Platesnis platformų pritaikymas

Galutinis tikslas yra, kad šios funkcijos taptų standartizuotos ir prieinamos visose pagrindinėse naršyklėse ir įrenginiuose. Apple toliau plėtojant savo AR pasiūlymus, yra vilties, kad Safari naršyklė iOS įrenginiuose ilgainiui pritaikys WebXR apšvietimo įvertinimo API, suteikdama šias aukštos kokybės patirtis daug didesnei pasaulinei auditorijai.

Dirbtiniu intelektu pagrįstas scenos supratimas

Žvelgiant toliau į ateitį, mašininio mokymosi pažanga galėtų leisti įrenginiams ne tik įvertinti šviesą, bet ir semantiškai suprasti sceną. Įrenginys galėtų atpažinti „langą“, „lempą“ ar „dangų“ ir panaudoti šias žinias, kad sukurtų dar tikslesnį ir patikimesnį apšvietimo modelį, su keliais šviesos šaltiniais ir sudėtingomis šešėlių sąveikomis.

Išvada: nušviečiant kelią įtraukiančiam žiniatinkliui

WebXR apšvietimo įvertinimas yra daugiau nei tik papildoma funkcija; tai yra pamatinė technologija papildytosios realybės ateičiai internete. Leisdama skaitmeniniams objektams būti realistiškai apšviestiems jų fizinės aplinkos, ji pakelia AR nuo naujoviškos gudrybės iki tikrai įtraukiančios ir įtikinamos terpės.

Ji panaikina suvokimo spragą, dėl kurios AR patirtys dažnai atrodo nesusijusios. El. prekyboje tai reiškia, kad klientas gali pamatyti, kaip metalinė lempa tikrai atspindės šviesą jo namuose. Žaidimų srityje tai reiškia, kad personažai jaučiasi labiau esantys ir integruoti į žaidėjo pasaulį. Švietimo srityje tai reiškia, kad istorinius artefaktus galima apžiūrėti su tokiu realizmo lygiu, koks anksčiau buvo neįmanomas interneto naršyklėje.

Nors našumo ir kelių platformų palaikymo iššūkiai išlieka, šiandien prieinami įrankiai, ypač suderinti su galingomis bibliotekomis, tokiomis kaip Three.js ir Babylon.js, padarė šią kadaise sudėtingą technologiją nepaprastai prieinamą. Raginame visus interneto kūrėjus ir kūrėjus, besidominčius įtraukiančiu žiniatinkliu, ištirti WebXR apšvietimo įvertinimo API. Pradėkite eksperimentuoti, perženkite ribas ir padėkite nušviesti kelią naujos kartos tikroviškoms AR patirtims pasaulinei auditorijai.