Coder Social home page Coder Social logo

reactvision / viro Goto Github PK

View Code? Open in Web Editor NEW
1.3K 1.3K 149.0 146.33 MB

ViroReact: The AR and VR library for React Native πŸ“³πŸ’™πŸ’›πŸ€πŸ’š

License: MIT License

Shell 0.12% Ruby 0.51% Java 37.67% Objective-C 12.25% Objective-C++ 30.79% C 0.07% TypeScript 18.55% JavaScript 0.01% Handlebars 0.02%
android blacklivesmatter ios nowar viro-community viroreact

viro's People

Contributors

adelarsq avatar alexttyip avatar bilewinters avatar brunokiafuka avatar cjmcassar avatar dependabot[bot] avatar doranteseduardo avatar foosballfan avatar geo-vi avatar gkartalis avatar jani888 avatar khaledjabari-90 avatar ramicaza avatar robertjcolley avatar schiller-manuel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

viro's Issues

Capture Raw Photo with World Transform Information

Thanks for maintaining this library. I’ve reviewed the documentation but cannot find an answer to this question.

How can our app get access to the raw camera feed? I need to trigger a capture to local file system from the raw camera then simultaneously record the AR world position. I want to have the raw photo with the information about the relative transform for where that photo was captured from.

Here’s a similar issue: viromedia/virocore#10

error: cannot find symbol for Renderer

Hello, I am trying to build the project by executing ./prepare_release

There are a couple of errors:

viro/android/viro_bridge/src/main/java/com/viromedia/bridge/module/ViroMediaRecorder.java:40: error: package android.support.v4.content does not exist
import android.support.v4.content.ContextCompat;
                                 ^
