Home » Blog » Markerless WebAR

Markerless WebAR

  • by
gladiador

Markerless WebAR is the future of Augmented Reality. There are many advancements made in WebAR but the key thing missing was, no framework would support all mobile devices or browsers. Google Chrome APIs are being released which will support WebAR in the future.

However, companies like 8th Wall already support WebAR. Only disadvantage is, it is costly even to test it as a developer.

Here is a novel solution which solves the problem and does it for free using Javascript and WebAR.

Disclaimer: The source code was taken from https://modelviewer.dev/

The Gladiator Model was taken from SketchFab – https://sketchfab.com/3d-models/gladiador-874fc7e11d674f51a4dc2082d29c9b9a

Credits: jlazcanoteguiga

Here is a Video which shows the output

Demo Link

Here is a Demo link for the same – https://webar.antdevelopers.com

Find the GitHub link here – https://github.com/hegdenaveen1/WebAR-Demo

Source Code

index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <title>WebAR Gladiador</title>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="./styles.css">

    

    <!-- The following libraries and polyfills are recommended to maximize browser support -->

    <!-- NOTE: you must adjust the paths as appropriate for your project -->

    

    <!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->

<!--     <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script> -->

    <!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->

<!--     <script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script> -->

    <!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->

<!--     <script src="https://unpkg.com/resize-observer-polyfill@1.5.0/dist/ResizeObserver.js"></script> -->

    

    <!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->

    <script src="https://unpkg.com/focus-visible@5.0.2/dist/focus-visible.js" defer></script>

  </head> 

<body>

  <div class="row">

  <div id="card">

    <!-- All you need to put beautiful, interactive 3D content on your site: -->

    <model-viewer src="./assets/gladiador.glb"

                  ios-src="./assets/gladiador.usdz"

                  poster="./assets/gladiador.png"

                  alt="A 3D model of an Gladiador"

                  shadow-intensity="1"

                  camera-controls

                  auto-rotate ar>

    </model-viewer>

    <section class="attribution">

      <span>

        <h1>Gladiador</h1>

        <span>By <a href="https://sketchfab.com/3d-models/gladiador-874fc7e11d674f51a4dc2082d29c9b9a" target="_blank">SketchFab</a></span>

        <br>

        <span>Demo by<a href="https://www.antdevelopers.com" target="_blank">ANT Developers</a></span>

      </span>

      <a class="cc" href="https://creativecommons.org/licenses/by/2.0/" target="_blank">

        <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg">

        <img src="https://mirrors.creativecommons.org/presskit/icons/by.svg">

      </a>

    </section>  

  </div>

  </div>

  <!-- 💁 Include both scripts below to support all browsers! -->

  <!-- Loads <model-viewer> for modern browsers: -->

  <script type="module"

      src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js">

  </script>

  <!-- Loads <model-viewer> for old browsers like IE11: -->

  <script nomodule

      src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">

  </script>

</body>

</html>

styles.css

body {

    margin: 1em;

    padding: 0;

    font-family: Google Sans, Noto, Roboto, Helvetica Neue, sans-serif;

    color: #244376;

  }

  

  

  #card {

    margin: 3em auto;

    display: flex;

    flex-direction: column;

    max-width: 300px;

    border-radius: 6px;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);

    overflow: hidden;

  }

  

  /* Create three equal columns that floats next to each other */

  .column {

    float: left;

    width: 30%;

    padding: 20px;

     /* Should be removed. Only for demonstration */

  }

  

  /* Clear floats after the columns */

  .row:after {

    content: "";

    display: table;

    clear: both;

  }

  

  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

  @media screen and (max-width: 600px) {

    .column {

      width: 100%;

    }

  }

  

  model-viewer {

    width: 100%;

    height: 400px;

    background-color: #70BCD1;

    --poster-color: #ffffff00;

  }

  

  .attribution {

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    margin: 1em;

  }

  

  .attribution h1 {

    margin: 0 0 0.25em;

  }

  

  .attribution img {

    opacity: 0.5;

    height: 2em;

  }

  

  .attribution .cc {

    flex-shrink: 0;

    text-decoration: none;

  }

  

  footer {

    display: flex;

    flex-direction: column;

    max-width: 600px;

    margin: auto;

    text-align: center;

    font-style: italic;

    line-height: 1.5em;

  }

assets

Make a folder called assets/

Rename and place all Sketchfab assets as

  • gladiador.glb
  • gladiador.usdz
  • gladiador.png

and you are good to go. Host these files on a server like Netlify. As some of the features need Https.

Change Model

If you want to change the model used, you can change it in the source code of index.html. In <model-viewer> change src to any .glb file, Change ios-src to any .usdz file. These are the key model files.

Leave a Reply

Your email address will not be published. Required fields are marked *