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.
The most important files and file extensions to know are listed below:
|Main HTML page of the spatial web app.
|Contains TypeScript code, which is converted to .js before publishing the spatial web app.
|WebAssembly (which is compiled from languages like C++ or Rust).
|3D model file format that may even embed textures.
|Text based 3D model file format.
|Usually referenced by a .gltf and contains binary 3D model data.
|A simpler, text-based model file format.
|A material file, usually referenced by a .obj file.
|Arbitrary data used by the application.
|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).
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.
You can also often use asset packs from Unity or Unreal Engine.
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.
If 3D modelling is not for you, you might find a 3D artist to hire on ArtStation.
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.
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.
The app might interact with online services for accounts, storing individual information, querying large database, streaming media and much more.