Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. 3D
Code

Panduan Pemula untuk Augmented Reality

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Kaustina Nurul Ilmi (you can also view the original English article)

Augmented Reality akhir-akhir ini banyak mengalami peningkatan, terutama berbasis Flash AR.  Saya akan memandu Anda melalui cara membuat beberapa efek sederhana namun rapi yang dapat Anda masukkan ke situs web Anda sendiri.


Pengantar:   Augmented Reality

Augmented Reality telah dinilai sebagai salah satu tren terpanas tahun 2010.  Konsep di baliknya itu cukup sederhana, meletakkan dunia fisik dengan grafis keren yang tampaknya menempati ruang yang sama dengan anda.

Banyak perusahaan telah menggunakannya sebagai alat promosi yang luar biasa.  Adidas baru saja  menggunakan Augmented Reality di atas mereka  dan membuat permainan tampak sangat keren.

source: http://www.wired.com/gadgetlab/2009/12/adidas-sneaker-augmented-reality/

Lego menggunakannya sebagai cara untuk memvisualisasikan seperti apa produk mereka nantinya ketika anda selesai membangun mereka.

source: http://www.virtualworldlets.net/Worlds/Listings/AugmentedReality/Lego.jpg

Beberapa freelancer menggunakannya sebagai kartu nama yang sangat keren dan alat promosi.  AR memungkinkan anda membuat kartu bisnis yang lebih mengesankan tanpa biaya sama sekali dan anda dapat memasukkan lebih banyak info tentangnya.

source: http://jamesalliban.wordpress.com/2009/06/03/ar-business-card/

Pada bulan Januari tahun ini, saya menyelesaikan sebuah proyek untuk universitas di mana saya menciptakan sistem augmented reality yang dapat disempurnakan.  saat anda berjalan-jalan,Ia menampilkan galeri virtual yang menceritakan sebuah kisah yang sangat tragis.

source: http://kablamo.co.uk

Check out video di Youtube .

Saya membuat AR dari sudut pandang desain, dengan sedikit mengetahui tentang pengkodean di AS3.  Saya di sini untuk berbagi apa yang saya pelajari dengan anda karena saya merasa sangat sulit bagi pemula untuk belajar tentang topik ini.  Ini hanya pertanyaan untuk memulai segalanya dari nol.

Sekarang, saya yakin anda penuh dengan gagasan tentang hal-hal yang harus diciptakan, mari ciptakan proyek realitas tambahan anda yang pertama: menambahkan kedalaman ke secarik kertas datar.


Pengantar: flARToolkit

flARToolkit adalah versi flash dari perpustakaan augmented reality C-coded yang dikenal hanya sebagai ARToolkit.  Ia diubah oleh seorang ahli kode Jepang yang sangat terampil yang dikenal sebagai saqoosha.  Dia melakukan segala macam hal gila dengan augmented reality dan jika anda bisa membaca bahasa Jepang atau siap mengarungi banyak postingan yang hampir tidak masuk akal saat diterjemahkan, anda bisa belajar banyak darinya.  Dia menciptakan efek 'lubang di dinding' yang didemonstrasikan di  Proyek perayaan tahun baru, ia ciptakan untuk menyambut di tahun 2009.

source: http://vimeo.com/2734815

Baru-baru ini, dia telah menunjukkan bahwa anda bisa menghubungkan berbagai marker bersama-sama dan efek indah lainnya yang hanya bisa saya impikan untuk saya ciptakan.

source: http://vimeo.com/6262632

Langkah 1:   Mengenal Sumber

Squidder.com memodifikasi perpustakaan flartoolkit yang ada, kelas flarManager, untuk dapat menangani kejadian dan beberapa objek.  Cukup menariknya, mereka memposting kode sumber mereka dan yang disebut 'bagaimana' tapi tidak pernah benar-benar menjelaskan kode mereka sendiri.  Butuh beberapa waktu untuk menemukan cara mendapatkan beberapa objek yang semuanya bisa berbeda.  Saya harus menunjukkan sekarang bahwa saya seorang desainer pertama dan pengkodean dihasilkan dari keinginan untuk membuat hal-hal gila.  Saya mendekati ini yang menginginkan hasil akhirnya bekerja daripada berkepentingan dengan cara terbaik untuk mengkodekan sesuatu.

Mari download kode  dari postingan asli mereka pada subjek dan berikan tampilan padanya.

Edit:   Squidder.com  saat ini sedang down; gunakan link ini sebagai gantinya:  http://kablamo.co.uk/flarsquidderkit.zip

