Skip to main content
Disciplines
Automotive Business IT + Informatics Construction + Real Estate Electrical Engineering + Electronics Energy + Sustainability Insurance + Risk Finance + Banking Management + Leadership Marketing + Sales Mechanical Engineering + Materials
Events
DE
EN
Books
Journals
Topic Page
Marketing
Start single access now
Access for companies
EXTENDED SEARCH
Log in
Top

2021 | Book

Getting Started Read chapter Read first chapter

AR and VR Using the WebXR API

Learn to Create Immersive Content with WebGL, Three.js, and A-Frame

Author: Rakesh Baruah

Publisher: Apress

Part of: Springer Professional "Wirtschaft+Technik" , Springer Professional "Technik" , Springer Professional "Wirtschaft"

Login to get access
insite
SEARCH

About this book

Gain an in-depth knowledge in immersive web development to create augmented reality (AR) and virtual reality (VR) applications inside web browsers using WebXR API, WebGL, Three.js, and A-Frame. This project-based book will provide the practice and portfolio content to make the most of what the futures of spatial computing and immersive technology have to offer.

Beginning with technical analysis of how web browsers function, the book covers programming languages such as WebGL, JavaScript, and HTML, with an eye on a complete understanding of the WebXR lifecycle. You'll then explore how contemporary web browsers work at the code level and see how to set up a local development server and use it with the Visual Studio Code IDE to create 3D animation in the WebGL programming language.

With a familiarity of the web-rendering pipeline in place, you’ll venture on to WebGL abstractions such as the Three.js JavaScript library and Mozilla’s A-Frame XR Framework, which use WebXR to create high-end visual effects. In the final projects of the book, you’ll create an augmented reality web session for an Android phone device, and create a VR scene in A-Frame (built on Three.js) to demo essential components of the WebXR API pertaining to user positioning and interaction.

Game engines have become common-place for the creation of mixed reality content. However, developers not interested in learning entirely new workflows may be better suited to work within a medium almost universally open to all—the web; AR and VR Using the WebXR API will show you the way.

What You'll Learn

Master the creation of virtual reality and augmented reality features for web pagePrepare to work as an immersive web developer with a portfolio of projects in sought-after technologiesReview the fundamentals of writing shaders in WebGLExperience the unity between client, server, and cloud architecture as it applies to location-based ARWho This Book Is For

Aspiring immersive web developers and developers already familiar with the fundamentals of web development who want to further explore topics such as spatial computing, computer vision, spatial anchors, and cloud-computing for multi-user social experiences.

Table of Contents

