What if you could build an entire AR game in your browser with just 60 lines of code? This live coding session shows you exactly how.
#1about 7 minutes
Exploring AR and VR for enterprise data visualization
Past projects demonstrate using handwriting chatbots and virtual reality to interact with and visualize large enterprise datasets from different angles.
#2about 1 minute
Understanding the core differences between AR and VR
Augmented reality enhances your real-world environment by adding virtual objects, whereas virtual reality completely replaces it with a simulated one.
#3about 3 minutes
The evolution from marker-based to markerless AR
Early augmented reality relied on physical markers like QR codes, but modern markerless AR uses device sensors to dynamically find anchors in the environment.
#4about 3 minutes
The WebXR standard and its browser ecosystem
The WebXR standard unifies web-based AR and VR, with growing support in browsers like Chrome and future adoption expected in Safari.
#5about 3 minutes
Setting up a WebXR project with Three.js
A basic WebXR application is initialized using Three.js to manage the 3D scene, camera, renderer, lighting, and the AR session button.
#6about 3 minutes
Creating and placing 3D objects in an AR scene
Learn to create a 3D object using Three.js geometry and materials, then position and orient it in the real world based on user touch input.
#7about 3 minutes
Animating 3D objects in WebXR using tweening
Use a tweening library to smoothly animate an object's position from a starting point to an end point and remove it from the scene upon completion.
#8about 6 minutes
Implementing collision detection and game logic
Load a 3D model, check for intersections between its bounding box and another object, and trigger game events like explosions and sounds on collision.
#9about 5 minutes
The future of AR hardware and 3D interfaces
The next evolution in AR will be lightweight glasses that replace physical screens with large virtual displays, leading to a future of 3D user interfaces.
#10about 9 minutes
Getting started with WebXR development
The Q&A covers recommended resources like Mozilla's WebXR examples, using TypeScript with Three.js, and simulating AR experiences with a Chrome extension.
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
01:37 MIN
Introducing WebXR for immersive web experiences
WebXR: Enabling Virtual and Augmented Reality on the Web
03:28 MIN
A survey of WebXR development frameworks and tools
WebXR: Enabling Virtual and Augmented Reality on the Web
03:00 MIN
Getting started with your first WebXR project
WebXR: Enabling Virtual and Augmented Reality on the Web
03:35 MIN
Live demo of a cross-platform XR interaction toolkit
Apple Vision Pro: Proven Development Methods Meet the Latest Technology
04:07 MIN
Understanding the technical architecture of the WebXR API
WebXR: Enabling Virtual and Augmented Reality on the Web
04:17 MIN
Showcasing VR experiences built with A-Frame
Virtual Reality – The path to create your world
02:15 MIN
Introduction to XR development lessons and showcase
Apple Vision Pro: Proven Development Methods Meet the Latest Technology
06:38 MIN
Building cross-platform VR experiences with A-Frame
How The Internet of Things Impacts Game Development?Most web designers around the world are increasingly faced with the rapid transition of the gaming industry to the world of the Internet of Things. In recent years, the main engine in the development of the gaming industry are concepts such as virtua...
Luis Minvielle
The Best Upcoming IT WebinarsNow that you already know what IT webinars are and how they can help you level up your professional appeal, you might want actually to get into one. Live tech webinars are one of the best ways to stay on top of the latest trends and tools because eit...
Luis Minvielle
10 Developer Websites in 2023As a web developer, you're always investigating how to level up your skills and streamline your workflow. That's why we've gathered a collection of 10 innovative tools that are guaranteed to boost your productivity, enhance your coding abilities, ele...
Chris Heilmann
Dev Digest 134 - Where pixels sing?News and ArticlesWeAreDevelopers LIVE Data and Security Day is on Wednesday, 25/09/2024. Learn about OPC UA Updates, Best Practices for Using GitHub Secrets, Passwordless Web 1.5, Emerging AI Security Risks, Data Privacy in LLMs and get a chance to t...
From learning to earning
Jobs that call for the skills explored in this talk.