/viro/android/viro_bridge/src/main/java/com/viromedia/bridge/module/ViroMediaRecorder.java:254: error: cannot find symbol
    ViroMediaRecorder(Context context, Renderer rendererJni, int width, int height) {
                                       ^
  symbol:   class Renderer
  location: class ViroMediaRecorder

I can remove the first error by changing the import to
import androidx.core.content.ContextCompat;

I am not sure how to fix the second error though.

Dev environment:
MacOS v11.5
React v16.13.1
React Native v0.63.4

GVR only showing Viro360Image on left eye

Requirements:

Please go through this checklist before opening a new issue

Environment

Please provide the following information about your environment:

  1. Development OS: Mac
  2. Device OS & Version: Android 10
  3. Version: "@viro-community/react-viro": "^2.21.1", "react-native": "0.66.2",
  4. Device(s): Pixel XL

Description

I'm only seeing the image on one side of the screen. There is a small blue sparkle which I couldn't make out for the right eye. Zooming in with a screenshot didn't help either.

Screenshot_20211124-145920

grid.jpeg

Reproducible Demo

export default function Screen() {
  return (
    <ViroVRSceneNavigator
      initialScene={{
        scene: MyStartScene,
      }}
    />
  );
}

export const MyStartScene = () => {
  return (
    <ViroScene>
      <Viro360Image source={require('../../../../assets/images/grid.jpeg')} />
    </ViroScene>
  );
};

Viro 2.21.1

Hi it's not a pure issue but I investigate to find out why the 2.21.1 release is not working and show UIManager error for all the viro components.

I find the culprite..

I download the zip of 2.21.0 and 2.21.1 and find that for IOS libviroreact.a is not the good one.
The size of the package is not relevant for the lib.

image

If I check the same file on the 2.21.0 release this file is bigger

image

So I take all the libviroreact.a from 2.21.0 folder and paste it in my node module viro react.

I compile from xCode and now my app doesn't complain anymore for VRTText not found in UIManager.
And work as expected.

How can I build this libviroreact.a from my side ?

Hope this could give you the right way to fix that.

Cchumi

Can't load dynamically downloaded VRX files

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

ArImageMarker portal moves away

Hello ! Has someone tried to put a Portal on top of an ArImageMarker ? Can't make it work... The portal is well placed when the tracker is found but as soon as I move, the portal moves with me... So it's impossible to enter the portal as he moves away from me when I try to move forward

Screenshot 2021-05-29 at 17 29 37

IMG_6144
IMG_6145

App crashes when .arobject tracking target detects the object

Environment

Please provide the following information about your environment:

  1. Development OS: Mac
  2. Device OS & Version: ios14.5, ios13.7
  3. Version: @viro-community/[email protected], [email protected]
  4. Device(s): iPhone7+, iPhone X, iPhone XS, iPhone 12 pro max

Description

We used .arobject file as a ViroARTrackingTargets and ViroARObjectMarker. We only added a ViroBox inside.
If we pointed the camera somewhere else, the app kept running without problems. But as soon as we pointed the camera to the object, the app just crashed.
No specific error showed. The crash log and console showed nothing helpful. Xcode just showed EXC_BAD_ACCESS (code=1, address=0x20).

Reproducible Demo

Just clone the starter-kit and follow this documentation

Generating APK installer

What is the recommended file structure for a viro app and how to generate an apk-file for android-phones?
I've implemented an app using the starter kit. When developing, I run the app on my phone (Samsung Galaxy A70) and everything is working just fine. Now I want to generate an apk file that I can share with others but everything breaks at this state. The command: ./gradlew assembleRelease returns an error about file duplication.
Project structure:

android
app
  assets
  components
  res
  ...

The command: ./gradlew assembleRelease -x bundleReleaseJsAndAssets generate an apk file, but it's not useful. When installed on a phone, it keeps on crashing at the start. I should note here that everything works well when connecting the phone to my Mac (Big Sur 11.4).
So my questions are first how do we handle files in a viro app? Should all the resources go to the asset folder? Then how does one build/generate an apk that works? It would be great if the starter kit could provide such a command.
Also is it possible to use the starter kit with expo? That would be great for dev.

Vertical ARPlaneSelector in iOS

Environment

Please provide the following information about your environment:

  1. Development OS: Mac,
  2. Device OS & Version: iOS 13.0
  3. Version: ViroReact: latest ViroCommunity, React Native: 0.63.4
  4. Device(s): iPhone XR

Description

When using the ARPlaneSelector on iOS on "vertical" mode, it does not detect any vertical planes. It works on Android!

Reproducible Demo

Following the instructions on the starter kit page:
https://github.com/ViroCommunity/starter-kit

git clone https://github.com/ViroCommunity/starter-kit.git
cd starter-kit
npm install
npx pod-install (iOS)
Edit App.js by including a ViroARPlaneSelector with alignment="Vertical". You will also need to add anchorDetectionTypes=["PlanesVertical"] to the ViroARScene. Import ViroARPlaneSelector.
npx react-native run-ios

Expo bare + viroReact getting this error on ios -> requireNativeComponent: "VRTText" was not found in the UIManager.

Requirements:

Please go through this checklist before opening a new issue

Environment

Please provide the following information about your environment:

  1. Development OS: Mac
  2. Device OS & Version: ios 14.7.1
  3. Version:
 "dependencies": {
    "@viro-community/react-viro": "^2.21.1",
    "expo": "~42.0.1",
    "expo-splash-screen": "~0.11.2",
    "expo-status-bar": "~1.0.4",
    "expo-updates": "~0.8.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "~0.63.4",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-unimodules": "~0.14.5",
    "react-native-web": "~0.13.12"
  },
  1. Device(s): iphone 8

Description

I just trying to initialize my app with Expo bare work flow + @viro-community/react-viro

But keep getting these error

Reproducible Demo

you can reproduce this by following this

  1. npm install --global expo-cli ( my expo-cli version is 4.11.0)

  2. expo init -> select bare work flow

  3. npm install

  4. npm install --save @viro-community/react-viro

  5. go ios/PodFile and add these lines as instructed on https://github.com/ViroCommunity/viro/blob/main/readmes/INSTALL_IOS.md
    pod 'ViroReact', :path => '../node_modules/@viro-community/react-viro/ios/'
    pod 'ViroKit_static_lib', :path => '../node_modules/@viro-community/react-viro/ios/dist/ViroRenderer/static_lib'

  6. npx pod-install

  7. put some viro react code on App.js

  8. npx react-native run ios ( just to check the linking work well)
    -> have error
    Invariant Violation: requireNativeComponent: "VRTText" was not found in the UIManager.

  9. run xcode, and excute with real device
    ->same error with 8

ViroParticleEmitter images are always white-ish

Hello!
I'm using ViroParticleEmitter but every image that I use is basically white. I tough it was bloom threshold, but it's not.
Can anybody help me?

<ViroParticleEmitter
    position={[0, -2.5, 0]}
    duration={1500}
    visible={true}
    run
    loop
    fixedToEmitter
    image={{
      source,
      height: 0.1,
      width: 0.1,
      // bloomThreshold: 1.0,
    }}
    spawnBehavior={{
      particleLifetime: [4000, 4000],
      emissionRatePerSecond: [40, 100],
      spawnVolume: {
        shape: "box",
        params: [20, 1, 20],
        spawnOnSurface: true,
      },
      maxParticles: 25,
    }}
    particleAppearance={{
      rotation: {
        initialRange: [0, 360],
        factor: "Time",
        interpolation: [{ endValue: 1080, interval: [0, 5000] }],
      },

      scale: {
        initialRange: [
          [2, 2, 2],
          [10, 10, 10],
        ],
        factor: "Time",
        interpolation: [
          { endValue: [3, 3, 3], interval: [0, 4000] },
          { endValue: [0, 0, 0], interval: [4000, 5000] },
        ],
      },
    }}
    particlePhysics={{
      velocity: {
        initialRange: [
          [-2, 0.5, 0],
          [2, 3.5, 0],
        ],
      },
    }}
  />

Android 11 and compileSdkVersion/targetSdkVersion 30 causes AR Core installation issue

Environment

Please provide the following information about your environment:

  1. Development OS: Mac
  2. Device OS & Version: Android 11
  3. Version: ViroReact version 2.20.2 and React Native version 0.64.1
  4. Device(s): Google Pixel 4a

Description

The AR Core installation on Android 11 never finishes / is not properly detected, if Viro is used in an Android app that has:

    compileSdkVersion = 30
    targetSdkVersion = 30

When both versions are set to 29, all works as expected.

The following screenshots were taken on a Google Pixel 4a which is running Android 11 and which has AR Core already installed:
arcore-issue-1
arcore-issue-2
arcore-issue-3

Here is the Android Log output when both versions are set to 30. At the end, I closed the installation dialog and thus Viro thinks the installation is aborted:

2021-08-26 19:52:58.346 16707-16786/com.example.app W/GLSurfaceView: Warning, !readyToDraw() but waiting for draw finished! Early reporting draw finished.
2021-08-26 19:52:58.355 1762-5121/? I/AppsFilter: interaction: PackageSetting{bb51286 com.example.app/10379} -> PackageSetting{98fe05e com.google.ar.core/10170} BLOCKED
2021-08-26 19:52:58.355 1762-5121/? I/AppsFilter: interaction: PackageSetting{bb51286 com.example.app/10379} -> PackageSetting{98fe05e com.google.ar.core/10170} BLOCKED
2021-08-26 19:52:58.357 1762-5121/? I/ActivityTaskManager: START u0 {cmp=com.example.app/com.google.ar.core.InstallActivity (has extras)} from uid 10379
2021-08-26 19:52:58.364 16707-16707/com.example.app I/Viro: ARCore installation requested by application
2021-08-26 19:52:58.375 16707-16707/com.example.app I/Viro: AR session not paused: has not yet been configured
2021-08-26 19:52:58.425 16707-16707/com.example.app I/ARCore-InstallService: Install service connected
2021-08-26 19:52:58.459 1762-1891/? I/ActivityTaskManager: Displayed com.example.app/com.google.ar.core.InstallActivity: +101ms
2021-08-26 19:53:09.813 1762-5127/? I/AppsFilter: interaction: PackageSetting{bb51286 com.example.app/10379} -> PackageSetting{98fe05e com.google.ar.core/10170} BLOCKED
2021-08-26 19:53:09.815 1762-2637/? I/AppsFilter: interaction: PackageSetting{bb51286 com.example.app/10379} -> PackageSetting{98fe05e com.google.ar.core/10170} BLOCKED
2021-08-26 19:53:09.944 635-635/? E/SurfaceFlinger: [com.example.app/com.google.ar.core.InstallActivity#0] rejecting buffer: bufWidth=1162, bufHeight=692, front.active_legacy.{w=1176, h=676}
2021-08-26 19:53:09.961 635-635/? E/SurfaceFlinger: [com.example.app/com.google.ar.core.InstallActivity#0] rejecting buffer: bufWidth=1145, bufHeight=712, front.active_legacy.{w=1176, h=676}
2021-08-26 19:53:10.005 635-635/? E/SurfaceFlinger: [com.example.app/com.google.ar.core.InstallActivity#0] rejecting buffer: bufWidth=1083, bufHeight=785, front.active_legacy.{w=1105, h=759}
2021-08-26 19:53:10.016 1762-2637/? I/AppsFilter: interaction: PackageSetting{bb51286 com.example.app/10379} -> PackageSetting{98fe05e com.google.ar.core/10170} BLOCKED
2021-08-26 19:53:10.016 1762-5127/? I/AppsFilter: interaction: PackageSetting{bb51286 com.example.app/10379} -> PackageSetting{98fe05e com.google.ar.core/10170} BLOCKED
2021-08-26 19:53:10.021 635-635/? E/SurfaceFlinger: [com.example.app/com.google.ar.core.InstallActivity#0] rejecting buffer: bufWidth=1040, bufHeight=835, front.active_legacy.{w=1105, h=759}
2021-08-26 19:53:10.105 635-635/? E/SurfaceFlinger: [com.example.app/com.google.ar.core.InstallActivity#0] rejecting buffer: bufWidth=964, bufHeight=924, front.active_legacy.{w=977, h=908}
2021-08-26 19:53:10.121 635-635/? E/SurfaceFlinger: [com.example.app/com.google.ar.core.InstallActivity#0] rejecting buffer: bufWidth=954, bufHeight=936, front.active_legacy.{w=977, h=908}
2021-08-26 19:53:10.138 635-635/? E/SurfaceFlinger: [com.example.app/com.google.ar.core.InstallActivity#0] rejecting buffer: bufWidth=948, bufHeight=943, front.active_legacy.{w=977, h=908}
2021-08-26 19:55:44.248 1762-5127/? I/AppsFilter: interaction: PackageSetting{bb51286 com.example.app/10379} -> PackageSetting{98fe05e com.google.ar.core/10170} BLOCKED
2021-08-26 19:55:44.431 16707-16707/com.example.app I/ARCore-InstallActivity: activityResult: 0
2021-08-26 19:55:44.501 1762-4123/? I/AppsFilter: interaction: PackageSetting{bb51286 com.example.app/10379} -> PackageSetting{98fe05e com.google.ar.core/10170} BLOCKED
2021-08-26 19:55:44.501 16707-16707/com.example.app I/Viro: Error: User declined installing ARCore on device
2021-08-26 19:55:44.501 16707-16707/com.example.app E/Viro: onRendererFailed [error: ARCORE_USER_DECLINED_INSTALL], message [Please install ARCore on this device to use AR features]
2021-08-26 19:55:44.632 16707-16707/com.example.app W/Choreographer: Frame time is 11.306643 ms in the future!  Check that graphics HAL is generating vsync timestamps using the correct timebase.
2021-08-26 19:55:44.501 1762-4123/? I/AppsFilter: interaction: PackageSetting{bb51286 com.example.app/10379} -> PackageSetting{98fe05e com.google.ar.core/10170} BLOCKED

Error while starting my app - (library "libviro_renderer.so" not found)

Requirements:

Please go through this checklist before opening a new issue

Environment

Please provide the following information about your environment:

  1. Development OS: Windows
  2. Device OS & Version: Andoid API 30
  3. Version: ViroReact version - 2.21.1 and React Native version - 0.63.1
  4. Device(s): What device(s) are you are seeing the issue on (i.e. iPhone X, Samsung Note 8, etc) PIXEL_3_XL emulator

Description

I'm getting the following error when trying to start my app, even after following all the steps as mentioned in the starter kit.
E/AndroidRuntime: FATAL EXCEPTION: create_react_context
Process: com.test.viro, PID: 4598
java.lang.UnsatisfiedLinkError: dlopen failed: library "libviro_renderer.so" not found
at java.lang.Runtime.loadLibrary0(Runtime.java:1087)
at java.lang.Runtime.loadLibrary0(Runtime.java:1008)
at java.lang.System.loadLibrary(System.java:1664)
at com.viromedia.bridge.module.MaterialManager.(MaterialManager.java:58)
at com.viromedia.bridge.ReactViroPackage.createNativeModules(ReactViroPackage.java:111)
at com.facebook.react.ReactPackageHelper.getNativeModuleIterator(ReactPackageHelper.java:42)
at com.facebook.react.NativeModuleRegistryBuilder.processPackage(NativeModuleRegistryBuilder.java:42)
at com.facebook.react.ReactInstanceManager.processPackage(ReactInstanceManager.java:1347)
at com.facebook.react.ReactInstanceManager.processPackages(ReactInstanceManager.java:1318)
at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1225)
at com.facebook.react.ReactInstanceManager.access$1100(ReactInstanceManager.java:131)
at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:1016)
at java.lang.Thread.run(Thread.java:923).

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, screen capture, video recording. The more information you provide, the better we can support you.

App crash on android when I use ViroARCamera

@doranteseduardo : Thanks for your effort to make thins nice component.
However, I have the following problem.

Environment

Please provide the following information about your environment:

  1. Development OS: Mac

  2. Device OS & Version: What Android OS 10, android

  3. Version: ViroReact version:
    "@viro-community/react-viro": "^2.20.2",
    and React Native version:
    "react-native": "0.65.1"

  4. Device(s): Samsung

Description

When I use any ViroARCamera in the scene the app crashes on android!

my code>

<ViroARScene onTrackingUpdated={onInitialized}>
     <ViroAmbientLight color={"#aaaaaa"} />

     <ViroSpotLight innerAngle={5} outerAngle={90} direction={[0,-1,-.2]}
         position={[0, 3, 1]} color="#ffffff" castsShadow={true} />

     <ViroARCamera>
               <Viro3DObject
           source={require('./models/rodeh.obj')}
            resources={[require('./models/rodeh_material.mtl')]}
             scale={[0.02, 0.02, 0.02]}
           //position={[-1, -2, -1]}
           position={[0, 0, 0]} // <- try changing these values

           type="OBJ" />
        </ViroARCamera>

   </ViroARScene>

Viro3DSceneNavigator does not work on Android!! BUG

Environment

  1. Development OS: Windows
  2. Device OS & Version: Android 10
  3. Version: ViroReact version: "2.20.2", React Native version : "0.65.1"
  4. Device(s): Samsung Galaxy M21

Description

Viro3DSceneNavigator does not work . 3D Model doesnt show up. Only a black screen occurs. Same code works on ios perfectly.

onPinch not called when the ViroARSceneNavigator unmount and mount during state change

this.state = {
      displayAR: true,
}
{this.state.displayAR? (
            <ViroARSceneNavigator style={localStyles.arView} 
            initialScene={{scene: InitialScene}}  
            ref={this._setARNavigatorRef} 
            viroAppProps={this.state.viroAppProps}/>
          ):null}

3d object onPinch callback is not called after I change displayAR from true to false and true again.
It works well if I didn't unmount the ViroARSceneNavigator

App crash when add line to MainApplication.Java

Environment

Please provide the following information about your environment:

  1. Development OS: Windows
  2. Device OS & Version: Windows 10
  3. Version: ViroReact 2.20.2 and React Native 0.63.4
  4. Device(s): Google Pixel 4

Description

I am making new ar ar using this viro library and i did all config

app\src\main\build.gradle

dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
//noinspection GradleDynamicVersion
implementation "com.facebook.react:react-native:+" // From node_modules

implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"

implementation project(':gvr_common')
implementation project(':arcore_client')
implementation project(path: ':react_viro')
implementation project(path: ':viro_renderer')
implementation 'com.google.android.exoplayer:exoplayer:2.7.1'
implementation 'com.google.protobuf.nano:protobuf-javanano:3.0.0-alpha-7'

debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
  exclude group:'com.facebook.fbjni'
}

debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
    exclude group:'com.facebook.flipper'
    exclude group:'com.squareup.okhttp3', module:'okhttp'
}

debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
    exclude group:'com.facebook.flipper'
}

if (enableHermes) {
    def hermesPath = "../../node_modules/hermes-engine/android/";
    debugImplementation files(hermesPath + "hermes-debug.aar")
    releaseImplementation files(hermesPath + "hermes-release.aar")
} else {
    implementation jscFlavor
}

}

app\build.gradle

buildscript {
ext {
buildToolsVersion = "29.0.2"
minSdkVersion = 24
compileSdkVersion = 29
targetSdkVersion = 29
}
repositories {
google()
jcenter()
}
dependencies {
classpath('com.android.tools.build:gradle:4.1.1')
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}

AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" android:required="false" tools:replace="required"/>
<uses-feature android:glEsVersion="0x00030000" android:required="false" tools:node="remove" tools:replace="required" />
<uses-feature android:name="android.hardware.sensor.accelerometer" android:required="false" tools:replace="required" />
<uses-feature android:name="android.hardware.sensor.gyroscope" android:required="false" tools:replace="required" />

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:usesCleartextTraffic="true"
  android:theme="@style/AppTheme">
    <meta-data android:name="com.google.ar.core" android:value="required" />
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
    android:launchMode="singleTask"
    android:usesCleartextTraffic="true"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
      <category android:name="com.google.intent.category.CARDBOARD" />
      <category android:name="com.google.intent.category.DAYDREAM" />
    </intent-filter>
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

MainApplication.java

package com.myviroapp;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
import com.viromedia.bridge.ReactViroPackage;

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
@OverRide
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

    @Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      // packages.add(new MyReactNativePackage());
        packages.add(new ReactViroPackage(ReactViroPackage.ViroPlatform.valueOf("AR")));
      return packages;
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

@OverRide
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}

@OverRide
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
}

/**

  • Loads Flipper in React Native templates. Call this in the onCreate method with something like
  • initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  • @param context
  • @param reactInstanceManager
    /
    private static void initializeFlipper(
    Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
    try {
    /

    We use reflection here to pick up the class that initializes Flipper,
    since Flipper library is not available in release mode
    */
    Class<?> aClass = Class.forName("com.myviroapp.ReactNativeFlipper");
    aClass
    .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
    .invoke(null, context, reactInstanceManager);
    } catch (ClassNotFoundException e) {
    e.printStackTrace();
    } catch (NoSuchMethodException e) {
    e.printStackTrace();
    } catch (IllegalAccessException e) {
    e.printStackTrace();
    } catch (InvocationTargetException e) {
    e.printStackTrace();
    }
    }
    }
    }

