Gambar Augmented ARCore

ARCore adalah platform untuk membuat aplikasi augmented reality di Android. Gambar Augmented memungkinkan Anda membuat aplikasi AR yang dapat mengenali gambar yang telah didaftarkan sebelumnya dan menambatkan konten virtual ke dalamnya.

Codelab ini memandu Anda dalam memodifikasi aplikasi contoh ARCore yang ada untuk memasukkan Gambar Augmented yang berpindah atau diam di tempat.

Yang akan Anda buat

Dalam codelab ini, Anda akan membuat aplikasi contoh ARCore yang sudah ada sebelumnya. Pada akhir codelab, aplikasi Anda akan:

  • Dapat mendeteksi target gambar dan menambatkan labirin virtual pada target. Contoh visualisasi di bawah
  • Dapat melacak target yang bergerak selama berada dalam tampilan

6bc6605df89de525.gif

Apakah ini pertama kalinya Anda membuat aplikasi ARCore?

Ya Tidak

Apakah Anda berencana untuk menulis kode contoh dalam codelab ini atau hanya ingin membaca halaman ini?

Menulis kode contoh Hanya membaca halaman ini

Yang akan Anda pelajari

  • Cara menggunakan Gambar Augmented di ARCore di Java.
  • Cara mengukur kemampuan gambar untuk dikenali oleh ARCore.
  • Cara menambatkan konten virtual pada gambar dan melacak gerakannya.

Yang akan Anda butuhkan

Pastikan Anda memiliki semua yang dibutuhkan sebelum memulai codelab ini:

  • Perangkat ARCore yang didukung, terhubung melalui kabel USB ke mesin pengembangan Anda.
  • ARCore 1.9 atau yang lebih baru. APK ini biasanya diinstal secara otomatis di perangkat melalui Play Store. Jika perangkat tidak memiliki versi ARCore yang diperlukan, Anda dapat menginstalnya dari Play Store kapan saja
  • Mesin pengembangan dengan Android Studio (v3.1 atau yang lebih baru).
  • Akses ke internet, untuk mendownload library selama pengembangan.

Setelah semuanya siap, mari kita mulai.

Kita akan mulai dengan mendownload ARCore Java SDK dari GitHub arcore-android-sdk-1.18.1.zip. Ekstrak file zip ke lokasi pilihan Anda. Folder ekstraksi akan diberi nama arcore-android-sdk-1.18.1.

Luncurkan Android Studio, dan klik Open an existing Android Studio project.

5fbf2b21609187cc.png

Buka folder yang diekstrak:

arcore-android-sdk-1.18.1/samples/augmented_image_java

Klik Buka.

Tunggu sampai Android Studio menyelesaikan sinkronisasi project. Jika Android Studio Anda tidak memiliki komponen yang diperlukan, proses mungkin akan gagal dengan pesan "Instal platform yang hilang dan sinkronkan project". Ikuti petunjuk untuk memperbaiki masalah.

Setelah Anda memiliki project aplikasi ARCore yang berfungsi, mari kita coba menjalankannya.

Hubungkan perangkat ARCore ke mesin pengembangan, lalu gunakan menu Run > Run 'app' untuk menjalankan versi debug pada perangkat. Pada dialog yang meminta Anda memilih dari perangkat mana aplikasi dijalankan,

pilih perangkat yang terhubung, lalu klik OK.

1aa2c6faa7ecdbd0.png

92e4c144a632b4ca.png

Project contoh ini menggunakan targetSdkVersion 28. Jika Anda mengalami error build seperti Failed to find Build Tools revision 28.0.3, ikuti petunjuk yang dijelaskan di Android Studio untuk mendownload dan menginstal versi Android Build Tools yang diperlukan.

Jika semuanya berhasil, aplikasi contoh akan diluncurkan di perangkat dan meminta izin kepada Anda untuk mengizinkan Gambar Augmented mengambil gambar dan video. Ketuk ALLOW untuk memberikan izin.

Mari kita beri gambar pada aplikasi contoh.

Kembali ke Android Studio, di jendela Project, buka app > assets, lalu klik dua kali file default.jpg untuk membukanya.

9b333680e7b9f247.jpeg

Arahkan kamera perangkat ke gambar Bumi di layar, lalu ikuti petunjuk untuk menyesuaikan gambar yang Anda pindai ke dalam garis bidik.

Bingkai gambar akan diletakkan di atas gambar, seperti ini:

999e05ed35964f6e.png

Selanjutnya, kita akan melakukan sedikit peningkatan pada aplikasi contoh.

Seperti yang telah disebutkan di awal codelab ini, kita akan membuat game labirin kecil pada gambar. Pertama, temukan model labirin di poly.google.com, yang memiliki banyak model 3D di bawah lisensi CC-BY untuk penggunaan gratis.