Download file yang bernama "flarsquidderkit.zip",  ekstrak file .zip dan buka folder utama.  Perhatikan, jika anda tidak mengekstrak folder .zip, anda tidak akan dapat membuka .swf dengan benar atau mengedit file yang anda butuhkan.  Jadi setelah anda selesai melakukannya, anda akan melihat 3 folder kunci: deploy, fla dan src.  anda juga akan melihat file bernama "flardrums.pdf".

source: My hard drive

Langkah 2:   Waktu memainkan

Kita memiliki marker kita untuk saat ini, cetak mereka sehingga kita dapat mengujinya dan melihat bagaimana sumbernya saat ini bekerja.

Buka folder penyebaran dan buka MultiFLARExample.swf.  Terima webcam dan mulai memainkannya dengan marker. 

source: My parents front room

Dalam demo video yang mereka buat, anda melewati setiap marker satu per satu dan melihat bagaimana mereka membuat suara saat mereka menghilang.    Ini ditulis oleh squidder.   Mereka menambahkan dua event,   MARKER_ADDED   dan   MARKER_REMOVED.  Kita akan mencari cara untuk menggunakan event ini nanti. 

Sekarang anda tahu bagaimana tampilannya saat ini, mari kita catat untuk memodifikasi kode sumber mereka guna melakukan beberapa hal keren dari kita sendiri.


Langkah 3:   Ada Coding yang harus dilakukan

Untuk tutorial ini, saya asumsikan anda memiliki pengetahuan dasar tentang lembar AS3 dan kelas.

Buka folder \ fla \ dan kemudian klik dua kali pada "multiFLARExample.fla".  Di panel properti anda harus melihat kotak kelas diisi dengan MultiFLARExample.  Anda ingin mengeklik ikon pensil di samping kotak kelas sehingga kita dapat mulai melihat kode.

source: Flash

Langkah 4:   MultiFLARExample

Secara langsung anda akan melihat kode impor biasa di bagian atas dan di bawahnya ada beberapa variabel dasar untuk sumber cahaya.

Berikutnya adalah bagian yang menarik, kode yang dimuat di marker.  Seperti yang anda lihat, marker dimasukkan ke dalam array agar mudah dikenali nanti.  Perhatikan urutan yang mereka muat di sini.  Penanda pertama dalam array mendapatkan id 0, berikutnya adalah 1 dan seterusnya.  Kita akan menggunakan id ini nanti. 

source: Flash

Juga lihat fungsi pribadi  _addCube  dan  _getFlatMaterial  karena mereka adalah dua bagian lainnya yang akan kita fokuskan saat mengedit hari ini.  Mereka cukup jelas dalam apa yang mereka lakukan, tapi mereka dbentuk secara aneh.  Mereka telah dikodekan untuk kesederhanaan dalam mendapatkan objek yang sama dalam banyak warna, daripada banyak objek yang berbeda, jadi kita harus membuat beberapa perubahan


Langkah 5:   Ch-Ch-Changes

Oke, mari kita ubah beberapa kode.  Mari kita mengubahnya ke keadaan yang lebih bermanfaat tapi untuk saat ini kita akan menjaga tampilan visualnya tetap sama.  Ketika saya memikirkan semua ini, sangat lega untuk mengetahui semua itu terjadi    if statemen pada akhirnya.   If statemen itu begitu ajaib dan berguna ketika datang ke hal coding.

Dalam   _addCube  fungsi, ganti kode ini:

dengan kode berikut:

Langkah 6:   Uji Film

Sekarang, ini mungkin tampak seperti cara berbelit-belit untuk menangani kubus, tapi ini memungkinkan kita untuk menangani masing-masing kubus.  Sebagai contoh, pada kode di atas, saya telah mengubah sumbu z dari kubus untuk menunjukkan kepada anda bahwa kode tersebut sekarang menangani setiap kubus sebagai objeknya sendiri.  Mari coba filmnya, anda harus memiliki sesuatu untuk efek ini: 

source: My parents front room

Langkah 7:   Penjelasan

Sebelum kita lanjutkan, izinkan saya menjelaskan kode yang baru saja anda masukkan.  Ini cukup mudah dan jika anda telah menggunakan papervision3D sebelum anda dapat melewati bagian ini.

Disini kita membuat variabel baru, kubus.  Variabel ini menyimpan semua informasi yang dibutuhkan untuk membuat sebuah kubus dan menentukan tampilannya.  Bagian MaterialsList mengacu pada bahan yang digunakan untuk bagian luar kubus.  Karena kita menginginkan materi yang sama di setiap sisi dan materi itu tersimpan dalam variabel yang dibuat sebelumnya dalam kode, kita gunakan   {all: fmat}.  Saya akan berbicara lebih banyak tentang variabel fmat nanti.  Akhirnya, tiga 40’s, inilah dimensi kubus, lebar, tinggi dan kedalaman.  Tentu saja mereka tidak harus semua menjadi sama meskipun ini adalah sebuah kubus.  Anda bisa menggunakan metode kubus untuk membuat bentuk bujur sangkar persegi jika anda menginginkannya.

