[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-meta-iwsdk-depth-occlusion":3,"mdc--omk3q7-key":37,"related-repo-meta-iwsdk-depth-occlusion":1689,"related-org-meta-iwsdk-depth-occlusion":1786},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":35,"mdContent":36},"iwsdk-depth-occlusion","implement depth sensing and occlusion in IWSDK","Guide for implementing depth sensing and occlusion in IWSDK projects. Use when adding depth-based occlusion to hide virtual objects behind real-world surfaces, configuring DepthSensingSystem, choosing occlusion modes, or troubleshooting objects that disappear or fail to occlude.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"meta","Meta Open Source","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmeta.png","facebook",[13,17,20,23],{"name":14,"slug":15,"type":16},"IWSDK","iwsdk","tag",{"name":18,"slug":19,"type":16},"VR","vr",{"name":21,"slug":22,"type":16},"AR","ar",{"name":24,"slug":25,"type":16},"WebXR","webxr",358,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fimmersive-web-sdk","2026-07-21T05:39:07.241041",null,73,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":34},[],"WebXR made simple. Full-featured framework with interactions, locomotion, and spatial UI. Powered by Three.js.","https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fimmersive-web-sdk\u002Ftree\u002FHEAD\u002Fpackages\u002Fstarter-assets\u002Fclaude-injections\u002Fskills\u002Fiwsdk-depth-occlusion","---\nname: iwsdk-depth-occlusion\ndescription: Guide for implementing depth sensing and occlusion in IWSDK projects. Use when adding depth-based occlusion to hide virtual objects behind real-world surfaces, configuring DepthSensingSystem, choosing occlusion modes, or troubleshooting objects that disappear or fail to occlude.\nargument-hint: [description of depth occlusion task]\n---\n\n# Depth Occlusion\n\nHide virtual objects behind real-world surfaces using WebXR depth sensing. The system samples a per-pixel depth texture from the XR device and compares it against each virtual fragment's depth — if the real surface is closer, the fragment is faded out.\n\n## Setup\n\nThree things are required: XR session depth config, the system, and the component.\n\n### 1. Enable depth sensing on the XR session\n\n```typescript\nWorld.create(container, {\n  xr: {\n    sessionMode: SessionMode.ImmersiveAR,\n    referenceSpace: ReferenceSpaceType.Unbounded,\n    features: {\n      depthSensing: {\n        required: true,\n        usage: 'gpu-optimized', \u002F\u002F or 'cpu-optimized'\n        format: 'float32',\n      },\n      hitTest: { required: true },\n      anchors: { required: true },\n      unbounded: { required: true },\n    },\n  },\n});\n```\n\n### 2. Register `DepthSensingSystem` and `DepthOccludable`\n\n```typescript\nimport { DepthSensingSystem, DepthOccludable } from '@iwsdk\u002Fcore';\n\nworld\n  .registerSystem(DepthSensingSystem, {\n    configData: {\n      enableDepthTexture: true,\n      enableOcclusion: true,\n      useFloat32: true,\n      blurRadius: 20.0,\n    },\n  })\n  .registerComponent(DepthOccludable);\n```\n\n### 3. Add `DepthOccludable` to entities\n\n```typescript\nimport { DepthOccludable, OcclusionShadersMode } from '@iwsdk\u002Fcore';\n\n\u002F\u002F Soft occlusion (default) — smooth edges via 13-tap blur\nentity.addComponent(DepthOccludable);\n\n\u002F\u002F Hard occlusion — sharp edges, single depth sample\nentity.addComponent(DepthOccludable, {\n  mode: OcclusionShadersMode.HardOcclusion,\n});\n\n\u002F\u002F MinMax occlusion — best quality, extra preprocessing pass\nentity.addComponent(DepthOccludable, {\n  mode: OcclusionShadersMode.MinMaxSoftOcclusion,\n});\n```\n\nThe material must have `transparent: true`. The system sets this automatically, but verify it on custom materials.\n\n## Occlusion Modes\n\n| Mode                  | Quality | Cost   | Best For                                                          |\n| --------------------- | ------- | ------ | ----------------------------------------------------------------- |\n| `SoftOcclusion`       | Good    | Low    | Most objects — smooth edges, hides depth aliasing                 |\n| `HardOcclusion`       | Basic   | Lowest | Small objects or when sharp edges are acceptable                  |\n| `MinMaxSoftOcclusion` | Best    | Medium | Large objects with complex silhouettes against varied backgrounds |\n\n## DepthSensingSystem Config\n\n| Property             | Type    | Default | Description                               |\n| -------------------- | ------- | ------- | ----------------------------------------- |\n| `enableOcclusion`    | Boolean | `true`  | Master switch for all occlusion           |\n| `enableDepthTexture` | Boolean | `true`  | Create GPU textures from depth data       |\n| `useFloat32`         | Boolean | `true`  | Float32 depth textures (higher precision) |\n| `blurRadius`         | Float32 | `20.0`  | Blur radius for soft occlusion (pixels)   |\n\n## Depth Sensing Modes\n\n| Mode            | When to use                                                                                                                                                                                                     |\n| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `cpu-optimized` | Simpler, works everywhere. Depth as linear meters in a DataArrayTexture.                                                                                                                                        |\n| `gpu-optimized` | **Recommended.** Matches Quest hardware format. Depth as reverse-Z inverse depth in an ExternalTexture. Required for production parity with on-device behavior. Note that Quest devices only support this mode. |\n\n## AR Session Requirements\n\nDepth occlusion only works in AR mode. The scene background must be `null` for passthrough:\n\n```typescript\nscene.background = null;\n```\n\n## Troubleshooting\n\n**Objects never occlude (always visible on top)**\n\n- Verify the entity has `DepthOccludable` component\n- Verify `DepthSensingSystem` is registered with `enableOcclusion: true`\n- Check that `depthSensing` is in the XR features config\n\n**Objects always invisible in IWER**\n\n- In the IWER emulator, the SEM must have loaded environment geometry. If no room is loaded, no depth data is produced.\n- Check the console for \"Warning: depth-sensing feature not enabled\"\n\n**Flickering or noisy occlusion edges**\n\n- Increase `blurRadius` (try 30-40)\n- Switch from `HardOcclusion` to `SoftOcclusion`\n- Use `MinMaxSoftOcclusion` for best edge quality\n\n## Notes\n\n- **Only works in AR mode** — depth sensing requires `SessionMode.ImmersiveAR` with `depthSensing` in features.\n- **`DepthOccludable` may be incompatible with custom shaders** that override `diffuse` or `fog_vertex` includes, since the occlusion code is injected at those shader hook points.\n- **Non-occludable objects** are simply entities without `DepthOccludable` — they render normally on top of everything.\n- **Register `DepthOccludable` as a component** via `world.registerComponent(DepthOccludable)` in addition to registering the system.\n",{"data":38,"body":41},{"name":4,"description":6,"argument-hint":39},[40],"description of depth occlusion task",{"type":42,"children":43},"root",[44,53,59,66,71,78,485,505,748,761,1028,1041,1047,1164,1170,1322,1328,1388,1394,1407,1441,1447,1455,1503,1511,1524,1532,1576,1582,1683],{"type":45,"tag":46,"props":47,"children":49},"element","h1",{"id":48},"depth-occlusion",[50],{"type":51,"value":52},"text","Depth Occlusion",{"type":45,"tag":54,"props":55,"children":56},"p",{},[57],{"type":51,"value":58},"Hide virtual objects behind real-world surfaces using WebXR depth sensing. The system samples a per-pixel depth texture from the XR device and compares it against each virtual fragment's depth — if the real surface is closer, the fragment is faded out.",{"type":45,"tag":60,"props":61,"children":63},"h2",{"id":62},"setup",[64],{"type":51,"value":65},"Setup",{"type":45,"tag":54,"props":67,"children":68},{},[69],{"type":51,"value":70},"Three things are required: XR session depth config, the system, and the component.",{"type":45,"tag":72,"props":73,"children":75},"h3",{"id":74},"_1-enable-depth-sensing-on-the-xr-session",[76],{"type":51,"value":77},"1. Enable depth sensing on the XR session",{"type":45,"tag":79,"props":80,"children":85},"pre",{"className":81,"code":82,"language":83,"meta":84,"style":84},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","World.create(container, {\n  xr: {\n    sessionMode: SessionMode.ImmersiveAR,\n    referenceSpace: ReferenceSpaceType.Unbounded,\n    features: {\n      depthSensing: {\n        required: true,\n        usage: 'gpu-optimized', \u002F\u002F or 'cpu-optimized'\n        format: 'float32',\n      },\n      hitTest: { required: true },\n      anchors: { required: true },\n      unbounded: { required: true },\n    },\n  },\n});\n","typescript","",[86],{"type":45,"tag":87,"props":88,"children":89},"code",{"__ignoreMap":84},[90,129,148,180,211,228,245,268,307,337,346,382,415,448,457,466],{"type":45,"tag":91,"props":92,"children":95},"span",{"class":93,"line":94},"line",1,[96,102,108,114,119,124],{"type":45,"tag":91,"props":97,"children":99},{"style":98},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[100],{"type":51,"value":101},"World",{"type":45,"tag":91,"props":103,"children":105},{"style":104},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[106],{"type":51,"value":107},".",{"type":45,"tag":91,"props":109,"children":111},{"style":110},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[112],{"type":51,"value":113},"create",{"type":45,"tag":91,"props":115,"children":116},{"style":98},[117],{"type":51,"value":118},"(container",{"type":45,"tag":91,"props":120,"children":121},{"style":104},[122],{"type":51,"value":123},",",{"type":45,"tag":91,"props":125,"children":126},{"style":104},[127],{"type":51,"value":128}," {\n",{"type":45,"tag":91,"props":130,"children":132},{"class":93,"line":131},2,[133,139,144],{"type":45,"tag":91,"props":134,"children":136},{"style":135},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[137],{"type":51,"value":138},"  xr",{"type":45,"tag":91,"props":140,"children":141},{"style":104},[142],{"type":51,"value":143},":",{"type":45,"tag":91,"props":145,"children":146},{"style":104},[147],{"type":51,"value":128},{"type":45,"tag":91,"props":149,"children":151},{"class":93,"line":150},3,[152,157,161,166,170,175],{"type":45,"tag":91,"props":153,"children":154},{"style":135},[155],{"type":51,"value":156},"    sessionMode",{"type":45,"tag":91,"props":158,"children":159},{"style":104},[160],{"type":51,"value":143},{"type":45,"tag":91,"props":162,"children":163},{"style":98},[164],{"type":51,"value":165}," SessionMode",{"type":45,"tag":91,"props":167,"children":168},{"style":104},[169],{"type":51,"value":107},{"type":45,"tag":91,"props":171,"children":172},{"style":98},[173],{"type":51,"value":174},"ImmersiveAR",{"type":45,"tag":91,"props":176,"children":177},{"style":104},[178],{"type":51,"value":179},",\n",{"type":45,"tag":91,"props":181,"children":183},{"class":93,"line":182},4,[184,189,193,198,202,207],{"type":45,"tag":91,"props":185,"children":186},{"style":135},[187],{"type":51,"value":188},"    referenceSpace",{"type":45,"tag":91,"props":190,"children":191},{"style":104},[192],{"type":51,"value":143},{"type":45,"tag":91,"props":194,"children":195},{"style":98},[196],{"type":51,"value":197}," ReferenceSpaceType",{"type":45,"tag":91,"props":199,"children":200},{"style":104},[201],{"type":51,"value":107},{"type":45,"tag":91,"props":203,"children":204},{"style":98},[205],{"type":51,"value":206},"Unbounded",{"type":45,"tag":91,"props":208,"children":209},{"style":104},[210],{"type":51,"value":179},{"type":45,"tag":91,"props":212,"children":214},{"class":93,"line":213},5,[215,220,224],{"type":45,"tag":91,"props":216,"children":217},{"style":135},[218],{"type":51,"value":219},"    features",{"type":45,"tag":91,"props":221,"children":222},{"style":104},[223],{"type":51,"value":143},{"type":45,"tag":91,"props":225,"children":226},{"style":104},[227],{"type":51,"value":128},{"type":45,"tag":91,"props":229,"children":231},{"class":93,"line":230},6,[232,237,241],{"type":45,"tag":91,"props":233,"children":234},{"style":135},[235],{"type":51,"value":236},"      depthSensing",{"type":45,"tag":91,"props":238,"children":239},{"style":104},[240],{"type":51,"value":143},{"type":45,"tag":91,"props":242,"children":243},{"style":104},[244],{"type":51,"value":128},{"type":45,"tag":91,"props":246,"children":248},{"class":93,"line":247},7,[249,254,258,264],{"type":45,"tag":91,"props":250,"children":251},{"style":135},[252],{"type":51,"value":253},"        required",{"type":45,"tag":91,"props":255,"children":256},{"style":104},[257],{"type":51,"value":143},{"type":45,"tag":91,"props":259,"children":261},{"style":260},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[262],{"type":51,"value":263}," true",{"type":45,"tag":91,"props":265,"children":266},{"style":104},[267],{"type":51,"value":179},{"type":45,"tag":91,"props":269,"children":271},{"class":93,"line":270},8,[272,277,281,286,292,297,301],{"type":45,"tag":91,"props":273,"children":274},{"style":135},[275],{"type":51,"value":276},"        usage",{"type":45,"tag":91,"props":278,"children":279},{"style":104},[280],{"type":51,"value":143},{"type":45,"tag":91,"props":282,"children":283},{"style":104},[284],{"type":51,"value":285}," '",{"type":45,"tag":91,"props":287,"children":289},{"style":288},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[290],{"type":51,"value":291},"gpu-optimized",{"type":45,"tag":91,"props":293,"children":294},{"style":104},[295],{"type":51,"value":296},"'",{"type":45,"tag":91,"props":298,"children":299},{"style":104},[300],{"type":51,"value":123},{"type":45,"tag":91,"props":302,"children":304},{"style":303},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[305],{"type":51,"value":306}," \u002F\u002F or 'cpu-optimized'\n",{"type":45,"tag":91,"props":308,"children":310},{"class":93,"line":309},9,[311,316,320,324,329,333],{"type":45,"tag":91,"props":312,"children":313},{"style":135},[314],{"type":51,"value":315},"        format",{"type":45,"tag":91,"props":317,"children":318},{"style":104},[319],{"type":51,"value":143},{"type":45,"tag":91,"props":321,"children":322},{"style":104},[323],{"type":51,"value":285},{"type":45,"tag":91,"props":325,"children":326},{"style":288},[327],{"type":51,"value":328},"float32",{"type":45,"tag":91,"props":330,"children":331},{"style":104},[332],{"type":51,"value":296},{"type":45,"tag":91,"props":334,"children":335},{"style":104},[336],{"type":51,"value":179},{"type":45,"tag":91,"props":338,"children":340},{"class":93,"line":339},10,[341],{"type":45,"tag":91,"props":342,"children":343},{"style":104},[344],{"type":51,"value":345},"      },\n",{"type":45,"tag":91,"props":347,"children":349},{"class":93,"line":348},11,[350,355,359,364,369,373,377],{"type":45,"tag":91,"props":351,"children":352},{"style":135},[353],{"type":51,"value":354},"      hitTest",{"type":45,"tag":91,"props":356,"children":357},{"style":104},[358],{"type":51,"value":143},{"type":45,"tag":91,"props":360,"children":361},{"style":104},[362],{"type":51,"value":363}," {",{"type":45,"tag":91,"props":365,"children":366},{"style":135},[367],{"type":51,"value":368}," required",{"type":45,"tag":91,"props":370,"children":371},{"style":104},[372],{"type":51,"value":143},{"type":45,"tag":91,"props":374,"children":375},{"style":260},[376],{"type":51,"value":263},{"type":45,"tag":91,"props":378,"children":379},{"style":104},[380],{"type":51,"value":381}," },\n",{"type":45,"tag":91,"props":383,"children":385},{"class":93,"line":384},12,[386,391,395,399,403,407,411],{"type":45,"tag":91,"props":387,"children":388},{"style":135},[389],{"type":51,"value":390},"      anchors",{"type":45,"tag":91,"props":392,"children":393},{"style":104},[394],{"type":51,"value":143},{"type":45,"tag":91,"props":396,"children":397},{"style":104},[398],{"type":51,"value":363},{"type":45,"tag":91,"props":400,"children":401},{"style":135},[402],{"type":51,"value":368},{"type":45,"tag":91,"props":404,"children":405},{"style":104},[406],{"type":51,"value":143},{"type":45,"tag":91,"props":408,"children":409},{"style":260},[410],{"type":51,"value":263},{"type":45,"tag":91,"props":412,"children":413},{"style":104},[414],{"type":51,"value":381},{"type":45,"tag":91,"props":416,"children":418},{"class":93,"line":417},13,[419,424,428,432,436,440,444],{"type":45,"tag":91,"props":420,"children":421},{"style":135},[422],{"type":51,"value":423},"      unbounded",{"type":45,"tag":91,"props":425,"children":426},{"style":104},[427],{"type":51,"value":143},{"type":45,"tag":91,"props":429,"children":430},{"style":104},[431],{"type":51,"value":363},{"type":45,"tag":91,"props":433,"children":434},{"style":135},[435],{"type":51,"value":368},{"type":45,"tag":91,"props":437,"children":438},{"style":104},[439],{"type":51,"value":143},{"type":45,"tag":91,"props":441,"children":442},{"style":260},[443],{"type":51,"value":263},{"type":45,"tag":91,"props":445,"children":446},{"style":104},[447],{"type":51,"value":381},{"type":45,"tag":91,"props":449,"children":451},{"class":93,"line":450},14,[452],{"type":45,"tag":91,"props":453,"children":454},{"style":104},[455],{"type":51,"value":456},"    },\n",{"type":45,"tag":91,"props":458,"children":460},{"class":93,"line":459},15,[461],{"type":45,"tag":91,"props":462,"children":463},{"style":104},[464],{"type":51,"value":465},"  },\n",{"type":45,"tag":91,"props":467,"children":469},{"class":93,"line":468},16,[470,475,480],{"type":45,"tag":91,"props":471,"children":472},{"style":104},[473],{"type":51,"value":474},"}",{"type":45,"tag":91,"props":476,"children":477},{"style":98},[478],{"type":51,"value":479},")",{"type":45,"tag":91,"props":481,"children":482},{"style":104},[483],{"type":51,"value":484},";\n",{"type":45,"tag":72,"props":486,"children":488},{"id":487},"_2-register-depthsensingsystem-and-depthoccludable",[489,491,497,499],{"type":51,"value":490},"2. Register ",{"type":45,"tag":87,"props":492,"children":494},{"className":493},[],[495],{"type":51,"value":496},"DepthSensingSystem",{"type":51,"value":498}," and ",{"type":45,"tag":87,"props":500,"children":502},{"className":501},[],[503],{"type":51,"value":504},"DepthOccludable",{"type":45,"tag":79,"props":506,"children":508},{"className":81,"code":507,"language":83,"meta":84,"style":84},"import { DepthSensingSystem, DepthOccludable } from '@iwsdk\u002Fcore';\n\nworld\n  .registerSystem(DepthSensingSystem, {\n    configData: {\n      enableDepthTexture: true,\n      enableOcclusion: true,\n      useFloat32: true,\n      blurRadius: 20.0,\n    },\n  })\n  .registerComponent(DepthOccludable);\n",[509],{"type":45,"tag":87,"props":510,"children":511},{"__ignoreMap":84},[512,566,575,583,609,625,645,665,685,707,714,727],{"type":45,"tag":91,"props":513,"children":514},{"class":93,"line":94},[515,521,525,530,534,539,544,549,553,558,562],{"type":45,"tag":91,"props":516,"children":518},{"style":517},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[519],{"type":51,"value":520},"import",{"type":45,"tag":91,"props":522,"children":523},{"style":104},[524],{"type":51,"value":363},{"type":45,"tag":91,"props":526,"children":527},{"style":98},[528],{"type":51,"value":529}," DepthSensingSystem",{"type":45,"tag":91,"props":531,"children":532},{"style":104},[533],{"type":51,"value":123},{"type":45,"tag":91,"props":535,"children":536},{"style":98},[537],{"type":51,"value":538}," DepthOccludable",{"type":45,"tag":91,"props":540,"children":541},{"style":104},[542],{"type":51,"value":543}," }",{"type":45,"tag":91,"props":545,"children":546},{"style":517},[547],{"type":51,"value":548}," from",{"type":45,"tag":91,"props":550,"children":551},{"style":104},[552],{"type":51,"value":285},{"type":45,"tag":91,"props":554,"children":555},{"style":288},[556],{"type":51,"value":557},"@iwsdk\u002Fcore",{"type":45,"tag":91,"props":559,"children":560},{"style":104},[561],{"type":51,"value":296},{"type":45,"tag":91,"props":563,"children":564},{"style":104},[565],{"type":51,"value":484},{"type":45,"tag":91,"props":567,"children":568},{"class":93,"line":131},[569],{"type":45,"tag":91,"props":570,"children":572},{"emptyLinePlaceholder":571},true,[573],{"type":51,"value":574},"\n",{"type":45,"tag":91,"props":576,"children":577},{"class":93,"line":150},[578],{"type":45,"tag":91,"props":579,"children":580},{"style":98},[581],{"type":51,"value":582},"world\n",{"type":45,"tag":91,"props":584,"children":585},{"class":93,"line":182},[586,591,596,601,605],{"type":45,"tag":91,"props":587,"children":588},{"style":104},[589],{"type":51,"value":590},"  .",{"type":45,"tag":91,"props":592,"children":593},{"style":110},[594],{"type":51,"value":595},"registerSystem",{"type":45,"tag":91,"props":597,"children":598},{"style":98},[599],{"type":51,"value":600},"(DepthSensingSystem",{"type":45,"tag":91,"props":602,"children":603},{"style":104},[604],{"type":51,"value":123},{"type":45,"tag":91,"props":606,"children":607},{"style":104},[608],{"type":51,"value":128},{"type":45,"tag":91,"props":610,"children":611},{"class":93,"line":213},[612,617,621],{"type":45,"tag":91,"props":613,"children":614},{"style":135},[615],{"type":51,"value":616},"    configData",{"type":45,"tag":91,"props":618,"children":619},{"style":104},[620],{"type":51,"value":143},{"type":45,"tag":91,"props":622,"children":623},{"style":104},[624],{"type":51,"value":128},{"type":45,"tag":91,"props":626,"children":627},{"class":93,"line":230},[628,633,637,641],{"type":45,"tag":91,"props":629,"children":630},{"style":135},[631],{"type":51,"value":632},"      enableDepthTexture",{"type":45,"tag":91,"props":634,"children":635},{"style":104},[636],{"type":51,"value":143},{"type":45,"tag":91,"props":638,"children":639},{"style":260},[640],{"type":51,"value":263},{"type":45,"tag":91,"props":642,"children":643},{"style":104},[644],{"type":51,"value":179},{"type":45,"tag":91,"props":646,"children":647},{"class":93,"line":247},[648,653,657,661],{"type":45,"tag":91,"props":649,"children":650},{"style":135},[651],{"type":51,"value":652},"      enableOcclusion",{"type":45,"tag":91,"props":654,"children":655},{"style":104},[656],{"type":51,"value":143},{"type":45,"tag":91,"props":658,"children":659},{"style":260},[660],{"type":51,"value":263},{"type":45,"tag":91,"props":662,"children":663},{"style":104},[664],{"type":51,"value":179},{"type":45,"tag":91,"props":666,"children":667},{"class":93,"line":270},[668,673,677,681],{"type":45,"tag":91,"props":669,"children":670},{"style":135},[671],{"type":51,"value":672},"      useFloat32",{"type":45,"tag":91,"props":674,"children":675},{"style":104},[676],{"type":51,"value":143},{"type":45,"tag":91,"props":678,"children":679},{"style":260},[680],{"type":51,"value":263},{"type":45,"tag":91,"props":682,"children":683},{"style":104},[684],{"type":51,"value":179},{"type":45,"tag":91,"props":686,"children":687},{"class":93,"line":309},[688,693,697,703],{"type":45,"tag":91,"props":689,"children":690},{"style":135},[691],{"type":51,"value":692},"      blurRadius",{"type":45,"tag":91,"props":694,"children":695},{"style":104},[696],{"type":51,"value":143},{"type":45,"tag":91,"props":698,"children":700},{"style":699},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[701],{"type":51,"value":702}," 20.0",{"type":45,"tag":91,"props":704,"children":705},{"style":104},[706],{"type":51,"value":179},{"type":45,"tag":91,"props":708,"children":709},{"class":93,"line":339},[710],{"type":45,"tag":91,"props":711,"children":712},{"style":104},[713],{"type":51,"value":456},{"type":45,"tag":91,"props":715,"children":716},{"class":93,"line":348},[717,722],{"type":45,"tag":91,"props":718,"children":719},{"style":104},[720],{"type":51,"value":721},"  }",{"type":45,"tag":91,"props":723,"children":724},{"style":98},[725],{"type":51,"value":726},")\n",{"type":45,"tag":91,"props":728,"children":729},{"class":93,"line":384},[730,734,739,744],{"type":45,"tag":91,"props":731,"children":732},{"style":104},[733],{"type":51,"value":590},{"type":45,"tag":91,"props":735,"children":736},{"style":110},[737],{"type":51,"value":738},"registerComponent",{"type":45,"tag":91,"props":740,"children":741},{"style":98},[742],{"type":51,"value":743},"(DepthOccludable)",{"type":45,"tag":91,"props":745,"children":746},{"style":104},[747],{"type":51,"value":484},{"type":45,"tag":72,"props":749,"children":751},{"id":750},"_3-add-depthoccludable-to-entities",[752,754,759],{"type":51,"value":753},"3. Add ",{"type":45,"tag":87,"props":755,"children":757},{"className":756},[],[758],{"type":51,"value":504},{"type":51,"value":760}," to entities",{"type":45,"tag":79,"props":762,"children":764},{"className":81,"code":763,"language":83,"meta":84,"style":84},"import { DepthOccludable, OcclusionShadersMode } from '@iwsdk\u002Fcore';\n\n\u002F\u002F Soft occlusion (default) — smooth edges via 13-tap blur\nentity.addComponent(DepthOccludable);\n\n\u002F\u002F Hard occlusion — sharp edges, single depth sample\nentity.addComponent(DepthOccludable, {\n  mode: OcclusionShadersMode.HardOcclusion,\n});\n\n\u002F\u002F MinMax occlusion — best quality, extra preprocessing pass\nentity.addComponent(DepthOccludable, {\n  mode: OcclusionShadersMode.MinMaxSoftOcclusion,\n});\n",[765],{"type":45,"tag":87,"props":766,"children":767},{"__ignoreMap":84},[768,816,823,831,856,863,871,899,928,943,950,958,985,1013],{"type":45,"tag":91,"props":769,"children":770},{"class":93,"line":94},[771,775,779,783,787,792,796,800,804,808,812],{"type":45,"tag":91,"props":772,"children":773},{"style":517},[774],{"type":51,"value":520},{"type":45,"tag":91,"props":776,"children":777},{"style":104},[778],{"type":51,"value":363},{"type":45,"tag":91,"props":780,"children":781},{"style":98},[782],{"type":51,"value":538},{"type":45,"tag":91,"props":784,"children":785},{"style":104},[786],{"type":51,"value":123},{"type":45,"tag":91,"props":788,"children":789},{"style":98},[790],{"type":51,"value":791}," OcclusionShadersMode",{"type":45,"tag":91,"props":793,"children":794},{"style":104},[795],{"type":51,"value":543},{"type":45,"tag":91,"props":797,"children":798},{"style":517},[799],{"type":51,"value":548},{"type":45,"tag":91,"props":801,"children":802},{"style":104},[803],{"type":51,"value":285},{"type":45,"tag":91,"props":805,"children":806},{"style":288},[807],{"type":51,"value":557},{"type":45,"tag":91,"props":809,"children":810},{"style":104},[811],{"type":51,"value":296},{"type":45,"tag":91,"props":813,"children":814},{"style":104},[815],{"type":51,"value":484},{"type":45,"tag":91,"props":817,"children":818},{"class":93,"line":131},[819],{"type":45,"tag":91,"props":820,"children":821},{"emptyLinePlaceholder":571},[822],{"type":51,"value":574},{"type":45,"tag":91,"props":824,"children":825},{"class":93,"line":150},[826],{"type":45,"tag":91,"props":827,"children":828},{"style":303},[829],{"type":51,"value":830},"\u002F\u002F Soft occlusion (default) — smooth edges via 13-tap blur\n",{"type":45,"tag":91,"props":832,"children":833},{"class":93,"line":182},[834,839,843,848,852],{"type":45,"tag":91,"props":835,"children":836},{"style":98},[837],{"type":51,"value":838},"entity",{"type":45,"tag":91,"props":840,"children":841},{"style":104},[842],{"type":51,"value":107},{"type":45,"tag":91,"props":844,"children":845},{"style":110},[846],{"type":51,"value":847},"addComponent",{"type":45,"tag":91,"props":849,"children":850},{"style":98},[851],{"type":51,"value":743},{"type":45,"tag":91,"props":853,"children":854},{"style":104},[855],{"type":51,"value":484},{"type":45,"tag":91,"props":857,"children":858},{"class":93,"line":213},[859],{"type":45,"tag":91,"props":860,"children":861},{"emptyLinePlaceholder":571},[862],{"type":51,"value":574},{"type":45,"tag":91,"props":864,"children":865},{"class":93,"line":230},[866],{"type":45,"tag":91,"props":867,"children":868},{"style":303},[869],{"type":51,"value":870},"\u002F\u002F Hard occlusion — sharp edges, single depth sample\n",{"type":45,"tag":91,"props":872,"children":873},{"class":93,"line":247},[874,878,882,886,891,895],{"type":45,"tag":91,"props":875,"children":876},{"style":98},[877],{"type":51,"value":838},{"type":45,"tag":91,"props":879,"children":880},{"style":104},[881],{"type":51,"value":107},{"type":45,"tag":91,"props":883,"children":884},{"style":110},[885],{"type":51,"value":847},{"type":45,"tag":91,"props":887,"children":888},{"style":98},[889],{"type":51,"value":890},"(DepthOccludable",{"type":45,"tag":91,"props":892,"children":893},{"style":104},[894],{"type":51,"value":123},{"type":45,"tag":91,"props":896,"children":897},{"style":104},[898],{"type":51,"value":128},{"type":45,"tag":91,"props":900,"children":901},{"class":93,"line":270},[902,907,911,915,919,924],{"type":45,"tag":91,"props":903,"children":904},{"style":135},[905],{"type":51,"value":906},"  mode",{"type":45,"tag":91,"props":908,"children":909},{"style":104},[910],{"type":51,"value":143},{"type":45,"tag":91,"props":912,"children":913},{"style":98},[914],{"type":51,"value":791},{"type":45,"tag":91,"props":916,"children":917},{"style":104},[918],{"type":51,"value":107},{"type":45,"tag":91,"props":920,"children":921},{"style":98},[922],{"type":51,"value":923},"HardOcclusion",{"type":45,"tag":91,"props":925,"children":926},{"style":104},[927],{"type":51,"value":179},{"type":45,"tag":91,"props":929,"children":930},{"class":93,"line":309},[931,935,939],{"type":45,"tag":91,"props":932,"children":933},{"style":104},[934],{"type":51,"value":474},{"type":45,"tag":91,"props":936,"children":937},{"style":98},[938],{"type":51,"value":479},{"type":45,"tag":91,"props":940,"children":941},{"style":104},[942],{"type":51,"value":484},{"type":45,"tag":91,"props":944,"children":945},{"class":93,"line":339},[946],{"type":45,"tag":91,"props":947,"children":948},{"emptyLinePlaceholder":571},[949],{"type":51,"value":574},{"type":45,"tag":91,"props":951,"children":952},{"class":93,"line":348},[953],{"type":45,"tag":91,"props":954,"children":955},{"style":303},[956],{"type":51,"value":957},"\u002F\u002F MinMax occlusion — best quality, extra preprocessing pass\n",{"type":45,"tag":91,"props":959,"children":960},{"class":93,"line":384},[961,965,969,973,977,981],{"type":45,"tag":91,"props":962,"children":963},{"style":98},[964],{"type":51,"value":838},{"type":45,"tag":91,"props":966,"children":967},{"style":104},[968],{"type":51,"value":107},{"type":45,"tag":91,"props":970,"children":971},{"style":110},[972],{"type":51,"value":847},{"type":45,"tag":91,"props":974,"children":975},{"style":98},[976],{"type":51,"value":890},{"type":45,"tag":91,"props":978,"children":979},{"style":104},[980],{"type":51,"value":123},{"type":45,"tag":91,"props":982,"children":983},{"style":104},[984],{"type":51,"value":128},{"type":45,"tag":91,"props":986,"children":987},{"class":93,"line":417},[988,992,996,1000,1004,1009],{"type":45,"tag":91,"props":989,"children":990},{"style":135},[991],{"type":51,"value":906},{"type":45,"tag":91,"props":993,"children":994},{"style":104},[995],{"type":51,"value":143},{"type":45,"tag":91,"props":997,"children":998},{"style":98},[999],{"type":51,"value":791},{"type":45,"tag":91,"props":1001,"children":1002},{"style":104},[1003],{"type":51,"value":107},{"type":45,"tag":91,"props":1005,"children":1006},{"style":98},[1007],{"type":51,"value":1008},"MinMaxSoftOcclusion",{"type":45,"tag":91,"props":1010,"children":1011},{"style":104},[1012],{"type":51,"value":179},{"type":45,"tag":91,"props":1014,"children":1015},{"class":93,"line":450},[1016,1020,1024],{"type":45,"tag":91,"props":1017,"children":1018},{"style":104},[1019],{"type":51,"value":474},{"type":45,"tag":91,"props":1021,"children":1022},{"style":98},[1023],{"type":51,"value":479},{"type":45,"tag":91,"props":1025,"children":1026},{"style":104},[1027],{"type":51,"value":484},{"type":45,"tag":54,"props":1029,"children":1030},{},[1031,1033,1039],{"type":51,"value":1032},"The material must have ",{"type":45,"tag":87,"props":1034,"children":1036},{"className":1035},[],[1037],{"type":51,"value":1038},"transparent: true",{"type":51,"value":1040},". The system sets this automatically, but verify it on custom materials.",{"type":45,"tag":60,"props":1042,"children":1044},{"id":1043},"occlusion-modes",[1045],{"type":51,"value":1046},"Occlusion Modes",{"type":45,"tag":1048,"props":1049,"children":1050},"table",{},[1051,1080],{"type":45,"tag":1052,"props":1053,"children":1054},"thead",{},[1055],{"type":45,"tag":1056,"props":1057,"children":1058},"tr",{},[1059,1065,1070,1075],{"type":45,"tag":1060,"props":1061,"children":1062},"th",{},[1063],{"type":51,"value":1064},"Mode",{"type":45,"tag":1060,"props":1066,"children":1067},{},[1068],{"type":51,"value":1069},"Quality",{"type":45,"tag":1060,"props":1071,"children":1072},{},[1073],{"type":51,"value":1074},"Cost",{"type":45,"tag":1060,"props":1076,"children":1077},{},[1078],{"type":51,"value":1079},"Best For",{"type":45,"tag":1081,"props":1082,"children":1083},"tbody",{},[1084,1112,1138],{"type":45,"tag":1056,"props":1085,"children":1086},{},[1087,1097,1102,1107],{"type":45,"tag":1088,"props":1089,"children":1090},"td",{},[1091],{"type":45,"tag":87,"props":1092,"children":1094},{"className":1093},[],[1095],{"type":51,"value":1096},"SoftOcclusion",{"type":45,"tag":1088,"props":1098,"children":1099},{},[1100],{"type":51,"value":1101},"Good",{"type":45,"tag":1088,"props":1103,"children":1104},{},[1105],{"type":51,"value":1106},"Low",{"type":45,"tag":1088,"props":1108,"children":1109},{},[1110],{"type":51,"value":1111},"Most objects — smooth edges, hides depth aliasing",{"type":45,"tag":1056,"props":1113,"children":1114},{},[1115,1123,1128,1133],{"type":45,"tag":1088,"props":1116,"children":1117},{},[1118],{"type":45,"tag":87,"props":1119,"children":1121},{"className":1120},[],[1122],{"type":51,"value":923},{"type":45,"tag":1088,"props":1124,"children":1125},{},[1126],{"type":51,"value":1127},"Basic",{"type":45,"tag":1088,"props":1129,"children":1130},{},[1131],{"type":51,"value":1132},"Lowest",{"type":45,"tag":1088,"props":1134,"children":1135},{},[1136],{"type":51,"value":1137},"Small objects or when sharp edges are acceptable",{"type":45,"tag":1056,"props":1139,"children":1140},{},[1141,1149,1154,1159],{"type":45,"tag":1088,"props":1142,"children":1143},{},[1144],{"type":45,"tag":87,"props":1145,"children":1147},{"className":1146},[],[1148],{"type":51,"value":1008},{"type":45,"tag":1088,"props":1150,"children":1151},{},[1152],{"type":51,"value":1153},"Best",{"type":45,"tag":1088,"props":1155,"children":1156},{},[1157],{"type":51,"value":1158},"Medium",{"type":45,"tag":1088,"props":1160,"children":1161},{},[1162],{"type":51,"value":1163},"Large objects with complex silhouettes against varied backgrounds",{"type":45,"tag":60,"props":1165,"children":1167},{"id":1166},"depthsensingsystem-config",[1168],{"type":51,"value":1169},"DepthSensingSystem Config",{"type":45,"tag":1048,"props":1171,"children":1172},{},[1173,1199],{"type":45,"tag":1052,"props":1174,"children":1175},{},[1176],{"type":45,"tag":1056,"props":1177,"children":1178},{},[1179,1184,1189,1194],{"type":45,"tag":1060,"props":1180,"children":1181},{},[1182],{"type":51,"value":1183},"Property",{"type":45,"tag":1060,"props":1185,"children":1186},{},[1187],{"type":51,"value":1188},"Type",{"type":45,"tag":1060,"props":1190,"children":1191},{},[1192],{"type":51,"value":1193},"Default",{"type":45,"tag":1060,"props":1195,"children":1196},{},[1197],{"type":51,"value":1198},"Description",{"type":45,"tag":1081,"props":1200,"children":1201},{},[1202,1233,1262,1291],{"type":45,"tag":1056,"props":1203,"children":1204},{},[1205,1214,1219,1228],{"type":45,"tag":1088,"props":1206,"children":1207},{},[1208],{"type":45,"tag":87,"props":1209,"children":1211},{"className":1210},[],[1212],{"type":51,"value":1213},"enableOcclusion",{"type":45,"tag":1088,"props":1215,"children":1216},{},[1217],{"type":51,"value":1218},"Boolean",{"type":45,"tag":1088,"props":1220,"children":1221},{},[1222],{"type":45,"tag":87,"props":1223,"children":1225},{"className":1224},[],[1226],{"type":51,"value":1227},"true",{"type":45,"tag":1088,"props":1229,"children":1230},{},[1231],{"type":51,"value":1232},"Master switch for all occlusion",{"type":45,"tag":1056,"props":1234,"children":1235},{},[1236,1245,1249,1257],{"type":45,"tag":1088,"props":1237,"children":1238},{},[1239],{"type":45,"tag":87,"props":1240,"children":1242},{"className":1241},[],[1243],{"type":51,"value":1244},"enableDepthTexture",{"type":45,"tag":1088,"props":1246,"children":1247},{},[1248],{"type":51,"value":1218},{"type":45,"tag":1088,"props":1250,"children":1251},{},[1252],{"type":45,"tag":87,"props":1253,"children":1255},{"className":1254},[],[1256],{"type":51,"value":1227},{"type":45,"tag":1088,"props":1258,"children":1259},{},[1260],{"type":51,"value":1261},"Create GPU textures from depth data",{"type":45,"tag":1056,"props":1263,"children":1264},{},[1265,1274,1278,1286],{"type":45,"tag":1088,"props":1266,"children":1267},{},[1268],{"type":45,"tag":87,"props":1269,"children":1271},{"className":1270},[],[1272],{"type":51,"value":1273},"useFloat32",{"type":45,"tag":1088,"props":1275,"children":1276},{},[1277],{"type":51,"value":1218},{"type":45,"tag":1088,"props":1279,"children":1280},{},[1281],{"type":45,"tag":87,"props":1282,"children":1284},{"className":1283},[],[1285],{"type":51,"value":1227},{"type":45,"tag":1088,"props":1287,"children":1288},{},[1289],{"type":51,"value":1290},"Float32 depth textures (higher precision)",{"type":45,"tag":1056,"props":1292,"children":1293},{},[1294,1303,1308,1317],{"type":45,"tag":1088,"props":1295,"children":1296},{},[1297],{"type":45,"tag":87,"props":1298,"children":1300},{"className":1299},[],[1301],{"type":51,"value":1302},"blurRadius",{"type":45,"tag":1088,"props":1304,"children":1305},{},[1306],{"type":51,"value":1307},"Float32",{"type":45,"tag":1088,"props":1309,"children":1310},{},[1311],{"type":45,"tag":87,"props":1312,"children":1314},{"className":1313},[],[1315],{"type":51,"value":1316},"20.0",{"type":45,"tag":1088,"props":1318,"children":1319},{},[1320],{"type":51,"value":1321},"Blur radius for soft occlusion (pixels)",{"type":45,"tag":60,"props":1323,"children":1325},{"id":1324},"depth-sensing-modes",[1326],{"type":51,"value":1327},"Depth Sensing Modes",{"type":45,"tag":1048,"props":1329,"children":1330},{},[1331,1346],{"type":45,"tag":1052,"props":1332,"children":1333},{},[1334],{"type":45,"tag":1056,"props":1335,"children":1336},{},[1337,1341],{"type":45,"tag":1060,"props":1338,"children":1339},{},[1340],{"type":51,"value":1064},{"type":45,"tag":1060,"props":1342,"children":1343},{},[1344],{"type":51,"value":1345},"When to use",{"type":45,"tag":1081,"props":1347,"children":1348},{},[1349,1366],{"type":45,"tag":1056,"props":1350,"children":1351},{},[1352,1361],{"type":45,"tag":1088,"props":1353,"children":1354},{},[1355],{"type":45,"tag":87,"props":1356,"children":1358},{"className":1357},[],[1359],{"type":51,"value":1360},"cpu-optimized",{"type":45,"tag":1088,"props":1362,"children":1363},{},[1364],{"type":51,"value":1365},"Simpler, works everywhere. Depth as linear meters in a DataArrayTexture.",{"type":45,"tag":1056,"props":1367,"children":1368},{},[1369,1377],{"type":45,"tag":1088,"props":1370,"children":1371},{},[1372],{"type":45,"tag":87,"props":1373,"children":1375},{"className":1374},[],[1376],{"type":51,"value":291},{"type":45,"tag":1088,"props":1378,"children":1379},{},[1380,1386],{"type":45,"tag":1381,"props":1382,"children":1383},"strong",{},[1384],{"type":51,"value":1385},"Recommended.",{"type":51,"value":1387}," Matches Quest hardware format. Depth as reverse-Z inverse depth in an ExternalTexture. Required for production parity with on-device behavior. Note that Quest devices only support this mode.",{"type":45,"tag":60,"props":1389,"children":1391},{"id":1390},"ar-session-requirements",[1392],{"type":51,"value":1393},"AR Session Requirements",{"type":45,"tag":54,"props":1395,"children":1396},{},[1397,1399,1405],{"type":51,"value":1398},"Depth occlusion only works in AR mode. The scene background must be ",{"type":45,"tag":87,"props":1400,"children":1402},{"className":1401},[],[1403],{"type":51,"value":1404},"null",{"type":51,"value":1406}," for passthrough:",{"type":45,"tag":79,"props":1408,"children":1410},{"className":81,"code":1409,"language":83,"meta":84,"style":84},"scene.background = null;\n",[1411],{"type":45,"tag":87,"props":1412,"children":1413},{"__ignoreMap":84},[1414],{"type":45,"tag":91,"props":1415,"children":1416},{"class":93,"line":94},[1417,1422,1426,1431,1436],{"type":45,"tag":91,"props":1418,"children":1419},{"style":98},[1420],{"type":51,"value":1421},"scene",{"type":45,"tag":91,"props":1423,"children":1424},{"style":104},[1425],{"type":51,"value":107},{"type":45,"tag":91,"props":1427,"children":1428},{"style":98},[1429],{"type":51,"value":1430},"background ",{"type":45,"tag":91,"props":1432,"children":1433},{"style":104},[1434],{"type":51,"value":1435},"=",{"type":45,"tag":91,"props":1437,"children":1438},{"style":104},[1439],{"type":51,"value":1440}," null;\n",{"type":45,"tag":60,"props":1442,"children":1444},{"id":1443},"troubleshooting",[1445],{"type":51,"value":1446},"Troubleshooting",{"type":45,"tag":54,"props":1448,"children":1449},{},[1450],{"type":45,"tag":1381,"props":1451,"children":1452},{},[1453],{"type":51,"value":1454},"Objects never occlude (always visible on top)",{"type":45,"tag":1456,"props":1457,"children":1458},"ul",{},[1459,1472,1490],{"type":45,"tag":1460,"props":1461,"children":1462},"li",{},[1463,1465,1470],{"type":51,"value":1464},"Verify the entity has ",{"type":45,"tag":87,"props":1466,"children":1468},{"className":1467},[],[1469],{"type":51,"value":504},{"type":51,"value":1471}," component",{"type":45,"tag":1460,"props":1473,"children":1474},{},[1475,1477,1482,1484],{"type":51,"value":1476},"Verify ",{"type":45,"tag":87,"props":1478,"children":1480},{"className":1479},[],[1481],{"type":51,"value":496},{"type":51,"value":1483}," is registered with ",{"type":45,"tag":87,"props":1485,"children":1487},{"className":1486},[],[1488],{"type":51,"value":1489},"enableOcclusion: true",{"type":45,"tag":1460,"props":1491,"children":1492},{},[1493,1495,1501],{"type":51,"value":1494},"Check that ",{"type":45,"tag":87,"props":1496,"children":1498},{"className":1497},[],[1499],{"type":51,"value":1500},"depthSensing",{"type":51,"value":1502}," is in the XR features config",{"type":45,"tag":54,"props":1504,"children":1505},{},[1506],{"type":45,"tag":1381,"props":1507,"children":1508},{},[1509],{"type":51,"value":1510},"Objects always invisible in IWER",{"type":45,"tag":1456,"props":1512,"children":1513},{},[1514,1519],{"type":45,"tag":1460,"props":1515,"children":1516},{},[1517],{"type":51,"value":1518},"In the IWER emulator, the SEM must have loaded environment geometry. If no room is loaded, no depth data is produced.",{"type":45,"tag":1460,"props":1520,"children":1521},{},[1522],{"type":51,"value":1523},"Check the console for \"Warning: depth-sensing feature not enabled\"",{"type":45,"tag":54,"props":1525,"children":1526},{},[1527],{"type":45,"tag":1381,"props":1528,"children":1529},{},[1530],{"type":51,"value":1531},"Flickering or noisy occlusion edges",{"type":45,"tag":1456,"props":1533,"children":1534},{},[1535,1547,1564],{"type":45,"tag":1460,"props":1536,"children":1537},{},[1538,1540,1545],{"type":51,"value":1539},"Increase ",{"type":45,"tag":87,"props":1541,"children":1543},{"className":1542},[],[1544],{"type":51,"value":1302},{"type":51,"value":1546}," (try 30-40)",{"type":45,"tag":1460,"props":1548,"children":1549},{},[1550,1552,1557,1559],{"type":51,"value":1551},"Switch from ",{"type":45,"tag":87,"props":1553,"children":1555},{"className":1554},[],[1556],{"type":51,"value":923},{"type":51,"value":1558}," to ",{"type":45,"tag":87,"props":1560,"children":1562},{"className":1561},[],[1563],{"type":51,"value":1096},{"type":45,"tag":1460,"props":1565,"children":1566},{},[1567,1569,1574],{"type":51,"value":1568},"Use ",{"type":45,"tag":87,"props":1570,"children":1572},{"className":1571},[],[1573],{"type":51,"value":1008},{"type":51,"value":1575}," for best edge quality",{"type":45,"tag":60,"props":1577,"children":1579},{"id":1578},"notes",[1580],{"type":51,"value":1581},"Notes",{"type":45,"tag":1456,"props":1583,"children":1584},{},[1585,1610,1641,1658],{"type":45,"tag":1460,"props":1586,"children":1587},{},[1588,1593,1595,1601,1603,1608],{"type":45,"tag":1381,"props":1589,"children":1590},{},[1591],{"type":51,"value":1592},"Only works in AR mode",{"type":51,"value":1594}," — depth sensing requires ",{"type":45,"tag":87,"props":1596,"children":1598},{"className":1597},[],[1599],{"type":51,"value":1600},"SessionMode.ImmersiveAR",{"type":51,"value":1602}," with ",{"type":45,"tag":87,"props":1604,"children":1606},{"className":1605},[],[1607],{"type":51,"value":1500},{"type":51,"value":1609}," in features.",{"type":45,"tag":1460,"props":1611,"children":1612},{},[1613,1623,1625,1631,1633,1639],{"type":45,"tag":1381,"props":1614,"children":1615},{},[1616,1621],{"type":45,"tag":87,"props":1617,"children":1619},{"className":1618},[],[1620],{"type":51,"value":504},{"type":51,"value":1622}," may be incompatible with custom shaders",{"type":51,"value":1624}," that override ",{"type":45,"tag":87,"props":1626,"children":1628},{"className":1627},[],[1629],{"type":51,"value":1630},"diffuse",{"type":51,"value":1632}," or ",{"type":45,"tag":87,"props":1634,"children":1636},{"className":1635},[],[1637],{"type":51,"value":1638},"fog_vertex",{"type":51,"value":1640}," includes, since the occlusion code is injected at those shader hook points.",{"type":45,"tag":1460,"props":1642,"children":1643},{},[1644,1649,1651,1656],{"type":45,"tag":1381,"props":1645,"children":1646},{},[1647],{"type":51,"value":1648},"Non-occludable objects",{"type":51,"value":1650}," are simply entities without ",{"type":45,"tag":87,"props":1652,"children":1654},{"className":1653},[],[1655],{"type":51,"value":504},{"type":51,"value":1657}," — they render normally on top of everything.",{"type":45,"tag":1460,"props":1659,"children":1660},{},[1661,1673,1675,1681],{"type":45,"tag":1381,"props":1662,"children":1663},{},[1664,1666,1671],{"type":51,"value":1665},"Register ",{"type":45,"tag":87,"props":1667,"children":1669},{"className":1668},[],[1670],{"type":51,"value":504},{"type":51,"value":1672}," as a component",{"type":51,"value":1674}," via ",{"type":45,"tag":87,"props":1676,"children":1678},{"className":1677},[],[1679],{"type":51,"value":1680},"world.registerComponent(DepthOccludable)",{"type":51,"value":1682}," in addition to registering the system.",{"type":45,"tag":1684,"props":1685,"children":1686},"style",{},[1687],{"type":51,"value":1688},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1690,"total":247},[1691,1709,1716,1728,1742,1758,1770],{"slug":1692,"name":1692,"fn":1693,"description":1694,"org":1695,"tags":1696,"stars":26,"repoUrl":27,"updatedAt":1708},"iwsdk-debug","debug continuous behavior in WebXR","Debug continuous behavior in WebXR scenes — physics, animations, collisions, game loops, or any real-time interaction that happens too fast for an agent to observe. Uses ECS pause\u002Fstep\u002Fsnapshot\u002Fdiff to freeze time and inspect state frame by frame.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1697,1700,1703,1706,1707],{"name":1698,"slug":1699,"type":16},"Debugging","debugging",{"name":1701,"slug":1702,"type":16},"Immersive","immersive",{"name":1704,"slug":1705,"type":16},"Interaction","interaction",{"name":14,"slug":15,"type":16},{"name":24,"slug":25,"type":16},"2026-04-06T18:11:37.886889",{"slug":4,"name":4,"fn":5,"description":6,"org":1710,"tags":1711,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1712,1713,1714,1715],{"name":21,"slug":22,"type":16},{"name":14,"slug":15,"type":16},{"name":18,"slug":19,"type":16},{"name":24,"slug":25,"type":16},{"slug":1717,"name":1717,"fn":1718,"description":1719,"org":1720,"tags":1721,"stars":26,"repoUrl":27,"updatedAt":1727},"iwsdk-grab","grab and move objects in WebXR scenes","Grab an object in the WebXR scene using emulated controllers. Use when the user wants to pick up, move, or test grabbing an object. Supports OneHandGrabbable and TwoHandsGrabbable components which use proximity-based grip (squeeze button), not trigger.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1722,1723,1724,1725,1726],{"name":21,"slug":22,"type":16},{"name":1701,"slug":1702,"type":16},{"name":1704,"slug":1705,"type":16},{"name":18,"slug":19,"type":16},{"name":24,"slug":25,"type":16},"2026-07-24T05:40:20.809536",{"slug":1729,"name":1729,"fn":1730,"description":1731,"org":1732,"tags":1733,"stars":26,"repoUrl":27,"updatedAt":1741},"iwsdk-physics","implement physics in IWSDK projects","Guide for implementing physics in IWSDK projects. Use when adding physics simulation, configuring rigid bodies, collision shapes, applying forces, creating grabbable physics objects, or troubleshooting physics behavior.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1734,1735,1736,1737,1740],{"name":1701,"slug":1702,"type":16},{"name":1704,"slug":1705,"type":16},{"name":14,"slug":15,"type":16},{"name":1738,"slug":1739,"type":16},"Physics","physics",{"name":24,"slug":25,"type":16},"2026-07-24T05:40:22.854101",{"slug":1743,"name":1743,"fn":1744,"description":1745,"org":1746,"tags":1747,"stars":26,"repoUrl":27,"updatedAt":1757},"iwsdk-planner","plan IWSDK projects and architecture","IWSDK experience pipeline and planning guide. Use when building a new IWSDK app\u002Fgame end-to-end, planning new IWSDK features, designing systems\u002Fcomponents, reviewing IWSDK code architecture, or when the user asks about IWSDK patterns, ECS design, signals, or reactive programming. Runs a phased ideation → design → grounding → architecture → build → verify → ship pipeline, orchestrating sub-agents per phase where the harness supports them.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1748,1751,1752,1753,1756],{"name":1749,"slug":1750,"type":16},"Architecture","architecture",{"name":1701,"slug":1702,"type":16},{"name":14,"slug":15,"type":16},{"name":1754,"slug":1755,"type":16},"Strategy","strategy",{"name":24,"slug":25,"type":16},"2026-07-24T05:40:21.856049",{"slug":1759,"name":1759,"fn":1760,"description":1761,"org":1762,"tags":1763,"stars":26,"repoUrl":27,"updatedAt":1769},"iwsdk-ray","implement ray-based interactions in WebXR","Ray-based interactions in the WebXR scene — click objects, press UI buttons, or distance-grab with DistanceGrabbable. Use when the user wants to point at and interact with something at a distance, click a UI button, or test ray-based selection.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1764,1765,1766,1767,1768],{"name":21,"slug":22,"type":16},{"name":1701,"slug":1702,"type":16},{"name":1704,"slug":1705,"type":16},{"name":18,"slug":19,"type":16},{"name":24,"slug":25,"type":16},"2026-07-24T05:40:19.841604",{"slug":1771,"name":1771,"fn":1772,"description":1773,"org":1774,"tags":1775,"stars":26,"repoUrl":27,"updatedAt":1785},"iwsdk-ui","develop IWSDK PanelUI components","Develop and iterate on IWSDK PanelUI components. Use when the user wants to create, modify, debug, or improve UI panels in their IWSDK application. Covers UIKITML editing, full-screen preview with ScreenSpace, and visual verification.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1776,1779,1780,1781,1784],{"name":1777,"slug":1778,"type":16},"Frontend","frontend",{"name":1701,"slug":1702,"type":16},{"name":14,"slug":15,"type":16},{"name":1782,"slug":1783,"type":16},"UI Components","ui-components",{"name":24,"slug":25,"type":16},"2026-04-06T18:11:34.083706",{"items":1787,"total":1971},[1788,1810,1824,1845,1866,1883,1892,1908,1921,1936,1948,1958],{"slug":1789,"name":1789,"fn":1790,"description":1791,"org":1792,"tags":1793,"stars":1807,"repoUrl":1808,"updatedAt":1809},"relay-best-practices","write idiomatic Relay code","Best practices for writing idiomatic Relay code. ALWAYS use this skill when writing or modifying React components that use Relay for data fetching. Covers fragments, queries, mutations, pagination, and common anti-patterns. Use when you see `useFragment`, `useLazyLoadQuery`, `usePreloadedQuery`, `useMutation`, `usePaginationFragment`, `graphql` template literals, `react-relay` imports, or `__generated__\u002F*.graphql` files. Also use when asked to explain Relay concepts, debug Relay issues, or review Relay code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1794,1797,1798,1801,1804],{"name":1795,"slug":1796,"type":16},"Engineering","engineering",{"name":1777,"slug":1778,"type":16},{"name":1799,"slug":1800,"type":16},"GraphQL","graphql",{"name":1802,"slug":1803,"type":16},"React","react",{"name":1805,"slug":1806,"type":16},"Relay","relay",18950,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Frelay","2026-04-22T04:58:15.370563",{"slug":1811,"name":1811,"fn":1812,"description":1813,"org":1814,"tags":1815,"stars":1807,"repoUrl":1808,"updatedAt":1823},"relay-performance","optimize Relay application performance","Performance best practices for Relay applications. Use when optimizing data fetching, reducing re-renders, configuring caching, or improving time to first meaningful paint. Covers query placement, @defer, pagination, fetch policies, garbage collection, fragment granularity, and server-side filtering. Companion to the relay-best-practices skill which covers correctness and architecture.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1816,1817,1818,1821,1822],{"name":1777,"slug":1778,"type":16},{"name":1799,"slug":1800,"type":16},{"name":1819,"slug":1820,"type":16},"Performance","performance",{"name":1802,"slug":1803,"type":16},{"name":1805,"slug":1806,"type":16},"2026-06-10T07:30:28.726513",{"slug":1825,"name":1825,"fn":1826,"description":1827,"org":1828,"tags":1829,"stars":1842,"repoUrl":1843,"updatedAt":1844},"add-shape-types-to-torch-model","annotate PyTorch models with tensor shapes","Port a PyTorch model to use pyrefly's tensor shape type system (Tensor[[B, C, H, W]], Int[T]). Use this skill whenever the user wants to add shape annotations to a PyTorch model, type a model with tensor dimensions, port a model to use shape tracking, or annotate model forward methods with tensor shapes. Also use when the user mentions tensor shape ports, Int types for PyTorch, or pyrefly shape checking on a model file. Invoke BEFORE starting any model port — the skill's gated workflow prevents common failure modes.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1830,1833,1836,1839],{"name":1831,"slug":1832,"type":16},"Data Modeling","data-modeling",{"name":1834,"slug":1835,"type":16},"Deep Learning","deep-learning",{"name":1837,"slug":1838,"type":16},"Python","python",{"name":1840,"slug":1841,"type":16},"PyTorch","pytorch",6833,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fpyrefly","2026-07-18T05:12:08.515952",{"slug":1846,"name":1846,"fn":1847,"description":1848,"org":1849,"tags":1850,"stars":1863,"repoUrl":1864,"updatedAt":1865},"camera-streaming","configure camera streaming and photo capture","Stream, video frames, photo capture, resolution\u002Fframe rate configuration",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1851,1854,1857,1860],{"name":1852,"slug":1853,"type":16},"Camera","camera",{"name":1855,"slug":1856,"type":16},"Hardware","hardware",{"name":1858,"slug":1859,"type":16},"iOS","ios",{"name":1861,"slug":1862,"type":16},"Video","video",488,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-dat-ios","2026-05-15T06:14:43.555881",{"slug":1867,"name":1867,"fn":1868,"description":1869,"org":1870,"tags":1871,"stars":1863,"repoUrl":1864,"updatedAt":1882},"dat-conventions","develop iOS applications with DAT SDK","Swift patterns, async\u002Fawait, naming conventions, key types for DAT SDK iOS development",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1872,1873,1876,1879],{"name":1858,"slug":1859,"type":16},{"name":1874,"slug":1875,"type":16},"Mobile","mobile",{"name":1877,"slug":1878,"type":16},"SDK","sdk",{"name":1880,"slug":1881,"type":16},"Swift","swift","2026-05-15T06:14:42.334435",{"slug":1699,"name":1699,"fn":1884,"description":1885,"org":1886,"tags":1887,"stars":1863,"repoUrl":1864,"updatedAt":1891},"debug wearable device software","Common issues, Developer Mode, version compatibility, state machine diagnosis",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1888,1889,1890],{"name":1698,"slug":1699,"type":16},{"name":1795,"slug":1796,"type":16},{"name":1858,"slug":1859,"type":16},"2026-05-15T06:14:38.626606",{"slug":1893,"name":1893,"fn":1894,"description":1895,"org":1896,"tags":1897,"stars":1863,"repoUrl":1864,"updatedAt":1907},"display-access","manage display capabilities on wearable devices","Display capability setup, display-capable device selection, UI DSL, icons, buttons, images, and video playback",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1898,1901,1904,1905,1906],{"name":1899,"slug":1900,"type":16},"Design","design",{"name":1902,"slug":1903,"type":16},"Images","images",{"name":1704,"slug":1705,"type":16},{"name":1782,"slug":1783,"type":16},{"name":1861,"slug":1862,"type":16},"2026-05-15T06:14:39.844502",{"slug":1909,"name":1909,"fn":1910,"description":1911,"org":1912,"tags":1913,"stars":1863,"repoUrl":1864,"updatedAt":1920},"getting-started","set up Meta wearable SDK integration","SDK setup, Swift Package Manager integration, Info.plist configuration, and first connection to Meta glasses",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1914,1917,1918,1919],{"name":1915,"slug":1916,"type":16},"Configuration","configuration",{"name":1858,"slug":1859,"type":16},{"name":1877,"slug":1878,"type":16},{"name":1880,"slug":1881,"type":16},"2026-05-15T06:14:41.086639",{"slug":1922,"name":1922,"fn":1923,"description":1924,"org":1925,"tags":1926,"stars":1863,"repoUrl":1864,"updatedAt":1935},"mockdevice-testing","test wearable apps with mock devices","MockDeviceKit for testing without physical glasses hardware",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1927,1928,1929,1932],{"name":1858,"slug":1859,"type":16},{"name":1874,"slug":1875,"type":16},{"name":1930,"slug":1931,"type":16},"QA","qa",{"name":1933,"slug":1934,"type":16},"Testing","testing","2026-05-15T06:14:37.406692",{"slug":1937,"name":1937,"fn":1938,"description":1939,"org":1940,"tags":1941,"stars":1863,"repoUrl":1864,"updatedAt":1947},"permissions-registration","register apps with Meta AI","App registration with Meta AI, camera permission flows",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1942,1943,1944],{"name":1852,"slug":1853,"type":16},{"name":1858,"slug":1859,"type":16},{"name":1945,"slug":1946,"type":16},"Permissions","permissions","2026-05-15T06:14:46.030253",{"slug":1949,"name":1949,"fn":1950,"description":1951,"org":1952,"tags":1953,"stars":1863,"repoUrl":1864,"updatedAt":1957},"sample-app-guide","build wearable apps with camera streaming","Building a complete DAT app with camera streaming and photo capture",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1954,1955,1956],{"name":1852,"slug":1853,"type":16},{"name":1858,"slug":1859,"type":16},{"name":1874,"slug":1875,"type":16},"2026-05-15T06:14:36.185947",{"slug":1959,"name":1959,"fn":1960,"description":1961,"org":1962,"tags":1963,"stars":1863,"repoUrl":1864,"updatedAt":1970},"session-lifecycle","monitor device session lifecycle states","Device session states, pause\u002Fresume, availability monitoring",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1964,1965,1966,1969],{"name":1858,"slug":1859,"type":16},{"name":1874,"slug":1875,"type":16},{"name":1967,"slug":1968,"type":16},"Monitoring","monitoring",{"name":1819,"slug":1820,"type":16},"2026-05-15T06:14:44.790925",27]