How to display PNG image in ARCore?

Question

I want to display 2d png image in Arcore. I don’t want to use obj, .smf ,imgdb file, and 3D image. I have already referred many links but none of them showing how to display only 2d png image using Arcore.

https://github.com/google-ar/arcore-android-sdk

https://developers.google.com/ar/develop/java/quickstart

use the provided tool to reference your png in a new imgdb file. https://developers.google.com/ar/develop/c/augmented-images/arcoreimg — njzk2, Sep 10 '18 at 04:30
But that PNG image is not static means All image get by the server — Mahesh Vayak, Sep 10 '18 at 04:33
I don't really know arcore, but it looks like nothing prevents you from directly adding images to an image database at runtime: https://developers.google.com/ar/develop/java/augmented-images/guide — njzk2, Sep 10 '18 at 04:37
I know I have checked example and augmented image use obj file. I don't want it because I want to display a simple png file — Mahesh Vayak, Sep 10 '18 at 04:51
Can you clarify where/how in 3D space you want to draw your png or is in a frame for the scene (like a heads up display). — Morrison Chang, Sep 10 '18 at 05:12
I want to display a 2D png image on the wall and repeat this image — Mahesh Vayak, Sep 10 '18 at 05:17
You should transform your 2d image in a 3D obj. Put his "back" as bottom. Use vertical recognition. So you can anchor the object in the wall — Canato, Sep 10 '18 at 12:21
Another option is use a card with a layout in insert a ImageView in this layout, but will not look like a print in the wall, will look more like a tag in somepoint that you can see from any direction — Canato, Sep 10 '18 at 12:24
@MaheshVayak the documentation I linked clearly shows that you can create an image database without any file, and then add jpg or png file to that database. — njzk2, Sep 11 '18 at 03:14
@njzk2 I was referred but It returns 3D object render and I want the 2D image. If you have Idea about then please post answer or sample code link. — Mahesh Vayak, Sep 11 '18 at 03:46

score 8 · Answer 1 · answered Sep 11 '18 at 05:29

8

If you use ViewRenderable of Sceneform, then you can create a wall in AR space from 2D png image just like standard android widgets.

This is an example of layout xml for ViewRenderable. As you know, it's just a layout xml for Android apps ;)

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/imageCard"
    android:layout_width="123dp"
    android:layout_height="197dp"
    android:src="@drawable/Your_Image_Resource" />

And you can get ImageView instance in your Java code like below to set a source image dynamically.

ViewRenderable.builder()
    .setView(fragment.getContext(), R.layout.imgboard)
    .build()
    .thenAccept(renderable -> {
        ImageView imgView = (ImageView)renderrable.getView();
    });

This is my sample shot with using ViewRenderable, the object on the far right was created from a png image.

answered Sep 11 '18 at 05:29

Kenichi Takahashi

106
3

1

Thanks for the answer but Can I repeat the image because I want to scan wall and scan area repeat the same image. – Mahesh Vayak Sep 11 '18 at 06:10
I would also be interessted in such an approach – Ale4303 Jul 12 '20 at 10:11
1

Can you give and example without using Sceneform, only using Google ARCore, because Sceneform is deprecated: https://stackoverflow.com/a/62694454/8362967 – LEGEND MORTAL Oct 21 '20 at 10:53
It crashes in my app – Gulnaz Ghanchi Jan 07 '21 at 14:01

score 0 · Answer 2 · answered Nov 27 '20 at 17:02

0

I made a free app that tiles hundreds of png files (for a computer science prof). You can try it in a big area about 2x4 meters: https://play.google.com/store/apps/details?id=a.FlatKmapAR

To start with, just take the HelloAR example and replace the Andy.obj file with a square.obj that's only a square object (less than 10 lines of text) and replace Andy.png with your square.png file. Since they use the wave object format, that's the easiest way I know how to do it. Once you've got that, to tile them create a grid.obj with multiple squares, and so forth...

answered Nov 27 '20 at 17:02

YinOrYan

74
5

Hi YinOrYan: Can you provide further information or a github project? There are several vague points here. "replace the Andy.obj file with a square.obj that's only a square object (less than 10 lines of text)", I don't understand this. Then I replace the png with my own png? Thx – basti12354 Nov 30 '20 at 07:38
basti, The HelloAR example comes with Google's AR Core open source code. It uses only one .obj file and one .png file. The .obj is a very complex model of the Android Bug Character. All you have got to do is replace it with a simple square or grid. The .obj format in very straightforward and has been around since the 1980's. You don't need any app to generate it. Just key in a few lines of text... – YinOrYan Nov 30 '20 at 15:51
I cloned the sample from here (https://github.com/google-ar/arcore-android-sdk/tree/9461160f6b1ebaf9070368b52795444267b7acab) then I try to create a .obj with square. If I open it with Paint3D it looks like what I want, but I downloaded a image from the internet to replace the png and all I see is a plane with orange color. ( v 0.000000 2.000000 0.000000 v 0.000000 0.000000 0.000000 v 2.000000 0.000000 0.000000 v 2.000000 2.000000 0.000000 f 1 2 3 4) I created a github project: https://github.com/basti12354/AndroidARExample (Maybe you can take a look) – basti12354 Dec 05 '20 at 11:14
First of all there's some extra leading spaces that may be a problem, but then you need a vt and some slashes in the f's. Also, your image should have x=y like 1024x1024 or the Mona Lisa is going to be a fat-chick, or worse, not show up at all... – YinOrYan Dec 05 '20 at 18:29
See the new answer above, since these comment cannot display code... – YinOrYan Dec 06 '20 at 14:48

score 0 · Answer 3 · answered Dec 06 '20 at 14:46

0

Yes it actually needs some vt to define the texture, in addition to at least one vn to define a normal, so then the f needs / for polygon/texture/normal like this:

v 0.000000 2.000000 0.000000
v 0.000000 0.000000 0.000000
v 2.000000 0.000000 0.000000
v 2.000000 2.000000 0.000000
vt 0.0 0.0
vt 1.0 0.0
vt 1.0 1.0
vt 1.0 1.0
vn 0.0 1.0 0.0
f 1/1/1 2/2/1 3/3/1 4/4/1

answered Dec 06 '20 at 14:46

YinOrYan

74
5

thx, I try to use this and as you suggested I used 1024x1024 px image. I updated my github repository. But if I try to place it, it is warped and has the wrong color. https://github.com/basti12354/AndroidARExample/blob/master/Screenshot_20201207_120931_com.google.ar.core.examples.java.helloar.jpg (I used a round captain america icon with 1024x1024, but also Mona Lisa was not correctly displayed) – basti12354 Dec 07 '20 at 11:15
Oh sorry, that's probably because I just tacked-on the last 6 lines to your file, so you will have to change the order the vt's to match the top... – YinOrYan Dec 07 '20 at 18:23

How to display PNG image in ARCore?

3 Answers3

Linked