Frontmatter
Chapter 1. Getting Started
Abstract
WebXR is not a programming language; it’s not even a library of code we can access to create our apps. WebXR is a specification developed by the World Wide Web Consortium, WC3, a nonprofit group of industry experts who collaborate to create standard protocols across the Web. The W3C has left the implementation of the WebXR guidelines to the developers of browsers. WebXR, therefore, is nothing more than a set of rules agreed upon by industry.
Rakesh Baruah
Chapter 2. Up and Running with WebGL
Abstract
In the previous chapter we learned that WebGL is a low-level 2D and 3D graphics API implementing the Kronos Group specification for OpenGL ES in the web browser. The “ES” in OpenGL ES abbreviates the term “embedded systems.” By design, WebGL is optimized for devices such as phones and mobile headsets. The WebGL API enables developers to write JavaScript code with GLSL, the language used by OpenGL to run on graphics processors, to facilitate communication between a web browser and a GPU.
Rakesh Baruah
Chapter 3. Toward the Third Dimension in WebGL
Abstract
We completed the previous chapter with a red rectangle painted into the window of a web browser. The process to make the rectangle included the following steps: setting up data inside a vertex and fragment shader; storing the information in buffers; and commanding the WebGL application to execute its drawing instructions. If these steps make up the state and behavior of a WebGL program that rasterizes 2D content, and every WebGL program is a machine that operates on state, then how can we use what we have already created to add a third dimension to our scene?
Rakesh Baruah
Chapter 4. Matrices, Transformations, and Perspective in WebGL
Abstract
Until now in our journey along the WebGL pipeline, we have conveniently avoided any talk of linear algebra. While the subject used to give my heart palpitations too, I’ve learned over time that programming 3D graphics provides a helpful, visual tool for the understanding of what linear algebra is. In short, linear algebra is the manipulation of coordinate space in ways that: 1) keep the xyz origin at (0, 0, 0); and 2) keep parallel lines parallel. Of course there are many more complicated applications of linear algebra such as in neural networks and quantum physics. However, I have found for an intuitive understanding of the role linear algebra plays in 3D computer graphics, the two fundamental features I’ve presented suffice. By maintaining the location of the origin in three dimensions and the parallel nature of parallel lines, linear algebra helps XR developers compute transformations of shapes in context and without unintended distortion. Linear algebra maps the three dimensions of our world onto the two dimensions of our screens, and in concert with graphics hardware it does so ridiculously fast.
Rakesh Baruah
Chapter 5. Diving into Three.js
Abstract
Until now, we’ve focused heavily on the intricacies of rendering polygons with WebGL. In this chapter, we leave WebGL and its complex syntax of buffers and attributes and uniforms behind. In its place we will use an open source 3D graphics library written in JavaScript called Three.js.
Rakesh Baruah
Chapter 6. Entering VR Through WebXR
Abstract
In the previous chapter we delved into the 3D JavaScript library built atop the WebGL API called Three.js. By building a scene with geometric primitives and textures, we saw the ease Three.js provides to WebXR developers; gone were the bare-bones data structures of attribute buffers and vertex arrays. However, while Three.js offers a convenient, high-level abstraction of WebGL functionality, it is still, at its core, no more than a rendering tool for the browser. While Three.js may help a developer paint a three-dimensional scene to a web browser’s HTML canvas element, it cannot, alone, pass that scene to a peripheral device such as a virtual reality headset. In this chapter we will use the Three.js scene we built in Exercise 4 of the previous lesson to launch an immersive WebXR session on an Oculus Quest VR headset. By the end of this chapter and its exercise, you will have an understanding of how the capabilities provided by the WebXR API cooperate with the rendering functionality built into Three.js.
Rakesh Baruah
Chapter 7. Creating an Augmented Reality Website with Three.js and the WebXR API
Abstract
We concluded the previous exercise by launching a virtual reality scene in an Oculus Quest through the browser. While the exercise accomplished its modest aims—to broadcast a Three.js scene from the browser to an XR device—it didn’t offer much in terms of interactivity between a user and their scene. In this chapter we will begin to explore the role spatial tracking plays in the WebXR API. By providing convenient abstractions for complex matrix multiplication, the WebXR API and its affiliated spatial-tracking modules allow XR developers to create immersive experiences that make the most of the mobility so integral to the essence of the Web.
Rakesh Baruah
Chapter 8. Building VR for the Web with A-Frame
Abstract
In this chapter we will return to creating a virtual reality experience through the WebXR API. Though we used the Three.js library and the WebXR API to create a virtual reality scene in a previous exercise, in this chapter we will use the A-Frame framework. However, before we jump into the creative process with A-Frame, let’s review what we’ve learned so far in this course.
Rakesh Baruah
Chapter 9. Physics and User Interaction in A-Frame
Abstract
In our introduction to the A-Frame framework, we have focused on the entities and components that make up the heart of its Entity Component System (ECS). In A-Frame, entities wrap components to create complex objects in a 3D scene. While A-Frame provides developers with out-of-the-box entities called primitives (like a box, plane, cone, and sky), it also allows us to create entities of our own composed of custom components built through A-Frame. But the extensibility of A-Frame is not limited to entities and components. The virtues of A-Frame really take flight through the application of systems to its scenes.
Rakesh Baruah
Chapter 10. Deploying 3D Animated Models in AR with A-Frame and GitHub Pages
Abstract
Though we’ve nearly reached the end of our course on immersive AR and VR content using the WebXR API, we have only worked with primitive assets in XR scenes. Objects like cubes, planes, and spheres are helpful while we prototype experiences. However, creating an XR experience a user will enjoy requires a bit more creativity. One way we can increase the diversity of our XR applications is with 3D models.
Rakesh Baruah
Backmatter
Metadata
Title
AR and VR Using the WebXR API
Author
Rakesh Baruah
Copyright Year
2021
Publisher
Apress
Electronic ISBN
978-1-4842-6318-1
Print ISBN
978-1-4842-6317-4
DOI
https://doi.org/10.1007/978-1-4842-6318-1

Premium Partner

    Image Credits