Everything looks fine.but when i add packages.add(new ReactViroPackage(ReactViroPackage.ViroPlatform.valueOf("AR")));

into mainapplication.java file app crashed and when i remove it app running normaly but i got error message Ui manage not found. so what i have to do for solve this issue. Thank you

Emissive maps support

Requirements:

Please go through this checklist before opening a new issue

Environment

Please provide the following information about your environment:

  1. Development OS: Mac
  2. Device OS & Version: Android 11, pixel 4 and iOS 14.5, iPhone 11
  3. Version: ViroReact version: 2.20.2, react native version: 0.63.4

Description

Emissive texture is not showing.

Reproducible Demo

try this model on my Pixel 4:
123

Screenshot from glTF Viewer
Screen Shot 2021-09-08 at 2 47 23 PM

Debuging with emissive channel by glTF-Sample-Viewer
emissive

How to stream camera with AR objects.

Environment

Please provide the following information about your environment:

  1. Development OS: iPhone X (15.0.2)
  2. xCode version: 13.0
  3. Viro Version: "@viro-community/react-viro": "^2.20.2"

Description

I have successfully install and run Viro starter kit. Now, I want to stream AR enabled camera feed to some third party streaming engine. How can i achieve this.

In ViroARSceneNavigator, there is startVideoRecording() . This basically records and stores in camera roll. I actually want to have continuous streams of camera along with AR objects. I couldn't find any event/api available for accessing camera stream in documentations