Untuk codelab ini, kita akan menggunakan "Circle Maze - Green," oleh Evol, dan dilisensikan berdasarkan CC-BY 3.0.

832fc0f1b09fea1e.png

Ikuti langkah-langkah ini untuk mendownload model dan memasukkannya ke Android Studio:

  1. Buka halaman Poly untuk model.
  2. Klik Download, lalu pilih File OBJ.

Tindakan ini akan mendownload file bernama green-maze.zip.

  1. Ekstrak zip green-maze.zip dan salin konten ke lokasi ini: arcore-android-sdk-1.18.1/samples/augmented_image_java/app/src/main/assets/models/green-maze
  2. Di Android Studio, buka app > assets > models > green-maze.

Harus ada dua file dalam folder ini: GreenMaze.obj dan GreenMaze.mtl.

a1f33a2d2d407e03.png

Selanjutnya, kita akan memuat file OBJ ini dan menampilkannya di atas gambar yang terdeteksi.

Setelah memiliki model 3D, GreenMaze.obj, mari kita menampilkannya di bagian atas gambar.

  1. Di AugmentedImageRenderer.java, tambahkan variabel anggota yang disebut mazeRenderer untuk merender model labirin. Karena labirin harus ditambatkan ke gambar, sebaiknya tempatkan mazeRenderer ke dalam class AugmentedImageRenderer.
  2. Pada fungsi createOnGlThread, muat GreenMaze.obj. Agar mudah, kami akan menggunakan tekstur bingkai yang sama dengan teksturnya.
  3. Pada fungsi draw, sesuaikan ukuran labirin dengan ukuran gambar yang terdeteksi, lalu gambarlah.

Di AugmentedImageRenderer.java, buat perubahan ini.

  // Add a member variable to hold the maze model.
  private final ObjectRenderer mazeRenderer = new ObjectRenderer();

  // Replace the definition of the createOnGlThread function with the
  // following code, which loads GreenMaze.obj.
  public void createOnGlThread(Context context) throws IOException {

    mazeRenderer.createOnGlThread(
        context, "models/green-maze/GreenMaze.obj", "models/frame_base.png");
    mazeRenderer.setMaterialProperties(0.0f, 3.5f, 1.0f, 6.0f);

  }

  // Replace the definition of the draw function with the
  // following code
  public void draw(
      float[] viewMatrix,
      float[] projectionMatrix,
      AugmentedImage augmentedImage,
      Anchor centerAnchor,
      float[] colorCorrectionRgba) {
    float[] tintColor =
        convertHexToColor(TINT_COLORS_HEX[augmentedImage.getIndex() % TINT_COLORS_HEX.length]);

    final float maze_edge_size = 492.65f; // Magic number of maze size
    final float max_image_edge = Math.max(augmentedImage.getExtentX(), augmentedImage.getExtentZ()); // Get largest detected image edge size

    Pose anchorPose = centerAnchor.getPose();

    float mazsScaleFactor = max_image_edge / maze_edge_size; // scale to set Maze to image size
    float[] modelMatrix = new float[16];

    // OpenGL Matrix operation is in the order: Scale, rotation and Translation
    // So the manual adjustment is after scale
    // The 251.3f and 129.0f is magic number from the maze obj file
    // We need to do this adjustment because the maze obj file
    // is not centered around origin. Normally when you
    // work with your own model, you don't have this problem.
    Pose mozeModelLocalOffset = Pose.makeTranslation(
                                -251.3f * mazsScaleFactor,
                                0.0f,
                                129.0f * mazsScaleFactor);
    anchorPose.compose(mozeModelLocalOffset).toMatrix(modelMatrix, 0);
    mazeRenderer.updateModelMatrix(modelMatrix, mazsScaleFactor, mazsScaleFactor/10.0f, mazsScaleFactor);
    mazeRenderer.draw(viewMatrix, projectionMatrix, colorCorrectionRgba, tintColor);
  }

Oke, tampaknya kita sudah memiliki cukup banyak perubahan kode untuk menampilkan labirin di atas gambar Bumi default.jpg.

Ada beberapa angka ajaib yang digunakan dalam kode di atas. Jangan khawatir, angka tersebut ada karena kita tidak memiliki kontrol penuh atas model 3D ini. Jadi saya mengurai file obj secara manual, untuk memahami posisi tengah (x, y, z) model dan ukurannya. Kita tidak akan melakukannya dalam codelab ini, saya hanya akan memberikan nilainya di sini. Dimensi model labirin adalah 492,65 x 120 x 492,65, dengan pusat di (251,3, 60, -129,0). Rentang nilai koordinat X, Y, Z dari titik sudutnya masing-masing adalah [5,02, 497,67], [0, 120], [-375,17, 117,25]. Jadi, kita perlu menyetel skala mode labirin sebesar image_size / 492.65. Seperti yang mungkin sudah Anda lihat, model 3D labirin tidak berpusat pada asal (0, 0, 0), itu sebabnya kita perlu memperkenalkan offset mozeModelLocalOffset secara manual.

