Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. 3D
Code

Panduan Permulaan kepada Realiti Semula

by
Difficulty:BeginnerLength:LongLanguages:

Malay (Melayu) translation by Robi'ah Ar Ro'yi (you can also view the original English article)

Reality Dipertingkat baru-baru ini bertambah baik, terutamanya berdasarkan Flash AR. Saya akan memandu anda melalui cara membuat beberapa kesan mudah tetapi kemas yang boleh anda letakkan di laman web anda sendiri.


Pengenalan: Realiti Dipertingkatkan

Realiti diperkaya telah dinilai sebagai salah satu trend paling hangat pada tahun 2010. Konsep di belakangnya agak mudah, meletakkan dunia fizikal dengan grafik yang sejuk yang seolah-olah menduduki ruang yang sama seperti anda.

Banyak syarikat telah menggunakannya sebagai alat promosi yang hebat. Adidas hanya menggunakan Augmented Reality di atas mereka dan membuat permainan kelihatan sangat keren.

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

Lego menggunakannya sebagai cara untuk memvisualisasikan apa produk mereka akan kelihatan apabila anda selesai membina mereka.

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

Sesetengah pelawat bebas menggunakannya sebagai kad perniagaan dan alat promosi yang sangat sejuk . AR membolehkan anda membuat kad perniagaan yang lebih menarik tanpa sebarang kos sama sekali dan anda boleh memasukkan lebih banyak maklumat tentangnya.

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

Pada bulan Januari tahun ini, saya menyelesaikan projek universiti di mana saya mencipta sistem realiti yang dipertingkatkan. apabila anda berjalan-jalan, ia memaparkan sebuah galeri maya yang menceritakan kisah yang sangat tragis.

source: http://kablamo.co.uk

Semak video di Youtube.

Saya membuat AR dari sudut reka bentuk, dengan sedikit mengetahui tentang pengekodan dalam AS3. Saya di sini untuk berkongsi apa yang telah saya pelajari dengan anda kerana saya merasa amat sukar untuk pemula untuk mempelajari topik ini. Ia hanya satu soalan untuk memulakan segala-galanya dari awal.

Sekarang, saya yakin anda penuh dengan idea mengenai perkara yang akan diwujudkan, mari buat projek realiti tambahan pertama anda: tambah kedalaman pada sekeping kertas datar.


Pengenalan: flARToolkit

flARToolkit adalah versi kilat dari perpustakaan realiti bertambah C-coded yang dikenali sebagai ARToolkit. Dia telah diubah oleh ahli kod Jepun yang sangat mahir yang dikenali sebagai saqoosha . Dia melakukan segala macam perkara gila dengan realiti bertambah dan jika anda dapat membaca bahasa Jepun atau bersedia untuk menavigasi banyak catatan yang tidak dapat dibayangkan apabila diterjemahkan, anda boleh belajar banyak dari dia. Dia mencipta kesan 'lubang tembok' yang ditunjukkan di Projek perayaan Tahun Baru , yang dicipta untuk dialu-alukan pada tahun 2009.

source: http://vimeo.com/2734815

Baru-baru ini, beliau telah menunjukkan bahawa anda boleh menyambungkan pelbagai penanda bersama - sama dan kesan-kesan hebat lain yang saya hanya boleh bermimpi mencipta untuk saya.

source: http://vimeo.com/6262632

Langkah 1: Ketahui Sumber

Squidder.com mengubah pustaka flartoolkit yang sedia ada, kelas flarManager, untuk mengendalikan peristiwa dan pelbagai objek. Menariknya, mereka menyiarkan kod sumber mereka dan memanggil 'bagaimana' tetapi tidak pernah benar-benar menerangkan kod mereka sendiri. Ia mengambil sedikit masa untuk memikirkan bagaimana untuk mendapatkan beberapa objek yang semuanya boleh berbeza. Saya harus menunjukkan sekarang bahawa saya adalah pereka pertama dan pengekodan yang dihasilkan dari keinginan untuk membuat sesuatu yang gila. Saya menghampiri ini yang mahukan hasil akhirnya berfungsi dan tidak peduli dengan cara terbaik untuk menyandikan sesuatu.

Mari kita muat turun kod dari pos asal mereka pada subjek dan berikannya.

Edit: Squidder.com sedang turun; gunakan pautan ini sebagai gantinya: http://kablamo.co.uk/flarsquidderkit.zip