Please help on this.

Geolocation implementation.

How can I place an object in a Geocoordinates system using viro?
The idea is to implement a Pokemon go game-like application, where the user can go to specific places and find a specific object. The issue here is how to do this using viro.
Basically, I want to convert longitude and latitude into x,y,z coordinates in Viro.
I am aware of this and also this. Both are not working. I might be doing something wrong, but it is always showing the object just before my phone.

Phone OS: Android
Dev OS: MacOS

ViroPolyline: Indetermined path on ViroARImageMarker.onAnchorFound

Environment

  • Windows + Linux (WSL2)
  • Device: Android 10. Xiaomi Mi 9
  • ViroReact 2.20.2

Description

This is not a bug, just a question or request for help, I'm developing a PoC about a IPS (Indoor Positioning System), I want to show a "path" that joins 2 points in the real world using a ViroPolyline, However the polyline object is shown rotated (over the y-axis) depending on the camera initial orientation when the AR session is created. AFAIK there is no a way to reset the AR session in Android so I tried to "fix" the polyline rotation using the camera and image tracker rotation values, but I cannot find a rule or algorithm that works in all cases.

As an alternative approach, I wonder if I can reset the AR session (in Android) or create a new one using a second ViroARnavigationScene, that is, I would use the first one to locate the ImageTracker and a second one (if I can ensure the camera orientation in front of the image tracker) that will show the "path" to join the 2 points.

