Augmented Reality

Kamis, 19 Oktober 2017

Implementasi WIkitude Untuk AR Markerless

Target output:

1.Dapatkan API WIKITUDE dengan cara Daftar di http://www.wikitude.com/developer/licenses

2.Buat Project Android /ECCLIPSE, masukkan key nya pada res-String

POLA ASSETS WIKITUDE:
Volume in drive C has no label.
Volume Serial Number is CA1F-4A01

Directory of C:\Users\ACER\workspace\RumahSakit\assets

10/19/2017 02:47 PM <DIR> .
10/19/2017 02:47 PM <DIR> ..
10/19/2017 02:47 PM <DIR> assets
10/19/2017 02:47 PM <DIR> css
08/21/2017 10:17 AM 5,095 index.html
10/19/2017 02:47 PM <DIR> jquery
10/19/2017 02:47 PM <DIR> js
1 File(s) 5,095 bytes

Directory of C:\Users\ACER\workspace\RumahSakit\assets\assets

10/19/2017 02:47 PM <DIR> .
10/19/2017 02:47 PM <DIR> ..
08/21/2017 10:17 AM 7,040 indi.png
08/21/2017 10:17 AM 12,978 marker_idle.png
08/21/2017 10:17 AM 13,872 marker_selected.png
08/21/2017 10:17 AM 17,359 radar_bg.png
08/21/2017 10:17 AM 11,140 radar_north.png
5 File(s) 62,389 bytes

Directory of C:\Users\ACER\workspace\RumahSakit\assets\css

10/19/2017 02:47 PM <DIR> .
10/19/2017 02:47 PM <DIR> ..
08/21/2017 10:17 AM 222 poi-radar.css
1 File(s) 222 bytes

Directory of C:\Users\ACER\workspace\RumahSakit\assets\jquery

10/19/2017 02:47 PM <DIR> .
10/19/2017 02:47 PM <DIR> ..
10/19/2017 02:47 PM <DIR> images
08/21/2017 10:17 AM 92,629 jquery-1.9.1.min.js
08/21/2017 10:17 AM 691 jquery-mobile-transparent-ui-overlay.css
08/21/2017 10:17 AM 94,670 jquery.mobile-1.3.2.min.css
08/21/2017 10:17 AM 145,396 jquery.mobile-1.3.2.min.js
4 File(s) 333,386 bytes

Directory of C:\Users\ACER\workspace\RumahSakit\assets\jquery\images

10/19/2017 02:47 PM <DIR> .
10/19/2017 02:47 PM <DIR> ..
08/21/2017 10:17 AM 7,825 ajax-loader.gif
08/21/2017 10:17 AM 1,968 icons-18-black.png
08/21/2017 10:17 AM 1,988 icons-18-white.png
08/21/2017 10:17 AM 3,859 icons-36-black.png
08/21/2017 10:17 AM 3,861 icons-36-white.png
5 File(s) 19,501 bytes

Directory of C:\Users\ACER\workspace\RumahSakit\assets\js

10/19/2017 02:47 PM <DIR> .
10/19/2017 02:47 PM <DIR> ..
08/21/2017 10:17 AM 12,242 marker.js
08/21/2017 11:47 AM 1,444 myjsondata.js
08/21/2017 10:17 AM 10,997 nativedetailscreen.js
08/21/2017 10:17 AM 1,311 radar.js
4 File(s) 25,994 bytes

Total Files Listed:
20 File(s) 446,587 bytes
17 Dir(s) 119,671,439,360 bytes free

Adapun ocdnya adalah sbb:

DOWNLOAD ASSETS:

http://www.wikitude.com/developer/register-sdk

ar.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

android:layout_height="match_parent" tools:context=".MainActivity"

android:id="@+id/framelayout">

<com.wikitude.architect.ArchitectView android:id="@+id/architectView" android:layout_width="fill_parent" android:layout_height="fill_parent"/>

</FrameLayout>

ar.java

package com.lp2maray.rumahsakit;

import android.app.Activity;

import android.app.AlertDialog;

import android.content.Context;

import android.content.DialogInterface;

import android.content.Intent;

import android.content.pm.ActivityInfo;

import android.content.DialogInterface.OnClickListener;

import android.location.Location;

import android.location.LocationListener;

import android.location.LocationManager;

import android.os.Bundle;

import android.os.CountDownTimer;

import android.util.Log;

import android.view.KeyEvent;

import android.view.View;

