ArCore Augmented Images will be place horizontal on the wall

user_5115254 0
Viewed 1828

I am trying to make something like this: https://www.youtube.com/watch?v=sX1aOBlwGWc enter image description here

I can render an image in AR. But it always placed with the wrong orientation. What I actually want to achieve is that an image is overlayed over the current poster, picture, banner.

This is my code:

My config:

config.focusMode = Config.FocusMode.AUTO
config.updateMode = Config.UpdateMode.LATEST_CAMERA_IMAGE
config.planeFindingMode = Config.PlaneFindingMode.VERTICAL

My code after an image is recognised.

ViewRenderable.builder()
     .setView(context, R.layout.ar_layout)
     .build()
     .thenAccept {
          addNodeToScene(arFragment, image, it)
     }

private fun addNodeToScene(fragment: ArFragment, image: AugmentedImage, renderable: ViewRenderable) {
    val node = Node()
    node.renderable = renderable
    val pose = image.centerPose
    val anchorNode = AnchorNode(image.createAnchor(pose))
    anchorNode.addChild(node)
    fragment.arSceneView.scene.addChild(anchorNode)
    Toast.makeText(fragment.context, "Added", Toast.LENGTH_SHORT).show()
}

the ar_layout file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="50dp"
        android:layout_height="75dp"
        android:src="@drawable/poster" />
</LinearLayout>

I found some tutorials on how you need to implement it in Unity. But that is not how I want to do it. Can someone help me figure this out?

What I got at this point:

enter image description here

arcore kotlin android
3 Answers

I figured it out by creating my own cube (flat cube) and adding the image as a texture.

fun renderImage(arFragment: ArFragment, anchor: Anchor) {
    Texture.builder().setSource(BitmapFactory.decodeResource(arFragment.resources, R.raw.sample_image))
            .build()
            .thenAccept {
                MaterialFactory.makeOpaqueWithTexture(arFragment.context, it)
                        .thenAccept { material ->
                            val modelRenderable = ShapeFactory.makeCube(
                                    Vector3(0.84f, 0.01f, 1.12f),
                                    Vector3(0.0f, 0.0f, 0.0f),
                                    material)
                            addNodeToScene(arFragment, anchor, modelRenderable)
                        }
            }
}

private fun addNodeToScene(fragment: ArFragment, anchor: Anchor, renderable: Renderable) {
    val node = Node()
    node.renderable = renderable
    val anchorNode = AnchorNode(anchor)
    anchorNode.addChild(node)

    fragment.arSceneView.scene.addChild(anchorNode)
    Toast.makeText(fragment.context, "Added", Toast.LENGTH_SHORT).show()
}
user_51152540

You should be able to change the orientation of the rendered image/view/object by using setLocalRotation.

For example, in my project, I have used the below code, which makes the rendered image face directly outward from the detected image.

Node cornerNode;
localPosition.set(-0.0f * image.getExtentX(), 0.1f, +0.5f * image.getExtentZ());
cornerNode = new Node();
cornerNode.setParent(this);
cornerNode.setLocalPosition(localPosition);
cornerNode.setLocalRotation(Quaternion.axisAngle(new Vector3(-1f, 0, 0), 90f));
cornerNode.setRenderable(testViewRenderable);
user_109236520

The AnchorNode follows the pose of the AugmentedImage and therefore, you cannot change localRotation or localPosition on this node. From AnchorNode.setLocalRotation: "Set the local-space rotation of this node if it is not anchored."

You can change the local transform by introducing an intermediate Node:

                    val base = AnchorNode()
                    base.anchor = augmentedImage.createAnchor(augmentedImage.centerPose)

                    val node = Node()
                    node.setParent(base)
                    node.localPosition = Vector3(0f, 0f, augmentedImage.extentZ/2)
                    node.localRotation = Quaternion.axisAngle(Vector3(1.0f, 0f, 0f), -90f)
                    node.localScale = Vector3(augmentedImage.extentX, augmentedImage.extentZ, 0f)

                    node.renderable = renderable
user_7526300
Related