Ia menentukan nilai z dari kubus.  Ini adalah seberapa tinggi kubus duduk di atas marker.  0 adalah garis tengah kubus dan dengan demikian setinggi setengah tinggi bentuknya berarti berada tepat di atas marker.

dispObj mengacu pada objek tampilan yang telah dibuat sebelumnya dalam kode.  Objek tampilan akan menampilkan objek anda di layar.  Anda dapat memuat sebanyak mungkin bentuk yang anda inginkan di dalam satu objek display, jadi kita akan memuat semua bentuk kita ke dalamnya untuk saat ini.

Brilian, sekarang anda tahu cara kerjanya, mari kita lanjutkan mengedit kode.  Anda tidak benar-benar membutuhkan  fungsi _getFlatShadeMaterial jadi mari kita edit semuanya bersama.  Melakukannya dengan cara ini juga memungkinkan kita memberikan materi yang berbeda untuk setiap objek.


Langkah 8:   Menariknya Bersama

Anda ingin menemukan baris ini dalam kode anda:

source: Flash

Kita sekarang akan mengedit  variabel fmat  sehingga alih-alih memanggil fungsi, ia akan memanggil flatShadeMaterial baru dimana kita menentukan warna.  Nantinya saya akan berurusan dengan materi lain termasuk materi bitmap.

Ganti _getFlatMaterial(id); Dengan:

Tiga parameter mengatur lightsource untuk flatShadeMaterial, warna datar, dan juga warna teduh.  Melakukan hal ini akan memberi objek kita efek yang lebih realistis saat kita memutar dan memutarnya di ruang fisik. 

Sekarang, di bawah baris itu kita ingin menambahkan:

Setelah kami membuat variabel untuk setiap objek kita, kita ingin mengubah kode kubus yang saya berikan tadi.  Daripada hanya memiliki fmat sebagai materi untuk semua kubus kita, anda akan ingin mengubahnya ke fmat, fmat2, fmat3 dan fmat4   sehingga kubus kita akan tampak berbeda.

Setelah anda selesai melakukannya, akhirnya anda bisa menghapus fungsi _getFlatMateriali.

Hapus baris kode berikut ini:

Langkah 9:   Uji Film Lagi

Dan sekarang mari kita uji lagi.  Jika semuanya dilakukan dengan benar, seharusnya ia akan terlihat sama.    Sebuah prestasi, ya?

source: My parents front room

Perubahannyta mungkin tidak terlalu banyak, tapi kita baru saja membuat fondasi untuk menciptakan banyak objek yang tampak berbeda.

Langkah 10: Bahan

Oke, mari kita ke sesuatu yang sedikit lebih berguna.  Materi bitmap.  Kebanyakan orang ingin memasukkan gambar mereka sendiri ke AR sebagai cara yang keren untuk mempresentasikan karyanya; hal ini dicapai dengan menggunakan gambar sebagai bahan.

Ini sangat sederhana.  Saya telah membuat gambar berikut untuk anda gunakan, karena saya akan menunjukkan cara menggunakan materi bitmap melalui tautan web.

source: Photoshop

Pertama, anda perlu mengimpor kelas BitmapFileMaterial.  Di bagian atas lembar kode anda di mana semua kelas lainnya diimpor, tambahkan baris berikut:

dan ubah materi fmat anda menjadi sebagai berikut:

Sekarang mari kita mengujinya, seharusnya terlihat seperti ini:

source: My parents front room

Seberapa sederhananya?

Langkah 11:   Membuatnya berlubang

Sekarang setelah saya menunjukkan cara membuat sebuah kubus yang berada di atas marker, mari membuat sebuah kubus yang berada di bawah marker untuk membuat efek lubang di dinding.

Efek ini awalnya dibayangkan dan dijelaskan oleh saqoosha.  Sayangnya, dia menjelaskannya dalam bahasa Jepang dan untuk papervision3d lebih tepatnya untuk digunakan dengan flARToolkit sehingga beberapa perubahan dilakukan.

Anda perlu mengimpor kedua kelas ini:

Tambahkan baris ini di bawah   _lightpoint dengan variabel pribadi lainnya:

dan kemudian di bawah  var dispObj: DisplayObject3D = new DisplayObject3D ();   tambahkan yang berikut ini:

