How to adjust ViewRenderable to match AugmentedImage size?

Question

I'm making a small AR app on Android to detect GIFs from a snapshot and overlay the actual GIF using AugmentedImages, but I can't get the size of the ViewRenderable to match up with the detected image so it perfectly overlays.

I'm following the AugmentedImages Sceneform sample from Google, changing it to Kotlin and using my own images manually added to the AugmentedImageDatabase.

Below is the closest I've been able to get, but it still doesn't match up completely. gifView is set with the ViewRenderable.builder() and uses a simple XML file, shown after the code block. I'm using Glide in the .thenAccept of the builder to load the correct GIF from a URL.

AugmentedImageNode

private var gifView: ViewRenderable? = null
...
fun setImageToNode(image: AugmentedImage) {
    anchor = image.createAnchor(image.centerPose)

    gifView?.sizer = FixedHeightViewSizer(image.extentZ)

    val pose = Pose.makeTranslation(0.0f, 0.0f, 0.0f)
    val localPosition = Vector3(pose.tx(), pose.ty(), pose.tz())
    val centerNode = Node()
    centerNode.setParent(this)
    centerNode.localPosition = localPosition
    centerNode.localRotation = Quaternion(pose.qx(), 90f, -90f, pose.qw())
    centerNode.renderable = gifView
    centerNode.localScale = Vector3(image.extentX * 15f, image.extentZ * 30f, 1.0f)
}

R.layout.image_item

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/easy_button" />

No error messages are appearing, but the rendered image does not match the size of the detected image. I would like this to be dynamic since obviously not every GIF has the same dimensions.

See this screenshot and notice how the detected image is slightly larger and looks like it's making a border around the clearer rendered image? (Not related to this question, but my camera isn't autofocusing even though I set the correct configuration setting)

score 1 · Answer 1 · answered Sep 30 '19 at 18:52

I found a way to calculate the scale a little more accurately. I went with the approach of instead of trying to scale the size of the renderable/ImageView to fit the image, I would just change the "scale" of the world so that however many pixels wide the image was, it was the same size in meters as the detected augmented image. I basically had to figure out how many pixels would be in a meter if the augmented image was a certain size. Below is the code I am using:

val imageWidth = 400 // TODO Get actual width of image dynamically, just luck that GIPHY images are 400 pixels wide
val viewWidth = (imageWidth / image.extentX).toInt()
gifView?.sizer = DpToMetersViewSizer(viewWidth)

val pose = Pose.makeTranslation(0.0f, 0.0f, 0.0f)
val localPosition = Vector3(pose.tx(), pose.ty(), pose.tz())
val centerNode = Node()
centerNode.setParent(this)
centerNode.localPosition = localPosition
centerNode.localRotation = Quaternion(pose.qx(), 90f, -90f, pose.qw())
centerNode.renderable = gifView

This gets the rendered GIF to be much closer to the actual size of the detected image. I'll keep looking for a better approach.

How to adjust ViewRenderable to match AugmentedImage size?

1 Answers1