I've created a SO Issue (bounty 200) with more details about this case: https://stackoverflow.com/questions/66991820/viropolyline-indetermined-path-on-viroarimagemarker-onanchorfound

I'm not sure if this is the correct place for this question, but after the result with the SO question I'm a bit lost, any help is welcome.

Crash using ViroVRSceneNavigator with Viro360Image.

  1. Development OS: Mac 12.1
  2. Device OS & Version: iOS 15.1
  3. Version: starter-kit
  4. Device(s): iPhone SE

Description

Hello, i've been using the legacy viro react, and manage my way to make it work on android and ios, with last react-native version.

However, after updating iOS to any os higher than 14, there is an issue with the calibration/gyroscope, the screen start jumping everywhere, please look at the video at this post:

viromedia/viro#927

So, after some research it seem that viro media (legacy) is using a deprecated version of cardboard for iOS. It seems there is a new cardboard SDK:

https://developers.google.com/cardboard/develop/ios/quickstart

I was able to run the sample xcode project there and verified that it seems to work as expected on iOS.

Just wanted to know if ViroCommunity version is using the lastest cardboard SDK, as i am unable to test with the starter kit due to a potential issue:

  • When you build the starter kit and try to use a ViroVRSceneNavigator with Viro360Image the app crashes with the same error affecting Videos:

#18

Reproducible Demo

To reproduce, install the started kit and replace the AR Scene with ViroVRSceneNavigator

IMG_0573

<ViroVRSceneNavigator
  initialScene={{scene: VrImage}}
/>

Code for the VrImage Component:

const VrImage = () => {
   return (
     <ViroScene>
       <Viro360Image source={{uri: '...your_360vr_image_experience....'}} />
     </ViroScene>
   );
}

Thanks, a lot.

App crashes on IOS

Hi, any idea why app crashes on IOS, even on example from app store? React Viro is working on Android. Maybe because of issue or issue? How to solve this?

React Viro incompatible with react native AccessibilityRoles

Environment

Please provide the following information about your environment:

  1. Development OS: Mac
  2. Device OS & Version: iOS 14.4
  3. Version: ViroReact 2.20.2 and React Native 0.63.4
  4. Device(s): iOS devices (tested on iPhone 11)

Description

It appears the react-viro library is currently incompatible with a large number of the react native accessibility roles on iOS. Of the 27 accessibility roles listed on the react native site here only 9 appear to be supported when using react viro. For example, when rendering a component using the "radio" accessibility role (anywhere in the app, not just in a viro scene/component) it will throw an exception "Invalid UIAccessibilityTraits 'radio'." (shown below). Unlinking react-viro in the pod file and re-building resolves this issue, however, obviously this breaks all react-viro functionality. The issue is only present for ios, as far as I can tell Android doesn't have this issue.

image

As stated above, any component in the app (including components from external libraries) using one of the unsupported accessibility roles will throw this exception even if no viro component is being rendered.

Reproducible Demo

  1. Clone/Download the viro starter kit here
  2. Run "npm install" / "pod install" / all the other usual setup stuff (I had to upgrade flipper version to 0.74 as well)
  3. Overwrite the main app Component in App.js as follows (remember to import 'Text' and 'SafeAreaView' from the react native library)
    image
  4. Run the app. You should get the exception.

onAnchorFound not triggered in ViroARImageMarked, only in Scene (parent)

Environment:

Development OS: Mac
Android Version 11, API Level 30

Versions:
"@viro-community/react-viro": "^2.20.2",
"react": "17.0.2",
"react-native": "0.66.3",

Issue on OnePlus 7 Pro, OnePlus 6T and Samsung A70

Description

The onAnchorFound function is not triggered when placed in the ViroARImageMarker like this:

<ViroARScene >
        <ViroARImageMarker
            target={"inviteCard"}
            onAnchorFound={_onAnchorFound}
            pauseUpdates={pauseUpdates}>

but it is only triggered when placed in the ViroARScene like this:

<ViroARScene onAnchorFound={_onAnchorFound}>
        <ViroARImageMarker
            target={"inviteCard"}
            pauseUpdates={pauseUpdates}>

causing the body of the ViroARImageMarker not to be rendered when the anchor is found. I would like to render the child components of the ViroARImageMarker when the target is found (as displayed in the ViroReact demos).

Reproducible Demo

import React, { useEffect, useState } from 'react';

const {
  ViroARScene,
  ViroARImageMarker,
  ViroARTrackingTargets,
  ViroAnimations,
  ViroOmniLight,
  ViroNode,
  ViroVideo,
  ViroMaterials,
  ViroSpotLight,
  ViroQuad
} = require('@viro-community/react-viro');


const NewViroTracker = () => {
  const videoPath = require('@assets/videos/wham.mp4');
  const [videoAnimationName] = useState('showVideo');
  const [playAnim, setPlayAnim] = useState(false);
  const [pauseUpdates, setPauseUpdates] = useState(false);


function _onAnchorFound() {
  console.log('Anchor :')
 setPauseUpdates(true);
 setPlayAnim(true);
}

function _onLoadStart(){
    alert('Image recognisition process started')
}

    return (
      <ViroARScene >
        <ViroARImageMarker
            target={"inviteCard"}
            onAnchorFound={_onAnchorFound} 
            pauseUpdates={pauseUpdates}>

            <ViroNode
                animation={{ name: 'showVideo', run: playAnim }}>
                   <ViroVideo
          dragType="FixedToPlane"
          animation={{
            name: videoAnimationName,
            run: playAnim,
          }}
          source={videoPath}
          materials={['chromaKeyFilteredVideo']}
          position={[0, 0, -5]}
          scale={[2, 2, 1]}
          onLoadStart={_onLoadStart}
        />
               
            </ViroNode>

            <ViroOmniLight
                intensity={300}
                position={[-10, 10, 1]}
                color={"#FFFFFF"}
                attenuationStartDistance={20}
                attenuationEndDistance={30} />

            <ViroOmniLight
                intensity={300}
                position={[10, 10, 1]}
                color={"#FFFFFF"}
                attenuationStartDistance={20}
                attenuationEndDistance={30} />

            <ViroOmniLight
                intensity={300}
                position={[-10, -10, 1]}
                color={"#FFFFFF"}
                attenuationStartDistance={20}
                attenuationEndDistance={30} />

            <ViroOmniLight
                intensity={300}
                position={[10, -10, 1]}
                color={"#FFFFFF"}
                attenuationStartDistance={20}
                attenuationEndDistance={30} />

            <ViroSpotLight
                position={[0, 8, -2]}
                color="#ffffff"
                direction={[0, -1, 0]}
                intensity={50}
                attenuationStartDistance={5}
                attenuationEndDistance={10}
                innerAngle={5}
                outerAngle={20}
                castsShadow={true}
            />
            <ViroQuad
                rotation={[-90, 0, 0]}
                position={[0, -1.6, 0]}
                width={5} height={5}
                arShadowReceiver={true}
            />
        </ViroARImageMarker>
        </ViroARScene>
    );
}


