Let's Expand the Reality!

Rate this content
Bookmark

How long have we been watching movies about reality and how exciting it looks! You may not have noticed, but virtual reality is already in our lives, even in our browsers. There are more and more ways to apply these technologies. Let's take a look at VR and AR and see how they look in real life.

This talk has been presented at JSNation Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

The main difference between AR and VR is that AR overlays digital objects onto the real world through transparent glasses or a smartphone camera, allowing you to see both real and virtual elements simultaneously. VR, on the other hand, immerses you completely in a digital environment, typically using a headset that blocks out the real world.

The six degrees of freedom in virtual reality refer to the ability to move forward and backward, left and right, up and down, as well as the ability to rotate around three perpendicular axes (pitch, yaw, and roll), allowing full 3D movement and rotation within a virtual environment.

WebXR is a standard for accessing virtual and augmented reality capabilities in web applications. It allows developers to create immersive experiences directly in the browser without requiring native apps. WebXR is supported by most modern browsers, using plugins for emulation and testing, and integrates with WebGL for rendering 3D scenes.

The WebXR device emulation plugin allows developers to simulate VR and AR experiences in browsers, helping them test and debug their applications without needing physical VR or AR hardware. This makes it easier to develop and refine immersive experiences directly from their coding environment.

Yes, augmented reality can be used in education to enhance learning by allowing students to interact with 3D models and simulations overlaid onto their real-world environment. This can make abstract concepts more tangible and engaging, and can be used to explore objects and phenomena that are too large, small, or dangerous to experience directly.

With virtual reality, you can create a wide range of immersive experiences, from exploring virtual worlds and interactive games to educational simulations and virtual tours. VR allows users to interact with virtual objects and environments in a way that feels real, enhancing both entertainment and educational applications.

To start developing with WebXR, you need a basic understanding of 3D and WebGL technologies, as these are fundamental for creating scenes and rendering graphics in VR and AR. Additionally, checking for browser support and using a framework can simplify the development process, especially for beginners.

Vasilika Klimova
Vasilika Klimova
12 min
11 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

I work as a front-end developer with experience in 3D tasks using WebGL and 3DS framework. Let's explore virtual reality and WebXR, which allows full immersion in a digital environment. In VR, we can explore virtual worlds, move and rotate within them, interact with objects, and even use VR for education. AR, augmented reality, is different from VR as it allows you to see the real world while also overlaying virtual objects. XR reality encompasses both VR and AR, and it's already a standard with good browser support.
Available in Español: ¡Expandamos la Realidad!

1. Introduction to Virtual Reality and WebXR

Short description:

I work as a front-end developer with experience in 3D tasks using WebGL and 3DS framework. I also organize an online skill-up school in Luxembourg, teaching web basics. Let's explore virtual reality and WebXR, which allows full immersion in a digital environment. In WebXR and WebGL, you have three dimensions and six degrees of freedom, enabling movements and rotations along each axis.

I work as a front-end developer, but actually, at school, I dreamed of becoming a game developer. And I got a job in an Artec company where I had different interesting 3D tasks with WebGL and 3DS framework.

And the last two years I organized a skill-up school in Luxembourg and I teach people web basics here. And it's also an online school. So virtual reality. We talk today about this. And how long have we heard about these words? I think it's quite a long time. And the first movie which I found, it was in 1982, it was with very funny computer graphics 3D effects. And now it's much more interesting. So let's see what we have now in browsers and let's meet with WebXR.

Virtual reality. How to understand what it is. It's when you wear some glasses for example, or use your phone with Google Cardboard, special place where you can put your phone, and you have absolutely full immersion in digital environment, you're in virtual world with your eyes and see only virtual world. In all 3D and in WebXR and WebGL, you have three axis, three dimensions and you have six degrees of freedom. What does it mean? It means that you have firstly, movements along the each axis. Three axis, three movements forward and backward, and then you have ability to rotate around each of axis. We have three plus three, it means six degrees of freedom.

2. Virtual Reality and WebXR

Short description:

If we want to use WebGL scenes with VR, we need to make small adjustments to the camera position. The Mozilla plug-in for WebXR emulation is useful for development. In VR, we can explore virtual worlds, move and rotate within them, interact with objects, and even use VR for education.

If we want to see how the example scene of VR, look at the scene. Firstly, it was one like WebGL scene, but if we want to use it with VR, we need to have the same scene, but with small difference in position of camera.

So, VR camera, we'll look at the scene, but for each eye, it should be small difference in position. So, in the bottom of this slide, you see the special Mozilla plug-in for emulation of WebXR devices. It could be quite useful for development.

So, what we can do in VR, let's summarize. We can see only virtual world. We can move around in this virtual world. We can rotate in this virtual world. We see different objects, and we can interact with all these virtual objects.

Also, an education system. We use it with different educations, it could be like a cinema where you interact with all this stuff with your hands. Look at this guy, he has devices in his arms and he can do something with this tool. So, there are quite a lot of different videos with this education, and it's like a game to educate.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Exploring AR Try-On with React Native
React Summit 2022React Summit 2022
20 min
Exploring AR Try-On with React Native
This Talk discusses exploring AR Tryon with React Native, implementing AR try-on experiences in e-commerce apps, and considerations for AR development. It also covers the integration of AR platforms like ARKit and ARCore with React Native using the Duvero bridge. The Talk highlights the use of off-the-shelf solutions like Wanna's SDK for virtual try-on and Snap's AR technology and shopping extension. The importance of creating 3D models for AR Try-On and the challenges of writing native code for AR development are also mentioned.
Gaming the System: How Video Games Can Help us Create More Effective Virtual Teams
DevOps.js Conf 2022DevOps.js Conf 2022
7 min
Gaming the System: How Video Games Can Help us Create More Effective Virtual Teams
Today's Talk explores the lessons that video games can teach us about building virtual teams. The impact of communication on software development is discussed, highlighting the importance of understanding software for successful deployment. The concept of collective intelligence is introduced, emphasizing the role of social perceptiveness, cognitive diversity, and equal distribution of communication. The Talk also emphasizes the need to optimize team performance with key metrics and suggests keeping teams small and cross-functional to enable easy communication and lower cognitive loads.
Virtual Reality with React
React Summit Remote Edition 2020React Summit Remote Edition 2020
8 min
Virtual Reality with React
The Talk provides an introduction to React 360, a JavaScript framework created by Facebook for building 3D and VR user interfaces on top of React. It simplifies the creation of complex UI and leverages the familiar concepts and tools of React and React Native. The folder structure includes a static assets folder for media files, a client.js file for creating locations and surfaces, and an index file as the main file. The code structure is similar to React Native and React, using Flexbox for styling. The application can be run on a web browser or any VR device, and includes features like slides, video layer, and customizable background image.
Create Collaborative VR Environment in the Browser with React and GraphQL
React Summit 2020React Summit 2020
26 min
Create Collaborative VR Environment in the Browser with React and GraphQL
This Talk explores creating VR experiences with A-Frame and React 360, using coordinate systems and rendering different surfaces. It also discusses bringing data into VR with GraphQL and architecting collaborative systems with Hasura. The Talk demonstrates how to add VR and A-Frame to React 360, and concludes with a focus on rendering and wrapping components. Overall, the Talk encourages exploration and experimentation in VR and AR development.