Initial tests of the google model viewer components for WebAR

A quick test

This is a quick test to see if how quick it is to get started with the google model viewer, and how functional it is out of the box.

The process of getting started is quite straight forward.

First load the javascript module for the web component <model-viewer> tags into the page

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

Then drop a little html where the model viewer is wanted.

<model-viewer src="sourceLocation/model.glb" auto-rotate camera-controls></model-viewer>

As an AR/WebGl model viewer it could not get any simpler, at this point there is a functional model viewer in the page ready for customisation.

Model viewer tag documentation is available here

Examples

First Test

Simple model viewer with background color

<model-viewer id="mclaren_01"
    src="../assets/models/McLaren.glb"
    alt="A 3D model of a McLaren"
    background-color="#ffffff" 
    ar
    auto-rotate 
    camera-controls>
</model-viewer>

edit: unstable-webxr attribute removed as no longer neccesary

Second Test

As above but with an environment map, a custom AR button (visible on supported browsers) and a javascript example lifted from the documentation here.

The lighting from the environment map is visible, but, the materials on this model are not reflective enough to be obvious.

<model-viewer id="mclaren_02"
    environment-image="../assets/models/quattro_canti_1k.hdr"
    alt="A 3D model of a McLaren"
    src="../assets/models/McLaren.glb"
    alt="A 3D model of a McLaren"
    ackground-color="#ffffff" 
    ar
    auto-rotate 
    camera-controls>
    <button slot="ar-button"
        style="background-color: white; border-radius: 4px; border: none; position: absolute; top: 16px; right: 16px; ">
        👋 Activate AR</button>
</model-viewer>
<script>
    (() => {
        const modelViewer = document.querySelector('#mclaren_02');
        const orbitCycle = ['45deg 55deg 4m', '-60deg 110deg 2m',
            modelViewer.cameraOrbit
        ];
        setInterval(() => {
            const currentOrbitIndex = orbitCycle.indexOf(modelViewer.cameraOrbit);
            modelViewer.cameraOrbit = orbitCycle[(currentOrbitIndex + 1) % orbitCycle.length];
        }, 3000);
    })();
</script>

edit: unstable-webxr attribute removed as no longer neccesary

The result is very quick access to a model viewer with an orbital camera, and acccess to a very smooth AR placement/viewer mode. This is simply a model/animation viewer and is great for visualisations, but it doesnt provide a full solution for custom interaction or to chain/blend multiple animations out of the box. To get more than the basics out of this, some javascript knowledge is required.

Source model borrowed from sketchfab.
HDRI Map borrowed from from HDRI Haven