Pada dasarnya, apa yang terjadi di sini adalah bahwa anda akan memiliki dua kubus, satu menjadi hijau dan yang lainnya membentuk pandangan bagian dalam.  Mereka akan berada di satu sisi sama lain.  Filter viewport akan menutupi apa saja yang berwarna hijau, itulah yang kita tentukan di luar kotak, memberi efek bahwa ada lubang pada marker.

Sekarang kita akan menciptakan dua kubus.

Hapus kode kubus yang ada dan ganti dengan ini:

Perhatikan, untuk bahan yang kita impor dalam dua file .jpg dari folder aset.  Folder ini terletak di dalam folder deploy utama, dimana file MultiFLARExample.swf   ditemukan.  Anda bisa mendownload gambar berikut yang telah saya buat, atau buat punya anda sendiri.

source: Photoshop
source: Photoshop

Langkah 12:   Uji Lubang

Berikan tes dan Anda harus memiliki sesuatu seperti ini:

source: My parents front room

Langkah 13:   Membuat Mark-ers

Sekarang, anda mungkin sudah muak dengan memegang sepotong kertas kecil dengan empat marker ke kamera.  Anda ingin memiliki maker anda sendiri, jadi mari kita membuatnya.  Dengan beberapa alat online dan Photoshop, anda dapat memiliki marker sendiri dalam hitungan menit.

Pertama, mari kita buat marker anda.  Anda tidak perlu menggunakan desain seperti kode batang seperti pada marker yang sedang anda gunakan, namun jika anda menggunakan banyak marker maka kode batang adalah cara terbaik.  Jika anda menggunakan satu atau dua maka bebaslah berkarya dengan desain.  Untuk desain marker saya, saya menggunakan K dari logo situs web saya.

source: My parents front room

Jika anda melakukannya untuk kartu bisnis atau beberapa materi promosi, pikirkan bagaimana marker tersebut terlihat karena anda dapat membuat beberapa marker yang sangat bagus yang menyatu dengan desain lebih banyak.

Anda perlu mengatur dokumen Photoshop anda siap untuk pembuatan marker.  Untuk marker dasar, buat file 800x800px dengan batas 150px sepanjang jalan.  Atau unduh gambar di bawah ini:

source: Photoshop

Langkah 14:   Generator Marker Online

Kotak putih di tengah adalah tempat anda bisa letakkan desain marker anda.  Cetak marker dan kemudian berkunjung ke  online Marker Generator .

Mereka memiliki pencipta marker online yang mengambil marker anda dan membuat file .pat yang sesuai dengan kode anda.  Ini cukup aneh, mereka memiliki opsi upload tapi saya tidak pernah menemukannya berfungsi (pencetakan berfungsi dengan baik).  Ada juga aplikasi AIR yang melakukan fungsi yang sama tapi saat ini semua masih bagus.

Tetapkan segmen marker menjadi 16x16 dan ukuran marker hingga 50%, tunjukkan marker anda ke webcam anda dan saat persegi merah mengelilingi marker, klik pada pola, jika anda puas dengan tampilannya di jendela pratinjau, klik simpan.

source: My parents front room

Jika penanda anda terlihat sangat aneh di pratinjau atau kotak merah tidak muncul, Anda mungkin perlu merancang ulang marker anda.  Anda juga harus memastikan bahwa ada beberapa ruang putih di sekitar marker anda, jika tidak, Flash tidak akan mengenalinya.

Saat kotak dialog muncul, jangan hanya mendownload di manapun, anda perlu meletakkan file .pat di folder tertentu.  Arahkan ke folder flARToolkit anda> deploy> aset> flar dan anda harus menemukan empat file .pat lainnya di sana.  Simpan pola anda di sana dan ingat apa yang anda sebut itu.  Saya memanggil milik saya "kmarker.pat" 

source: My hard drive

Langkah 15:   Mengubah Kode

Kembali di flash, temukan baris ini:

source: Flash

Dan ubah crash.pat untuk apa pun yang anda namakan sebagai penanda anda.

source: Flash

Jika anda menguji file Flash anda, anda harus menemukan bahwa marker baru anda mengambil semuanya dengan sempurna.

source: My parents front room

Kesimpulan

Terima kasih telah membaca pengantar Augmented Reality ini.  Saya harap anda menikmatinya dan itu membuat anda penasaran ingin membuat proyek AR anda sendiri.  Di bagian selanjutnya dari tutorial ini, saya akan membahas bagaimana menghidupkan objek dengan TweenMax, sehingga marker sedikit lebih banyak bermain, mengimpor model 3D dan membuat semuanya lebih cantik. 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.