Update some WebVR docs to relate to the more modern WebXR

files/en-us/_redirects.txt

@@ -3511,6 +3511,7 @@
 /en-US/docs/Games/Introduction_to_HTML5_Game_Development_(summary)	/en-US/docs/Games/Introduction_to_HTML5_Game_Development
 /en-US/docs/Games/Introduction_to_HTML5_Game_Gevelopment_(summary)	/en-US/docs/Games/Introduction_to_HTML5_Game_Development
 /en-US/docs/Games/Techniques/3D_collision_detection/Bounding_boxes_with_THREE.js	/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js
+/en-US/docs/Games/Techniques/3D_on_the_web/WebVR	/en-US/docs/Games/Techniques/3D_on_the_web/WebXR
 /en-US/docs/Games/Techniques/Crisp,_pixel_art_look_with_image-rendering	/en-US/docs/Games/Techniques/Crisp_pixel_art_look
 /en-US/docs/Games/Techniques/Efficient_animation_for_web_games	/en-US/docs/Games/Techniques
 /en-US/docs/Games/Techniques/Fridge_Gamepad_API	/en-US/docs/Games/Techniques/Controls_Gamepad_API

files/en-us/_wikihistory.json

@@ -313,7 +313,7 @@
       "PushpitaPikuDey"
     ]
   },
