WebXR Frameworks - XRCC - 5 different WebXR Frameworks compared based on personal experience

Editor's Notes

• #2: Timmy Kokke AKA Sorskoot Started with A-Frame in 2017, but Web and 3D since 90s Used a lot of engines. Ran WebXRNL -> Due to covid transitioned into WebXR Discord (Monthly meetup) Needed job, known CEO of Wonderland through webxrnl, been doing fulltime WebXR dev, building frameworks and helping clients
• #3: Two small disclaimers. Everything is mostly based on my own experience, things change so rapidly. I mean, last week Unity 6 came out, with some new web features I’ve not been able to try in combination with WebXR. Also, when making the slides I realized I’m mixing the terms frameworks and tools a bit. But then again, a lot of tools have api’s and a lot of frameworks have some tools. With that out of the way. Let’s look at some framworks.
• #4: And there’s a lot. I named a few on this slide. Frameworks, and tools. Interestingly a couple are built on top of others, like Needle for example. That uses custom tooling in Unity to export and run it on the web using their runtime that is built on top of Three.
• #5: Project Scope: Different engines offer varying levels of complexity and customization. Choosing an engine that aligns with your project's needs ensures efficient development and scalability. For larger projects with complex interactions, more robust engines like Three.js or Babylon.js might be suitable. Performance: Engines differ in how they handle rendering and optimize resources. Performance is crucial for seamless VR experiences, especially on mobile devices. For instance, Wonderland Engine focuses on optimized rendering with WebAssembly, which can enhance performance. User Experience: The engine's capabilities directly affect the user’s interaction and immersion. Team: Previous development experience of a team might dictate what would be best to use. Preference: Open Source vs Closed Source Language Code first vs Design First
• #6: Or Tools… Or Engines… Welll. Things t build WebXR apps with…
• #8: 1 Unity has the most complete toolset of tools mentioned today. Light baking Animations Particles 2 Lot of online tutorials, videos ,courses, documentation 3 The Asset Store. Pro-tip -> Use these in other tools too.
• #11: Experience is a bit older for my, so things might have changed in the meantime… You need to rely on exporters other people have made. I used the Babylon.js exporter a lot when it was still around. It could be a bit tricky to set up (specially the Quest), but when everything is working you can test on your device
• #13: Utilizes WebAssembly to achieve near-native performance, making it suitable for complex 3D applications. Build for web3D with VR in mind from the start. Offers optimized rendering capabilities, which can enhance the visual quality and performance of your WebXR applications. Provides a user-friendly offline interface and a JavaScript/TypeScript API for implementing interaction code, making it accessible for developers. Build times are very low. Sometimes it’s even too much ‘work’ to take off a headset like the HoloLens. Easy Click deployment to
• #14: 1) Compared to more established engines like Three.js or Babylon.js, Wonderland Engine has a smaller community, which might mean fewer resources and community support. 2) While it is user-friendly, there may still be a learning curve for developers new to WebXR or 3D development. 3) While well documented, the core API code is closed source. A lot of the default components and libraries are open souce.
• #18: Most popular 3D framework Flexibility: Highly flexible and allows for detailed customization of 3D scenes. Large Community: Extensive community support and a wealth of examples and tutorials.
• #19: Steep Learning Curve: Can be challenging for beginners due to its low-level nature. No Built-in Physics Engine: Requires additional libraries for physics simulations. Manual Optimization: Developers need to manually optimize for performance, especially for mobile VR.
• #21: Ease of Use: A-Frame uses HTML-like syntax, making it accessible for developers familiar with web development. Active Community: It has a strong community and extensive documentation, which can be very helpful for troubleshooting and learning. Quick Prototyping: Ideal for rapid prototyping and creating simple VR experiences.
• #22: 1) Need to fall back to ThreeJS and build a lot of custom things. 2) For quick prototyping and smaller apps it’s great. When things get bigger you need to start diving deeper to optimize. 3) A-Frame is around for quite some time, and 3rd party components are often outdated.
• #26: High Performance: Optimized for high-performance 3D applications and games. Collaborative Development: Supports collaborative development with real-time editing. Browser based Visual Editor.
• #27: Limited Offline Support: Primarily a cloud-based platform, which can be a limitation for offline development. Subscription Costs: Advanced features and larger projects require a subscription. Online code editor, VSCode only through extension Learning Curve: While easier than some, it still has a learning curve for those new to 3D development.
• #28: Used in a lot of jams When I was working with it, you need to work with their online Editor. There’s an
• #29: Used in js13k and vrjam on Itch.io. I was lucky to get a personal account for a while because of this. When I was working with it, you need to work with their online Editor. There’s an extension for VSCode now, but I’ve not tried that.
• #31: Comprehensive set of features, including a playground for testing and prototyping. User-friendly with good documentation and examples. Including a nice online playground to prototype and a node-based material editor Strong support for WebXR. With online a few extra lines you add a VR experience to your project. They also have a Native ability using React Native to build native apps for iOS, Android, Quest and more.
• #32: Complexity: Can be complex for beginners due to its extensive feature set Requires good coding knowledge. No easy way to set up a game with state management and such. They ended their Unity exporter that I used a lot in the past.
• #35: Where to find me + WebXR discord I’ll be around if you want to know more about WebXR, or Wonderland Engine 