
Discover how to build WebXR, VR, and AR experiences in the browser with the Wonderland engine. Set up the editor, assets, and scripts to create games and training apps.
Learn to set up a browser VR scene in the Wonderland editor using a VR template and basic object manipulation. Import assets, test with the WebXR emulator, and publish.
Install Meta Quest developer hub, enable developer mode, connect the headset via USB debugging, run a Wonderland engine app, and test with Chrome debugging and port forwarding to localhost 8080.
Trace the history of WebXR, VR, and AR from early head-mounted displays to modern browser support, and discover how the Wonderland engine enables immersive web experiences.
Explore the Wonderland Editor to configure project settings, view and manage resources (meshes, images, textures, shaders, materials, animations, skins, pipelines), and visualize colliders and physics for VR and AR projects.
discover how the vr player object in the wonderland engine's vr template structures the tracking space, head height, and attached components, including cameras, controllers, cursor, and teleport mechanics.
Learn to set up a mobile AR scene with the Wonderland Engine and the WebEx AR API, including hit test placement, spawning objects, and running the app locally.
Learn to create custom JavaScript components in Wonderland Engine, using vectors, quaternions and matrices to rotate a cube and animate it toward the camera with delta time.
Tumble a cube toward the VR camera using vectors and world-space methods, with a speed setting, then normalize direction and respawn when the block leaves the camera's field of view.
Complete Challenge 1 in Wonderland Engine to track block passes behind the VR camera and update the panel text. Initialize a count and connect a text component to display it.
Attach colliders and a raycast system to VR controllers in WebXR. Update hit and miss feedback and respawn blocks with accompanying sounds.
Move items in a vr scene by raycasting against colliders and using a pickup component to grab objects with left or right controllers and return them on release.
Explore how the Wonderland Engine uses the Nvidia physics engine to simulate rigid bodies, gravity, and collisions, with shapes like box, sphere, and convex mesh.
Explore how canvas UI for Wonderland renders off-screen HTML5 canvas content as textures on panels, enabling text, buttons, images, and a virtual keyboard in VR and mouse interactions.
Control runtime animations in the Wonderland engine by wiring an animation component to the Knight character, switching idle, walk, die, and dance via a UI.
Learn to navigate a virtual factory by moving the player with the camera forward vector, using the move player component and a down raycast against the nav mesh.
Explore how VR training uses a hospital room scenario with a canvas UI-based multiple-choice quiz, loading questions from JSON and providing speech feedback.
Collect a flashlight in a dark dungeon, replace the controller model with the flashlight, and light your way while teleporting using physics-based raycasting.
Turn the controllers into weapons by creating a gun handler, firing bullets that travel from the gun, collide with ghouls, and trigger the ghoul die animation.
Add a shake component to the player to produce camera shake during ghoul attacks, activating after 0.6 seconds and applying a vec3 offset via the GL matrix library in update.
Upload the deploy folder to a live web server via FTP, or use free hosting to publish your project. Continue by exploring publishing on Construct Arcade and creating a PWA.
Learn to create a progressive web app (pwa) that functions like a native app on Quest 2, deploying via manifest configuration and packaging for the Oculus store.
Source 3D assets from free sites and bundles, using filters to find low-polygon models suitable for VR, and edit assets with Blender for Wonderland.
Learn Blender basics for Wonderland assets, deleting the default camera and light, navigating with middle mouse, and creating a simple chair using object and edit modes, knife, and extrude.
Learn Blender texturing: apply a seamless image texture to a chair, create UV maps with unwrap and smart UV project, and adjust UVs to align grain and improve diffuse texture.
Master Blender animation workflows by setting keyframes, previewing, and exporting glTF 2.0, then import into Wonderland and organize idle and walk animations with skin using armature.
Learn how the Wonderland API exposes the engine object with properties, methods, and callbacks to check VR/AR support and render scenes, transform vectors, and manage meshes and textures.
Explore glMatrix techniques for Wonderland components, manipulating positions, rotations, and scales with vec3, dual quaternions, and transform data to build interactive WebXR scenes.
Migrate older projects to the 1.0 Wonderland editor by adopting the MPN NodeJS package manager and Esbuild, and update components with the Wonderland Engine API imports.
Create VR apps with the Wonderland editor, evolving from a VR template to a winter scene, connecting to a headset, using the physics engine, canvas UI, and custom code.
WebXR brings both VR and AR to the browser. The API has the massive forces of Google and Amazon behind it so it looks like immersive experiences, using only a browser, are going to make a huge impact in the near future. Meta are betting the company on its success. WebXR works great with Oculus headsets, including the Oculus Quest 2 and the Chrome Android browser is already supporting the API for both AR, Augmented Reality, and VR, Virtual Reality, experiences. But WebXR only harnesses the sensors on a mobile device and creates an agreed definition of how to use this data. To actually visualise 3D content you need an engine and in this course I show you how easy it is to create WebXR, VR and AR, apps using the Wonderland Engine.
To get the best from the course you will need to be comfortable with JavaScript coding. No other prerequisites are required.
The course is split into 6 sections.
Introduction - you’ll be introduced to the Wonderland Editor, create a simple VR app and a simple AR app and learn how to test your apps on a headset
VR Solutions - teaches you the key features of a VR app; using physics, navigating an environment, adding a UI, picking up items with a controller and using the controller as a weapon.
Deployment - learn how to upload your app to a live web server and discover how easy it is with the Wonderland Editor to create a PWA, a Progressive Web App that can be installed on your Quest 2 headset
Sourcing and editing assets - you’ll learn to source great models online and how to use Blender to prepare them for Wonderland.
Reference shows you how to get information about Wonderland components and how to use the 3D Math library glMatrix.
Conclusion - we review what you’ve learnt.
The only tools you'll need other than the Wonderland Editor are a code editor, in the course I use VSCode, freely available online and Blender for editing 3D assets. The course includes comprehensive resources and code examples. Each code example comes with two versions, one for you to code along with and another that is complete in case you hit a problem.
It’s going to be fun.
You get a 30 day money back guarantee, so you've nothing to lose, discover Wonderland today.
What students say about the course
"I highly recommend this course on WebXR and Wonderland Engine to anyone looking to learn more about this exciting technology. The content is well-organized and easy to follow, making it accessible for both beginners and advanced users. The instructor provides clear and concise explanations, and the examples used throughout the course are both engaging and informative. Furthermore, the additional resources shared within the course are incredibly valuable and greatly enhance the learning experience. Overall, this is a fantastic course and I give it a 5-star rating."
What students said about my Three.JS WebXR course
"This is by far the best guide to Three JS, nothing but fun and clearly explains the parts needed for a 3D app. Thanks Nik for taking the time on this! Can't wait to see where this course takes me!"
"Thanks for creating the course" - Mr Doob, the creator of Three.JS
"We all Nik fans were waiting for this one when he previously announced it in the Facebook group. And he didn't disappoint us."
"Love it so far! The lessons are concise and to the point. The videos' length seems quite optimized, meaning they are not terribly long yet are filled with just enough information about what's going on. The supplied course project files constitute a valuable facilitation on the way through the course."
"It starts with the basics and then progresses to advanced topics. I like the pace and the explanations. Great course!"
"Great course, love the well-chosen examples, just what I needed!"
"Excellent course, it took me by surprise how well documented and the high quality content from Nicholas , highly recommended. Cheers!"