viromedia/viro

Marker based AR not working

retr00h opened this issue · 1 comments

Environment

Please provide the following information about your environment:

  1. Development OS: Windows
  2. Device OS & Version: Android 11.
  3. Version: ViroReact version 2.20.2, React Native version 0.65.1
  4. Device(s): tested on Samsung Galaxy A50

Description

I have to display some text in AR when a certain image is detected. I have followed the documentation but the text is not appearing (or the image is not being recognized).

Reproducible Demo

  1. Clone the Viro starter kit repository
  2. Refactor ViroConstants to ViroTrackingStateConstants
  3. Add import { ViroARImageMarker, ViroARTrackingTargets } from '@viro-community/react-viro' to the imports
  4. Download this image, rename it as logo.png and place it in the same directory as App.js
  5. Paste this right after the imports in order to register the image as a marker:
ViroARTrackingTargets.createTargets({
  "logo": {
      source: require('./logo.png'),
      orientation: "Up",
      physicalWidth: 0.1 // real world width in meters
      type: "Image"
  },
});
  1. In the return function defined in the HelloWorldAR function, enclose the <ViroText> in a <ViroARImageMarker target={"logo"}> tag; it should result in this:
return (
  <ViroARScene onTrackingUpdated={onInitialized}>
    <ViroARImageMarker target={"logo"}>
      <ViroText
         text={text}
         scale={[0.5, 0.5, 0.5]}
         position={[0, 0, -1]}
         style={styles.helloWorldTextStyle}
      />
    </ViroARImageMarker>
  </ViroARScene>
);
  1. At this point the app should display a "Hello World" text over that image when pointing the camera at it, but this isn't happening
utiq commented

@retr00h did you find a solution?