WebXRå¹³é¢åé¡ã®å¯èœæ§ãæ¢ããŸãããã®éçºè åãç·åã¬ã€ãã§ã¯ãåºãå£ãããŒãã«ãèªèããçã«æ²¡å ¥åã§ã³ã³ããã¹ããèªèããWeb ARäœéšãæ§ç¯ããæ¹æ³ã解説ããŸãã
ããã¹ããŒããªARã®å®çŸïŒWebXRå¹³é¢åé¡ã®åŸ¹åºè§£èª¬
æ¡åŒµçŸå®ïŒARïŒã¯ãåãªãç®æ°ãããè¶ ããç§ãã¡ã®ããžã¿ã«äžçãšç©çäžçãã·ãŒã ã¬ã¹ã«èåãããæŽç·ŽãããããŒã«ãžãšæ¥éã«é²åããŠããŸããåæã®ARã¢ããªã±ãŒã·ã§ã³ã§ã¯ããªãã³ã°ã«ãŒã ã«æç«ã®3Dã¢ãã«ãé 眮ããããšãã§ããŸããããããã¯ãã°ãã°å®ã«äžèªç¶ã«æµ®ããããå®¶å ·ãšäžèªç¶ã«äº€å·®ãããããŠããŸããããã®äœéšã¯éæ³ã®ããã§ãããªãããã©ããèããã®ã§ãããæ¬ ããŠããã®ã¯ã³ã³ããã¹ãã§ãããARãçã«æ²¡å ¥çã§ããããã«ã¯ããããæ¡åŒµããŠããäžçãçè§£ããå¿ èŠããããŸããããã§WebXR Device APIãç¹ã«å¹³é¢æ€åºãç»å ŽããŸããããããããã ãã§ã¯ååã§ã¯ãããŸãããããã«è¡šé¢ãããããšãç¥ãããšãšããããã©ã®ãããªçš®é¡ã®è¡šé¢ã§ããããç¥ãããšã®éã«ã¯ã倧ããªéãããããã®ã§ãã
ãã®é£èºãããããã®ããã»ãã³ãã£ãã¯ãµãŒãã§ã¹èªèãšããŠãç¥ãããWebXRå¹³é¢åé¡ã§ããããã¯ããŠã§ãããŒã¹ã®ARã¢ããªã±ãŒã·ã§ã³ãåºãå£ãããŒãã«ã倩äºãåºå¥ã§ããããã«ããæè¡ã§ãããã®äžèŠåçŽãªåºå¥ã¯ãã©ãã€ã ã·ããã§ãããéçºè ã¯ããã€ãã£ãã¢ããªã®ããŠã³ããŒããå¿ èŠãšããã«ãäžçäžã®äœååãã®ããã€ã¹ã§ã¢ã¯ã»ã¹å¯èœãªãŠã§ããã©ãŠã¶äžã§ãããçŸå®çã§ãã€ã³ããªãžã§ã³ãã§ãæçšãªäœéšãçŽæ¥äœæã§ããããã«ãªããŸãããã®ç·åã¬ã€ãã§ã¯ã平颿€åºã®åºç€ãæ¢ããåé¡ã®åãæ·±ãæãäžããå®è·µçãªå®è£ ã解説ãããããã€ããŒã·ããŠã§ãã«ãããããšããµã€ãã£ã³ã°ãªæªæ¥ãèŠãŠãããŸãã
ãŸãããã®åºç€ããïŒWebXRã«ããã平颿€åºãšã¯ïŒ
衚é¢ãåé¡ããåã«ããŸããããèŠã€ããªããã°ãªããŸãããããããçŸä»£ã®ARã·ã¹ãã ã®åºç€çãªæ©èœã§ãã平颿€åºã®ä»äºã§ãããã®æ žå¿ã«ãããŠã平颿€åºãšã¯ãããã€ã¹ãã«ã¡ã©ãšã¢ãŒã·ã§ã³ã»ã³ãµãŒïŒSLAM - Simultaneous Localization and Mapping ãšåŒã°ããæè¡ïŒã䜿çšããŠç©çç°å¢ãã¹ãã£ã³ããå¹³ããªè¡šé¢ãç¹å®ããããã»ã¹ã§ãã
WebXRã»ãã·ã§ã³ã§'plane-detection'æ©èœãæå¹ã«ãããšããã©ãŠã¶ã®åºç€ãšãªãARãã©ãããã©ãŒã ïŒAndroidã®Google ARCoreãiOSã®Apple ARKitãªã©ïŒãç¶ç¶çã«äžçãåæããŸããããã¯ãå ±éã®å¹³é¢äžã«ããç¹åŸŽç¹ã®ã¯ã©ã¹ã¿ãŒãæ¢ããŸãããããèŠã€ãããšãWebã¢ããªã±ãŒã·ã§ã³ã«XRPlaneãªããžã§ã¯ããšããŠå ¬éããŸããåXRPlaneã¯ã次ã®ãããªéèŠãªæ å ±ãæäŸããŸãã
- äœçœ®ãšåãïŒ å¹³é¢ã3D空éã®ã©ãã«ãããã©ã®ããã«åããŠãããïŒäŸïŒæ°Žå¹³ãåçŽãïŒãäŒããè¡åã
- ããªãŽã³ïŒ æ€åºããã衚é¢ã®2Då¢çãå®çŸ©ããé ç¹ã®ã»ãããããã¯éåžžãå®å šãªé·æ¹åœ¢ã§ã¯ãªããããã€ã¹ã確å®ã«èå¥ãã衚é¢ã®éšåã衚ãããã°ãã°äžèŠåãªããªãŽã³ã§ãã
- æçµæŽæ°æå»ïŒ å¹³é¢ã®æ å ±ãæåŸã«æŽæ°ãããæ¥æã瀺ãã¿ã€ã ã¹ã¿ã³ããããã«ãããã·ã¹ãã ãç°å¢ã«ã€ããŠåŠç¿ããã«ã€ããŠå€åã远跡ã§ããŸãã
ãã®åºæ¬æ å ±ã¯éåžžã«åŒ·åã§ããããã«ãããéçºè ã¯æµ®éãããªããžã§ã¯ãããè±åŽããä»®æ³ã³ã³ãã³ããçŸå®äžçã®è¡šé¢ã«ãªã¢ã«ã«åºå®ã§ããäœéšãäœæã§ããããã«ãªããŸãããæ¬ç©ã®ããŒãã«ã«ä»®æ³ã®è±ç¶ã眮ãã°ããã®åšããæ©ããŠãããã«çãŸãç¶ããŸããããããé倧ãªå¶éãæ®ã£ãŠããŸãããããªãã®ã¢ããªã±ãŒã·ã§ã³ã¯ããããããŒãã«ã§ããããšãç¥ããŸããã§ãããããã¯åãªããæ°Žå¹³ãªå¹³é¢ãã§ããããŠãŒã¶ãŒãè±ç¶ããå£ã®å¹³é¢ãããåºã®å¹³é¢ãã«çœ®ãã®ãé²ãããšã¯ã§ãããçŸå®ã®é¯èŠãå£ãç¡æå³ãªã·ããªãªã«ã€ãªãããŸããã
å¹³é¢åé¡ã®ç»å ŽïŒãµãŒãã§ã¹ã«æå³ãäžãã
å¹³é¢åé¡ã¯ã次ãªãè«ççãªé²åã§ããããã¯ãçºèŠãããåå¹³é¢ã«ã»ãã³ãã£ãã¯ã©ãã«ã远å ããã平颿€åºæ©èœã®æ¡åŒµã§ãããããã«æ°Žå¹³ãªè¡šé¢ããããŸãããšã ãäŒããã®ã§ã¯ãªãããããã«æ°Žå¹³ãªè¡šé¢ããããããã¯åºã§ãããšé«ã確信ãæã£ãŠããŸãããšäŒããŠãããŸãã
ããã¯ãããã€ã¹äžã§å®è¡ããããå€ãã®å Žåæ©æ¢°åŠç¿ã¢ãã«ã«ãã£ãŠåŒ·åãããæŽç·Žãããã¢ã«ãŽãªãºã ã«ãã£ãŠéæãããŸãããããã®ã¢ãã«ã¯ãå±å ç°å¢ã®èšå€§ãªããŒã¿ã»ããã§ãã¬ãŒãã³ã°ãããŠãããäžè¬çãªè¡šé¢ã®ç¹æ§ãäœçœ®ãåããèªèããŸããäŸãã°ã倧ãããŠäœãæ°Žå¹³ãªå¹³é¢ã¯åºã§ããå¯èœæ§ãé«ãã倧ããªåçŽãªå¹³é¢ã¯å£ã§ããå¯èœæ§ãé«ãã§ããããå°ãããé«ãäœçœ®ã«ããæ°Žå¹³ãªå¹³é¢ã¯ãããããããŒãã«ããã¹ã¯ã§ãããã
平颿€åºãåããWebXRã»ãã·ã§ã³ããªã¯ãšã¹ããããšãã·ã¹ãã ã¯åXRPlaneã«å¯ŸããŠsemanticLabelããããã£ãæäŸã§ããŸããå ¬åŒä»æ§ã§ã¯ãå±å ç°å¢ã§æãäžè¬çãªè¡šé¢ãã«ããŒããæšæºåãããã©ãã«ã®ã»ãããæŠèª¬ãããŠããŸãã
floor: éšå±ã®äž»èŠãªå°é¢ãwall: 空éãå²ãåçŽãªé¢ãceiling: éšå±ã®å€©äºé¢ãtable: ç©ã眮ãããã«äœ¿ããããå¹³ãã§é«ãã®ããé¢ãdesk: ããŒãã«ã«äŒŒãŠãããå€ãã¯ä»äºãå匷ã«äœ¿ããããcouch: åžåŒµãã®æããã座é¢ãæ€åºãããå¹³é¢ã¯åº§ãéšåã衚ãããšããããdoor: å£ã®éå£éšãéããããã®å¯ååŒã®éå£ãwindow: å£ã®éå£éšã§ãéåžžã¯ã¬ã©ã¹ã§èŠãããŠãããother: ä»ã®ã«ããŽãªã«åœãŠã¯ãŸããªãæ€åºãããå¹³é¢ã®ããã®å æ¬çãªã©ãã«ã
ãã®åçŽãªæååã©ãã«ã¯ã幟äœåŠçãªããŒã¿ãæèçãªçè§£ãžãšå€æããããã¹ããŒãã§ä¿¡ææ§ã®é«ãARã€ã³ã¿ã©ã¯ã·ã§ã³ãäœæããããã®å¯èœæ§ã®äžçãéããŸãã
å¹³é¢åé¡ãæ²¡å ¥åäœéšãäžå€ãããçç±
衚é¢ã®çš®é¡ãåºå¥ããèœåã¯ãåãªããã€ããŒãªæ¹åã§ã¯ãããŸãããããã¯ãARã¢ããªã±ãŒã·ã§ã³ã®èšèšãšæ§ç¯ã®æ¹æ³ãæ ¹æ¬çã«å€ããŸããããã¯ãåçŽãªãã¥ãŒã¢ããããŠãŒã¶ãŒã®å®éã®ç°å¢ã«å¿çããã€ã³ããªãžã§ã³ãã§ã€ã³ã¿ã©ã¯ãã£ããªã·ã¹ãã ãžãšæè¯ãããŸãã
ãªã¢ãªãºã ãšæ²¡å ¥æã®åäž
æãçŽæ¥çãªå©ç¹ã¯ããªã¢ãªãºã ã®åçãªåäžã§ããä»®æ³ãªããžã§ã¯ããçŸå®äžçã®è«çã«åŸã£ãŠæ¯ãèãããšãã§ããããã«ãªããŸããä»®æ³ã®ãã¹ã±ããããŒã«ã¯wallã§ã¯ãªãfloorãšã©ãã«ä»ãããã衚é¢ã§è·³ããã¹ãã§ããããžã¿ã«ã®åçãã¬ãŒã ã¯wallã«ã®ã¿é
眮å¯èœã§ããã¹ãã§ããä»®æ³ã®ã³ãŒããŒã«ããã¯ceilingã§ã¯ãªããtableã®äžã«èªç¶ã«çœ®ãããã¹ãã§ããã»ãã³ãã£ãã¯ã©ãã«ã«åºã¥ããŠãããã®åçŽãªã«ãŒã«ã匷å¶ããããšã§ããŠãŒã¶ãŒã«ã·ãã¥ã¬ãŒã·ã§ã³ã®äžã«ããããšãæãåºããããããªã没å
¥æãæãªãç¬éãé²ããŸãã
ããã¹ããŒããªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ïŒUIïŒ
åŸæ¥ã®ARã§ã¯ãUIèŠçŽ ã¯ãã°ãã°ã«ã¡ã©ã®åã«æµ®ããã§ãããïŒããããã¢ãããã£ã¹ãã¬ã€ããŸãã¯HUDïŒããŸãã¯äžçã®äžã«äžèªç¶ã«é
眮ãããŠããŸãããå¹³é¢åé¡ã䜿ãã°ãUIã¯ç°å¢ã®äžéšã«ãªãããšãã§ããŸãã建ç¯ããžã¥ã¢ã©ã€ãŒãŒã·ã§ã³ã¢ããªã§ã枬å®ããŒã«ãèªåçã«å£ã«ã¹ããããããã補åããã¥ã¢ã«ãdeskãtableãšèªèãããªããžã§ã¯ãã®è¡šé¢ã«çŽæ¥ã€ã³ã¿ã©ã¯ãã£ããªæç€ºã衚瀺ãããããããšãæ³åããŠã¿ãŠãã ãããã¡ãã¥ãŒãã³ã³ãããŒã«ããã«ã¯è¿ãã®ç©ºããŠããwallã«æåœ±ã§ãããŠãŒã¶ãŒã®äžå¿èŠéãè§£æŸã§ããŸãã
é«åºŠãªç©çæŒç®ãšãªã¯ã«ãŒãžã§ã³
ç°å¢ã®æ§é ãçè§£ããããšã§ãããè€éã§çŸå®çãªç©çã·ãã¥ã¬ãŒã·ã§ã³ãå¯èœã«ãªããŸããã²ãŒã å
ã®ä»®æ³ãã£ã©ã¯ã¿ãŒã¯ãfloorãæ©ããcouchã«é£ã³ä¹ããwallsãé¿ãããªã©ãéšå±ãã€ã³ããªãžã§ã³ãã«ããã²ãŒãã§ããŸããããã«ããã®ç¥èã¯ãªã¯ã«ãŒãžã§ã³ã«ã圹ç«ã¡ãŸãããªã¯ã«ãŒãžã§ã³ã¯éåžžãæ·±åºŠã»ã³ã·ã³ã°ã«ãã£ãŠåŠçãããŸãããtableãfloorã®åã«ããããšãç¥ãããšã§ãã·ã¹ãã ã¯åºã«ç«ã£ãŠããä»®æ³ãªããžã§ã¯ãã®ã©ã®éšåãé ãã¹ããã«ã€ããŠãããè¯ã決å®ãäžãã®ã«åœ¹ç«ã¡ãŸãã
ã³ã³ããã¹ãã¢ãŠã§ã¢ãªã¢ããªã±ãŒã·ã§ã³
ããã«çã®åãæœãã§ããŸããã¢ããªã±ãŒã·ã§ã³ã¯ããŠãŒã¶ãŒã®ç°å¢ã«åºã¥ããŠãã®æ©èœãé©å¿ãããããšãã§ããããã«ãªããŸãã
- ã€ã³ããªã¢ãã¶ã€ã³ã¢ããªã¯ãéšå±ãã¹ãã£ã³ãã
floorãšwallsãèå¥ãããšãèªåçã«å¹³æ¹ãã£ãŒããèšç®ããé©åãªå®¶å ·ã®ã¬ã€ã¢ãŠããææ¡ã§ããŸãã - ãã£ãããã¹ã¢ããªã¯ããŠãŒã¶ãŒã«
floorã§è ç«ãŠäŒããããããæç€ºããããè¿ãã®tableã«æ°Žçã眮ãããæç€ºãããã§ããŸãã - ARã²ãŒã ã¯ããŠãŒã¶ãŒã®éšå±ã®ã¬ã€ã¢ãŠãã«åºã¥ããŠã¬ãã«ãåçã«çæã§ããŸããæµã¯æ€åºããã
couchã®äžããéãåºãŠããããwallãçªãç Žã£ãŠããããããããããŸããã
ã¢ã¯ã»ã·ããªãã£ãšããã²ãŒã·ã§ã³
ããã«å
ãèŠæ®ãããšãã»ãã³ãã£ãã¯ãµãŒãã§ã¹èªèã¯æ¯æŽã¢ããªã±ãŒã·ã§ã³ã®ããã®åºç€æè¡ã§ããWebXRã¢ããªã±ãŒã·ã§ã³ã¯ãèŠèŠé害è
ãæ°ãã空éãããã²ãŒãããã®ãå©ããããšãã§ããŸãããåæ¹ã®floorã«ã¯æç¢ºãªéè·¯ããããå³ã«tableãæ£é¢ã®wallã«doorããããŸãããšå£é ã§ã¬ã€ã¢ãŠããäŒããããšã§ãããã«ãããARã¯ãšã³ã¿ãŒãã€ã¡ã³ãåªäœãããçæŽ»ãåäžããããŠãŒãã£ãªãã£ãžãšå€ãããŸãã
å®è·µã¬ã€ãïŒWebXRå¹³é¢åé¡ã®å®è£
çè«ããå®è·µã«ç§»ããŸããããå®éã«ãã®æ©èœãã³ãŒãã§ã©ã®ããã«äœ¿çšããã®ã§ããããïŒäœ¿çšãã3Dã©ã€ãã©ãªïŒThree.jsãBabylon.jsãA-Frameãªã©ïŒã«ãã£ãŠè©³çްã¯è¥å¹²ç°ãªãå ŽåããããŸãããã³ã¢ãšãªãWebXR APIã®åŒã³åºãã¯æ®éçã§ããããã§ã¯ãWebXRéçºã§äººæ°ã®ããéžæè¢ã§ããThree.jsãäŸãšããŠäœ¿çšããŸãã
åææ¡ä»¶ãšãã©ãŠã¶ã®ãµããŒã
ãŸããWebXRãç¹ã«ãã®ããé«åºŠãªæ©èœã¯æå 端æè¡ã§ããããšãèªèããããšãéèŠã§ãããµããŒãã¯ãŸã æ®éçã§ã¯ãããŸããã
- ããã€ã¹ïŒ ARããµããŒãããææ°ã®ã¹ããŒããã©ã³ãŸãã¯ãããã»ãããå¿ èŠã§ãïŒAndroidã®å Žåã¯ARCore察å¿ãiOSã®å Žåã¯ARKit察å¿ïŒã
- ãã©ãŠã¶ïŒ ãµããŒãã¯äž»ã«AndroidçChromeã§å©çšå¯èœã§ããåžžã«caniuse.comã®ãããªãªãœãŒã¹ã§ææ°ã®äºææ§æ å ±ã確èªããŠãã ããã
- ã»ãã¥ã¢ãªã³ã³ããã¹ãïŒ WebXRã¯ã»ãã¥ã¢ãªã³ã³ããã¹ãïŒHTTPSãŸãã¯localhostïŒãå¿ èŠãšããŸãã
ã¹ããã1ïŒXRã»ãã·ã§ã³ã®ãªã¯ãšã¹ã
å¹³é¢åé¡ã䜿çšããã«ã¯ããimmersive-arãã»ãã·ã§ã³ããªã¯ãšã¹ãããéã«æç€ºçã«èŠæ±ããå¿
èŠããããŸããããã¯ãrequiredFeaturesé
åã«'plane-detection'ã远å ããããšã§è¡ããŸããã»ãã³ãã£ãã¯ã©ãã«ã¯ãã®æ©èœã®äžéšã§ãããããã«å¯Ÿããå¥ã®ãã©ã°ã¯ãããŸãããã·ã¹ãã ãåé¡ããµããŒãããŠããå Žåã平颿€åºãæå¹ã«ãªã£ãŠãããšãã«ã©ãã«ãæäŸãããŸãã
async function activateXR() { if (navigator.xr) { try { const session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['local', 'hit-test', 'plane-detection'] }); // Session setup code goes here... } catch (e) { console.error("Failed to start AR session:", e); } } }
ã¹ããã2ïŒã¬ã³ããŒã«ãŒãã§ã®å¹³é¢ãžã®ã¢ã¯ã»ã¹
ã»ãã·ã§ã³ãå®è¡ããããšãã¬ã³ããŒã«ãŒãïŒéåžžã¯`session.requestAnimationFrame`ã䜿çšããŠããã¬ãŒã ããšã«å®è¡ããã颿°ïŒãã§ããŸãããã®ã«ãŒãå ã§ã`XRFrame`ãªããžã§ã¯ãã¯ARäžçã®çŸåšã®ç¶æ ã®ã¹ãããã·ã§ãããæäŸããŸããããã§ãæ€åºãããå¹³é¢ã®ã»ããã«ã¢ã¯ã»ã¹ã§ããŸãã
å¹³é¢ã¯`XRPlaneSet`ã§æäŸãããŸããããã¯JavaScriptã®`Set`ã®ãããªãªããžã§ã¯ãã§ãããã®ã»ãããå埩åŠçããŠãåã ã®`XRPlane`ãååŸã§ããŸããéèŠãªã®ã¯ãåå¹³é¢ã®`semanticLabel`ããããã£ã確èªããããšã§ãã
function onXRFrame(time, frame) { const pose = frame.getViewerPose(referenceSpace); if (pose) { // ... update camera and other objects const planes = frame.detectedPlanes; // This is the XRPlaneSet planes.forEach(plane => { // Check if we have seen this plane before if (!scenePlaneObjects.has(plane)) { // A new plane has been detected console.log(`New plane found with label: ${plane.semanticLabel}`); createPlaneVisualization(plane); } }); } session.requestAnimationFrame(onXRFrame); }
ã¹ããã3ïŒåé¡ãããå¹³é¢ã®å¯èŠåïŒThree.jsã®äŸïŒ
ããŠã楜ããéšåã§ããåé¡ã䜿çšããŠè¡šé¢ã®å¯èŠåæ¹æ³ãå€ããŠã¿ãŸããããäžè¬çãªãããã°ããã³éçºææ³ã¯ãå¹³é¢ããã®ã¿ã€ãã«åºã¥ããŠè²åãããããšã§ããããã«ãããã·ã¹ãã ãäœãèå¥ããŠãããã«ã€ããŠå³åº§ã«èŠèŠçãªãã£ãŒãããã¯ãåŸãããŸãã
ãŸããã»ãã³ãã£ãã¯ã©ãã«ã«åºã¥ããŠç°ãªãè²ã®ãããªã¢ã«ãè¿ããã«ããŒé¢æ°ãäœæããŸãããã
function getMaterialForLabel(label) { switch (label) { case 'floor': return new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.5 }); // Green case 'wall': return new THREE.MeshBasicMaterial({ color: 0x0000ff, transparent: true, opacity: 0.5 }); // Blue case 'table': case 'desk': return new THREE.MeshBasicMaterial({ color: 0xffff00, transparent: true, opacity: 0.5 }); // Yellow case 'ceiling': return new THREE.MeshBasicMaterial({ color: 0xff00ff, transparent: true, opacity: 0.5 }); // Magenta default: return new THREE.MeshBasicMaterial({ color: 0x808080, transparent: true, opacity: 0.5 }); // Gray } }
次ã«ãå¹³é¢ã®3Dãªããžã§ã¯ããäœæãã颿°ãèšè¿°ããŸãã`XRPlane`ãªããžã§ã¯ãã¯ãäžé£ã®é ç¹ã«ãã£ãŠå®çŸ©ãããããªãŽã³ãæäŸããŸãããããã®é ç¹ã䜿çšããŠ`THREE.Shape`ãäœæããããããããã«æŒãåºããŠåã¿ãä»ããèŠããããã«ããããšãã§ããŸãã
const scenePlaneObjects = new Map(); // To keep track of our planes function createPlaneVisualization(plane) { // Create the geometry from the plane's polygon vertices const polygon = plane.polygon; const shape = new THREE.Shape(); shape.moveTo(polygon[0].x, polygon[0].z); for (let i = 1; i < polygon.length; i++) { shape.lineTo(polygon[i].x, polygon[i].z); } shape.closePath(); const geometry = new THREE.ShapeGeometry(shape); geometry.rotateX(-Math.PI / 2); // Rotate to align with horizontal/vertical orientation // Get the right material for the label const material = getMaterialForLabel(plane.semanticLabel); const mesh = new THREE.Mesh(geometry, material); // Position and orient the mesh using the plane's pose const pose = new THREE.Matrix4(); pose.fromArray(plane.transform.matrix); mesh.matrix.copy(pose); mesh.matrixAutoUpdate = false; scene.add(mesh); scenePlaneObjects.set(plane, mesh); }
å¹³é¢ã®ã»ããã¯å€åããå¯èœæ§ãããããšãå¿ããªãã§ãã ãããæ°ããå¹³é¢ã远å ãããããæ¢åã®ãã®ãæŽæ°ããããïŒããªãŽã³ã倧ãããªããªã©ïŒãã·ã¹ãã ãçè§£ãä¿®æ£ãããšäžéšãåé€ããããããããšããããŸããã¬ã³ããŒã«ãŒãã¯ãã©ã®`XRPlane`ãªããžã§ã¯ãã«å¯ŸããŠãã§ã«ã¡ãã·ã¥ãäœæãããã远跡ãã`detectedPlanes`ã»ããããæ¶ããå¹³é¢ã®ã¡ãã·ã¥ãåé€ããããšã§ããããåŠçããå¿ èŠããããŸãã
çŸå®äžçã§ã®ãŠãŒã¹ã±ãŒã¹ãšã€ã³ã¹ãã¬ãŒã·ã§ã³
æè¡çãªåºç€ãæŽã£ããšããã§ããããäœãå¯èœã«ãããã«æ»ããŸãããããã®åœ±é¿ã¯å€ãã®ç£æ¥ã«åã³ãŸãã
Eã³ããŒã¹ãšå°å£²
ããã¯åæ¥çã«æãéèŠãªåéã®äžã€ã§ããIKEAã®ãããªäŒæ¥ã¯ããã§ã«ä»®æ³å®¶å
·ãé
眮ããåãå®èšŒããŠããŸããå¹³é¢åé¡ã¯ãããæ¬¡ã®ã¬ãã«ã«åŒãäžããŸãããŠãŒã¶ãŒãã©ã°ãéžæãããšãã¢ããªã¯floorãšã©ãã«ä»ãããã衚é¢ã«ã®ã¿é
眮ãèš±å¯ããŸããæ°ããã·ã£ã³ããªã¢ã詊ãããšãã§ããããã¯ceilingã«ã¹ãããããŸããããã«ããããŠãŒã¶ãŒã®ããªã¯ã·ã§ã³ãåãé€ãããä»®æ³è©Šçäœéšãã¯ããã«çŽæçã§çŸå®çã«ãªãã賌å
¥ãžã®ä¿¡é Œãé«ãŸããŸãã
ã²ãŒã ãšãšã³ã¿ãŒãã€ã¡ã³ã
ä»®æ³ããããããªãã®å®¶ãçè§£ããã²ãŒã ãæ³åããŠã¿ãŠãã ãããç«ã¯couchã§æŒå¯ãããç¬ã¯floorãæšªåã£ãŠããŒã«ã远ããããã¯ã¢ã¯wallãéãäžããããšãã§ããŸããã¿ã¯ãŒãã£ãã§ã³ã¹ã²ãŒã ã¯ããªãã®tableã§ãã¬ã€ã§ããæµã¯ç«¯ãå°éããŸãããã®ã¬ãã«ã®ç°å¢ã€ã³ã¿ã©ã¯ã·ã§ã³ã¯ãéåžžã«å人çã§ãç¡éã«ãªãã¬ã€å¯èœãªã²ãŒã äœéšãçã¿åºããŸãã
建ç¯ããšã³ãžãã¢ãªã³ã°ã建èšïŒAECïŒ
å°éå®¶ã¯WebXRã䜿çšããŠãçŸå Žã§ããé«ã粟床ã§èšèšãèŠèŠåã§ããŸãã建ç¯å®¶ã¯ä»®æ³ã®å£ã®æ¡åŒµãæåœ±ãããããæ¢åã®ç©ççãªwallãšã©ã®ããã«æŽåããããæ£ç¢ºã«ç¢ºèªã§ããŸãã建èšç®¡çè
ã¯ã倧ããªæ©åšã®3Dã¢ãã«ãfloorã«é
眮ããŠããããåãŸãããšã確èªããããžã¹ãã£ã¯ã¹ãèšç»ã§ããŸããããã«ããããšã©ãŒãæžå°ããé¢ä¿è
éã®ã³ãã¥ãã±ãŒã·ã§ã³ãåäžããŸãã
ãã¬ãŒãã³ã°ãšã·ãã¥ã¬ãŒã·ã§ã³
ç£æ¥ãã¬ãŒãã³ã°ã®ããã«ãWebXRã¯å®å
šã§è²»çšå¯Ÿå¹æã®é«ãã·ãã¥ã¬ãŒã·ã§ã³ãäœæã§ããŸããç ä¿®çã¯ãå®éã®deskã«ä»®æ³ã¢ãã«ãé
眮ããããšã§ãè€éãªæ©æ¢°ã®æäœæ¹æ³ãåŠã¶ããšãã§ããŸããæç€ºãèŠåã¯é£æ¥ããwallã®è¡šé¢ã«è¡šç€ºãããé«äŸ¡ãªç©çã·ãã¥ã¬ãŒã¿ãŒãå¿
èŠãšããã«ããªããã§ã³ã³ããã¹ãã¢ãŠã§ã¢ãªåŠç¿ç°å¢ãäœãåºããŸãã
課é¡ãšä»åŸã®å±æ
éåžžã«ææã§ããäžæ¹ã§ãWebXRå¹³é¢åé¡ã¯ãŸã æ°èæè¡ã§ããã課é¡ããããŸãã
- 粟床ãšä¿¡é Œæ§ïŒ åé¡ã¯ç¢ºççã§ãããæ±ºå®çã§ã¯ãããŸãããäœãã³ãŒããŒããŒãã«ã¯ãæåã¯
floorã®äžéšãšããŠèª€èªããããããããŸããããæ£ããã£ãæºã¯ãŸã£ããèªèãããªããããããŸããã粟床ã¯ãããã€ã¹ã®ããŒããŠã§ã¢ãç §ææ¡ä»¶ãç°å¢ã®è€éãã«å€§ããäŸåããŸããéçºè ã¯ãææçºçãã誀åé¡ã«å¯ŸåŠã§ããå ç¢ãªäœéšãèšèšããå¿ èŠããããŸãã - éãããã©ãã«ã»ããïŒ çŸåšã®ã»ãã³ãã£ãã¯ã©ãã«ã®ã»ããã¯æçšã§ãããç¶²çŸ çã§ã¯ãããŸãããéæ®µãã«ãŠã³ã¿ãŒããããæ€ åãæ¬æ£ãªã©ã®äžè¬çãªãªããžã§ã¯ãã¯å«ãŸããŠããŸãããæè¡ãæçããã«ã€ããŠããã®ãªã¹ããæ¡å€§ããããã«è©³çްãªç°å¢çè§£ãæäŸãããããšãæåŸ ãããŸãã
- ããã©ãŒãã³ã¹ïŒ ç°å¢ã®ç¶ç¶çãªã¹ãã£ã³ãã¡ãã·ã¥åãåé¡ã¯èšç®éçŽçã§ããã¢ãã€ã«ããã€ã¹ã§ã¯éèŠãªãªãœãŒã¹ã§ããããããªãŒãšåŠçèœåãæ¶è²»ããŸããéçºè ã¯ãã¹ã ãŒãºãªãŠãŒã¶ãŒäœéšã確ä¿ããããã«ããã©ãŒãã³ã¹ã«æ³šæãæãå¿ èŠããããŸãã
- ãã©ã€ãã·ãŒïŒ ãã®æ§è³ªäžãç°å¢ã»ã³ã·ã³ã°æè¡ã¯ãŠãŒã¶ãŒã®å人空éã«é¢ããè©³çŽ°ãªæ å ±ããã£ããã£ããŸããWebXR仿§ã¯ãã©ã€ãã·ãŒãæ žã«èšèšãããŠããããã¹ãŠã®åŠçã¯ããã€ã¹äžã§è¡ãããã«ã¡ã©ããŒã¿ã¯ãŠã§ãããŒãžã«éä¿¡ãããŸãããããããæ¥çãéææ§ãšæç¢ºãªåæã¢ãã«ãéããŠãŠãŒã¶ãŒã®ä¿¡é Œãç¶æããããšãéèŠã§ãã
å°æ¥ã®æ¹åæ§
ãµãŒãã§ã¹èªèã®æªæ¥ã¯æããã§ããããã€ãã®äž»èŠãªåéã§ã®é²æ©ãæåŸ ã§ããŸããæ€åºå¯èœãªã»ãã³ãã£ãã¯ã©ãã«ã®ã»ããã¯ééããªãå¢ããã§ãããããŸããéçºè ãTensorFlow.jsã®ãããªãŠã§ãããŒã¹ã®æ©æ¢°åŠç¿ãã¬ãŒã ã¯ãŒã¯ã䜿çšããŠãã¢ããªã±ãŒã·ã§ã³ã«é¢é£ããç¹å®ã®ãªããžã§ã¯ãã衚é¢ãèªèããã¢ãã«ããã¬ãŒãã³ã°ã§ããã«ã¹ã¿ã åé¡åšã®å°é ãèŠããããããããŸããã黿°æåž«ã®ã¢ããªããããŸããŸãªã¿ã€ãã®å£ã³ã³ã»ã³ããèå¥ããŠã©ãã«ä»ãã§ããããšãæ³åããŠã¿ãŠãã ãããå¹³é¢åé¡ãšDOM Overlay APIã®ãããªä»ã®WebXRã¢ãžã¥ãŒã«ãšã®çµ±åã«ããã2DãŠã§ãã³ã³ãã³ããš3Däžçã®ãããªãç·å¯ãªçµ±åãå¯èœã«ãªããŸãã
çµè«ïŒç©ºéèªèãŠã§ãã®æ§ç¯
WebXRå¹³é¢åé¡ã¯ãARã®ç©¶æ¥µã®ç®æšã§ãããããžã¿ã«ãšç©çã®ã·ãŒã ã¬ã¹ã§ã€ã³ããªãžã§ã³ããªèåã«åããèšå¿µç¢çãªäžæ©ã衚ããŠããŸããããã¯ãåã«ã³ã³ãã³ããäžçã«é 眮ããããšãããäžçãçã«çè§£ãã察話ããããšãã§ããäœéšãåµé ããããšãžãšç§ãã¡ãå°ããŸããéçºè ã«ãšã£ãŠãããã¯ããé«ãã¬ãã«ã®ãªã¢ãªãºã ãå®çšæ§ãåµé æ§ãè§£ãæŸã€åŒ·åãªæ°ããããŒã«ã§ãããŠãŒã¶ãŒã«ãšã£ãŠã¯ãARãåãªãç®æ°ããã§ã¯ãªããç§ãã¡ãåŠã³ãåããéã³ãæ å ±ãšã€ãªããæ¹æ³ã®çŽæçã§äžå¯æ¬ ãªäžéšãšãªãæªæ¥ãçŽæããŸãã
ã€ããŒã·ããŠã§ãã¯ãŸã åææ®µéã«ãããç§ãã¡ã¯ãã®æªæ¥ã®èšèšè ã§ããå¹³é¢åé¡ã®ãããªæè¡ãåãå ¥ããããšã§ãéçºè ã¯ä»æ¥ããæ¬¡äžä»£ã®ç©ºéèªèã¢ããªã±ãŒã·ã§ã³ã®æ§ç¯ãå§ããããšãã§ããŸãããããå®éšãå§ãããã¢ãæ§ç¯ããçºèŠãå ±æããç§ãã¡ã®åšãã®ç©ºéãçè§£ãããŠã§ãã®åœ¢æãæäŒã£ãŠãã ããã