import android.view.Window;

import android.view.WindowManager;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.Toast;

import android.widget.ToggleButton;

import com.wikitude.architect.ArchitectView;

import com.wikitude.architect.StartupConfiguration;

import java.io.IOException;

//deklarasi class sebagai activity (class yang dapat berjalan)

public class Ar extends Activity implements LocationListener {

//variabel global

private ArchitectView architectView;

private Intent i;

private LocationManager lmg;

ImageView imgPlanet;

int planet;

TextView tulisan;

String lampu;

String tampil;

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

this.requestWindowFeature(Window.FEATURE_NO_TITLE);

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

setContentView(R.layout.ar);

//load wikitude

this.architectView = (ArchitectView) this.findViewById(R.id.architectView);

final StartupConfiguration config = new StartupConfiguration(getResources().getString(R.string.sdk_key) /* license key */);

this.architectView.onCreate(config);

this.architectView.onPostCreate();

try {

this.architectView.load("index.html");

} catch (IOException ioe) {

Log.v("HTML loading", "" + ioe.getMessage());

}

public void onPostCreate() {}

public void onPause() {

super.onPause();

architectView.onPause();

lmg.removeUpdates(this);

}

public void onResume() {

super.onResume();

architectView.onResume();

super.onResume();

lmg = (LocationManager) this.getSystemService(LOCATION_SERVICE);

if (lmg.isProviderEnabled(LocationManager.GPS_PROVIDER))

lmg.requestLocationUpdates(LocationManager.GPS_PROVIDER, 10000, 0, this);

lmg.requestLocationUpdates(LocationManager.NETWORK_PROVIDER, 10000, 0, this);

}

public void onDestroy() {

super.onDestroy();

architectView.onDestroy();

lmg.removeUpdates(this);

}

@Override

public void onLocationChanged(Location location) {

architectView.setLocation(location.getLatitude(), location.getLongitude(), 0.0f);

}

@Override

public void onStatusChanged(String provider, int status, Bundle extras) {

}

@Override

public void onProviderEnabled(String provider) {

}

@Override

public void onProviderDisabled(String provider) {

}

@Override

public boolean onKeyDown(int keyCode, KeyEvent event)

{

if ((keyCode == KeyEvent.KEYCODE_BACK))

{

finish();

return false;

}

return super.onKeyDown(keyCode, event);

}

+++++++++++++++++++++++++++++++++

Atur permission:

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

<uses-permission android:name="android.permission.ACCESS_GPS" />

<uses-permission android:name="android.permission.CAMERA" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<uses-feature android:name="android.hardware.camera" android:required="true" />

<uses-feature android:name="android.hardware.location" android:required="true" />

<uses-feature android:name="android.hardware.sensor.accelerometer" android:required="true" />

<uses-feature android:name="android.hardware.sensor.compass" android:required="true" />

<uses-feature android:glEsVersion="0x00020000" android:required="true" />

Atur Library:

Atur Preference:

Untuk assets dengan contoh di atas silakan download : assets rumahsakit

Untuk Contoh-Contoh yang lain silakan download : Download Example

isi index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>My ARchitect World</title>

</head>

<body>

<a href="javascript: World.showRange();" data-icon="gear" data-inline="true" data-mini="true">Range</a>

<a href="javascript: World.reloadPlaces()" data-icon="refresh" >Reload</a>

</div>

<p style="text-align:right;" id="status-message">Trying to find out where you are</p>

</div>

<h1>Details</h1>

<a href="#header" data-rel="close">Close</a>

</div>

<h4>Distance: <a id="poi-detail-distance"></a></h4>

</div>

<h1>Range</h1>

<a href="#header" data-rel="close">Close</a>

</div>

<h4> Range: <a id="panel-distance-value"></a></h4>

<h4> Visible: <a id="panel-distance-places"></a></h4>

</div>

</body>

</html>

myjsondata.js

var myJsonData = [{

"id": "1",

"longitude": "106.807513",

"latitude": "-6.257478",

"description": "Jalan Taman Brawijaya No. 1, Cipete Utara, Kebayoran Baru, Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12150",

"altitude": "100.0",

"name": "Rumah Sakit Brawijaya Women dan Children Hospital"

}, {

"id": "2",

"longitude": "106.819345",

"latitude": "-6.286280",

"description": "Jalan Ampera Raya No.34, Cilandak Timur, Pasar Minggu, RT.2/RW.9, Ragunan, Kota Jakarta Selatan, 12560",

"altitude": "100.0",

"name": "RSIA Kemang Medical Care"

}, {

"id": "3",

"longitude": "106.777890",

"latitude": "-6.255186",

"description": "Jalan Ciputat Raya No.5, RT.13/RW.1, Kebayoran Lama Selatan, Kebayoran Lama, Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12240",

"altitude": "100.0",

"name": "Rumah Sakit Ibu dan Anak Yadika"

}, {

"id": "4",

"longitude": "106.845044",

"latitude": "-6.218998",

"description": "Jalan Dokter Sahardjo No.120, RT.1/RW.8, Menteng Atas, Jakarta, RT.1/RW.8, Menteng Atas, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12960",

"altitude": "100.0",

"name": "Rumah Sakit Bersalin Budhi Jaya"

}, {

"id": "5",

"longitude": "106.800864",

"latitude": "-6.247861",

"description": "Jl. Panglima Polim 1 No.34, RT.1/RW.3, Melawai, Kebayoran Baru, RT.1/RW.3, Melawai, Kby. Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12160",

"altitude": "100.0",

"name": "Rumah Sakit Bersalin ASIH"

}];

Sabtu, 19 November 2016

Praktek belajar AR

Buka link:
https://developer.vuforia.com/home-page

Info Account:

Masuk pada tab: Develop -> License Manager -> Add License Key

Selanjutnya klik nama License Anda , contoh disini adalah "latihan AR1" , maka akan didapatkan teks unix yang akan digunakan pada aplikasi AR Unity.

Langkah selanjutnya membuat target melalui Target Manager. Target nantinya adalah gambar yang akan dijadikan sasaran scanning oleh camera.
Klik Target Manager dan => add Database :

Proses ini hanya membutuhkan waktu beberapa detik tergantung kualitas dan resolusi gambar serta koneksi internet.Jika sduah selesai kita dapat melihat gambar kita sudah menjadi slah satu target image.

Perhatikan rating gambar kta.Semakin tinggi ratingnya artinya gambar kita ssemakin mudah untuk dikenali.Dan usahakan untuk memilih gambar yang memiliki tingkat kontras warna cukup jauh antara satu titik dengan titik lainnya.

Engine vuvoria tiak mempedulikan gambar kita seperti apa.Yang diperlukan adalah pattern yang terbentuk pada gambar saja.Pattern inilah yang menjadi patokan Vuvoria dalam menciptakan efek AR.

Lalu klik image / unity package yang hendak di download dan klik tombol download -> unity editor

Hasil download

Pengaturan Asset

Buat Project 3d baru, lalu import package SDK vuvoria dan import package juga image target file yang dikirimkan melalui situs vuvoria.

Image target yang telah di daftarkan biasanya akan berada di folder Editor -> QSAR -> ImageTargetTextures -> NamaFileKita

Langkah pertama:
1. hapus main camera standar pada Unity dan gantikan dengan prefab ARCamera.
lokasi ada di folder Vuvoria->prefabs
Secara default ARcamera akan mengarah kebawah .....

2.Tambahkan juga prefab ImageTarget yang secara default berupa plane bewarna putih
3.Klik ImageTarget dan arahkan Data Set ke latihanAR1.sehingga secara automatis gambar plane putih akan berubah menjadi gambar Image Target yang telah kita atur sebelumnya....

4.Import package Object Apapun ke dalam scene, dan pastikan GameObject tsb menjadi child dari GameObject ImageTarget.

Masukkan key yang didapat dari vuvoria, dan pastikan telah mencentang Load Data Set dan Activated:

Untuk menguji apakah AR kita berhasil atau tidak ...kta perlu mencetak gambar image target ke sebuah kertas-> lalu arahkan ke kamera ->maka akan tampillah gambar 3dmax Objek diatas.

Tambahkan tombol virtual dari vuvoria->Prefabs.Masukkan Prefab tersebut ke GameObject ImageTarget sebagai childnya-> lalu atur posisinya.
Juga lalukan hal yang sma untuk semua tombol yang lainnya
NB Kita tidak harus membuat ukuran virtual tombol yang sama persis dengan ukuran gambarnya cukup pada titik titik yang terlihat jelas kontrasnnya saja.

Juga sesuaikan parameter Name dari setiap virtual button tersebut (Virtual Button Behavior)

Definisi AR

Augmented-reality atau realitas tertambah adalah teknologi yang dapat menambahkan benda maya ke dalam proyeksi lingkungan nyata. Berbeda dengan virtual reality (realitas maya) yang sepenuhnya menggantikan lingkungan nyata, AR hanya menambahkan benda maya pada lingkungan nyata.

Azuma dalam karya ilmiahnya berjudul A survey of augmented reality (2007) menjelaskan bahwa augmented reality adalah teknologi yang menggabungkan obyek-obyek maya yang ada dan dihasilkan (generated) oleh komputer dengan benda-benda yang ada di dunia nyata sekitar kita, dan dalam waktu yang nyata. Mungkin definisi diatas sedikit membingungkan, bagaimana sih caranya untuk menggabungkan benda yang dikomputer dengan benda yang nyata? Kita lihat gambar iklan Adidas dibawah, gambar tersebut menggambarkan obyek-obyek maya yang membentuk sebuah kota maya yang dipadukan dengan aktor di dunia nyata.

Teknologi AR ini dapat menyisipkan suatu informasi tertentu ke dalam dunia maya dan menampilkannya di dunia nyata dengan bantuan perlengkapan seperti webcam, komputer, HP Android, maupun kacamata khusus. User ataupun pengguna didalam dunia nyata tidak dapat melihat objek maya dengan mata telanjang, untuk mengidentifikasi objek dibutuhkan
perantara berupa komputer dan kamera yang nantinya akan menyisipkan objek maya ke dalam dunia nyata.

Hmm...kedengarannya cukup sederhana.

Namun lebih dari itu, sebenarnya augmented reality lebih dari sekedar menambahkan objek maya ke lingkungan nyata. cuplik dari : https://id.wikipedia.org/wiki/Realitas_tertambah

Augmented reality adalah teknologi yang menggabungkan benda-benda maya (baik berdimensi 2 dan/atau berdimensi 3) dan benda-benda nyata ke dalam sebuah lingkungan nyata berdimensi 3, lalu memproyeksikan benda-benda maya tersebut dalam waktu nyata agar terintegrasi dan berjalan secara interaktif dalam dunia nyata.

Walaupun baru-baru ini kata augmented reality terdengar sangat lantang, namun ternyata teknologi ini pertama kali ditemukan pada tahun 1950an oleh Morton Heilig, seorang cinematographer. . Teknologi augmented reality membuka peluang baru untuk para pelaku dunia industri maupun dunia pendidikan untuk mengembangkan teknologi tersebut dalam impelementasinya di kehidupan sehari-hari.

Sejarah Augmented Reality

Konsep pertama augmented reality dikenalkan oleh Morton Heilig, seorang cinematographer pada tahun 1950an. Ketika itu Augmented Reality membutuhkan sebuah alat yang besar sebagai alat output. Alat output dapat berupa yang dipasang ditubuh kita (dikenal dengan nama HMD, Head Mounted Device), ada juga yang berupa monitor, seperti monitor TV, LCD, monitor ponsel, dll. Alat HMD pertama kali ditemukan pada tahun 1968 oleh Ivan Sutherland dari Harvard University. Augmented reality dengan input berupa sensor GPS diperkenalkan pada tahun 2003 dari hasil penelitian Loomis, dkk pada karya ilmiahnya Personal guidance system for the visually impaired using GPS, GIS, and VR technologies, pada tahun 1994.

Pada tahun 1996, [11] Rekimoto dalam karya ilmiahnya Augmented Reality Using the 2D Matrix Code. In Proceedings of the Workshop on Interactive Systems and Software memperkenalkan marker 2D untuk pertama kalinya. Dua tahun kemudian ARtoolkit, augmented reality library pertama kali diluncurkan oleh Kato

Pada tahun 2009 Lab MIT(Mistry, dkk) meneliti sixth sense project dan Wear Ur World – A Wearable Gestural Interface dimana augmented reality di implementasikan pada kehidupan sehari-hari.

Arsitektur Teknologi

Arsitektur teknologi ini tergolong simple, gambar arsitektur dapat dilihat di bawah.

Input

Input dapat berupa apa saja, contoh marker, gambar 2D, gambar 3D, sensor wifi, sensor gerakan, GPS, dan sensor-sensor yang lain.

Kamera

Kamera disini sebagai perantara untuk input yang berupa gambar, baik itu marker, gambar 2D maupun 3D.

Prosessor

Prosessor dibutuhkan untuk memproses input yang masuk dan kemudian memberikannya ke tahapan output.

Output

Dapat berupa HMD, monitor, seperti monitor TV, LCD, monitor ponsel, dll

Augmented reality sendiri sudah banyak digunakan di berbagai industri, seperti medical untuk training operasi, manufacturing untuk membantu mempermudah proses manufacturing dan service, seperti yang dilakukan oleh BMW. game, film, dan yang paling banyak adalah untuk branding product, seperti yang dilakukan oleh Toyota, Nisan, film Transformer, film Iron Man.

Secara umum ada dua metode yang digunakan dalam teknologi AR ini: marker based AR dan markerless AR.

1.Marker based AR

Metode ini bekerja dengan memindai tanda atau yang lebih sering disebut sebagai marker. Marker biasanya merupakan ilustrasi hitam dan putih persegi dengan batas hitam tebal dan latar belakang putih. Komputer akan mengenali posisi dan orientasi marker dan menciptakan benda virtual 3D di koordinat yang ditunjukkan marker.

2.Markerless AR

Marker biasanya merupakan ilustrasi hitam dan putih persegi dengan batas hitam tebal dan latar belakang putih. Komputer akan mengenali posisi dan orientasi marker dan menciptakan dunia virtual 3D yaitu titik (0,0,0) dan tiga sumbu yaitu X, Y, dan Z. Marker Based Tracking ini sudah lama dikembangkan sejak 1980-an dan pada awal 1990-an mulai dikembangkan untuk penggunaan Augmented Reality. Dengan Markerless AR, tidak lagi dibutuhkan marker berupa pola hitam putih untuk menampilkan objek maya. Metode ini dapat bekerja dengan melakukan pemindaian terhadap objek nyata, dengan ruang lingkup yang lebih luas daripada marker AR.

Beberapa teknik yang dikembangkan dalam markerless AR ini yaitu: face tracking, 3D object tracking, motion tracking, dan location based.

Face Tracking

Algoritma pada computer terus dikembangkan, hal ini membuat komputer dapat mengenali wajah manusia secara umum dengan cara mengenali posisi mata, hidung, dan mulut manusia, kemudian akan mengabaikan objek-objek lain di sekitarnya seperti pohon, rumah, dan lain – lain. Teknik ini pernah digunakan di Indonesia pada Pekan Raya Jakarta 2010 dan Toy Story 3 Event (Widiansyah, Firman, 2014).

Dengan teknik ini komputer mengenali wajah manusia secara umum dengan cara mengenali posisi mata, hidung, dan mulut manusia, kemudian akan mengabaikan objek-objek lain di sekitarnya seperti pohon, rumah, dan benda-benda lainnya. Teknik ini digunakan salah satunya pada aplikasi social media Snapchat.

3D Object Tracking

Berbeda dengan Face Tracking yang hanya mengenali wajah manusia secara umum, teknik 3D Object Tracking dapat mengenali semua bentuk benda yang ada disekitar, seperti mobil, meja, televisi, dan lain-lain.

Motion Tracking

Pada teknik ini komputer dapat menangkap gerakan, Motion Tracking telah mulai digunakan secara ekstensif untuk memproduksi film-film yang mencoba mensimulasikan gerakan.

Location Based

Teknik GPS Based Tracking saat ini mulai populer dan banyak dikembangkan pada aplikasi smartphone (iPhone dan Android), dengan memanfaatkan fitur GPS dan kompas yang ada didalam smartphone, aplikasi akan mengambil data dari GPS dan kompas kemudian menampilkannya dalam bentuk arah yang kita inginkan secara realtime, bahkan ada beberapa aplikasi menampikannya dalam bentuk 3D.

Keunggulan teknik ini yaitu ketersediaan mudah smartphone dan fitur deteksi lokasi yang ada. dengan cara mendeteksi lokasi pengguna dan orientasinya dengan membaca data dari mobile GPS, kompas digital dan akselerometer, kemudian menambahkan informasi berupa benda-benda maya yang dapat dilihat dari layar kamera ponsel. Teknik inilah yang digunakan dalam game Pokemon GO dan game sejenis sebelumnya.

Pengembangan dari AR lebih lanjut bisa di pantau pada link sbb: Move-world

Implementasi Bisnis

Reff:

http://www.lp2maray.com
http://socs.binus.ac.id/2012/03/10/mengenal-augmented-reality/
http://www.penggagas.com/mengenal-augmented-reality-ar-teknologi-utama-dalam-game-pokemon-go/?subscribe=success#blog_subscription-4