Photo by Johannes Plenio on UnsplashBut why though? My colleague has recently written a brilliant post that introduces the Web Audio API highlighting the great features developers can tap into, which got us thinking… what would happen if we couple the Hand Input Module from the WebXR Device API with the Web Audio API to further enrich immersive experiences? I narrowed down the several ideas we had to a drumming kit or a piano, and eventually an Augmented Reality Piano seemed like a cool challenge. A piano would make good use of the joint information coming from the Hand Input Module ..read more

Designing User Interactions in XR — Do We Need “Natural” Hand Interactions? Photo by Ksenia Makagonova on Unsplash Human Computer Interaction (HCI) research has long been focused on developing interaction paradigms that describe how humans interact with technology — taking into account physical, virtual, perceptual and cognitive aspects of interaction. Over time, these paradigms have evolved in response to significant technological advances in computing, refining how users engage with digital systems. In the realm of XR where user interaction is a core part of immersive experiences ..read more

An astronaut toy above a javascript book. Hey devs! ?‍??‍? Let’s talk about JavaScript and the magic it keeps bringing to our keyboards. Despite being nearly three decades old, JavaScript continues to evolve, delivering tools that make our code cleaner, more expressive, and less prone to errors. Today, we’ll explore some of these modern features, starting with nullish coalescing and then diving into logical assignment operators, numeric separators, and more. So, grab a coffee ☕, and let’s dig into these gems that can transform the way you code! 1. Nullish Coalescing (??) The nullish ..read more

Photo by Marcela Laskoski on Unsplash Hello web developers! Welcome to another chapter of “Cool stuff that you didn’t know that you can do with the web”. In this post, we’re diving deep into the Web Audio API — a game-changing tool that lets you manipulate sound directly in the browser. But we’re not stopping there. We’ll also start exploring how you can integrate the Web Audio API into immersive experiences like WebXR, turning your web apps into interactive soundscapes. ? What is Web Audio API? The Web Audio API is a high-level JavaScript API that allows developers to control, manip ..read more

Photo by Markus Spiske on UnsplashXAUR? What XAUR? For XR developers, creating immersive experiences that captivate and retain a broad range of users is key. But one often overlooked aspect of achieving this is ensuring accessibility — making sure your experience is usable for all, including people with specific needs and a range of disabilities. This is where the XR Accessibility User Requirements — or “XAUR” — document, created by W3C’s Accessible Platform Architectures (APA) Working Group, plays a crucial role. XAUR describes the needs of people with disabilities in virtual o ..read more

Photo by Adrien King on Unsplash Welcome back! In this three-part blog series, I walk through how to make use of the Hand Input Module in your WebXR experiences and share my development experience in going from the API’s explainer to a functioning demo in A-Frame. The series will cover the following in 3 separate posts: Part 1: how to access the API and draw hand skeletons Part 2: how to add simple interaction Part 3: how to perform simple gesture detection (we are here) The grand series finale — gesture detection In the previous two blog post in this series, I walked through ..read more

Today, I invite you to learn more about the Web Speech API, an API that allows you to make up powered up voice-enabled web applications. We will dive into speech recognition and synthesis, and embark on it creating a simple demo. Photo of a child singing by Jason Rosewell on UnsplashUnveiling the Web Speech API: Your Key to Voice Interaction Imagine browsing the web and interacting with it through voice commands instead of typing. This is the power of the Web Speech API. It allows developers to add both speech recognition (listening to what you say) and speech synthesis (speaking bac ..read more

Photo by Bermix Studio on Unsplash Welcome back! In this three-part blog series, I walk through how to make use of the Hand Input Module in your WebXR experiences and share my development experience in going from the API’s explainer to a functioning demo in A-Frame. The series will cover the following in 3 separate posts: Part 1: how to access the API and draw hand skeletons Part 2: how to add simple interaction (we are here) Part 3: how to perform simple gesture detection Would you like some interaction with those hands? In the first blog post in this series, I walked th ..read more

Photo by Vitaly Gariev on Unsplash User interaction is an integral part of any XR (or WebXR) experience: it brings to life the true value of XR in expanding and improving our perception of reality. When it comes to interacting with virtual content we are mostly accustomed to controllers as a prominent choice for interaction. However, continued advances in immersive technologies open up new opportunities for natural and intuitive user interactions. Where we are now able to interact with virtual content naturally using gaze, speech or hands. By closely mirroring real-life actions, these alt ..read more

Photo by Nick Fewings on Unsplash WebXR developers are constantly pushing boundaries of what’s possible in the immersive web, not only through crafting experiences that are captivating in terms of visuals and interactions, but also inclusive and accessible to a wider range of users. Presentation of text is a big part of immersive experiences over the web, however text directionality that is not Left-to-Right (LTR) is often not supported and in many cases problematic. This leads to wrong (and in many cases confusing) presentation of Right-to-Left (RTL) text and information to end users. In ..read more