xrblocks 0.1.0 → 0.3.0

package/README.md

@@ -2,44 +2,59 @@
 
 [![NPM Package](https://img.shields.io/npm/v/xrblocks)](https://www.npmjs.com/package/xrblocks)
 [![Build Size](https://badgen.net/bundlephobia/minzip/xrblocks)](https://bundlephobia.com/result?p=xrblocks)
-[![NPM Downloads](https://img.shields.io/npm/dw/xrblocks)](https://www.npmtrends.com/xrblocks)
+![jsDelivr hits (GitHub)](https://img.shields.io/jsdelivr/gh/hw/google/xrblocks)
 
 #### JavaScript library for rapid XR and AI prototyping
 
+[Site](https://xrblocks.github.io/) —
 [Manual](https://xrblocks.github.io/docs/) —
-[Templates](https://xrblocks.github.io/docs/templates/Basic) —
-[Samples](https://xrblocks.github.io/docs/samples/ModelViewer)
+[Templates](https://xrblocks.github.io/docs/templates/Basic/) —
+[Demos](https://xrblocks.github.io/docs/samples/ModelViewer/) —
+[YouTube](https://www.youtube.com/watch?v=75QJHTsAoB8) —
+[arXiv](https://arxiv.org/abs/2509.25504) —
+[Blog](https://research.google/blog/xr-blocks-accelerating-ai-xr-innovation/)
 
 <p align="center">
- <a href="https://xrblocks.github.io/docs/samples/Ballpit" target="_blank"><img width="32.3%" src="assets/ballpit-demo.webp" alt="Ballpit" /></a>
-  <a href="https://xrblocks.github.io/docs/samples/XR-Emoji" target="_blank"><img width="32.3%" src="assets/xremoji-demo.webp" alt="XR Emoji" /></a>
- <a href="https://xrblocks.github.io/docs/samples/Gemini-Icebreakers" target="_blank"><img width="32.3%" src="assets/gemini-icebreakers-demo.webp" alt="Gemini Icebreakers" /></a>
+  <a href="https://xrblocks.github.io/docs/samples/Ballpit/" target="_blank"><img width="32.3%" src="https://cdn.jsdelivr.net/gh/google/xrblocks@main/assets/ballpit-demo.webp" alt="Ballpit" /></a>
+  <a href="https://xrblocks.github.io/docs/samples/XR-Emoji/" target="_blank"><img width="32.3%" src="https://cdn.jsdelivr.net/gh/google/xrblocks@main/assets/xremoji-demo.webp" alt="XR Emoji" /></a>
+  <a href="https://xrblocks.github.io/docs/samples/Gemini-Icebreakers/" target="_blank"><img width="32.3%" src="https://cdn.jsdelivr.net/gh/google/xrblocks@main/assets/gemini-icebreakers-demo.webp" alt="Gemini Icebreakers" /></a>
 </p>
 
 ### Description
 
 **XR Blocks** is a lightweight, cross-platform library for rapidly prototyping
 advanced XR and AI experiences. Built upon [three.js](https://threejs.org), it
-targets Chrome v136+ with WebXR support on Android XR and also includes a
-powerful desktop simulator for development. The framework emphasizes a
-user-centric, developer-friendly SDK designed to simplify the creation of
+targets Chrome v136+ with WebXR support on Android XR (e.g.,
+[Galaxy XR](https://www.samsung.com/us/xr/galaxy-xr/galaxy-xr/)) and also
+includes a powerful desktop simulator for development. The framework emphasizes
+a user-centric, developer-friendly SDK designed to simplify the creation of
 immersive applications with features like:
 
--   **Hand Tracking & Gestures:** Access advanced hand tracking, custom
-    gestures with TensorFlow Lite / LiteRT models, and interaction events.
--   **World Understanding:** Present samples with depth sensing, geometry-aware
-    physics, and object recognition with Gemini in both XR and desktop.
--   **AI Integration:** Seamlessly connect to Gemini for multimodal
-    understanding and live conversational experiences.
--   **Cross-Platform:** Write once and deploy to both XR devices and desktop
-    browsers.
+- **Hand Tracking & Gestures:** Access advanced hand tracking, custom
+  gestures with TensorFlow Lite / PyTorch models, and interaction events.
+- **Gesture Recognition:** Opt into pinch, open-palm, fist, thumbs-up, point,
+  and spread detection with `options.enableGestures()`, tune providers or
+  thresholds, and subscribe to `gesturestart`/`gestureupdate`/`gestureend`
+  events from the shared subsystem.
+- **World Understanding:** Present samples with depth sensing, geometry-aware
+  physics, and object recognition with Gemini in both XR and desktop simulator.
+- **AI Integration:** Seamlessly connect to Gemini for multimodal
+  understanding and live conversational experiences.
+- **Cross-Platform:** Write once and deploy to both XR devices and desktop
+  Chrome browsers.
+
+We welcome all contributors to foster an AI + XR community! Read our
+[blog post](https://research.google/blog/xr-blocks-accelerating-ai-xr-innovation/)
+and [white paper](https://arxiv.org/abs/2509.25504) for a visionary roadmap.
 
 ### Usage
 
 XR Blocks can be imported directly into a webpage using an importmap. This code
 creates a basic XR scene containing a cylinder. When you view the scene, you can
 pinch your fingers (in XR) or click (in the desktop simulator) to change the
-cylinder's color.
+cylinder's color. Check out
+[this live demo](https://xrblocks.github.io/docs/templates/Basic/) with simple
+code below:
 
 ```html
 <!DOCTYPE html>
@@ -59,8 +74,8 @@ cylinder's color.
     <script type="importmap">
       {
         "imports": {
-          "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
-          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/",
+          "three": "https://cdn.jsdelivr.net/npm/three@0.181.0/build/three.module.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.181.0/examples/jsm/",
           "xrblocks": "https://cdn.jsdelivr.net/gh/google/xrblocks@build/xrblocks.js",
           "xrblocks/addons/": "https://cdn.jsdelivr.net/gh/google/xrblocks@build/addons/"
         }
@@ -69,8 +84,8 @@ cylinder's color.
   </head>
   <body>
     <script type="module">
-      import * as THREE from "three";
-      import * as xb from "xrblocks";
+      import * as THREE from 'three';
+      import * as xb from 'xrblocks';
 
       /**
        * A basic example of XRBlocks to render a cylinder and pinch to change its color.
@@ -107,7 +122,7 @@ cylinder's color.
       }
 
       // When the page content is loaded, add our script and initialize XR Blocks.
-      document.addEventListener("DOMContentLoaded", function () {
+      document.addEventListener('DOMContentLoaded', function () {
         xb.add(new MainScript());
         xb.init(new xb.Options());
       });
@@ -130,10 +145,18 @@ npm ci
 
 # Build xrblocks.js.
 npm run build
+
+# After making changes, check ESLint and run Prettier
+npm run lint # ESLint check
+npm run format # Prettier format
 ```
 
-This is not an officially supported Google product. This project is not eligible
-for the
+XR Blocks uses ESLint for linting and Prettier for formatting.
+If coding in VSCode, make sure to install the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and the [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode). Then set Prettier as your default formatter.
+
+This is not an officially supported Google product, but will be actively
+maintained by the XR Labs team and external collaborators. This project is not
+eligible for the
 [Google Open Source Software Vulnerability Rewards Program](https://bughunters.google.com/open-source-security).
 
 ### User Data & Permissions
@@ -183,11 +206,89 @@ To remove XR Blocks from your code, simple remove the lines from your `<script
 type="importmap">` tag in HTML, or `import * from xrblocks` in JavaScript, or
 use `npm uninstall xrblocks` from your project directory.
 
+### References
+
+If you find XR Blocks inspiring or useful in your research, please reference it
+as:
+
+```bibtex
+@misc{Li2025XR,
+  title={{XR Blocks: Accelerating Human-centered AI + XR Innovation}},
+  author={Li, David and Numan, Nels and Qian, Xun and Chen, Yanhe and Zhou, Zhongyi and Alekseev, Evgenii and Lee, Geonsun and Cooper, Alex and Xia, Min and Chung, Scott and Nelson, Jeremy and Yuan, Xiuxiu and Dias, Jolica and Bettridge, Tim and Hersh, Benjamin and Huynh, Michelle and Piascik, Konrad and Cabello, Ricardo and Kim, David and Du, Ruofei},
+  year={2025},
+  eprint={2509.25504},
+  archivePrefix={arXiv},
+  primaryClass={cs.HC},
+  url={https://arxiv.org/abs/2509.25504},
+}
+```
+
+#### Key Works Built with XR Blocks
+
+These references are built with XR Blocks:
+
+```bibtex
+@inproceedings{Lee2025Sensible,
+  title = {{Sensible Agent: A Framework for Unobtrusive Interaction with Proactive AR Agent}},
+  author = {Lee, Geonsun and Xia, Min and Numan, Nels and Qian, Xun and Li, David and Chen, Yanhe and Kulshrestha, Achin and Chatterjee, Ishan and Zhang, Yinda and Manocha, Dinesh and Kim, David and Du, Ruofei},
+  booktitle = {Proceedings of the 39th Annual ACM Symposium on User Interface Software and Technology},
+  year = {2025},
+  publisher = {ACM},
+  numpages = {22},
+  series = {UIST},
+  doi = {10.1145/3746059.3747748},
+}
+```
+
+#### Inspiring Related Works
+
+We call for contributors to integrate our prior art into XR Blocks to enhance
+reproducibility and knowledge sharing:
+
+E.g., integrating models from <https://visualblocks.withgoogle.com> and [Transformers.js](https://huggingface.co/docs/transformers.js/en/index)
+to XR Blocks; bringing more
+[depth-based interaction](https://augmentedperception.github.io/depthlab/) to
+XR Blocks; and add more samples and demos. For large commits, feel free to add
+an issue before working on it so that your work won't be duplicated with others.
+
+```bibtex
+@inproceedings{Du2023Rapsai,
+  title = {{Rapsai: Accelerating Machine Learning Prototyping of Multimedia Applications Through Visual Programming}},
+  author = {Du, Ruofei and Li, Na and Jin, Jing and Carney, Michelle and Miles, Scott and Kleiner, Maria and Yuan, Xiuxiu and Zhang, Yinda and Kulkarni, Anuva and Liu, XingyuBruce and Sabie, Ahmed and Orts-Escolano, Sergio and Kar, Abhishek and Yu, Ping and Iyengar, Ram and Kowdle, Adarsh and Olwal, Alex},
+  booktitle = {Proceedings of the 2023 CHI Conference on Human Factors in Computing Systems},
+  year = {2023},
+  publisher = {ACM},
+  month = {Apr.},
+  day = {22-29},
+  number = {125},
+  pages = {1--23},
+  series = {CHI},
+  doi = {10.1145/3544548.3581338},
+}
+```
+
+Extending XR Blocks to XR communication:
+
+```bibtex
+@inproceedings{Hu2025DialogLab,
+  title = {{DialogLab: Authoring, Simulating, and Testing Dynamic Group Conversations in Hybrid Human-AI Conversations}},
+  author = {Hu, Erzhen and Chen, Yanhe and Li, Mingyi and Phadnis, Vrushank and Xu, Pingmei and Qian, Xun and Olwal, Alex and Kim, David and Heo, Seongkook and Du, Ruofei},
+  booktitle = {Proceedings of the 39th Annual ACM Symposium on User Interface Software and Technology},
+  year = {2025},
+  number = {210},
+  publisher = {ACM},
+  number = {210},
+  pages = {1--20},
+  series = {UIST},
+  doi = {10.1145/3746059.3747696},
+}
+```
+
 ### Terms of Service
 
--   Please follow
-    [Google's Privacy & Terms](https://ai.google.dev/gemini-api/terms) when
-    using this SDK.
+- Please follow
+  [Google's Privacy & Terms](https://ai.google.dev/gemini-api/terms) when
+  using this SDK.
 
--   When using AI features in this SDK, please follow
-    [Gemini's Privacy & Terms](https://ai.google.dev/gemini-api/terms).
+- When using AI features in this SDK, please follow
+  [Gemini's Privacy & Terms](https://ai.google.dev/gemini-api/terms).

package/build/addons/ai/AudioCaptureProcessorCode.d.ts

@@ -0,0 +1 @@
+export declare const AUDIO_CAPTURE_PROCESSOR_CODE = "\n    // Audio worklet processor for capturing audio data\n    class AudioCaptureProcessor extends AudioWorkletProcessor {\n    constructor() {\n        super();\n    }\n\n    process(inputs, outputs, parameters) {\n        const input = inputs[0];\n\n        if (input && input[0]) {\n        const inputData = input[0];\n        const pcmData = new Int16Array(inputData.length);\n        for (let i = 0; i < inputData.length; i++) {\n            pcmData[i] = Math.max(-32768, Math.min(32767, inputData[i] * 32768));\n        }\n        this.port.postMessage({type: 'audioData', data: pcmData.buffer});\n        }\n\n        return true;\n    }\n    }\n\n    registerProcessor('audio-capture-processor', AudioCaptureProcessor);\n";

package/build/addons/ai/AudioCaptureProcessorCode.js

@@ -0,0 +1,27 @@
+const AUDIO_CAPTURE_PROCESSOR_CODE = `
+    // Audio worklet processor for capturing audio data
+    class AudioCaptureProcessor extends AudioWorkletProcessor {
+    constructor() {
+        super();
+    }
+
+    process(inputs, outputs, parameters) {
+        const input = inputs[0];
+
+        if (input && input[0]) {
+        const inputData = input[0];
+        const pcmData = new Int16Array(inputData.length);
+        for (let i = 0; i < inputData.length; i++) {
+            pcmData[i] = Math.max(-32768, Math.min(32767, inputData[i] * 32768));
+        }
+        this.port.postMessage({type: 'audioData', data: pcmData.buffer});
+        }
+
+        return true;
+    }
+    }
+
+    registerProcessor('audio-capture-processor', AudioCaptureProcessor);
+`;
+
+export { AUDIO_CAPTURE_PROCESSOR_CODE };

package/build/addons/ai/GeminiManager.d.ts

@@ -9,6 +9,7 @@ export interface GeminiManagerEventMap extends THREE.Object3DEventMap {
         message: string;
     };
     turnComplete: object;
+    interrupted: object;
 }
 export declare class GeminiManager extends xb.Script<GeminiManagerEventMap> {
     xrDeviceCamera?: xb.XRDeviceCamera;
@@ -17,25 +18,31 @@ export declare class GeminiManager extends xb.Script<GeminiManagerEventMap> {
     audioContext: AudioContext | null;
     sourceNode: MediaStreamAudioSourceNode | null;
     processorNode: AudioWorkletNode | null;
+    queuedSourceNodes: Set<AudioScheduledSourceNode>;
     isAIRunning: boolean;
     audioQueue: AudioBuffer[];
-    isPlayingAudio: boolean;
+    nextAudioStartTime: number;
     private screenshotInterval?;
     currentInputText: string;
     currentOutputText: string;
+    tools: xb.Tool[];
     constructor();
     init(): void;
-    startGeminiLive(): Promise<void>;
+    startGeminiLive({ liveParams, model, }?: {
+        liveParams?: GoogleGenAITypes.LiveConnectConfig;
+        model?: string;
+    }): Promise<void>;
     stopGeminiLive(): Promise<void>;
     setupAudioCapture(): Promise<void>;
-    startLiveAI(): Promise<void>;
+    startLiveAI(params: GoogleGenAITypes.LiveConnectConfig, model?: string): Promise<void>;
     startScreenshotCapture(intervalMs?: number): void;
     captureAndSendScreenshot(): void;
     sendAudioData(audioBuffer: ArrayBuffer): void;
     sendVideoFrame(base64Image: string): void;
     initializeAudioContext(): Promise<void>;
     playAudioChunk(audioData: string): Promise<void>;
-    playNextAudioBuffer(): void;
+    scheduleAudioBuffers(): void;
+    stopPlayingAudio(): void;
     cleanup(): void;
     handleAIMessage(message: GoogleGenAITypes.LiveServerMessage): void;
     arrayBufferToBase64(buffer: ArrayBuffer): string;

package/build/addons/ai/GeminiManager.js

@@ -1,4 +1,5 @@
 import * as xb from 'xrblocks';
+import { AUDIO_CAPTURE_PROCESSOR_CODE } from './AudioCaptureProcessorCode.js';
 
 class GeminiManager extends xb.Script {
     constructor() {
@@ -8,27 +9,34 @@ class GeminiManager extends xb.Script {
         this.audioContext = null;
         this.sourceNode = null;
         this.processorNode = null;
+        this.queuedSourceNodes = new Set();
         // AI state
         this.isAIRunning = false;
         // Audio playback setup
         this.audioQueue = [];
-        this.isPlayingAudio = false;
+        this.nextAudioStartTime = 0;
         // Transcription state
         this.currentInputText = '';
         this.currentOutputText = '';
+        this.tools = [];
     }
     init() {
         this.xrDeviceCamera = xb.core.deviceCamera;
         this.ai = xb.core.ai;
     }
-    async startGeminiLive() {
+    async startGeminiLive({ liveParams, model, } = {}) {
         if (this.isAIRunning || !this.ai) {
             console.warn('AI already running or not available');
             return;
         }
+        liveParams = liveParams || {};
+        liveParams.tools = liveParams.tools || [];
+        liveParams.tools.push({
+            functionDeclarations: this.tools.map((tool) => tool.toJSON()),
+        });
         try {
             await this.setupAudioCapture();
-            await this.startLiveAI();
+            await this.startLiveAI(liveParams, model);
             this.startScreenshotCapture();
             this.isAIRunning = true;
         }
@@ -61,19 +69,21 @@ class GeminiManager extends xb.Script {
                 sampleRate: 16000,
                 channelCount: 1,
                 echoCancellation: true,
-                noiseSuppression: true
-            }
+                noiseSuppression: true,
+            },
         });
         const audioTracks = this.audioStream.getAudioTracks();
         if (audioTracks.length === 0) {
             throw new Error('No audio tracks found.');
         }
         this.audioContext = new AudioContext({ sampleRate: 16000 });
-        await this.audioContext.audioWorklet.addModule('./AudioCaptureProcessor.js');
-        this.sourceNode =
-            this.audioContext.createMediaStreamSource(this.audioStream);
-        this.processorNode =
-            new AudioWorkletNode(this.audioContext, 'audio-capture-processor');
+        const blob = new Blob([AUDIO_CAPTURE_PROCESSOR_CODE], {
+            type: 'text/javascript',
+        });
+        const blobUrl = URL.createObjectURL(blob);
+        await this.audioContext.audioWorklet.addModule(blobUrl);
+        this.sourceNode = this.audioContext.createMediaStreamSource(this.audioStream);
+        this.processorNode = new AudioWorkletNode(this.audioContext, 'audio-capture-processor');
         this.processorNode.port.onmessage = (event) => {
             if (event.data.type === 'audioData' && this.isAIRunning) {
                 this.sendAudioData(event.data.data);
@@ -82,7 +92,7 @@ class GeminiManager extends xb.Script {
         this.sourceNode.connect(this.processorNode);
         this.processorNode.connect(this.audioContext.destination);
     }
-    async startLiveAI() {
+    async startLiveAI(params, model) {
         return new Promise((resolve, reject) => {
             this.ai.setLiveCallbacks({
                 onopen: () => {
@@ -97,9 +107,9 @@ class GeminiManager extends xb.Script {
                 },
                 onclose: () => {
                     this.isAIRunning = false;
-                }
+                },
             });
-            this.ai.startLiveSession().catch(reject);
+            this.ai.startLiveSession(params, model).catch(reject);
         });
     }
     startScreenshotCapture(intervalMs = 1000) {
@@ -120,9 +130,9 @@ class GeminiManager extends xb.Script {
             });
             if (typeof base64Image == 'string') {
                 // Strip the data URL prefix if present
-                const base64Data = base64Image.startsWith('data:') ?
-                    base64Image.split(',')[1] :
-                    base64Image;
+                const base64Data = base64Image.startsWith('data:')
+                    ? base64Image.split(',')[1]
+                    : base64Image;
                 this.sendVideoFrame(base64Data);
             }
         }
@@ -174,28 +184,40 @@ class GeminiManager extends xb.Script {
                 channelData[i] = int16View[i] / 32768.0;
             }
             this.audioQueue.push(audioBuffer);
-            if (!this.isPlayingAudio) {
-                this.playNextAudioBuffer();
-            }
+            this.scheduleAudioBuffers();
         }
         catch (error) {
             console.error('Error playing audio chunk:', error);
         }
     }
-    playNextAudioBuffer() {
-        if (this.audioQueue.length === 0) {
-            this.isPlayingAudio = false;
-            return;
+    scheduleAudioBuffers() {
+        const SCHEDULE_AHEAD_TIME = 0.2;
+        while (this.audioQueue.length > 0 &&
+            this.nextAudioStartTime <=
+                this.audioContext.currentTime + SCHEDULE_AHEAD_TIME) {
+            const audioBuffer = this.audioQueue.shift();
+            const source = this.audioContext.createBufferSource();
+            source.buffer = audioBuffer;
+            source.connect(this.audioContext.destination);
+            source.onended = () => {
+                source.disconnect();
+                this.queuedSourceNodes.delete(source);
+                this.scheduleAudioBuffers();
+            };
+            const startTime = Math.max(this.nextAudioStartTime, this.audioContext.currentTime);
+            source.start(startTime);
+            this.queuedSourceNodes.add(source);
+            this.nextAudioStartTime = startTime + audioBuffer.duration;
         }
-        this.isPlayingAudio = true;
-        const audioBuffer = this.audioQueue.shift();
-        const source = this.audioContext.createBufferSource();
-        source.buffer = audioBuffer;
-        source.connect(this.audioContext.destination);
-        source.onended = () => {
-            this.playNextAudioBuffer();
-        };
-        source.start();
+    }
+    stopPlayingAudio() {
+        this.audioQueue = [];
+        this.nextAudioStartTime = 0;
+        for (const source of this.queuedSourceNodes) {
+            source.stop();
+            source.disconnect();
+        }
+        this.queuedSourceNodes.clear();
     }
     cleanup() {
         if (this.screenshotInterval) {
@@ -204,7 +226,6 @@ class GeminiManager extends xb.Script {
         }
         // Clear audio queue and stop playback
         this.audioQueue = [];
-        this.isPlayingAudio = false;
         if (this.processorNode) {
             this.processorNode.disconnect();
             this.processorNode = null;
@@ -218,7 +239,7 @@ class GeminiManager extends xb.Script {
             this.audioContext = null;
         }
         if (this.audioStream) {
-            this.audioStream.getTracks().forEach(track => track.stop());
+            this.audioStream.getTracks().forEach((track) => track.stop());
             this.audioStream = null;
         }
     }
@@ -226,6 +247,27 @@ class GeminiManager extends xb.Script {
         if (message.data) {
             this.playAudioChunk(message.data);
         }
+        for (const functionCall of message.toolCall?.functionCalls ?? []) {
+            const tool = this.tools.find((tool) => tool.name == functionCall.name);
+            if (tool) {
+                const exec = tool.execute(functionCall.args);
+                exec
+                    .then((result) => {
+                    this.ai.sendToolResponse({
+                        functionResponses: {
+                            id: functionCall.id,
+                            name: functionCall.name,
+                            response: {
+                                output: result.data,
+                                error: result.error,
+                                ...result.metadata,
+                            },
+                        },
+                    });
+                })
+                    .catch((error) => console.error('Tool error:', error));
+            }
+        }
         if (message.serverContent) {
             if (message.serverContent.inputTranscription) {
                 const text = message.serverContent.inputTranscription.text;
@@ -239,6 +281,10 @@ class GeminiManager extends xb.Script {
                     this.dispatchEvent({ type: 'outputTranscription', message: text });
                 }
             }
+            if (message.serverContent.interrupted) {
+                this.stopPlayingAudio();
+                this.dispatchEvent({ type: 'interrupted' });
+            }
             if (message.serverContent.turnComplete) {
                 this.dispatchEvent({ type: 'turnComplete' });
             }

package/build/addons/objects/SimpleDecalGeometry.js

@@ -24,8 +24,7 @@ class SimpleDecalGeometry extends THREE.BufferGeometry {
         projectorMatrix.makeRotationFromQuaternion(orientation);
         projectorMatrix.setPosition(position);
         projectorMatrix.scale(scale);
-        projectorMatrix
-            .invert(); // Inverts the matrix for projection calculations.
+        projectorMatrix.invert(); // Inverts the matrix for projection calculations.
         // Accesses the vertices, UVs, and indices from the geometry attributes.
         const vertices = this.attributes.position.array;
         const uvs = this.attributes.uv.array;
@@ -46,15 +45,20 @@ class SimpleDecalGeometry extends THREE.BufferGeometry {
             uvs[2 * i] = vector4.x + 0.5;
             uvs[2 * i + 1] = vector4.y + 0.5;
             // Checks if the vertex is within the -0.5 to 0.5 range in all dimensions.
-            vertexBounded[i] = Number(vector4.x >= -0.5 && vector4.x <= 0.5 && vector4.y >= -0.5 &&
-                vector4.y <= 0.5 && vector4.z >= -0.5 && vector4.z <= 0.5);
+            vertexBounded[i] = Number(vector4.x >= -0.5 &&
+                vector4.x <= 0.5 &&
+                vector4.y >= -0.5 &&
+                vector4.y <= 0.5 &&
+                vector4.z >= -0.5 &&
+                vector4.z <= 0.5);
         }
         // Creates a list of indices that correspond to bounded vertices only.
         const goodIndices = [];
         for (let i = 0; i < indices.length / 3; ++i) {
             // Adds the triangle indices if any of its vertices are inside the
             // bounding box.
-            if (vertexBounded[indices[3 * i]] || vertexBounded[indices[3 * i + 1]] ||
+            if (vertexBounded[indices[3 * i]] ||
+                vertexBounded[indices[3 * i + 1]] ||
                 vertexBounded[indices[3 * i + 2]]) {
                 goodIndices.push(indices[3 * i]);
                 goodIndices.push(indices[3 * i + 1]);

package/build/addons/simulator/instructions/CustomInstruction.js

@@ -10,15 +10,14 @@ let CustomInstruction = class CustomInstruction extends SimulatorInstructionsCar
         return html `${this.customInstruction.header}`;
     }
     getImageContents() {
-        return this.customInstruction.videoSrc ? html `
-      <video playsinline autoplay muted loop>
-          <source
-            src=${this.customInstruction.videoSrc}
-            type="video/webm">
-          Your browser does not support the video tag.
-      </video>
-    ` :
-            html ``;
+        return this.customInstruction.videoSrc
+            ? html `
+          <video playsinline autoplay muted loop>
+            <source src=${this.customInstruction.videoSrc} type="video/webm" />
+            Your browser does not support the video tag.
+          </video>
+        `
+            : html ``;
     }
     getDescriptionContents() {
         return html `${this.customInstruction.description}`;

package/build/addons/simulator/instructions/HandsInstructions.js

@@ -11,10 +11,8 @@ let HandsInstructions = class HandsInstructions extends SimulatorInstructionsCar
     getImageContents() {
         return html `
       <video playsinline autoplay muted loop>
-          <source
-            src="${SIMULATOR_HANDS_VIDEO_PATH}"
-            type="video/webm">
-          Your browser does not support the video tag.
+        <source src="${SIMULATOR_HANDS_VIDEO_PATH}" type="video/webm" />
+        Your browser does not support the video tag.
       </video>
     `;
     }
@@ -22,14 +20,23 @@ let HandsInstructions = class HandsInstructions extends SimulatorInstructionsCar
         return html `
       <h2>Hands Mode</h2>
       <p>
-        From Navigation Mode, press <strong>Left Shift</strong> to enter <strong>Hands Mode</strong>.
-        This mode allows for precise manipulation of virtual hands.
+        From Navigation Mode, press <strong>Left Shift</strong> to enter
+        <strong>Hands Mode</strong>. This mode allows for precise manipulation
+        of virtual hands.
       </p>
       <ul>
-          <li><strong>Move Hand:</strong> Use the W, A, S, D keys to move it forward, left, backward, and right.</li>
-          <li><strong>Elevate Hand:</strong> Use the Q (up) and E (down) keys.</li>
-          <li><strong>Switch Active Hand:</strong> Press the T key to toggle between hands.</li>
-          <li><strong>Simulate Pinch:</strong> Press the Spacebar.</li>
+        <li>
+          <strong>Move Hand:</strong> Use the W, A, S, D keys to move it
+          forward, left, backward, and right.
+        </li>
+        <li>
+          <strong>Elevate Hand:</strong> Use the Q (up) and E (down) keys.
+        </li>
+        <li>
+          <strong>Switch Active Hand:</strong> Press the T key to toggle between
+          hands.
+        </li>
+        <li><strong>Simulate Pinch:</strong> Press the Spacebar.</li>
       </ul>
     `;
     }

package/build/addons/simulator/instructions/NavigationInstructions.js

@@ -11,10 +11,8 @@ let NavigationInstructions = class NavigationInstructions extends SimulatorInstr
     getImageContents() {
         return html `
       <video playsinline autoplay muted loop>
-          <source
-            src=${SIMULATOR_NAVIGATION_VIDEO_PATH}
-            type="video/webm">
-          Your browser does not support the video tag.
+        <source src=${SIMULATOR_NAVIGATION_VIDEO_PATH} type="video/webm" />
+        Your browser does not support the video tag.
       </video>
     `;
     }
@@ -22,13 +20,16 @@ let NavigationInstructions = class NavigationInstructions extends SimulatorInstr
         return html `
       <h2>Navigation Mode</h2>
       <p>
-        Press <strong>Left Shift</strong> to toggle Navigation Mode.
-        In this mode, virtual hands appear and the mouse controls the camera view.
+        Press <strong>Left Shift</strong> to toggle Navigation Mode. In this
+        mode, virtual hands appear and the mouse controls the camera view.
       </p>
       <ul>
-          <li><strong>Move Forward/Backward/Sideways:</strong> Use the W, A, S, D keys.</li>
-          <li><strong>Move Up/Down:</strong> Use the Q and E keys.</li>
-          <li><strong>Rotate Camera:</strong> Click and drag the mouse.</li>
+        <li>
+          <strong>Move Forward/Backward/Sideways:</strong> Use the W, A, S, D
+          keys.
+        </li>
+        <li><strong>Move Up/Down:</strong> Use the Q and E keys.</li>
+        <li><strong>Rotate Camera:</strong> Click and drag the mouse.</li>
       </ul>
     `;
     }