question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

glTF/GLB models do not render in AR

See original GitHub issue

Environment

Please provide the following information about your environment:

  1. Development OS: macOS Mojave 10.14.2
  2. Device OS & Version: iOS version 12.2
  3. Version: ViroReact version 2.13.0 and React Native version 0.57.7
  4. Device(s): iPhone 7

glb or gltf models do not render in AR. This very simple self-contained glb file does not use any textures, has only one mesh and is fully valid according to glTF 2.0 specs. It does not render, even after successful loading: https://s3.amazonaws.com/static.sayduck.com/2019.02.18.Sayduck_app_tests/2019.02.18.couch_right.glb

Here is my minimal React code:

class ArScene extends React.Component {
  constructor() {
    super();

    this._onTrackingUpdated = this._onTrackingUpdated.bind(this);
  };

  state = {
    initialized: false,
  };

  _onTrackingUpdated(state, reason) {
    const { initialized } = this.state;
    // if the state changes to "TRACKING_NORMAL" for the first time, then
    // that means the AR session has initialized!
    if (!initialized && state === ViroConstants.TRACKING_NORMAL) {
      this.setState({
        initialized : true,
      });
    }
    if (initialized) {
      if (state === ViroConstants.TRACKING_NONE) {
        // Handle loss of tracking
      }
    }
  };

  _onLoadStart(event) {
     console.log("loading has started", event.nativeEvent.target);
  };

  _onLoadEnd(event) {
     console.log("loading has finished", event.nativeEvent.target);
  };

  _onError(event) {
    console.log("loading failed", event.nativeEvent);
  };

  render() {
    const { initialized } = this.state;
    console.log(initialized);
    return (
      <ViroARScene onTrackingUpdated={this._onTrackingUpdated} >
        <Viro3DObject
          source={{ uri: 'https://s3.amazonaws.com/static.sayduck.com/2019.02.18.Sayduck_app_tests/2019.02.18.couch_right.glb' }}
          type="GLB"
          scale={[ 1, 1, 1 ]}
          position={[ 0, 0, 0 ]}
          onLoadStart={this._onLoadStart}
          onLoadEnd={this._onLoadEnd}
          onError={this._onError}
        />
      </ViroARScene>
    );
  };
};

I can see in the console that initialized becomes true, that loading has started and loading has finished and there are no errors from the onError callback. If I add a ViroText, it is visible and tracked properly.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:16 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
silvainSayduckcommented, Feb 22, 2019

Absolutely! Here is a version with embedded assets and here is a version with external assets.

FYI: this command line tool is very nice and easy to use for that kind of tasks: https://github.com/AnalyticalGraphicsInc/gltf-pipeline.

0reactions
silvainSayduckcommented, Sep 11, 2019

@dthian @dam00n maybe you missed my last comment? Thanks in advance for the information!

Read more comments on GitHub >

github_iconTop Results From Across the Web

glTF, GLB, and USDZ - Sketchfab Help Center
glTF is a 3D file format maintained by the Khronos Group. ... Double sided rendering is not supported, so all models are rendered...
Read more >
Gltf 2.0 model not loading using ar.js - Stack Overflow
This is known issue with old aframe builds, however your code has extra issues. Bump up your aframe version and aframe-ar version.
Read more >
How to Use GLB Files for Web Design - Vev
Conversely, if you don't actually want to convert your glTF into a GLB, you can use a glTF optimizer, which will compress the...
Read more >
Guide to 3D Files for Web AR - 8th Wall
Navigate to https://gltf-viewer.donmccurdy.com · Drop in your newly created GLB · Inspect your model and confirm there are no issues with geometry or...
Read more >
AR core with glb/gltf model using Sceneform - Mobikul
The 3D model can in the form of GLB or GLTF format and these 3D models can be loaded at runtime without conversion....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found