mudra-skills 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (149) hide show
  1. package/.claude-plugin/plugin.json +19 -0
  2. package/CLAUDE.md +35 -0
  3. package/bin/install.js +25 -0
  4. package/package.json +28 -0
  5. package/skills/mudra-master/SKILL.md +202 -0
  6. package/skills/mudra-master/mudra-preview/SKILL.md +151 -0
  7. package/skills/mudra-master/mudra-preview/assets/ar-menu.html +382 -0
  8. package/skills/mudra-master/mudra-preview/assets/document-scroller.html +468 -0
  9. package/skills/mudra-master/mudra-preview/assets/drum-machine.html +788 -0
  10. package/skills/mudra-master/mudra-preview/assets/emg-visualizer.html +390 -0
  11. package/skills/mudra-master/mudra-preview/assets/generative-art.html +408 -0
  12. package/skills/mudra-master/mudra-preview/assets/gesture-assistant.html +342 -0
  13. package/skills/mudra-master/mudra-preview/assets/gesture-speech.html +444 -0
  14. package/skills/mudra-master/mudra-preview/assets/hands-free-desktop.html +376 -0
  15. package/skills/mudra-master/mudra-preview/assets/model-rotator.html +365 -0
  16. package/skills/mudra-master/mudra-preview/assets/mudra-duel.html +3200 -0
  17. package/skills/mudra-master/mudra-preview/assets/mudra-monitor.html +1451 -0
  18. package/skills/mudra-master/mudra-preview/assets/mudra-ultimate-template.html +891 -0
  19. package/skills/mudra-master/mudra-preview/assets/music-sequencer.html +455 -0
  20. package/skills/mudra-master/mudra-preview/assets/neural-pong.html +380 -0
  21. package/skills/mudra-master/mudra-preview/assets/neural-snake.html +364 -0
  22. package/skills/mudra-master/mudra-preview/assets/presentation-controller.html +345 -0
  23. package/skills/mudra-master/mudra-preview/assets/pressure-painter.html +285 -0
  24. package/skills/mudra-master/mudra-preview/assets/runner.html +1812 -0
  25. package/skills/mudra-master/mudra-preview/assets/smart-home.html +461 -0
  26. package/skills/mudra-master/mudra-preview/assets/space-invaders.html +1154 -0
  27. package/skills/mudra-master/mudra-preview/assets/waterful-ring-toss.html +1624 -0
  28. package/skills/mudra-master/mudra-preview/references/agent_protocol.json +646 -0
  29. package/skills/mudra-master/mudra-preview/references/promt.md +16829 -0
  30. package/skills/mudra-master/mudra-xr/SKILL.md +245 -0
  31. package/skills/mudra-master/mudra-xr/assets/demos/3dgs-walkthrough.html +242 -0
  32. package/skills/mudra-master/mudra-xr/assets/demos/aisimulator.html +792 -0
  33. package/skills/mudra-master/mudra-xr/assets/demos/balloonpop.html +422 -0
  34. package/skills/mudra-master/mudra-xr/assets/demos/ballpit.html +284 -0
  35. package/skills/mudra-master/mudra-xr/assets/demos/drone.html +41 -0
  36. package/skills/mudra-master/mudra-xr/assets/demos/gemini-icebreakers.html +338 -0
  37. package/skills/mudra-master/mudra-xr/assets/demos/gemini-xrobject.html +302 -0
  38. package/skills/mudra-master/mudra-xr/assets/demos/math3d.html +188 -0
  39. package/skills/mudra-master/mudra-xr/assets/demos/measure.html +247 -0
  40. package/skills/mudra-master/mudra-xr/assets/demos/occlusion.html +251 -0
  41. package/skills/mudra-master/mudra-xr/assets/demos/rain.html +498 -0
  42. package/skills/mudra-master/mudra-xr/assets/demos/screenwiper.html +432 -0
  43. package/skills/mudra-master/mudra-xr/assets/demos/splash.html +519 -0
  44. package/skills/mudra-master/mudra-xr/assets/demos/webcam_gestures.html +253 -0
  45. package/skills/mudra-master/mudra-xr/assets/demos/xremoji.html +833 -0
  46. package/skills/mudra-master/mudra-xr/assets/demos/xrpoet.html +151 -0
  47. package/skills/mudra-master/mudra-xr/assets/samples/depthmap.html +266 -0
  48. package/skills/mudra-master/mudra-xr/assets/samples/depthmesh.html +100 -0
  49. package/skills/mudra-master/mudra-xr/assets/samples/game_rps.html +1099 -0
  50. package/skills/mudra-master/mudra-xr/assets/samples/gestures_custom.html +467 -0
  51. package/skills/mudra-master/mudra-xr/assets/samples/gestures_heuristic.html +256 -0
  52. package/skills/mudra-master/mudra-xr/assets/samples/lighting.html +163 -0
  53. package/skills/mudra-master/mudra-xr/assets/samples/mesh_detection.html +46 -0
  54. package/skills/mudra-master/mudra-xr/assets/samples/modelviewer.html +183 -0
  55. package/skills/mudra-master/mudra-xr/assets/samples/paint.html +133 -0
  56. package/skills/mudra-master/mudra-xr/assets/samples/planar-vst.html +45 -0
  57. package/skills/mudra-master/mudra-xr/assets/samples/reticle.html +95 -0
  58. package/skills/mudra-master/mudra-xr/assets/samples/skybox_agent.html +384 -0
  59. package/skills/mudra-master/mudra-xr/assets/samples/sound.html +390 -0
  60. package/skills/mudra-master/mudra-xr/assets/samples/ui.html +496 -0
  61. package/skills/mudra-master/mudra-xr/assets/samples/virtual-screens.html +808 -0
  62. package/skills/mudra-master/mudra-xr/assets/templates/0_basic.html +64 -0
  63. package/skills/mudra-master/mudra-xr/assets/templates/1_ui.html +107 -0
  64. package/skills/mudra-master/mudra-xr/assets/templates/2_hands.html +183 -0
  65. package/skills/mudra-master/mudra-xr/assets/templates/3_depth.html +89 -0
  66. package/skills/mudra-master/mudra-xr/assets/templates/4_stereo.html +84 -0
  67. package/skills/mudra-master/mudra-xr/assets/templates/5_camera.html +117 -0
  68. package/skills/mudra-master/mudra-xr/assets/templates/6_ai.html +154 -0
  69. package/skills/mudra-master/mudra-xr/assets/templates/7_ai_live.html +253 -0
  70. package/skills/mudra-master/mudra-xr/assets/templates/8_objects.html +95 -0
  71. package/skills/mudra-master/mudra-xr/assets/templates/9_xr-toggle.html +90 -0
  72. package/skills/mudra-master/mudra-xr/assets/templates/heuristic_hand_gestures.html +102 -0
  73. package/skills/mudra-master/mudra-xr/assets/templates/meshes.html +47 -0
  74. package/skills/mudra-master/mudra-xr/assets/templates/planes.html +47 -0
  75. package/skills/mudra-master/mudra-xr/assets/templates/uikit.html +187 -0
  76. package/skills/mudra-master/mudra-xr/references/agent_protocol.json +878 -0
  77. package/skills/mudra-master/mudra-xr/references/promt.md +1516 -0
  78. package/skills/mudra-preview/SKILL.md +151 -0
  79. package/skills/mudra-preview/assets/ar-menu.html +382 -0
  80. package/skills/mudra-preview/assets/document-scroller.html +468 -0
  81. package/skills/mudra-preview/assets/drum-machine.html +788 -0
  82. package/skills/mudra-preview/assets/emg-visualizer.html +390 -0
  83. package/skills/mudra-preview/assets/generative-art.html +408 -0
  84. package/skills/mudra-preview/assets/gesture-assistant.html +342 -0
  85. package/skills/mudra-preview/assets/gesture-speech.html +444 -0
  86. package/skills/mudra-preview/assets/hands-free-desktop.html +376 -0
  87. package/skills/mudra-preview/assets/model-rotator.html +365 -0
  88. package/skills/mudra-preview/assets/mudra-duel.html +3200 -0
  89. package/skills/mudra-preview/assets/mudra-monitor.html +1451 -0
  90. package/skills/mudra-preview/assets/mudra-ultimate-template.html +891 -0
  91. package/skills/mudra-preview/assets/music-sequencer.html +455 -0
  92. package/skills/mudra-preview/assets/neural-pong.html +380 -0
  93. package/skills/mudra-preview/assets/neural-snake.html +364 -0
  94. package/skills/mudra-preview/assets/presentation-controller.html +345 -0
  95. package/skills/mudra-preview/assets/pressure-painter.html +285 -0
  96. package/skills/mudra-preview/assets/runner.html +1812 -0
  97. package/skills/mudra-preview/assets/smart-home.html +461 -0
  98. package/skills/mudra-preview/assets/space-invaders.html +1154 -0
  99. package/skills/mudra-preview/assets/waterful-ring-toss.html +1624 -0
  100. package/skills/mudra-preview/references/agent_protocol.json +646 -0
  101. package/skills/mudra-preview/references/promt.md +16829 -0
  102. package/skills/mudra-xr/SKILL.md +245 -0
  103. package/skills/mudra-xr/assets/demos/3dgs-walkthrough.html +242 -0
  104. package/skills/mudra-xr/assets/demos/aisimulator.html +792 -0
  105. package/skills/mudra-xr/assets/demos/balloonpop.html +422 -0
  106. package/skills/mudra-xr/assets/demos/ballpit.html +284 -0
  107. package/skills/mudra-xr/assets/demos/drone.html +41 -0
  108. package/skills/mudra-xr/assets/demos/gemini-icebreakers.html +338 -0
  109. package/skills/mudra-xr/assets/demos/gemini-xrobject.html +302 -0
  110. package/skills/mudra-xr/assets/demos/math3d.html +188 -0
  111. package/skills/mudra-xr/assets/demos/measure.html +247 -0
  112. package/skills/mudra-xr/assets/demos/occlusion.html +251 -0
  113. package/skills/mudra-xr/assets/demos/rain.html +498 -0
  114. package/skills/mudra-xr/assets/demos/screenwiper.html +432 -0
  115. package/skills/mudra-xr/assets/demos/splash.html +519 -0
  116. package/skills/mudra-xr/assets/demos/webcam_gestures.html +253 -0
  117. package/skills/mudra-xr/assets/demos/xremoji.html +833 -0
  118. package/skills/mudra-xr/assets/demos/xrpoet.html +151 -0
  119. package/skills/mudra-xr/assets/samples/depthmap.html +266 -0
  120. package/skills/mudra-xr/assets/samples/depthmesh.html +100 -0
  121. package/skills/mudra-xr/assets/samples/game_rps.html +1099 -0
  122. package/skills/mudra-xr/assets/samples/gestures_custom.html +467 -0
  123. package/skills/mudra-xr/assets/samples/gestures_heuristic.html +256 -0
  124. package/skills/mudra-xr/assets/samples/lighting.html +163 -0
  125. package/skills/mudra-xr/assets/samples/mesh_detection.html +46 -0
  126. package/skills/mudra-xr/assets/samples/modelviewer.html +183 -0
  127. package/skills/mudra-xr/assets/samples/paint.html +133 -0
  128. package/skills/mudra-xr/assets/samples/planar-vst.html +45 -0
  129. package/skills/mudra-xr/assets/samples/reticle.html +95 -0
  130. package/skills/mudra-xr/assets/samples/skybox_agent.html +384 -0
  131. package/skills/mudra-xr/assets/samples/sound.html +390 -0
  132. package/skills/mudra-xr/assets/samples/ui.html +496 -0
  133. package/skills/mudra-xr/assets/samples/virtual-screens.html +808 -0
  134. package/skills/mudra-xr/assets/templates/0_basic.html +64 -0
  135. package/skills/mudra-xr/assets/templates/1_ui.html +107 -0
  136. package/skills/mudra-xr/assets/templates/2_hands.html +183 -0
  137. package/skills/mudra-xr/assets/templates/3_depth.html +89 -0
  138. package/skills/mudra-xr/assets/templates/4_stereo.html +84 -0
  139. package/skills/mudra-xr/assets/templates/5_camera.html +117 -0
  140. package/skills/mudra-xr/assets/templates/6_ai.html +154 -0
  141. package/skills/mudra-xr/assets/templates/7_ai_live.html +253 -0
  142. package/skills/mudra-xr/assets/templates/8_objects.html +95 -0
  143. package/skills/mudra-xr/assets/templates/9_xr-toggle.html +90 -0
  144. package/skills/mudra-xr/assets/templates/heuristic_hand_gestures.html +102 -0
  145. package/skills/mudra-xr/assets/templates/meshes.html +47 -0
  146. package/skills/mudra-xr/assets/templates/planes.html +47 -0
  147. package/skills/mudra-xr/assets/templates/uikit.html +187 -0
  148. package/skills/mudra-xr/references/agent_protocol.json +878 -0
  149. package/skills/mudra-xr/references/promt.md +1516 -0
