Posted inTech

Create and convert glb/gltf for android AR

October 20, 2020

Create 3D model with Maya and save in FBX.

Do note the scene needs to be in Meters
Maya>Windows>Settings/Preferences>Preference>Settings

Ensure the camera clippings are adjusted to view the Model if resize is made

Basic Keyframe animation can be added and do note the change in the direct for rigging animation after export.

Once FBX is exported, can simply use this online converter

https://modelconverter.com/convert.html

and view with

https://gltf-viewer.donmccurdy.com/

Now we can upload the converted glb/gltf file and place the Mobile AR view for the mobile on to a html or php file on server with following button codes:

<a href="intent://arvr.google.com/scene-viewer/1.0?file=http://www.yourserver.com/ar/createdmodel.glb#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;" class="button w-button">Start</a>

with the following javascript before the end of 

  <script>
  function enhanceWithARQuickLook() {

      // check for AR support
      const a = document.createElement('a'),
            supportsAR = a.relList.supports('ar') ? true : false;

      // if the host device supports AR Quick Look...
      if ( supportsAR ) {

          const attr = 'data-ar-fp',
                elements = document.querySelectorAll('['+attr+']');

          // if there are AR-ready links on the page...
          if ( elements.length > 0 ) {

              // convert AR-ready links
              for ( var i in elements ) {

                  const instance = elements[i],
                        a = document.createElement('a');
                  a.setAttribute('href', instance.getAttribute(attr));
                  a.setAttribute('rel', 'ar');
                  instance.removeAttribute(attr);
                  instance.parentNode.insertBefore(a, instance);
                  a.appendChild(instance);

              }

          }

      }

  }

  enhanceWithARQuickLook();
  </script>
Tags: