viro: glTF/GLB models do not render in AR

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.

About this issue

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

Most upvoted comments

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.

You need to add a light to your scene. Also you should position the model in front of the camera, otherwise you will be inside the model. See code below

<ViroARScene onTrackingUpdated={this._onTrackingUpdated} >
      <ViroAmbientLight color="#ffffff" intensity={200}/>
        <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, -1 ]}
          onLoadStart={this._onLoadStart}
          onLoadEnd={this._onLoadEnd}
          onError={this._onError}
        />
      </ViroARScene>