ViroImage is wrongly rotated in Vertical Plane

Environment

Please provide the following information about your environment:

  1. Development OS: Mac, Windows, Linux
  • macOS Sierra, also happens on Windows 10
  1. Device OS & Version: What Android OS version (7.0, 8.0, etc.) or iOS version (11.0, 11.2) is your device running on?
    Android Oreo (8.0)

  2. Version: ViroReact version and React Native version
    ViroReact: 2.13.0
    ReactNative: 0.57.7

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

Description

After detecting and selecting a vertical plane with ViroARPlaneSelector, the inner ViroImage default position is wrongly rendered.

Reproducible Demo

Use the following code on the HelloWorldSceneAR:

  render() {
    return (
      <ViroARScene
        anchorDetectionTypes={["PlanesVertical"]}
        onTrackingUpdated={this._onInitialized}
      >
        <ViroText
          text={this.state.text}
          scale={[0.5, 0.5, 0.5]}
          position={[0, 0, -1]}
          style={styles.helloWorldTextStyle}
        />
        <ViroARPlaneSelector alignment="Vertical">
          <ViroImage
            height={1}
            width={1}
            placeholderSource={require("./res/some/image.png")}
            source={require("./res/some/image.png")}
          />
        </ViroARPlaneSelector>
      </ViroARScene>
    );
  }

The image is wrongly rotated initially, and wrongly positioned because it’s bottom border collides directly with the plane and is not perpendicular to it.

Is there a way to fix this?

Test image
starry

Failed result
ar

You guys did it on the following medium post

https://blog.viromedia.com/new-release-viroreact-2-7-virocore-1-7-arcore-1-2-gltf-arkit-awe-73a59712ddbf?gi=f86b023fe158

1 possible answer(s) on “ViroImage is wrongly rotated in Vertical Plane