glTF/GLB models do not render in AR
See original GitHub issueEnvironment
Please provide the following information about your environment:
- Development OS: macOS Mojave 10.14.2
- Device OS & Version: iOS version 12.2
- Version: ViroReact version 2.13.0 and React Native version 0.57.7
- 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:
- Created 5 years ago
- Comments:16 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.
@dthian @dam00n maybe you missed my last comment? Thanks in advance for the information!