-  "Games/Techniques/3D_on_the_web/WebVR": {
+  "Games/Techniques/3D_on_the_web/WebXR": {
     "modified": "2020-10-30T12:56:29.452Z",
     "contributors": [
       "Wind1808",

files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md

@@ -6,7 +6,7 @@ page-type: guide
 
 {{GamesSidebar}}
 
-The [WebVR](/en-US/docs/Games/Techniques/3D_on_the_web/WebVR) and [WebGL](/en-US/docs/Web/API/WebGL_API) APIs already enable us to start creating virtual reality (VR) experiences inside web browsers, but the community is still waiting for tools and libraries to appear, to make this easier. Mozilla's [A-Frame](https://aframe.io/) framework provides a markup language allowing us to build 3D VR landscapes using a system familiar to web developers, which follows game development coding principles; this is useful for quickly and successfully building prototypes and demos, without having to write a lot of JavaScript or GLSL. This article explains how to get up and running with A-Frame, and how to use it to build up a simple demo.
+The [WebXR](/en-US/docs/Games/Techniques/3D_on_the_web/WebXR) and [WebGL](/en-US/docs/Web/API/WebGL_API) APIs already enable us to start creating virtual reality (VR) and augmented reality (AR) experiences inside web browsers, but the community is still waiting for tools and libraries to appear, to make this easier. Mozilla's [A-Frame](https://aframe.io/) framework provides a markup language allowing us to build 3D VR landscapes using a system familiar to web developers, which follows game development coding principles; this is useful for quickly and successfully building prototypes and demos, without having to write a lot of JavaScript or GLSL. This article explains how to get up and running with A-Frame, and how to use it to build up a simple demo.
 
 ## High level overview
 

files/en-us/games/techniques/3d_on_the_web/index.md

@@ -33,9 +33,9 @@ It's hard to imagine a game without collision detection — we always need to wo
 - [2D collision detection](/en-US/docs/Games/Techniques/2D_collision_detection)
 - [3D collision detection](/en-US/docs/Games/Techniques/3D_collision_detection)
 
-### WebVR
+### WebXR
 
-The concept of virtual reality is not new, but it's storming onto the web thanks to hardware advancements such as the [Oculus Rift](https://www.oculus.com/rift/), and the (currently experimental) [WebVR API](/en-US/docs/Web/API/WebVR_API) for capturing information from VR hardware and making it available for use in JavaScript applications. For more, read [WebVR — Virtual Reality for the Web](/en-US/docs/Games/Techniques/3D_on_the_web/WebVR).
+The concept of virtual reality is not new, but it's storming onto the web thanks to hardware advancements such as the [Meta Quest](https://www.meta.com/quest/), and the (currently experimental) [WebXR API](/en-US/docs/Web/API/WebXR_Device_API) for capturing information from XR hardware and making it available for use in JavaScript applications. For more, read [WebXR — Virtual and Augmented Reality for the Web](/en-US/docs/Games/Techniques/3D_on_the_web/WebXR).
 
 There's also the [Building up a basic demo with A-Frame](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) article showing you how easy it is to build 3D environments for virtual reality using the [A-Frame](https://aframe.io/) framework.
 

files/en-us/games/techniques/3d_on_the_web/webxr/index.md

@@ -0,0 +1,57 @@
+---
+title: WebXR — Virtual and Augmented Reality for the Web
+slug: Games/Techniques/3D_on_the_web/WebXR
+page-type: guide
+---
+
+{{GamesSidebar}}
+
+The concepts of virtual reality (VR) and augmented reality (AR) aren't new, but the technology is more accessible than ever. We can also use a JavaScript API to make use of it in web applications. This article introduces WebXR from the perspective of its use in games.
+
+> **Note:** You may see references to the older WebVR (with a V) API across the Internet. WebVR was replaced by [WebXR Device API](/en-US/docs/Web/API/WebXR_Device_API). WebVR was never ratified as a standard, was implemented and enabled by default in very few browsers, and supported only a small number of devices.
+
+## VR devices
+
+With the popularity of existing VR headsets such as Meta Quest, Valve Index, and PlayStation VR, the future looks bright — we already have sufficient technology to create meaningful VR gaming experiences.
+
+![Three different VR devices: the Meta Quest 3, the Valve Index, and the Sony PSVR2.](hmds.jpg)
+
+### History of the WebVR spec
+
+The [WebVR spec](https://mozvr.github.io/webvr-spec/webvr.html), led by [Vladimir Vukicevic](https://twitter.com/vvuk) from Mozilla and [Brandon Jones](https://twitter.com/tojiro) from Google, is being replaced by the [WebXR Device API](/en-US/docs/Web/API/WebXR_Device_API). WebVR may still be available in some browsers while WebXR is finalized.
+For more info, see the <https://mixedreality.mozilla.org/> and [WebVR.info](https://webvr.info/) websites.
+
+## The WebXR API
+
+The core of any WebXR experience is built on top of two foundational concepts:
+
+1. The application must receive real-time data about your headset's position and your controllers' positions in three-dimensional space
+2. The application must render a real-time, stereoscopic view to the headset's display(s) according to that positional data
+
+The [WebXR API](/en-US/docs/Web/API/WebXR_Device_API) is the central API for capturing information about XR devices connected to a computer. The API can capture headset and controller position, orientation, velocity, acceleration, and other information that you can use in your games.
+
+There are other APIs useful for creating games such as [the Gamepad API](/en-US/docs/Web/API/Gamepad_API) for non-XR controller inputs and the [Device Orientation API](/en-US/docs/Web/API/Device_orientation_events/Detecting_device_orientation) for handling display orientation.
+
+### Using the WebXR API
+
+The best place to start with the WebXR API is with our [Fundamentals of WebXR](/en-US/docs/Web/API/WebXR_Device_API/Fundamentals) guide. After that, see [Starting up and shutting down a WebXR session](/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown).
+
+## Tools and techniques
+
+The first WebVR experiments and demos used Three.js as it's probably the most popular 3D engine for the web. Its popularity continues today, and it can be used for WebXR games. Check out Three.js' [How to create VR content](https://threejs.org/docs/#manual/en/introduction/How-to-create-VR-content) documentation to help you make WebXR games with Three.js.
+
+![A 3D representation of a landscape: it's a pinkish sunset, with a blue mountainous land in the background surrounded by a mirror sea and a darker blue island in the second plan.](sechelt.jpg)
+
+There's also a markup framework called [A-Frame](https://aframe.io/) that offers simple building blocks for WebXR, so you can rapidly build and experiment with VR websites and games: read the [Building up a basic demo with A-Frame](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) tutorial for more details.
+
+Immersion is more important than gameplay or graphics - you have to feel you're "inside" the experience. It's not easy to achieve, but it doesn't require realistic images. Quite the contrary, as having a basic shapes flying around with a high frame rate can make for a compelling experience. Remember: experimenting is key - see what works for your game in particular.
+
+## The future of WebXR
+
+It's happening — consumer devices are on the market right now, and we already have JavaScript APIs to support them on the web. All we need now is a widely-adopted, stable specification, good UX and UI, better hardware, and more tools and libraries — and all of that is on the horizon. It's the perfect time to dive in and experiment with WebXR.
+
+## See also
+
+- [WebVR Device API](/en-US/docs/Web/API/WebXR_Device_API)
+- [Fundamentals of WebXR](/en-US/docs/Web/API/WebXR_Device_API/Fundamentals)
+- [Building up a basic demo with A-Frame](/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)

files/jsondata/GroupData.json

@@ -2309,7 +2309,14 @@
     },
     "WebXR Device API": {
       "overview": ["WebXR Device API"],
-      "guides": ["/docs/Web/API/WebXR_Device_API/Fundamentals"],
+      "guides": [
+        "/docs/Web/API/WebXR_Device_API/Fundamentals",
+        "/docs/Web/API/WebXR_Device_API/Lifecycle",
+        "/docs/Web/API/WebXR_Device_API/Startup_and_shutdown",
+        "/docs/Web/API/WebXR_Device_API/Cameras",
+        "/docs/Web/API/WebXR_Device_API/Geometry",
+        "/docs/Web/API/WebXR_Device_API/Spatial_tracking"
+      ],
       "interfaces": [
         "XRAnchor",
         "XRBoundedReferenceSpace",