Augmented reality

As explained in Web Components in Action

Augmented reality is an interactive experience that overlays computer-generated content onto a user's view of the physical world.

A 3D model on a web page is something you look at on a screen. Augmented reality (AR) takes the next step: it lets a virtual object appear in a view of the real world. Unlike virtual reality, which fills your view with a virtual scene, AR keeps the physical surroundings in view. section 15.0 section 15.2

For a web page that already previews a 3D model, Google’s model-viewer component offers a compact starting point. Give the element a model with `src`; the AR example also supplies an iOS model with `ios-src`. You can work with the model-viewer element without first writing the rendering code behind it. section 15.2 section 15.0

Listing 15.6. AR with the model-viewer component

<model-viewer src="Astronaut.glb"
             background-color="#45aa22"
             ios-src="Astronaut.usdz">       #1
</model-viewer>

Compare `src="Astronaut.glb"` with `ios-src="Astronaut.usdz"`: the short element shows the model assets supplied for the AR example. section 15.2

What does the change in setting look like? An ARCore example places a virtual object in the real world. That is the useful distinction to keep in mind when moving from an onscreen model preview to AR: the object is no longer viewed only against the page’s background. section 15.2

Figure 15.7. Placing a virtual object in the real world using ARCore

The ARCore figure illustrates the real-world placement described above. section 15.2

How Web Components in Action covers it

How deep it goes

Shows a short model-viewer AR example and real-world placement, without working through AR tracking or rendering internals.

Examples

Uses an astronaut model-viewer element with GLB and USDZ assets, plus an ARCore real-world placement figure.

What it assumes

Assumes familiarity with basic HTML elements while avoiding a prerequisite implementation of 3D rendering.

What you can do after

Apply it via model-viewer by supplying the model assets shown in a compact AR example.

How it connects

Connects AR to 3D models, mixed reality, virtual reality, Web Components, model-viewer, and ARCore.

liveBookmanning.com

Read Web Components in Action on liveBook Get the book at manning.com

Related concepts

• digital twinuses · A digital twin is a computational representation of a physical entity, process, or system that models relevant characteristics, state, or behavior.
• WebXRused by · WebXR is a web API standard for accessing virtual-reality, augmented-reality, and other immersive device capabilities.
• spatial computingused by · Spatial computing is computing that represents, interprets, or manipulates digital information in relation to physical space and embodied interaction.

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.