Muat turun fail yang dipanggil "flarsquidderkit.zip", ekstrak fail .zip dan buka folder utama. Perhatikan, jika anda tidak mengeluarkan folder .zip, anda tidak dapat membuka .swf dengan betul atau mengedit fail yang anda perlukan. Jadi sebaik sahaja anda melakukannya, anda akan melihat 3 folder utama: menggunakan, fla dan src. anda juga akan melihat fail bernama "flardrums.pdf".

source: My hard drive

Langkah 2: Masa mainkan

Kami mempunyai penanda kami buat masa ini, mencetaknya supaya kami dapat menguji mereka dan melihat bagaimana sumber sedang bekerja.

Buka folder penempatan dan buka MultiFLARExample.swf. Menerima webcam dan mula bermain dengan penanda.

source: My parents front room

Dalam demo video mereka, anda melewati setiap penanda satu demi satu dan melihat bagaimana mereka membuat bunyi apabila mereka hilang. Ia ditulis oleh squidder. Mereka menambah dua peristiwa, MARKER_ADDED dan MARKER_REMOVED . Kami akan memikirkan cara menggunakan peristiwa ini nanti.

Sekarang anda tahu bagaimana ia kelihatan pada masa ini, mari ambil perhatian untuk mengubah suai kod sumbernya untuk melakukan beberapa perkara yang sejuk dari diri kita sendiri.


Langkah 3: Terdapat Pengekodan untuk dilakukan

Untuk tutorial ini, saya menganggap anda mempunyai pengetahuan asas tentang helaian dan kelas AS3.

Pergi ke folder \ fla \ dan kemudian klik dua kali pada "multiFLARExample.fla". Dalam panel sifat anda harus melihat kotak kelas yang dipenuhi dengan MultiFLARExample. Anda ingin klik pada ikon pensel di sebelah kotak kelas supaya kami dapat melihat kod tersebut.

source: Flash

Langkah 4: MultiFLARExample

Secara langsung anda akan melihat kod import biasa di bahagian atas dandi bawahnya terdapat beberapa pembolehubah asas untuk sumber cahaya.

Seterusnya adalah bahagian yang menarik, kod yang dimuatkan dalam penanda. Seperti yang dapat anda lihat, penanda dimasukkan ke dalam array untukpengakuan mudah kemudian. Perhatikan pesanan yang mereka muatkan di sini. Penanda pertama dalam array mendapat id 0, seterusnya ialah 1 dan seterusnya. Kami akan menggunakan id ini kemudian.

source: Flash

Juga lihat fungsi peribadi _addCube dan _getFlatMaterial kerana mereka adalah dua bahagian yang lain yang akan kita fokuskan pada ketika menyunting hari ini. Mereka cukup jelas dalam apa yang mereka lakukan, tetapi mereka terbentuk dengan pelik. Mereka telah dikodkan untuk kesederhanaan dalam mendapatkan objek yang sama dalam banyak warna, bukannya banyak objek yang berbeza, jadi kita perlu membuat beberapa perubahan


Langkah 5: Ch-Ch-Perubahan

Baiklah, mari kita ubah kod. Mari kita mengubahnya menjadi keadaan yang lebih berguna tetapi sekarang kita akan menjaga penampilan visual yang sama. Apabila saya memikirkan semua ini, ia adalah satu kelegaan yang hebat untuk mengetahui semua yang berlaku if pernyataan berakhir. If pernyataan itu begitu ajaib dan berguna apabila ia datang kepada segi pengekodan.

Dalam fungsi _addCube , gantikan kod ini:

dengan kod berikut:

Langkah 6: Filem Ujian

Sekarang, ini mungkin kelihatan seperti cara yang rumit untuk mengendalikan kiub, tetapi ini membolehkan kita mengendalikan setiap kiub. Sebagai contoh, dalam kod di atas, saya telah menukar paksi z kiub untuk menunjukkan kepada anda bahawa kod itu kini mengendalikan setiap kiub sebagai objeknya sendiri. Mari cuba filem ini, anda mesti mempunyai sesuatu untuk kesan ini:

source: My parents front room

Langkah 7: Penjelasan

Sebelum kita meneruskan, beritahu saya kod yang baru anda masukkan. Ini agak mudah dan jika anda telah menggunakan papervision3D sebelum anda boleh melangkau bahagian ini.

Di sini kita buat pemboleh ubah baru, sebuah kubus . Pembolehubah ini menyimpan semua maklumat yang diperlukan untuk membuat kiub dan menentukan penampilannya. Bahagian MaterialsList merujuk kepada bahan yang digunakan untuk bahagian luar kiub. Oleh kerana kita mahu bahan yang sama pada setiap sisi dan bahan disimpan dalam pembolehubah yang dibuat lebih awal dalam kod, kita menggunakan {all: fmat} . Saya akan bercakap lebih lanjut mengenai pemboleh ubah fmat di kemudian hari. Akhirnya, tiga 40, inilah dimensi kiub, lebar, ketinggian dan kedalaman. Sudah tentu mereka tidak perlu semua sama walaupun ini adalah kiub. Anda boleh menggunakan kaedah kiub untuk membuat bentuk persegi persegi jika anda mahu.