ViroARTrackingTargets.createTargets({
  inviteCard: {
    source: require('@assets/images/invite-card.png'),
    orientation: 'Up',
    physicalWidth: 0.12 // real world width in meters
  }
});

ViroMaterials.createMaterials({
  chromaKeyFilteredVideo: {
    chromaKeyFilteringColor: '#00FF00'
  }
});


ViroAnimations.registerAnimations({
  showVideo: {
    properties: { scaleX: 1, scaleY: 1, scaleZ: 1 },
    duration: 1000
  },
  closeVideo: {
    properties: { scaleX: 0, scaleY: 0, scaleZ: 0 },
    duration: 1
  }
});

export default NewViroTracker;

App.tsx:

const { ViroARSceneNavigator } = require('@viro-community/react-viro');
import styled from 'styled-components/native';
import NewViroTracker from 'components/NewViroTracker';

const App = () => {
  return (
    <ViroWrapper
      autofocus={true}
      initialScene={{
        scene: NewViroTracker
      }}
    />
  );
};

export default App;

const ViroWrapper = styled(ViroARSceneNavigator)`
  flex: 1;
`;

Work with a room object exported from RoomScanLiDAR application

Hello! I try to add a 3D Object of a room in actual size (.obj) exported from the RoomScanLiDAR application to my scene but it isn't appearing in the AR scene. I set both of the onLoadStart and onLoadEnd callbacks and they work as expected, which means that the object was successfully loaded. I have added an ambient light to the scene, and another 3d object was rendered as expected. What I am doing wrong?

ViroMaterials.createMaterials({
  test: {
    lightingModel: 'Blinn',
    diffuseColor: 'yellow',
    shininess: 0.5,
  },
});

<ViroARScene
        onTrackingUpdated={this._onInitialized}
      >
        <ViroAmbientLight color="#ffffff" />
        <ViroNode scale={[0.7, 0.7, 0.7]} position={[0, 0, -1]}>
          <ViroText
            text={this.state.text}
            scale={[0.7, 0.7, 0.7]}
            position={[0, 0, 0]}
            style={styles.helloWorldTextStyle}
          />
          <Viro3DObject
            source={require('./src/assets/3d/property-obj.obj')}
            materials={['test']}
            scale={[0.5, 0.5, 0.5]}
            type="OBJ"
            onLoadStart={() => {
              console.log('LoadStart');
            }}
            onLoadEnd={() => {
              console.log('LoadEnd');
            }}
          />
        </ViroNode>
      </ViroARScene>

UPDATE
I've tried to put a small Viro box and small custom object also in the scene and everything was rendered. I think that probably Viro doesn't work with point cloud objects. Is there maybe some way to convert the point cloud to a normal 3d object?

If Viro support Huawei AR Engine?

The devices of Huawei don't support Google ARCore anymore. When I try to run the demos of Viro at Huawei device, it can't work well. And Huawei provided their own AR Engine for developing AR Apps under HMS SDK, so I want to know if support Huawei AR Engine or if have a plan, thanks.

Help: ViroButton position from yaw and pitch radius

Hi guys, in our admin web/browser app for creating static buttons in 360 images (for navigation/tour between 360 images) we use this tool Pannellum
In mobile app we use React Viro as a view of the tour = 360 images + buttons as links.
In Pannellum buttons/hotspots are positioned in 360 images with yaw and pitch (in radians).
ViroButton uses for positioning Cartesian position as [x,y,z] .
Is there a way how to convert this yaw and pitch into Cartesian cooridinates?

ViroButton - onClick doesn't trigger

Requirements:

Please go through this checklist before opening a new issue

Environment

Please provide the following information about your environment:

  1. Development OS: Mac
  2. Device OS & Version: iOS 15.0.2
  3. Version: ViroReact 2.21.0 - React Native 0.65.1
  4. Device(s): iPhone Xr

Description

I'm using this wonderful library to achieve a treasure hunting: pratically, the user sees a 2D map where he is geolocated and, when he's near a treasure, start the ar mode where the app shows it as a ViroButton; clicking the button, the user can collect the treasure.
Unfortunately, the onClick method doesn't work every time and it is possible that sometimes the event does not trigger, forcing the user to exit and enter again (sometimes it works, sometimes it doesn't work - maybe some reset).

I see some similar issues in viromedia's repository, but without solutions or with some workaround valid for that repository.
I don't use last version of Viro, cause the error during installation talked in other issues.

Reproducible Demo

This is more or less my code of the ar mode, I cut the useless parts.
https://pastebin.com/0bd9cqTj

Thanks to everyone!

Android App is Crashed when Selecting an Object to Show on the Device

Screenshot 2021-06-09 at 12 39 40 PM

Environment

Please provide the following information about your environment:

  1. Development OS: Mac
  2. Device OS & Version: What Android OS version (11.0 etc.) is your device running on?
  3. Version: @ViroCommunity/ViroReact version 2.20.2 and React Native version 0.64.2
  4. Device(s): What device(s) are you are seeing the issue on (i.e. Samsung Galaxy M30s etc)

Description

