Live Demo on Render.com
This project demonstrates the use of the WebXR Layer API in an interactive Three.js scene. The demo showcases how to render high-quality stereo images using compressed GPU textures, targeting Meta hardware but with potential for cross-device compatibility using the Basis Universal intermediate file format. If interested this is the main repo I have been using to experiment with the WebXR Layers API.
- WebXR Layer API: Utilizes the WebXR Layer API to render high-quality stereo images.
- Three.js Integration: Leverages Three.js for 3D rendering and scene management.
- Interactive Elements: Includes interactive elements using the
InteractiveGroupfrom Three.js. - Compressed GPU Textures: Demonstrates the use of compressed GPU textures for efficient rendering.
- Polyfill Support: Includes a polyfill for broader WebXR support.
- Node.js (v14 or higher)
- npm (v6 or higher)
-
Clone the repository:
git clone https://github.com/AryehMischel/WebXRLayersDemo cd WebXRLayersDemo -
Install dependencies:
npm install
-
Build the project:
npm run build
-
Start the development server:
npm start
-
Open your browser and navigate to
http://localhost:3000to view the demo.
server.js: Entry point for the application.public/app.js: Main application logic, including scene setup and WebXR layer management.public/index.html: Main HTML file for the demo.bundled file can be found on the build branch
- WebXR Layers: The demo uses "WebXR__Layer" classes for managing and interacting with the underlying Composite Layers supplied by the WebXR API. In this demo we are just using the "WebXRQuadUILayer" and the "WebXRCubeLayerASTC", but there are classes for all layer types.
- Three.js Scene: The scene is set up with various Three.js components, including a camera, XR Controllers, raycasting, OrbitControls, lights, and other interactive elements.
- Polyfill: A polyfill is included to ensure broader compatibility with devices that support WebXR.
Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.
This project is licensed under the ISC License.