WebXR Development
Parts of Spatial Web Apps
XR/spatial applications are a collection of files that are usually served through a web server. A web browser can interpret these files and run the web app.
Common Files
The most important files and file extensions to know are listed below:
| Extension | Description |
|---|---|
| index.html | Main HTML page of the spatial web app. |
| .js | Contains JavaScript code. |
| .ts | Contains TypeScript code, which is converted to .js before publishing the spatial web app. |
| .wasm | WebAssembly (which is compiled from languages like C++ or Rust). |
| .glb | 3D model file format that may even embed textures. |
| .gltf | Text based 3D model file format. |
| .bin | Usually referenced by a .gltf and contains binary 3D model data. |
| .obj | A simpler, text-based model file format. |
| .mtl | A material file, usually referenced by a .obj file. |
| .json | Arbitrary data used by the application. |
| .css | A “Cascading Style Sheet”, which is used to tweak the appearance of HTML elements. |
Additionally, a spatial web app will use audio files (.mp3, .wav, .ogg, …), image files (.webp, .png, .jpg) and sometimes even video files (.webm, .mp4, .mov).
3D Models
VR and AR apps can be anything from fully immersive environments to simple floating UI panels. In most cases, at least a few 3D models (also called “assets” when used in your app) will be needed.
Platforms
Many free and paid assets can be found on platforms like Sketchfab, TurboSquid and itch.io.
There are some totally free sources for 3D models like Quaternius, Kenney.nl and Poly Haven.
You can also often use asset packs from Unity or Unreal Engine.
3D Scanning
The process of converting photos of real world objects to 3D models is called “Photogrammetry”, or 3D scanning.
Apps like RealityScan for your smartphone or software like Reality Capture can help you bring real world models into your spatial web apps.
Creating
Manually creating 3D models can be a time consuming task. 3D modelers use software like Blender or Maya to craft 3D models custom for your need.
If 3D modelling is not for you, you might find a 3D artist to hire on ArtStation.
Optimization
All assets of a spatial web app are transmitted over the internet. This can impact loading times, which makes it important that the assets are compressed and optimized.
Code
Code for spatial web apps can be written in TypeScript, JavaScript, C++, Rust and many other languages. JavaScript is executed directly, while languages like C++ are compiled to WebAssembly.
The code has many responsibilities in a spatial web app:
- Rendering: Creating the images that are shown on the smartphone or VR device. Computer graphics is a complex field of computer science. To manage it, WebXR developers use rendering frameworks to take care of common tasks for them.
- Loading Assets: Loading any 3D models, textures, audio, videos and other data when it is needed. Frameworks will usually provide functionality to read data from different 3D file formats, and on the web, the browser can take care of loading images and audio file formats for you.
- User Interaction: Reacting to user input, giving feedback and applying actions as response to the user’s actions.
- App Logic: The computations, processing and data interactions the app is meant to do, from querying databases to generating data.
Libraries, frameworks and 3D engines like Wonderland Engine help with all of these tasks and provide commonly used functionality to empower spatial web developers to build their apps more efficiently.
Web Services
The app might interact with online services for accounts, storing individual information, querying large database, streaming media and much more.