Ia menentukan nilai z di kiub. Ini adalah bagaimana tinggi kiub duduk di penanda. 0 adalah pusat kiub dan dengan itu setinggi separuh ketinggian bentuknya adalah tepat di atas penanda.

dispObj merujuk kepada objek paparan yang dibuat dalam kod. Objek paparan akan memaparkan objek anda pada skrin. Anda boleh memuatkan seberapa banyak bentuk yang anda mahu dalam objek paparan tunggal, jadi kami akan memuat semua bentuk kami ke dalamnya sekarang.

Brilian, sekarang anda tahu bagaimana ia berfungsi, mari kita terus menyunting kod. Anda tidak semestinya memerlukan fungsi _getFlatShadeMaterial jadi mari edit semuanya. Melakukannya dengan cara ini juga membolehkan kita memberi bahan yang berbeza kepada setiap objek.


Langkah 8: Menarik Bersama

Anda ingin mencari baris ini dalam kod anda:

source: Flash

Sekarang kita akan mengedit pemboleh ubah fmat dan bukannya memanggil fungsi itu, ia akan memanggil flatShadeMaterial baru di mana kita menentukan warna. Kemudian saya akan berurusan dengan bahan lain termasuk bahan bitmap.

Ganti _getFlatMaterial(id); Oleh:

Tiga parameter menetapkan lightsource untuk flatShadeMaterial, warna rata, dan juga warna teduhan. Melakukan ini akan memberikan kesan yang lebih realistik kepada objek kita apabila kita berpaling dan bermain di ruang fizikal.

Sekarang, di bawah garisan itu kita mahu menambah:

Selepas kita membuat pemboleh ubah bagi setiap objek kita, kita mahu menukar kod kubus yang saya berikan sebelum ini. Daripada hanya mempunyai fmat sebagai bahan untuk semua kiub kami, anda akan mahu mengubahnya menjadi fmat, fmat2, fmat3 dan fmat4 jadi kiub kami akan kelihatan berbeza.

Sebaik sahaja anda melakukannya, akhirnya anda boleh memadam fungsi _getFlatMateriali .

Padamkan baris kod berikut:

Langkah 9: Uji Lebih Banyak Filem

Dan kini mari kita uji lagi. Sekiranya semuanya dilakukan dengan betul, ia sepatutnya kelihatan sama. Pencapaian, huh?

source: My parents front room

Perubahan itu mungkin tidak terlalu banyak, tetapi kami baru saja mewujudkan asas untuk mewujudkan banyak objek yang kelihatan berbeza.

Langkah 10: Bahan

Baiklah, mari kita pergi ke sesuatu yang lebih berguna. Bahan bitmap. Kebanyakan orang mahu meletakkan gambar mereka sendiri ke AR sebagai cara yang sejuk untuk membentangkan kerja mereka; ini dicapai dengan menggunakan imej sebagai bahan.

Ia sangat mudah. Saya telah membuat imej berikut untuk anda gunakan, kerana saya akan menunjukkan kepada anda cara menggunakan bahan bitmap melalui pautan web.

source: Photoshop

Pertama, anda perlu mengimport kelas BitmapFileMaterial . Di bahagian atas lembaran kod anda di mana semua kelas lain diimport, tambah baris berikut:

dan ubah bahan fmat anda sebagai berikut:

Sekarang mari kita uji itu, ia sepatutnya kelihatan seperti ini:

source: My parents front room

Betapa mudahnya?

Langkah 11: Buatnya

Sekarang saya telah menunjukkan bagaimana untuk membuat kiub di atas penanda, mari kita buat kiub di bawah penanda untuk membuat kesan lubang di dinding .

Kesan ini pada asalnya dibayangkan dan dijelaskan oleh saqoosha. Malangnya, dia menerangkannya dalam bahasa Jepun dan untuk papervision3d lebih tepat untuk digunakan dengan flARToolkit sehingga beberapa perubahan dibuat.

Anda perlu mengimport kedua-dua kelas:

Tambahkan baris ini di bawah _lightpoint dengan pemboleh ubah peribadi lain:

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