2021-06-09 12:31:47.733 24384-24837/com.virovrsampleapp A/virovrsampleap: runtime.cc:685] JNI DETECTED ERROR IN APPLICATION: JNI NewStringUTF called with pending exception java.lang.NumberFormatException: For input string: "coffee_mug_specular.png"
runtime.cc:685] at int java.lang.Integer.parseInt(java.lang.String, int) (Integer.java:615)
runtime.cc:685] at java.lang.Integer java.lang.Integer.valueOf(java.lang.String) (Integer.java:801)
runtime.cc:685] at void com.viro.core.internal.PlatformUtil.writeResourceToFile(java.lang.String, java.io.File) (PlatformUtil.java:342)
runtime.cc:685] at java.lang.String com.viro.core.internal.PlatformUtil.copyResourceToFile(java.lang.String) (PlatformUtil.java:319)
runtime.cc:685] at void com.viro.core.internal.PlatformUtil.runTask(int) (PlatformUtil.java:-2)
runtime.cc:685] at void com.viro.core.internal.PlatformUtil.access$000(int) (PlatformUtil.java:77)
runtime.cc:685] at void com.viro.core.internal.PlatformUtil$TaskRunnable.run() (PlatformUtil.java:97)
runtime.cc:685] at void android.opengl.GLSurfaceView$GLThread.guardedRun() (GLSurfaceView.java:1520)
runtime.cc:685] at void android.opengl.GLSurfaceView$GLThread.run() (GLSurfaceView.java:1286)
runtime.cc:685]
runtime.cc:685] in call to NewStringUTF
runtime.cc:685] from void com.viro.core.internal.PlatformUtil.runTask(int)

[Feature Request] Front Camera

Requirements:

Please go through this checklist before opening a new issue

Environment

Please provide the following information about your environment:

  1. Development OS: Mac
  2. Device OS & Version: Android 11
  3. Version: ViroReact latest and React Native latest
  4. Device(s): Samsung S10 plus

Description

I couldn't find anything specific in the documentation, how to switch to front facing camera?

Hi , am using react-native version 0.64.2 , is it comppatible with viro

Requirements:

Please go through this checklist before opening a new issue

Environment

Please provide the following information about your environment:

  1. Development OS: Mac, Windows, Linux
  2. Device OS & Version: What Android OS version (7.0, 8.0, etc.) or iOS version (11.0, 11.2) is your device running on?
  3. Version: ViroReact version and React Native version
  4. Device(s): What device(s) are you are seeing the issue on (i.e. iPhone X, Samsung Note 8, etc)

Description

Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know.

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, screen capture, video recording. The more information you provide, the better we can support you.

How to get onHover event if points are not in the center of the screen

Environment

Please provide the following information about your environment:

  1. Development OS: Mac, Windows, Linux
    macOS Big Sur 11.4

  2. Device OS & Version: What Android OS version (7.0, 8.0, etc.) or iOS version (11.0, 11.2) is your device running on?
    iOS 14.6

  3. Version: ViroReact version and React Native version
    ViroReact: 2.20.2
    React Native: 0.64.1

  4. Device(s): What device(s) are you are seeing the issue on (i.e. iPhone X, Samsung Note 8, etc)
    iPhoneSE

Description

I used ViroPolygon to map cell towers around my area. I need to show the details about the cell tower when hovering around. onHover is only working in the middle of the screen so the cell towers which are far from my location will not trigger the onHover until I forcefully center it to the screen. Is there a way that I can trigger onHover on those ViroPolygons.

As I marked on the screenshot, I have a difficulty to get the onHover event if the ViroPolygons are not in the center.

IMG_E6FDDC58A69E-1

Reproducible Demo

Bitcode Enable in xcode

/node_modules/@viro-community/react-viro/ios/dist/lib/libViroReact.a(VRTPortalScene.o)' does not contain bitcode. You must rebuild it with bitcode enabled (Xcode setting ENABLE_BITCODE), obtain an updated library from the vendor, or disable bitcode for this target. file '/node_modules/@viro-community/react-viro/ios/dist/lib/libViroReact.a' for architecture arm64

App size is going too high so we need to decrease it but due to no support from react-viro we are not able to Enable the bitcode.

Any help would be appreciated.Thanks in advance

Can't dynamically add the material to a OBJ retrieved from the API

Environment

Please provide the following information about your environment:

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

Description

From my own API I've downloaded a OBJ file including mtl file and the resources referenced in the material file. The next step was to dynamically load the model from the internal storage and set the materials for it. Loading the model works fine and the model is displayed as expected. The materials however are never set for the object.

Since we might need to use several diffuse_textures for different parts of the model I can't create the material myself. No errors are actually thrown as far as I can tell but the material is never loaded.

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, screen capture, video recording. The more information you provide, the better we can support you.

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="OBJ"
                    onError={_onError}
                    scale={[.9,.9,.9]}
                    rotation={[0, 0, 0]}
                    position={[-0.1, -1.5, -2]}
                    onLoadEnd={_onModelLoad}
                    resources={[
                        {uri: `${RNFS.DocumentDirectoryPath}/AR/object_mtl.mtl`},
                        {uri: `${RNFS.DocumentDirectoryPath}/AR/object_1.png`},
                        {uri: `${RNFS.DocumentDirectoryPath}/AR/object_2.png`},
                        {uri: `${RNFS.DocumentDirectoryPath}/AR/object_3.png`},
                        {uri: `${RNFS.DocumentDirectoryPath}/AR/object_4.png`}
                    ]}
                    source={{uri: `${RNFS.DocumentDirectoryPath}/AR/oobject.obj`}}
                />
            </ViroARScene>
        )
    }

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

If other details are required, please let me know and I'll try and update the issue with the missing information

Cloud anchors / scene persistency

Description

I've been looking a bit and not seeing any info on cloud anchors or scene persistency. Is this available in Viro yet? Having anchors be able to reappear in accurate positions (not geo coordinates because GPS is loose) is an extremely powerful feature enabling software to be used to augment a user's real life space without image or object markers.

There is no any NativeModules of Viro in 2.21.1.

Requirements:

Please go through this checklist before opening a new issue

Environment

Please provide the following information about your environment:

  1. Development OS: Mac
  2. Device OS & Version: iOS 14.4.2
  3. Version: ViroReact version and React Native version : ViroReact : 2.21.1, ReactNative : 0.63.4
  4. Device(s): iPhone 11

Description

There is no any NativeModules of Viro.

import {NativeModules} from 'react-native'
console.log(NativeModules.VRTARTrackingTargetsModule) //  => null

2.21.0 is works. But there is no any modules in only 2.21.1 version

VR in iOS just display a blank screen.

Environment

