-
Notifications
You must be signed in to change notification settings - Fork 22.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update some WebVR docs to relate to the more modern WebXR #30721
Merged
Merged
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
e1eebad
Update some WebVR docs to relate to the more modern WebXR
zfox23 7c21e95
Merge branch 'main' into webVRtoXR
bsmth d4408d2
Update files/en-us/games/techniques/3d_on_the_web/webxr/index.md
zfox23 f536a54
Update files/en-us/games/techniques/3d_on_the_web/webxr/index.md
zfox23 b7586af
Update files/en-us/games/techniques/3d_on_the_web/webxr/index.md
zfox23 cb27ef9
Update files/en-us/games/techniques/3d_on_the_web/webxr/index.md
zfox23 7ad4bbf
Update files/en-us/games/techniques/3d_on_the_web/webxr/index.md
zfox23 4d4991b
Reorder
zfox23 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
113 changes: 0 additions & 113 deletions
113
files/en-us/games/techniques/3d_on_the_web/webvr/index.md
This file was deleted.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 non-standard WebVR API. WebVR was never ratified as a standard, was implemented and enabled by default in very few browsers, and supported only a few devices. The **WebVR** API is replaced by the [**WebXR** Device API](/en-US/docs/Web/API/WebXR_Device_API). | ||
|
||
## 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) | ||
|
||
### Development of WebVR | ||
|
||
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 | ||
|
||
Three.js is one of the most popular 3D engines for the web, 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. | ||
zfox23 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## 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. | ||
zfox23 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## 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) |
File renamed without changes
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you think this is a better resource than Three.js, we could list it first as people might assume we're ordering by importance. What do you reckon?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
great suggestion! i think it's a good idea to put the A-Frame resource first, even if A-Frame is less popular than threejs:
in terms of "importance" - i don't have a strong opinion about which resource is more "important," or what that would even mean 🤔 and because of the above reasons, i don't want to think about "importance" right now 😅. lemme make this swap, please hold...