Selain itu, karena dinding labirin masih terlalu tinggi untuk codelab, mari kita skalakan labirin 0,1 kali lagi. Hal ini akan menurunkan dinding sehingga celah lebih terlihat. Untuk melakukannya, kita harus memperkenalkan fungsi bantuan yang memungkinkan kita menskalakan koordinat X, Y, Z secara tidak rata.

Di augmentedimage/rendering/ObjectRenderer.java, buat perubahan ini.

  public void updateModelMatrix(float[] modelMatrix, float scaleFactorX, float scaleFactorY, float scaleFactorZ) {
    float[] scaleMatrix = new float[16];
    Matrix.setIdentityM(scaleMatrix, 0);
    scaleMatrix[0] = scaleFactorX;
    scaleMatrix[5] = scaleFactorY;
    scaleMatrix[10] = scaleFactorZ;
    Matrix.multiplyMM(this.modelMatrix, 0, modelMatrix, 0, scaleMatrix, 0);
  }

Oke, mari coba jalankan di perangkat yang didukung ARCore. Sekarang, ukuran labirin seharusnya sama dengan ukuran gambar.

772cbe2a8baef3ba.png

Sekarang mari kita tambahkan objek yang dapat berpindah-pindah di dalam labirin. Dalam codelab ini, kita akan membuatnya sederhana dan hanya menggunakan file andy.obj figurine Android yang disertakan dalam ARCore Android SDK. Gunakan tekstur bingkai gambar sebagai teksturnya, karena terlihat berbeda dari labirin hijau yang dirender di bagian atas gambar.

Tambahkan kode ini di AugmentedImageNode.java.

// Add a private member to render andy
  private final ObjectRenderer andyRenderer = new ObjectRenderer();

  public void createOnGlThread(Context context) throws IOException {

    // Add initialization for andyRenderer at the end of the createOnGlThread function.
    andyRenderer.createOnGlThread(
        context, "models/andy.obj", "models/andy.png");
    andyRenderer.setMaterialProperties(0.0f, 3.5f, 1.0f, 6.0f);
  }

  public void draw(
      float[] viewMatrix,
      float[] projectionMatrix,
      AugmentedImage augmentedImage,
      Anchor centerAnchor,
      float[] colorCorrectionRgba) {

    // In draw() function, at the end add code to display the Andy, standing on top of the maze
    Pose andyModelLocalOffset = Pose.makeTranslation(
        0.0f,
        0.1f,
        0.0f);
    anchorPose.compose(andyModelLocalOffset).toMatrix(modelMatrix, 0);
    andyRenderer.updateModelMatrix(modelMatrix, 0.05f); // 0.05f is a Magic number to scale
    andyRenderer.draw(viewMatrix, projectionMatrix, colorCorrectionRgba, tintColor);

  }

Lalu, mari kita coba jalankan di perangkat. Kita akan melihat sesuatu seperti ini.

cb1e74569d7ace69.png

Menentukan kualitas gambar target

Untuk mengenali gambar, ARCore bergantung pada fitur visual pada gambar. Tidak semua gambar memiliki kualitas yang sama dan dapat dikenali dengan mudah.

Alat arcoreimg di ARCore Android SDK memungkinkan Anda memverifikasikan kualitas gambar target. Kita dapat menjalankan alat command line ini untuk menentukan seberapa dikenali sebuah gambar bagi ARCore. Alat ini menampilkan angka antara 0 sampai 100, dengan 100 sebagai yang paling mudah dikenali. Berikut contohnya:

arcore-android-sdk-1.18.1/tools/arcoreimg/macos$
$ ./arcoreimg  eval-img --input_image_path=/Users/username/maze.jpg
100

Bagian terakhir tidak terlalu relevan dengan ARCore, tetapi merupakan bagian tambahan yang membuat aplikasi contoh ini menyenangkan. Tidak masalah jika Anda melewatkan bagian ini.

Kami akan menggunakan mesin Fisika open source, jBullet, untuk menangani simulasi fisika.

Berikut ini yang akan kita lakukan:

  1. Menambahkan GreenMaze.obj ke direktori aset project agar kita dapat memuatnya pada waktu proses.
  2. Membuat class PhysicsController untuk mengelola semua fungsi terkait fisika. Secara internal, ini menggunakan mesin fisika JBullet.
  3. Memanggil PhysicsController ketika gambar dikenali, dan updatePhysics
  4. Menggunakan gravitasi dunia nyata untuk memindahkan bola dalam labirin. Perlu diingat bahwa kita harus sedikit menurunkan skala bolanya agar bisa melewati celah di labirin.

