<model-viewer>

<model-viewer> is like an HTML <img> or <video> tag, but for physically realistic 3D models. E-commerce is the most popular use case, but it has also been deployed by NASA, The Smithsonian and similar institutions.

A mosquito trapped in crystallized amber

<model-viewer
  src="./MosquitoInAmber.glb"
  alt="A mosquito trapped in crystallized amber"
  ar ar-modes="webxr"
  camera-controls
  tone-mapping="aces"
  poster="./poster.webp"
  disable-tap>
</model-viewer>

<model-viewer> is able to be styled with CSS, and accepts nested HTML to produce interactive elements such as custom loading spinners, buttons and worldspace annotations. It has been optimized to run performantly on low-powered devices, even when many models are placed on the page at once. The HTML snippet above is all that is necessary to place the interactive model you can see on this page, and enable AR viewing capabilities (when supported by the browser).

<model-viewer> was the last major piece of standards-adjacent work I did while at Google. The goal of the project was to demonstrate the potential of a first-class <model> tag. Last I had the opportunity to review the statistics, it had been found across millions of web pages.

"Mosquito In Amber" is by Loïc Norgeot, created from a mosquito scan by Geoffrey Marchal; produced for Sketchfab and licensed under CC BY 4.0.