Can't load dynamically downloaded VRX files about viro

[mikeslinkman]

Hi,

Sorry for taking a little longer as planned, providing the URI as mentioned by @mariansam makes me progress with the issue a little bit more. So what I did is constructed the file URI so that it it looks something along these lines:

{uri: file://${RNFS.DocumentDirectoryPath}/AR/oobject_bpanther_anim.vrx}

Using obj files now loads the model successfully I don't even need to provide the mtl file and pngs / jpgs in the resources array although the docs mentioned this as a step.

And after a few hours of debugging why my VRX weren't display properly I discovered that it was actually loading using this method I updated the scale and it was also displaying my VRX model properly. So thanks for helping me figuring this and I'll close this up now

[bilewinters]

Hi @mikeslinkman thanks for engaging!

I see in your example there are a bunch of PNGs also being accessed from the local file system, also presumably after having been downloaded. Were there any issues with those, or is it just the VRX that causes the problem?

[mariansam]

Hi, I think this might be a really similar issue to #3, here's my response to that one:

Hi @mikeslinkman, we already had a similar issue on the ViroCommunity Discord server. Your problem might be a missing protocol in the uri. Try adding file:// before every file path you want to load. Eg.

{uri: `file://${RNFS.DocumentDirectoryPath}/AR/object_mtl.mtl\`},

But I'm not 100% sure with about this, try it out and let us know.

[mikeslinkman]

Hi,

Thanks for getting back to me, first in response to @bilewinters because this might be due to a misconception on my end. As I've read through the docs (and I'm aware they are outdated, but I guess they give some sort of implementation idea) for the model to load properly I should also put additional files referenced by the model in the resources array. However this is something I read regarding OBJ files so it might be that this is not required for VRX files.

For now I've chosen to use a model provided in the samples from original Viro team. I've downloaded them in a zip without errors and afterwards I tried packaging them with the project and at that point the model was showing properly.

This leads me to believe that @mariansam is up to something with the solution provided. I'll try this out later today and will update if this fixed the issue

[tjikaljedy]

• Review the documentation: https://docs.viromedia.com/
• Search for existing issues: https://github.com/viromedia/viro
• Use the latest ViroReact release: https://docs.viromedia.com/docs/releases

Environment

Please provide the following information about your environment:

1. Development OS: Mac
2. Device OS & Version: Android 10 iOS version 14.2
3. Version: Community Version RN 0.63.3
4. Device(s): Oneplus 6 iPhone 11 and more

Description

Currently I'm trying to display a VRX file that I have downloaded from my API. We do not want to include the AR models within our project since AR is not the core part of our application and a decent portion of our user base might not even touch that part. I Expect that our database of AR objects will increase over time and we do not want to bother users with AR objects they will never use.

So I understand the downloading part is not part of this library and I believe this is not where the issue is originating from. This is verified by temporarily bundling the downloaded VRX model. Then it will load and display the model as expected. But when loading it from internal storage the error callback console.log(event.nativeEvent.error); simply informs me Model loading failed without any additional information.

Reproducible Demo

Below is all code specific to our Viro implementation. For testing purposes I've used the black panther model for the sample since this ensures I'm using a valid model

const ARNavigator = ({navigation, route}) => {

    const HelloWorldSceneAR = () => {
        const onInitialized = (state, reason) => {
            console.log('state: ', state, 'reason: ', reason);
        }

        const _onError = (event) => {
            console.log("OBJ loading failed with error: " + event.nativeEvent.error);
        }

        const _onModelLoad = (event) => {
            console.log("Model loaded: " + event.nativeEvent);
        }

        return (
            <ViroARScene onTrackingUpdate={onInitialized}>
                <ViroAmbientLight color="#FFF" />
                <Viro3DObject
                    type="VRX"
                    onError={_onError}
                    scale={[.9,.9,.9]}
                    rotation={[0, 0, 0]}
                    position={[-0.1, -1.5, -2]}
                    onLoadEnd={_onModelLoad}
                    resources={[
                        {uri: `${RNFS.DocumentDirectoryPath}/AR/object_bpanther_Base_Color.png`},
                        {uri: `${RNFS.DocumentDirectoryPath}/AR/object_bpanther_Metallic.png`},
                        {uri: `${RNFS.DocumentDirectoryPath}/AR/object_bpanther_Mixed_AO.png`},
                        {uri: `${RNFS.DocumentDirectoryPath}/AR/object_bpanther_Normal_OpenGL.png`},
                        {uri: `${RNFS.DocumentDirectoryPath}/AR/object_bpanther_Roughness.png`}
                    ]}
                    source={{uri: `${RNFS.DocumentDirectoryPath}/AR/oobject_bpanther_anim.vrx`}}
                />
            </ViroARScene>
        )
    }

    return (
        <ViroARSceneNavigator
            autofocus={true}
            initialScene={{
                scene: HelloWorldSceneAR
            }}
            style={{flex: 1}} />
    )
}

I'll keep a lookout on the issue and if I come across additional information ill update the post. If any addiotional information is required I'll try to update it as quickly as possible

source={{
uri: https://xxx/icecreamman_anim/icecreamman_anim_pbr.vrx,
headers: {
'content-type': 'application/octet-stream',
},
}}

do not forgot to put content-type in headers