package/skills/mudra-xr/assets/samples/gestures_heuristic.html ADDED
@@ -0,0 +1,256 @@
1
+ <!doctype html>
2
+ <!-- reference: samples/gestures_heuristic -->
3
+ <html lang="en">
4
+ <head>
5
+ <title>Gestures: Heuristic HUD | XR Blocks</title>
6
+
7
+ <meta
8
+ name="viewport"
9
+ content="width=device-width, initial-scale=1.0, user-scalable=no"
10
+ />
11
+
12
+ <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
13
+ <script>
14
+ window.litDisableBundleWarning = true;
15
+ </script>
16
+ <script type="importmap">
17
+ {
18
+ "imports": {
19
+ "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
20
+ "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/",
21
+ "troika-three-text": "https://cdn.jsdelivr.net/gh/protectwise/troika@028b81cf308f0f22e5aa8e78196be56ec1997af5/packages/troika-three-text/src/index.js",
22
+ "troika-three-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-three-utils/src/index.js",
23
+ "troika-worker-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-worker-utils/src/index.js",
24
+ "bidi-js": "https://esm.sh/bidi-js@%5E1.0.2?target=es2022",
25
+ "webgl-sdf-generator": "https://esm.sh/webgl-sdf-generator@1.1.1/es2022/webgl-sdf-generator.mjs",
26
+ "lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
27
+ "lit/": "https://esm.run/lit@3/",
28
+ "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/xrblocks.js",
29
+ "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/addons/"
30
+ }
31
+ }
32
+ </script>
33
+ </head>
34
+
35
+ <body>
36
+ <script type="module">
37
+ import 'xrblocks/addons/simulator/SimulatorAddons.js';
38
+
39
+ import * as xb from 'xrblocks';
40
+ import * as THREE from 'three';
41
+
42
+ const options = new xb.Options();
43
+ options.simulator.instructions.enabled = false;
44
+ options.enableReticles();
45
+ options.enableGestures();
46
+
47
+ options.gestures.setGestureEnabled('point', true);
48
+ options.gestures.setGestureEnabled('spread', true);
49
+
50
+ options.hands.enabled = true;
51
+ options.hands.visualization = true;
52
+ options.hands.visualizeJoints = true;
53
+ options.hands.visualizeMeshes = true;
54
+
55
+ options.simulator.defaultMode = xb.SimulatorMode.POSE;
56
+
57
+ function createHudElement() {
58
+ const style = document.createElement('style');
59
+ style.textContent = `
60
+ #gesture-hud {
61
+ position: fixed;
62
+ top: 12px;
63
+ right: 12px;
64
+ min-width: 220px;
65
+ padding: 12px;
66
+ border-radius: 12px;
67
+ background: rgba(10, 12, 20, 0.82);
68
+ color: #f4f4f4;
69
+ font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
70
+ font-size: 13px;
71
+ line-height: 1.4;
72
+ box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
73
+ z-index: 9999;
74
+ }
75
+ #gesture-hud h2 {
76
+ margin: 0 0 8px;
77
+ font-size: 14px;
78
+ font-weight: 700;
79
+ letter-spacing: 0.01em;
80
+ }
81
+ #gesture-hud .hand-row {
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: space-between;
85
+ padding: 6px 8px;
86
+ border-radius: 8px;
87
+ background: rgba(255, 255, 255, 0.04);
88
+ margin-bottom: 6px;
89
+ }
90
+ #gesture-hud .hand-row:last-child {
91
+ margin-bottom: 0;
92
+ }
93
+ #gesture-hud .hand-label {
94
+ text-transform: uppercase;
95
+ letter-spacing: 0.08em;
96
+ font-size: 11px;
97
+ opacity: 0.75;
98
+ }
99
+ #gesture-hud .gesture {
100
+ font-weight: 700;
101
+ }
102
+ #gesture-hud .gesture[data-active="false"] {
103
+ opacity: 0.65;
104
+ }
105
+ `;
106
+ document.head.appendChild(style);
107
+
108
+ const container = document.createElement('div');
109
+ container.id = 'gesture-hud';
110
+ container.innerHTML = `
111
+ <h2>Gestures</h2>
112
+ <div class="hand-row">
113
+ <span class="hand-label">Left</span>
114
+ <span class="gesture" data-hand="left" data-active="false">None</span>
115
+ </div>
116
+ <div class="hand-row">
117
+ <span class="hand-label">Right</span>
118
+ <span class="gesture" data-hand="right" data-active="false">None</span>
119
+ </div>
120
+ `;
121
+ document.body.appendChild(container);
122
+ return container;
123
+ }
124
+
125
+ class GestureLogger extends xb.Script {
126
+ init() {
127
+ const gestures = xb.core.gestureRecognition;
128
+ if (!gestures) {
129
+ console.warn(
130
+ '[GestureLogger] GestureRecognition is unavailable. ' +
131
+ 'Make sure options.enableGestures() is called before xb.init().'
132
+ );
133
+ return;
134
+ }
135
+ this._onGestureStart = (event) => {
136
+ const {hand, name, confidence = 0} = event.detail;
137
+ console.log(
138
+ `[gesture] ${hand} hand started ${name} (${confidence.toFixed(2)})`
139
+ );
140
+ };
141
+ this._onGestureEnd = (event) => {
142
+ const {hand, name} = event.detail;
143
+ console.log(`[gesture] ${hand} hand ended ${name}`);
144
+ };
145
+ gestures.addEventListener('gesturestart', this._onGestureStart);
146
+ gestures.addEventListener('gestureend', this._onGestureEnd);
147
+ this.add(new THREE.HemisphereLight(0xaaaaaa, 0x666666, 3));
148
+ }
149
+
150
+ dispose() {
151
+ const gestures = xb.core.gestureRecognition;
152
+ if (!gestures) return;
153
+ if (this._onGestureStart) {
154
+ gestures.removeEventListener('gesturestart', this._onGestureStart);
155
+ }
156
+ if (this._onGestureEnd) {
157
+ gestures.removeEventListener('gestureend', this._onGestureEnd);
158
+ }
159
+ }
160
+ }
161
+
162
+ class GestureHUD extends xb.Script {
163
+ init() {
164
+ this._container = createHudElement();
165
+ this._active = {
166
+ left: new Map(),
167
+ right: new Map(),
168
+ };
169
+ this._labels = {
170
+ left: this._container.querySelector('[data-hand="left"]'),
171
+ right: this._container.querySelector('[data-hand="right"]'),
172
+ };
173
+
174
+ const gestures = xb.core.gestureRecognition;
175
+ if (!gestures) {
176
+ console.warn(
177
+ '[GestureHUD] GestureRecognition is unavailable. ' +
178
+ 'Make sure options.enableGestures() is called before xb.init().'
179
+ );
180
+ return;
181
+ }
182
+
183
+ const update = (event) => {
184
+ const {name, hand, confidence = 0} = event.detail;
185
+ this._active[hand].set(name, confidence);
186
+ this._refresh(hand);
187
+ };
188
+ const clear = (event) => {
189
+ const {name, hand} = event.detail;
190
+ this._active[hand].delete(name);
191
+ this._refresh(hand);
192
+ };
193
+
194
+ this._onGestureStart = update;
195
+ this._onGestureUpdate = update;
196
+ this._onGestureEnd = clear;
197
+
198
+ gestures.addEventListener('gesturestart', this._onGestureStart);
199
+ gestures.addEventListener('gestureupdate', this._onGestureUpdate);
200
+ gestures.addEventListener('gestureend', this._onGestureEnd);
201
+ }
202
+
203
+ _refresh(hand) {
204
+ const label = this._labels[hand];
205
+ if (!label) return;
206
+ const entries = this._active[hand];
207
+ if (!entries || entries.size === 0) {
208
+ label.dataset.active = 'false';
209
+ label.textContent = 'None';
210
+ return;
211
+ }
212
+ let topGesture = 'None';
213
+ let topConfidence = 0;
214
+ for (const [name, confidence] of entries.entries()) {
215
+ if (confidence >= topConfidence) {
216
+ topGesture = name;
217
+ topConfidence = confidence;
218
+ }
219
+ }
220
+ label.dataset.active = 'true';
221
+ label.textContent = `${topGesture} (${topConfidence.toFixed(2)})`;
222
+ }
223
+
224
+ dispose() {
225
+ const gestures = xb.core.gestureRecognition;
226
+ if (gestures) {
227
+ if (this._onGestureStart) {
228
+ gestures.removeEventListener('gesturestart', this._onGestureStart);
229
+ }
230
+ if (this._onGestureUpdate) {
231
+ gestures.removeEventListener('gestureupdate', this._onGestureUpdate);
232
+ }
233
+ if (this._onGestureEnd) {
234
+ gestures.removeEventListener('gestureend', this._onGestureEnd);
235
+ }
236
+ }
237
+ if (this._container?.parentElement) {
238
+ this._container.parentElement.removeChild(this._container);
239
+ }
240
+ }
241
+ }
242
+
243
+ async function start() {
244
+ options.setAppTitle('Heuristic Gestures');
245
+ xb.add(new GestureLogger());
246
+ xb.add(new GestureHUD());
247
+ await xb.init(options);
248
+ }
249
+
250
+ document.addEventListener('DOMContentLoaded', () => {
251
+ start();
252
+ });
253
+
254
+ </script>
255
+ </body>
256
+ </html>
package/skills/mudra-xr/assets/samples/lighting.html ADDED
@@ -0,0 +1,163 @@
1
+ <!doctype html>
2
+ <!-- reference: samples/lighting -->
3
+ <html lang="en">
4
+ <head>
5
+ <title>Lighting Estimation | XR Blocks</title>
6
+
7
+ <meta
8
+ name="viewport"
9
+ content="width=device-width, initial-scale=1.0, user-scalable=no"
10
+ />
11
+
12
+ <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
13
+ <script>
14
+ window.litDisableBundleWarning = true;
15
+ </script>
16
+ <script type="importmap">
17
+ {
18
+ "imports": {
19
+ "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
20
+ "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/",
21
+ "troika-three-text": "https://cdn.jsdelivr.net/gh/protectwise/troika@028b81cf308f0f22e5aa8e78196be56ec1997af5/packages/troika-three-text/src/index.js",
22
+ "troika-three-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-three-utils/src/index.js",
23
+ "troika-worker-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-worker-utils/src/index.js",
24
+ "bidi-js": "https://esm.sh/bidi-js@%5E1.0.2?target=es2022",
25
+ "webgl-sdf-generator": "https://esm.sh/webgl-sdf-generator@1.1.1/es2022/webgl-sdf-generator.mjs",
26
+ "lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
27
+ "lit/": "https://esm.run/lit@3/",
28
+ "@material/web/": "https://esm.run/@material/web/",
29
+ "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/xrblocks.js",
30
+ "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/addons/"
31
+ }
32
+ }
33
+ </script>
34
+ </head>
35
+
36
+ <body>
37
+ <script type="module">
38
+ import * as THREE from 'three';
39
+ import * as xb from 'xrblocks';
40
+ import {ModelManager} from 'xrblocks/addons/ui/ModelManager.js';
41
+
42
+ // --- Inlined: animals_data.js ---
43
+ const ANIMALS_DATA = [
44
+ {
45
+ path: 'https://cdn.jsdelivr.net/gh/xrblocks/assets@main/',
46
+ model: 'models/Cat/cat.gltf',
47
+ thumbnail: 'thumbnail.png',
48
+ },
49
+ ];
50
+
51
+ // --- Inlined: LightingScene.js ---
52
+ class LightingScene extends xb.Script {
53
+ constructor() {
54
+ super();
55
+ this.pointer = new THREE.Vector3();
56
+ this.raycaster = new THREE.Raycaster();
57
+ this.modelManager = new ModelManager(
58
+ ANIMALS_DATA,
59
+ /*enableOcclusion=*/ true
60
+ );
61
+ this.modelManager.layers.enable(xb.OCCLUDABLE_ITEMS_LAYER);
62
+ this.add(this.modelManager);
63
+ }
64
+ init() {
65
+ xb.core.input.addReticles();
66
+ xb.showReticleOnDepthMesh(true);
67
+ }
68
+ updatePointerPosition(event) {
69
+ // (-1 to +1) for both components
70
+ this.pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
71
+ this.pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
72
+ // scale pointer.x from [-1, 0] to [-1, 1]
73
+ this.pointer.x = 1 + 2 * this.pointer.x;
74
+ }
75
+ onSelectStart(event) {
76
+ const controller = event.target;
77
+ if (xb.core.input.intersectionsForController.get(controller).length > 0) {
78
+ const intersection =
79
+ xb.core.input.intersectionsForController.get(controller)[0];
80
+ if (intersection.handleSelectRaycast) {
81
+ intersection.handleSelectRaycast(intersection);
82
+ return;
83
+ } else if (intersection.object.handleSelectRaycast) {
84
+ intersection.object.handleSelectRaycast(intersection);
85
+ return;
86
+ } else if (intersection.object == xb.core.depth.depthMesh) {
87
+ this.onDepthMeshSelectStart(intersection);
88
+ return;
89
+ }
90
+ }
91
+ }
92
+ onDepthMeshSelectStart(intersection) {
93
+ console.log('Depth mesh select intersection:', intersection.point);
94
+ this.modelManager.positionModelAtIntersection(intersection, xb.core.camera);
95
+ }
96
+ onPointerDown(event) {
97
+ this.updatePointerPosition(event);
98
+ const cameras = xb.core.renderer.xr.getCamera().cameras;
99
+ if (cameras.length == 0) return;
100
+ const camera = cameras[0];
101
+ this.raycaster.setFromCamera(this.pointer, camera);
102
+ const intersections = this.raycaster.intersectObjects(
103
+ xb.core.input.reticleTargets
104
+ );
105
+ for (let intersection of intersections) {
106
+ if (intersection.handleSelectRaycast) {
107
+ intersection.handleSelectRaycast(intersection);
108
+ return;
109
+ } else if (intersection.object.handleSelectRaycast) {
110
+ intersection.object.handleSelectRaycast(intersection);
111
+ return;
112
+ } else if (intersection.object == xb.core.depth.depthMesh) {
113
+ this.modelManager.positionModelAtIntersection(intersection, camera);
114
+ return;
115
+ }
116
+ }
117
+ }
118
+ }
119
+
120
+ // --- Main entry point ---
121
+
122
+ // Set up depth mesh options. Need depth mesh to render shadows to.
123
+ let options = new xb.Options();
124
+ options.simulator.instructions.enabled = false;
125
+ options.depth = new xb.DepthOptions(xb.xrDepthMeshOptions);
126
+ options.depth.enabled = true;
127
+ options.depth.depthMesh.enabled = true;
128
+ options.depth.depthTexture.enabled = true;
129
+ options.depth.depthMesh.updateFullResolutionGeometry = true;
130
+ options.depth.depthMesh.renderShadow = true;
131
+ options.depth.depthMesh.shadowOpacity = 0.6;
132
+ options.depth.occlusion.enabled = true;
133
+
134
+ // Set up lighting options.
135
+ options.lighting = new xb.LightingOptions(xb.xrLightingOptions);
136
+ options.lighting.enabled = true;
137
+ options.lighting.useAmbientSH = true;
138
+ options.lighting.useDirectionalLight = true;
139
+ options.lighting.castDirectionalLightShadow = true;
140
+ options.lighting.useDynamicSoftShadow = false;
141
+
142
+ options.xrButton = {
143
+ ...options.xrButton,
144
+ startText: '<i id="xrlogo"></i> BRING IT TO LIFE',
145
+ endText: '<i id="xrlogo"></i> MISSION COMPLETE',
146
+ };
147
+ async function start() {
148
+ const lightingScene = new LightingScene();
149
+ options.setAppTitle('Lighting Estimation');
150
+ await xb.init(options);
151
+ xb.add(lightingScene);
152
+ window.addEventListener(
153
+ 'pointerdown',
154
+ lightingScene.onPointerDown.bind(lightingScene)
155
+ );
156
+ }
157
+ document.addEventListener('DOMContentLoaded', function () {
158
+ start();
159
+ });
160
+
161
+ </script>
162
+ </body>
163
+ </html>
package/skills/mudra-xr/assets/samples/mesh_detection.html ADDED
@@ -0,0 +1,46 @@
1
+ <!doctype html>
2
+ <!-- reference: samples/mesh_detection -->
3
+ <html lang="en">
4
+ <head>
5
+ <title>Mesh Detection | XR Blocks Template</title>
6
+
7
+ <meta
8
+ name="viewport"
9
+ content="width=device-width, initial-scale=1.0, user-scalable=no"
10
+ />
11
+
12
+ <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
13
+ <script>
14
+ window.litDisableBundleWarning = true;
15
+ </script>
16
+ <script type="importmap">
17
+ {
18
+ "imports": {
19
+ "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
20
+ "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/",
21
+ "lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
22
+ "lit/": "https://esm.run/lit@3/",
23
+ "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/xrblocks.js",
24
+ "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/addons/"
25
+ }
26
+ }
27
+ </script>
28
+ </head>
29
+
30
+ <body>
31
+ <script type="module">
32
+ import 'xrblocks/addons/simulator/SimulatorAddons.js';
33
+
34
+ import * as xb from 'xrblocks';
35
+
36
+ document.addEventListener('DOMContentLoaded', async function () {
37
+ const options = new xb.Options();
38
+ options.simulator.instructions.enabled = false;
39
+ options.world.enableMeshDetection();
40
+ options.world.meshes.showDebugVisualizations = true;
41
+ await xb.init(options);
42
+ });
43
+
44
+ </script>
45
+ </body>
46
+ </html>
package/skills/mudra-xr/assets/samples/modelviewer.html ADDED
@@ -0,0 +1,183 @@
1
+ <!doctype html>
2
+ <!-- reference: samples/modelviewer -->
3
+ <html lang="en">
4
+ <head>
5
+ <title>Model Viewer | XR Blocks</title>
6
+
7
+ <meta
8
+ name="viewport"
9
+ content="width=device-width, initial-scale=1.0, user-scalable=no"
10
+ />
11
+
12
+ <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
13
+ <script>
14
+ window.litDisableBundleWarning = true;
15
+ </script>
16
+ <script type="importmap">
17
+ {
18
+ "imports": {
19
+ "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
20
+ "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/",
21
+ "troika-three-text": "https://cdn.jsdelivr.net/gh/protectwise/troika@028b81cf308f0f22e5aa8e78196be56ec1997af5/packages/troika-three-text/src/index.js",
22
+ "troika-three-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-three-utils/src/index.js",
23
+ "troika-worker-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-worker-utils/src/index.js",
24
+ "bidi-js": "https://esm.sh/bidi-js@%5E1.0.2?target=es2022",
25
+ "webgl-sdf-generator": "https://esm.sh/webgl-sdf-generator@1.1.1/es2022/webgl-sdf-generator.mjs",
26
+ "lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
27
+ "lit/": "https://esm.run/lit@3/",
28
+ "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/xrblocks.js",
29
+ "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/addons/",
30
+ "@sparkjsdev/spark": "https://sparkjs.dev/releases/spark/0.1.10/spark.module.js"
31
+ }
32
+ }
33
+ </script>
34
+ </head>
35
+
36
+ <body>
37
+ <div class="background-image" style="background-color: #000000"></div>
38
+ <script type="module">
39
+ import 'xrblocks/addons/simulator/SimulatorAddons.js';
40
+
41
+ import {html} from 'lit';
42
+ import * as THREE from 'three';
43
+ import * as xb from 'xrblocks';
44
+
45
+ // --- Inlined: ModelViewerScene.js ---
46
+ const kLightX = xb.getUrlParamFloat('lightX', 0);
47
+ const kLightY = xb.getUrlParamFloat('lightY', 500);
48
+ const kLightZ = xb.getUrlParamFloat('lightZ', -10);
49
+
50
+ const ASSETS_BASE_URL = 'https://cdn.jsdelivr.net/gh/xrblocks/assets@main/';
51
+ const PROPRIETARY_ASSETS_BASE_URL =
52
+ 'https://cdn.jsdelivr.net/gh/xrblocks/proprietary-assets@main/';
53
+
54
+ class ModelViewerScene extends xb.Script {
55
+ constructor() {
56
+ super();
57
+ }
58
+
59
+ async init() {
60
+ xb.core.input.addReticles();
61
+ this.addLights();
62
+ this.createModelFromObject();
63
+ await Promise.all([
64
+ this.createModelFromGLTF(),
65
+ this.createModelFromAnimatedGLTF(),
66
+ this.createModelFromSplat(),
67
+ this.createModelInPanel(),
68
+ ]);
69
+ }
70
+
71
+ addLights() {
72
+ this.add(new THREE.HemisphereLight(0xbbbbbb, 0x888888, 3));
73
+ const light = new THREE.DirectionalLight(0xffffff, 2);
74
+ light.position.set(kLightX, kLightY, kLightZ);
75
+ this.add(light);
76
+ }
77
+
78
+ createModelFromObject() {
79
+ const model = new xb.ModelViewer({});
80
+ model.add(
81
+ new THREE.Mesh(
82
+ new THREE.CylinderGeometry(0.15, 0.15, 0.4),
83
+ new THREE.MeshPhongMaterial({color: 0xdb5461})
84
+ )
85
+ );
86
+ model.setupBoundingBox();
87
+ model.setupRaycastCylinder();
88
+ model.setupPlatform();
89
+ model.position.set(-0.15, 0.75, -1.65);
90
+ this.add(model);
91
+ }
92
+
93
+ async createModelFromGLTF() {
94
+ const model = new xb.ModelViewer({});
95
+ this.add(model);
96
+ await model.loadGLTFModel({
97
+ data: {
98
+ scale: {x: 0.009, y: 0.009, z: 0.009},
99
+ path: PROPRIETARY_ASSETS_BASE_URL,
100
+ model: 'chess/chess_compressed.glb',
101
+ },
102
+ renderer: xb.core.renderer,
103
+ });
104
+ model.position.set(0, 0.78, -1.1);
105
+ }
106
+
107
+ async createModelFromAnimatedGLTF() {
108
+ const model = new xb.ModelViewer({});
109
+ this.add(model);
110
+ await model.loadGLTFModel({
111
+ data: {
112
+ scale: {x: 1.0, y: 1.0, z: 1.0},
113
+ path: ASSETS_BASE_URL,
114
+ model: 'models/Cat/cat.gltf',
115
+ },
116
+ renderer: xb.core.renderer,
117
+ });
118
+ model.position.set(0.9, 0.68, -0.95);
119
+ }
120
+
121
+ async createModelFromSplat() {
122
+ const model = new xb.ModelViewer({castShadow: false, receiveShadow: false});
123
+ this.add(model);
124
+ await model.loadSplatModel({
125
+ data: {
126
+ model: PROPRIETARY_ASSETS_BASE_URL + 'lego/lego.spz',
127
+ scale: {x: 0.6, y: 0.6, z: 0.6},
128
+ rotation: {x: 0, y: 180, z: 0},
129
+ },
130
+ });
131
+ model.position.set(0.4, 0.78, -1.1);
132
+ model.rotation.set(0, -Math.PI / 6, 0);
133
+ }
134
+
135
+ async createModelInPanel() {
136
+ const panel = new xb.SpatialPanel({
137
+ backgroundColor: '#00000000',
138
+ width: 0.5,
139
+ height: 0.25,
140
+ useDefaultPosition: false,
141
+ });
142
+ panel.isRoot = true;
143
+ this.add(panel);
144
+ panel.position.set(0, 1.5, -2.0);
145
+
146
+ panel.updateLayouts();
147
+
148
+ const model = new xb.ModelViewer({});
149
+ panel.add(model);
150
+ await model.loadGLTFModel({
151
+ data: {
152
+ scale: {x: 0.002, y: 0.002, z: 0.002},
153
+ rotation: {x: 0, y: 180, z: 0},
154
+ path: PROPRIETARY_ASSETS_BASE_URL,
155
+ model: 'earth/Earth_1_12756.glb',
156
+ },
157
+ setupPlatform: false,
158
+ renderer: xb.core.renderer,
159
+ });
160
+ }
161
+ }
162
+
163
+ // --- Main entry point ---
164
+ document.addEventListener('DOMContentLoaded', async () => {
165
+ const modelViewerScene = new ModelViewerScene();
166
+ xb.add(modelViewerScene);
167
+ const options = new xb.Options();
168
+ options.simulator.instructions.enabled = false;
169
+ options.simulator.instructions.customInstructions = [
170
+ {
171
+ header: html`<h1>Model Viewer</h1>`,
172
+ videoSrc: 'model_viewer_simulator_usage.webm',
173
+ description: html`Click or pinch the object to rotate. Drag the platform
174
+ to move.`,
175
+ },
176
+ ];
177
+ options.setAppTitle('Model Viewer');
178
+ await xb.init(options);
179
+ });
180
+
181
+ </script>
182
+ </body>
183
+ </html>