WebXR, AR Course

In this video, you’ll set up your WebXR project from scratch using Vite as your module bundler—fast, lightweight, and hassle-free. You’ll also install Babylon.js, a powerful yet easy-to-use 3D engine. This combination gives you a simple and efficient setup to kickstart your journey into building robust, high-performance WebXR experiences.

Learn how to set up and manage your projects on GitHub, including version control.

Get hands-on experience by creating your first Babylon.js scene. Learn how to set up a basic 3D environment, add objects, and navigate through your world—laying the foundation for more complex WebXR projects!

Discover the fundamentals of Augmented Reality (AR) in WebXR. Learn how to blend digital content with the real world, detect surfaces, and position 3D models seamlessly in your environment—unlocking endless creative possibilities!

In this section, you’ll learn how to debug your WebXR projects on a mobile browser while monitoring logs on your desktop using chrome://inspect/#devices. Let’s break it down step by step.

Step 1: Enable USB Debugging on Your Mobile Device

For Android:

Go to Settings > About Phone.

Tap Build Number 7 times to unlock Developer Options.

Then, go to Settings > Developer Options and Enable USB Debugging.

Step 2: Connect Your Device to Your Laptop via USB

Use a USB cable to connect your phone to your laptop.

Grant USB debugging permissions on your phone if prompted.

Step 3: Open Chrome and Go to chrome://inspect

Open Google Chrome on your desktop.

In the address bar, navigate to: chrome://inspect/#devices 

Step 4: Set Up Port Forwarding in chrome://inspect

In the Remote Devices panel, scroll down to the Port Forwarding section.

Click "Add" to specify port forwarding:

Left Side: Enter the port you want your vite server will connect. ex// on your mobile browser: localhost: (1234) only state the port number

Right Side: Enter the port where your vite server is running. normally when we npm run dev it run on localhost:5173

This setup bridges your Vite server’s console output to your desktop's Chrome Developer Tools.

Step 5: Open Your Browser on Your Mobile Device

Open your browser (e.g., Chrome) on your phone and navigate to your WebXR project URL.

Ensure the project is running and interacting as expected...

Step 6: Inspect and Debug

In chrome://inspect, find your mobile tab and click "Inspect".

You'll now have access to:

Console logs

Network activity

DOM inspection

This enables you to view console.log messages, diagnose issues, and debug your WebXR projects efficiently across mobile and desktop.

Learn how to use the WebXR Hit Test feature in WebXR to place 3D objects accurately in the real world. You’ll explore how to detect surfaces and align virtual content seamlessly with real-world environments, creating more realistic and interactive AR experiences

Discover how to use WebXR Anchors in Babylon.js to place and maintain 3D objects in specific real-world locations. Learn how to create persistent, stable anchors that stay in place across sessions, ensuring a consistent and immersive AR experience.

Learn how to attach and align 3D models to WebXR Anchors, ensuring they stay securely positioned in your real-world environment. You'll explore techniques to maintain proper placement, scale, and orientation, creating a stable and immersive AR experience

When you set up Port Forwarding in chrome://inspect, here’s what happens behind the scenes:

1. Vite Server Binding:
   Your Vite development server runs locally on your computer (e.g., on port 5173).

2. Device Connection:
   Your mobile device connects to your laptop via USB and enables USB debugging.

3. Port Mapping:
   In Port Forwarding, you map a port on your local machine (e.g., port 5173) to the mobile device’s local debugging interface. This mapping creates a tunnel between your Vite server and your mobile browser.

4. Data Bridging:
   Once the port forwarding is set up, any console logs, network requests, DOM changes, and errors generated in your mobile browser are sent through this tunnel back to your desktop browser’s Developer Tools.

5. Real-Time Inspection:
   Chrome Developer Tools then displays these logs and interactions in real-time, allowing you to debug your project on your desktop while monitoring everything happening on your mobile device.

In short, port forwarding acts as a bridge, ensuring your local development environment and mobile device communicate seamlessly, giving you full visibility into your project’s console and interactions.

Learn how to bring life to your 3D models by animating them—whether it’s making a character walk, creating dynamic movements, or adding smooth transitions. You’ll explore key techniques to control animations, blend actions, and create seamless interactions, enhancing the realism and engagement of your XR experiences.

Discover how to implement WebXR Hand Tracking to create intuitive and immersive interactions in your AR/VR scene. Learn how to detect and respond to hand gestures, allowing users to interact naturally with 3D content—grabbing, rotating, and manipulating objects with real-world hand movements.

Learn how to create a realistic Fire Particle System to add dynamic, fiery effects to your AR/VR experiences. You’ll explore how to simulate fire, control particle behavior, and adjust parameters like size, speed, and color to create mesmerizing, interactive fire effects that enhance the immersive experience.

Learn how to integrate and attach dynamic Particle Systems to your WebXR hands, creating interactive effects like sparks, fire, or smoke. You’ll explore how to trigger these effects based on hand gestures and interactions, adding stunning visual feedback and a new level of realism to your immersive AR/VR experiences.