Please provide the following information about your environment:

  1. Development OS: Mac
  2. Device OS & Version: iOS 14.4 iPhone SE
  3. Version: test on both 2.19.0 and 2.20.0
  4. Device(s): iPhone SE

Description

When using the ViroVRSceneNavigator and ViroScene in iOS to display the VR, the device just display a blank screen without any error or exception.

Reproducible Demo

I had follow the instruction on the Starter Kit page:
https://github.com/ViroCommunity/starter-kit

  1. git clone https://github.com/ViroCommunity/starter-kit.git
  2. cd starter-kit
  3. npm install
  4. npx pod-install (iOS)
  5. (My step) Edit the App.js in the root folder by changing the ViroARSceneNavigator to ViroVRSceneNavigator and the ViroARScene to ViroScene. I also import the ViroVRSceneNavigator and ViroScene at the top of App.js
  6. npx react-native run-android or npx react-native run-ios

It work fine in Android but not in iOS. Please help.

ViroVideo does not work on iOS

Environment

Please provide the following information about your environment:

  1. Development OS: Mac
  2. Device OS & Version: iOS version 13.6.1
  3. Version: ViroReact 2.20.2, React Native 0.64.0
  4. Device(s): iPhone XS

Description

While attempting to use any video on iOS, this error pops up. I don't know what is causing it.

unrecognized selector sent to instance

Reproducible Demo

<ViroVideo
  source={require('../assets/ar/forest.mp4')}
  width={0.175}
  height={0.2}
  loop={true}
  muted={true}
/>

Unable to load .obj file with .mtl

Requirements:

Please go through this checklist before opening a new issue

Environment

Please provide the following information about your environment:

  1. Development OS: Mac
  2. Device OS & Version: iOS version 14.7.1
  3. Version: ViroReact version 2.20.2 and React Native version 0.65.1
  4. Device(s): iPhone 7

Description

Using a fresh clone of the starter-kit repo to try to render my 3D object but all I'm seeing is the "Hello World". I have tried adding ViroAmbientLight as per docs and I'm using the resources prop to require all my files.

This is my code:

    <ViroARScene onTrackingUpdated={onInitialized}>
      <ViroAmbientLight color="#ffffff" />
      <ViroText
        text={text}
        scale={[0.5, 0.5, 0.5]}
        position={[0, 0, -1]}
        style={styles.helloWorldTextStyle}
      />
      <Viro3DObject
        scale={[0.1, 0.1, 0.1]}
        position={[0, -0.5, -1]}
        source={require('./res/car/prius.obj')}
        resources={[
          require('./res/car/prius.mtl'),
          require('./res/car/Prius_Color.png'),
          require('./res/car/Prius_Normal.png'),
          require('./res/car/Prius_Rough.png'),
          require('./res/car/Tire_Normal.png'),
          require('./res/car/Tire_Rough.png'),
          require('./res/car/Plate.png'),
        ]}
        type="OBJ"
      />

      <ViroAmbientLight />
    </ViroARScene>

Anyone know what's wrong and/or how to fix this issue?

Method ViroARScene.getCameraOrientationAsync() returns strange values in rotation array

Environment

  • Windows + Linux (WSL2)
  • Device: Android 10. Xiaomi Mi 9
  • ViroReact 2.20.2

Description

The ViroARScene.getCameraOrientationAsync() returns unexpected values in rotation array when I rotate the device over the y-axis, trying to keep the x and z axis fixed.

Specifically, when the y-axis reaches the -90ΒΊ the x/z values change to +/180ΒΊ and from this point the y-axis values are getting close to 0, for instance, instead of -135ΒΊ the y-axis value is -45 with the x/z values in +/-180. In other words the y-axis values NEVER return an absolute value over 90.

So, there are some questions that I cannot find out a reasonable answer:

  • Why the absolute value of y-axis is never greater than 90 ?
  • Why the x/z values change to +/-180ΒΊ when I reach some point (+/-90ΒΊ in y-axis) if I'm just rotating the device over the y-axis.

Is this the expeted behavior ? If so, could anyone explain these values (please).

I've designed some mockups with the real rotation value got at each position and the "expected" value according to me (I know that there are an error margen of about 6 degrees):

Initial position. Expected values: [0,0,0]
image

Rotated -45ΒΊ. Expected values: [0,-45,0]
image

Rotated -90ΒΊ. Expected values: [0,-90,0]
image

Rotated -135ΒΊ. Expected values: [0,-135,0]
image

Rotated +/-180ΒΊ. Expected value: [0, +/-180, 0]
image

I suspect that the answer to this issue can help me with my other problem with the polyline rotation: #11

Reproducible Demo

To get the values I've been rotating the device in vertical position, when I reached the desired rotation I put my hand over the camera to force the event onTrackingUpdated to be fired.

<ViroARScene onTrackingUpdated={this._onInitialized} anchorDetectionTypes={"PlanesVertical"}>
...
</ViroARScene>

_onInitialized(state, reason) {
    if (state === ViroConstants.TRACKING_NORMAL && reason === ViroConstants.TRACKING_REASON_NONE) {
      console.log('Tracking initiated NavScene');
      this._scene.getCameraOrientationAsync().then(
        (orientation) => {
          console.log('Cam rot:', round(orientation.rotation));
        });
    }
  }

App Crashed in Android device when detecting Plane in react-viro

Environment

Please provide the following information about your environment:

  1. Development OS: Mac
  2. Device OS & Version: What Android OS version (11.0, etc.) is your device running on?
  3. Version: ViroReact version - 2.20.2 & React Native version - 0.64.2
  4. Device(s): What device(s) are you are seeing the issue on (i.e. Samsung Galaxy M30s etc)

Description

Inside My RN App when App Started and Camera Opened and Device Detecting the Surface some it can Shows the Plane White and after that App Crashed here are the Logs After the App Crashed in Android Studio

Please Provide the Solve if Anyone Else Facing this Issue

Screenshot 2021-06-29 at 11 46 31 AM
Screenshot 2021-06-29 at 11 47 50 AM

Case use: Looking some info

Hello team!

I am looking for information and I would like to know if you can help me. I am interested in knowing if the following is possible:

I want to use the library to show information ONLY when a certain object appears in the scene, for example, a computer, then its specifications will appear in scene. Is it possible to achieve this from the library itself?

If not, then I would have to have some object classifier task that conditions the appearance of information on the screen, correct?

I hope you can help me and any idea is welcome,

Greetings!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.