Pada asasnya, apa yang berlaku di sini adalah bahawa anda akan mempunyai dua kiub, satu menjadi hijau dan yang lain membentuk pandangan batin. Mereka akan berada di satu sisi satu sama lain. Penapis viewport akan melindungi apa sahaja yang hijau, itu yang kami tentukan di luar kotak, memberi kesan bahawa ada lubang di penanda.

Sekarang kita akan membuat dua kiub.

Padamkan kod kiub yang sedia ada dan gantikan dengan ini:

Notis, untuk bahan-bahan yang kami import dalam dua .jpg fail dari folder aset. Folder ini terletak di dalam folder penyeberang utama, di mana fail MultiFLARExample.swf dijumpai. Anda boleh memuat turun imej berikut yang saya buat, atau buat sendiri.

source: Photoshop
source: Photoshop

Langkah 12 : Ujian Lubang

Berikan ujian dan anda harus mempunyai sesuatu seperti ini:

source: My parents front room

Langkah 13 : Mencipta Marker

Kini, anda mungkin sakit memegang sekeping kertas kecil dengan empat penanda kepada kamera. Anda mahu mempunyai pembuat anda sendiri, jadi mari kita buatnya. Dengan beberapa alatan dalam talian dan Photoshop, anda boleh memiliki penanda anda sendiri dalam beberapa minit.

Pertama, mari buat penanda anda. Anda tidak perlu menggunakan reka bentuk seperti kod bar seperti penanda yang anda gunakan, tetapi jika anda menggunakan banyak penanda maka kod bar adalah cara terbaik. Sekiranya anda menggunakan satu atau dua maka bebas bekerja dengan reka bentuk. Untuk reka bentuk penanda saya, saya menggunakan K dari logo laman web saya.

source: My parents front room

Jika anda melakukannya untuk kad perniagaan atau beberapa bahan promosi, fikirkan bagaimana penanda dapat dilihat kerana anda boleh membuat beberapa penanda yang sangat baik yang menggabungkan dengan lebih banyak reka bentuk.

Anda perlu menetapkan dokumen Photoshop anda bersedia untuk penciptaan penanda. Untuk penanda asas, buat fail 800x800px dengan had 150px sepanjang jalan. Atau muat turun imej di bawah:

source: Photoshop

Langkah 14 : Penanda Penanda Atas Talian

Kotak putih di tengah adalah di mana anda boleh meletakkan reka bentuk penanda anda. Cetak penanda dan kemudian lawati Penanda dalam talian .

Mereka mempunyai pencipta penanda dalam talian yang mengambil penanda anda dan mencipta fail yang sepadan dengan kod anda. Ia agak pelik, mereka mempunyai pilihan muat naik tetapi saya tidak dapat berfungsi (percetakan berfungsi dengan baik). Terdapat juga aplikasi AIR yang melaksanakan fungsi yang sama tetapi sekarang semuanya masih bagus.

Tetapkan segmen penanda kepada 16x16 dan saiz penanda sehingga 50%, tunjukkan penanda anda ke webcam anda dan apabila persegi merah mengelilingi penanda, klik corak, jika anda berpuas hati dengan penampilan dalam tetingkap pratonton, klik simpan.

source: My parents front room

Jika penanda anda kelihatan sangat pelik dalam pratonton atau kotak merah tidak muncul, anda mungkin perlu mengubah reka bentuk penanda anda. Anda juga harus memastikan terdapat beberapa ruang putih di sekeliling penanda anda, jika Flash tidak akan mengenalinya.

Apabila kotak dialog muncul, jangan muat turun di mana sahaja, anda perlu meletakkan fail .pat dalam folder tertentu. Navigasi ke folder flARToolkit anda> menggunakan> aset> flar dan anda perlu mencari empat fail lain di sana. Pastikan corak anda di sana dan ingat apa yang anda panggil. Saya memanggil harta saya "kmarker.pat"

source: My hard drive

Langkah 15 : Tukar Kod

Kembali dalam kilat, cari baris ini:

source: Flash

Dan ubah crash.pat untuk apa sahaja yang anda sebut penanda anda.

source: Flash

Jika anda menguji fail Flash anda, anda harus mendapati bahawa penanda baharu anda mengambil semuanya dengan sempurna.

source: My parents front room

Kesimpulannya

Terima kasih kerana membaca pengenalan Reality Augmented ini. Saya harap anda menikmatinya dan ia membuatkan anda penasaran untuk membuat projek AR sendiri. Di bahagian seterusnya tutorial ini, saya akan membincangkan cara menghidupkan objek dengan TweenMax, sehingga penanda memainkan sedikit lebih, mengimport model 3D dan menjadikan semuanya lebih cantik.

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.