Download kode PhysicsController.java dan tambahkan ke project Anda di direktori ini arcore-android-sdk-1.18.1/samples/augmented_image_java/app/src/main/java/com/google/ar/core/examples/java/augmentedimage/

Kemudian, buat perubahan tersebut di kode java yang ada. Seperti di bawah ini,

Di Android Studio, salin GreenMaze.obj dari

app > assets > models > green-maze

ke:

app > assets

Di app/build.gradle, tambahkan kode ini.

    // Add these dependencies.
    implementation 'cz.advel.jbullet:jbullet:20101010-1'

    // Obj - a simple Wavefront OBJ file loader
    // https://github.com/javagl/Obj
    implementation 'de.javagl:obj:0.2.1'

Di AugmentedImageRenderer.java, tambahkan kode ini.

// Add this line at the top with the rest of the imports.
  private Pose andyPose = Pose.IDENTITY;

  public void draw(
      float[] viewMatrix,
      float[] projectionMatrix,
      AugmentedImage augmentedImage,
      Anchor centerAnchor,
      float[] colorCorrectionRgba) {

    // Use these code to replace previous code for rendering the Andy object
    // Adjust andy's rendering position
    // Andy's pose is at Maze's vertex's coordinate
    Pose andyPoseInImageSpace = Pose.makeTranslation(
        andyPose.tx() * mazsScaleFactor,
        andyPose.ty() * mazsScaleFactor,
        andyPose.tz() * mazsScaleFactor);

    anchorPose.compose(andyPoseInImageSpace).toMatrix(modelMatrix, 0);
    andyRenderer.updateModelMatrix(modelMatrix, 0.05f);
    andyRenderer.draw(viewMatrix, projectionMatrix, colorCorrectionRgba, tintColor);
  }

  // Add a new utility function to receive Andy pose updates
  public void updateAndyPose(Pose pose) {
    andyPose = pose;
  }

Di AugmentedImageActivity.java, tambahkan kode ini.

import com.google.ar.core.Pose;

  // Declare the PhysicsController class.
  private PhysicsController physicsController;

  // Update the case clause for TRACKING as below
  private void drawAugmentedImages(

    ...

        case TRACKING:
          // Have to switch to UI Thread to update View.
          this.runOnUiThread(
              new Runnable() {
                @Override
                public void run() {
                  fitToScanView.setVisibility(View.GONE);
                }
              });

          // Create a new anchor for newly found images.
          if (!augmentedImageMap.containsKey(augmentedImage.getIndex())) {
            Anchor centerPoseAnchor = augmentedImage.createAnchor(augmentedImage.getCenterPose());
            augmentedImageMap.put(
                augmentedImage.getIndex(), Pair.create(augmentedImage, centerPoseAnchor));

            physicsController = new PhysicsController(this);
          } else {
            Pose ballPose = physicsController.getBallPose();
            augmentedImageRenderer.updateAndyPose(ballPose);

            // Use real world gravity, (0, -10, 0) as gravity
            // Convert to Physics world coordinate (because Maze mesh has to be static)
            // Use it as a force to move the ball
            Pose worldGravityPose = Pose.makeTranslation(0, -10f, 0);
            Pose mazeGravityPose = augmentedImage.getCenterPose().inverse().compose(worldGravityPose);
            float mazeGravity[] = mazeGravityPose.getTranslation();
            physicsController.applyGravityToBall(mazeGravity);

            physicsController.updatePhysics();
          }
          break;

Kemudian, kita bisa memindahkannya seperti ini.

2f0df284705d3704.gif

Selamat bersenang-senang!

Selamat, Anda telah berhasil mencapai bagian akhir codelab ini. Mari lihat kembali apa yang telah kita capai dalam codelab ini.

  • Membuat dan menjalankan contoh AugmentedImage Java ARCore.
  • Memperbarui contoh agar fokus otomatis di dekat gambar, dan membuat bingkai gambar sejajar dengan ukuran gambar.
  • Memperbarui contoh untuk menggunakan gambar yang ditentukan pengguna sebagai target.
  • Memperbarui contoh untuk menampilkan model labirin pada gambar, pada skala yang sesuai.
  • Memanfaatkan pose gambar untuk melakukan hal menyenangkan.

Jika ingin membaca ke kode lengkapnya, Anda dapat mendownloadnya di sini.

Apakah Anda senang ketika mengerjakan codelab ini?

Ya Tidak

Apakah Anda mempelajari sesuatu yang berguna ketika mengerjakan codelab ini?

Ya Tidak

Apakah Anda sudah selesai membuat aplikasi dalam codelab ini?

Ya Tidak

Apakah Anda berencana membuat aplikasi ARCore dalam 6 bulan mendatang?

Ya Mungkin Tidak