reactvision / viro Goto Github PK
View Code? Open in Web Editor NEWViroReact: The AR and VR library for React Native π³πππ€π
License: MIT License
ViroReact: The AR and VR library for React Native π³πππ€π
License: MIT License
As the title says, can you help me figure out, why this value is zero, the rest have value like rotation
, etc.
Is there any future plan to add typescript support?
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
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
Please go through this checklist before opening a new issue
Please provide the following information about your environment:
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.
export default function Screen() {
return (
<ViroVRSceneNavigator
initialScene={{
scene: MyStartScene,
}}
/>
);
}
export const MyStartScene = () => {
return (
<ViroScene>
<Viro360Image source={require('../../../../assets/images/grid.jpeg')} />
</ViroScene>
);
};
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.
If I check the same file on the 2.21.0 release this file is bigger
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
Please provide the following information about your environment:
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.
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
Please provide the following information about your environment:
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).
Just clone the starter-kit and follow this documentation
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.
Please provide the following information about your environment:
When using the ARPlaneSelector on iOS on "vertical" mode, it does not detect any vertical planes. It works on Android!
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
Please go through this checklist before opening a new issue
Please provide the following information about your environment:
"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"
},
I just trying to initialize my app with Expo bare work flow + @viro-community/react-viro
you can reproduce this by following this
npm install --global expo-cli ( my expo-cli version is 4.11.0)
expo init -> select bare work flow
npm install
npm install --save @viro-community/react-viro
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'
npx pod-install
put some viro react code on App.js
npx react-native run ios ( just to check the linking work well)
-> have error
Invariant Violation: requireNativeComponent: "VRTText" was not found in the UIManager.
run xcode, and excute with real device
->same error with 8
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],
],
},
}}
/>
I am getting crash when using stack navigator inside the tab navigator.Happens when going back to previous screen.
Any help would be appreciated.These are the details of the versions Im using:
"@react-navigation/native": "^5.9.4",
"@react-navigation/material-top-tabs": "^5.3.15",
"@react-navigation/stack": "^5.14.5",
"react-native": "0.64.2",
"@viro-community/react-viro": "git+https://github.com/virocommunity/viro.git",
Please provide the following information about your environment:
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:
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
Please go through this checklist before opening a new issue
Please provide the following information about your environment:
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).
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.
The assets for the hello world section of the React Viro documentation are no longer available.
@doranteseduardo : Thanks for your effort to make thins nice component.
However, I have the following problem.
Please provide the following information about your environment:
Development OS: Mac
Device OS & Version: What Android OS 10, android
Version: ViroReact version:
"@viro-community/react-viro": "^2.20.2",
and React Native version:
"react-native": "0.65.1"
Device(s): Samsung
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 . 3D Model doesnt show up. Only a black screen occurs. Same code works on ios perfectly.
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
Please provide the following information about your environment:
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());
}
/**
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
Please go through this checklist before opening a new issue
Please provide the following information about your environment:
Emissive texture is not showing.
try this model on my Pixel 4:
Screenshot from glTF Viewer
Please provide the following information about your environment:
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.
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
Hi, I have built the virocore-*.aar
from the https://github.com/ViroCommunity/virocore project, and I would like to include that file in this project, in order to use ViroCore changes in the React app.
Is this possible?
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.
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:
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:
To reproduce, install the started kit and replace the AR Scene with ViroVRSceneNavigator
<ViroVRSceneNavigator
initialScene={{scene: VrImage}}
/>
Code for the VrImage Component:
const VrImage = () => {
return (
<ViroScene>
<Viro360Image source={{uri: '...your_360vr_image_experience....'}} />
</ViroScene>
);
}
Thanks, a lot.
Please provide the following information about your environment:
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.
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.
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
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).
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;
`;
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?
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.
Whenever I run the app, I get the AR/VR choice, then when clicking one, get error about VRTText on both devices.
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?
Please go through this checklist before opening a new issue
Please provide the following information about your environment:
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.
This is more or less my code of the ar mode, I cut the useless parts.
https://pastebin.com/0bd9cqTj
Thanks to everyone!
Please provide the following information about your environment:
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)
Please go through this checklist before opening a new issue
Please provide the following information about your environment:
I couldn't find anything specific in the documentation, how to switch to front facing camera?
Please go through this checklist before opening a new issue
Please provide the following information about your environment:
Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know.
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.
Please provide the following information about your environment:
Development OS: Mac, Windows, Linux
macOS Big Sur 11.4
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
Version: ViroReact version and React Native version
ViroReact: 2.20.2
React Native: 0.64.1
Device(s): What device(s) are you are seeing the issue on (i.e. iPhone X, Samsung Note 8, etc)
iPhoneSE
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.
/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
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
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.
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
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.
Please go through this checklist before opening a new issue
Please provide the following information about your environment:
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
Please provide the following information about your environment:
When using the ViroVRSceneNavigator and ViroScene in iOS to display the VR, the device just display a blank screen without any error or exception.
I had follow the instruction on the Starter Kit page:
https://github.com/ViroCommunity/starter-kit
It work fine in Android but not in iOS. Please help.
Please provide the following information about your environment:
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
<ViroVideo
source={require('../assets/ar/forest.mp4')}
width={0.175}
height={0.2}
loop={true}
muted={true}
/>
Please go through this checklist before opening a new issue
Please provide the following information about your environment:
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?
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:
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]
Rotated -45ΒΊ. Expected values: [0,-45,0]
Rotated -90ΒΊ. Expected values: [0,-90,0]
Rotated -135ΒΊ. Expected values: [0,-135,0]
Rotated +/-180ΒΊ. Expected value: [0, +/-180, 0]
I suspect that the answer to this issue can help me with my other problem with the polyline rotation: #11
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));
});
}
}
I tried adding key with React.createRef on ViroARScene component but the result ref key is null.
I cant find any documentation on this.
Also, this code this.refs["arscene"]
is not working since refs is deprecated.
Need some help on this. Thank you.
Please provide the following information about your environment:
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
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.