- Beranda
- Programmer Forum
[Actionscript 3.0, C]Share About Augmented Reality
...
TS
siMalih
[Actionscript 3.0, C]Share About Augmented Reality
Halo agan2 semua 
Thread ini untuk sharing2 tentang Augmented Reality.
Gw mau coba sharing cara membuat augmented reality yang simple.
Pertama2 yang dibutuhkan.
1. Adobe Flash ( disini gw pakai adobe flash, tapi bisa juga pake flex builder/ C (pakai openCV library) ).
2. Download Extended Library (gw pake FLARtoolKit, Papervision dan Flex)
- FLARtoolKit = AR Engine nya. (ada macam2 engine nya gan. kalo agan2 mau pakai yg lain
)
- Papervision = Untuk merender gambar 3D yang nantinya kita tampilkan dalam Augmented Reality kita.
Download Librarynya [URL="http://www.4*shared.com/file/neUXBFFV/library.html"]Disini[/URL]
3. Webcam (alat penghubung dunia real dan dunia virtual).
4. Kesabaran
.
Oke lsg gw mulai ya.
1. Pertama2 Agan buat file .fla nya di adobe flash (cs3) lalu save. (kalo ane kasih nama file nya testAR)
![[Actionscript 3.0, C]Share About Augmented Reality](https://dl.kaskus.id/i293.photobucket.com/albums/mm77/cumialbum/ARKaskus/buatfla.png)
2. Buat file actionscript nya. (ane namain file nya testAR.as)
![[Actionscript 3.0, C]Share About Augmented Reality](https://dl.kaskus.id/i293.photobucket.com/albums/mm77/cumialbum/ARKaskus/buatas.png)
3. Lalu Set Actionscript di file .Fla kita
![[Actionscript 3.0, C]Share About Augmented Reality](https://dl.kaskus.id/i293.photobucket.com/albums/mm77/cumialbum/ARKaskus/setas.png)
4. Lalu Agan set Extended Library tadi ke dalam file flash yg agan bikin.
Tekan CTRL+Shift+f12 (publish settings). Lalu Pilih Tab Flash. Dibagian Script pilih Settings.
Terus kebagian ini
![[Actionscript 3.0, C]Share About Augmented Reality](https://dl.kaskus.id/i293.photobucket.com/albums/mm77/cumialbum/ARKaskus/setexlib.png)
Masukkan Semua Extended Library yang tadi udah di download.
Kalo udah. Kita ke bagian code ya
![[Actionscript 3.0, C]Share About Augmented Reality](https://dl.kaskus.id/i293.photobucket.com/albums/mm77/cumialbum/ARKaskus/result.png)
kiri : AR, kanan : tanpa AR
Sekian dulu dari gw.
Bagi agan2 yang mau coba silahkan coba
Bagi agan2 yang mau comment silahkan comment.
Bagi agan2 yang lebih menguasai silahkan menambahkan atau membetulkan kalo2 ada salah
dan juga bisa sharing ilmunya. hehe 
Kalo ada salah2 di penjelasan mohon dipersori,namanya jg masih belajar dan tolong dibetulkan yah
Oh iya gan. ini versi simplenya untuk ar.
AR dapat menampilkan file2 digital lainnya, seperti video, sound, animasi.
Dan nanti akan diupdate.
[URL="http://www.4*shared.com/file/_7YtzldU/TestAR.html"]Disini[/URL] gan
* untuk pattern yg ane gunakan ada di assets/pola/bumi.pdfgan
Thread ini untuk sharing2 tentang Augmented Reality.
Spoiler for augmented reality:
Gw mau coba sharing cara membuat augmented reality yang simple.
Pertama2 yang dibutuhkan.
1. Adobe Flash ( disini gw pakai adobe flash, tapi bisa juga pake flex builder/ C (pakai openCV library) ).
2. Download Extended Library (gw pake FLARtoolKit, Papervision dan Flex)
Spoiler for penjelasan extended library:
- FLARtoolKit = AR Engine nya. (ada macam2 engine nya gan. kalo agan2 mau pakai yg lain
)- Papervision = Untuk merender gambar 3D yang nantinya kita tampilkan dalam Augmented Reality kita.
Download Librarynya [URL="http://www.4*shared.com/file/neUXBFFV/library.html"]Disini[/URL]
3. Webcam (alat penghubung dunia real dan dunia virtual).
4. Kesabaran
.Oke lsg gw mulai ya.
1. Pertama2 Agan buat file .fla nya di adobe flash (cs3) lalu save. (kalo ane kasih nama file nya testAR)
Spoiler for buat fla:
2. Buat file actionscript nya. (ane namain file nya testAR.as)
Spoiler for buat file as3:
3. Lalu Set Actionscript di file .Fla kita
Spoiler for set Actionscript di FLA:
4. Lalu Agan set Extended Library tadi ke dalam file flash yg agan bikin.
Spoiler for cara set library:
Tekan CTRL+Shift+f12 (publish settings). Lalu Pilih Tab Flash. Dibagian Script pilih Settings.
Terus kebagian ini
Spoiler for library:
Masukkan Semua Extended Library yang tadi udah di download.
Kalo udah. Kita ke bagian code ya
Spoiler for for code:
Spoiler for result:
kiri : AR, kanan : tanpa AR
Sekian dulu dari gw.
Bagi agan2 yang mau coba silahkan coba
Bagi agan2 yang mau comment silahkan comment.
Bagi agan2 yang lebih menguasai silahkan menambahkan atau membetulkan kalo2 ada salah
dan juga bisa sharing ilmunya. hehe Kalo ada salah2 di penjelasan mohon dipersori,namanya jg masih belajar dan tolong dibetulkan yah
Oh iya gan. ini versi simplenya untuk ar.
AR dapat menampilkan file2 digital lainnya, seperti video, sound, animasi.
Dan nanti akan diupdate.
Spoiler for for fla:
[URL="http://www.4*shared.com/file/_7YtzldU/TestAR.html"]Disini[/URL] gan
* untuk pattern yg ane gunakan ada di assets/pola/bumi.pdfgan
Spoiler for update:
0
30.8K
289
Komentar yang asik ya
Mari bergabung, dapatkan informasi dan teman baru!
Programmer Forum
20.2KThread•4.9KAnggota
Tampilkan semua post
TS
siMalih
#28
Reduce the Jitter effect.
Pada saat mencoba AR, kita sering mendapatkan hasil gambar/obyek yang bergerak2(bergetar).
ada cara untuk mengurangi efek ini, yaitu dengan memberikan filter pada detector kita. Yaitu dengan meningkatkan thresholding pada saat detector membaca pattern.
Ini code untuk filternya
*code yg berwarna merahada code yg diupdate
ada beberapa file yg harus didownload untuk filter ini.
Kalo ada yg mau menambahkan, atau punya solusi lain di share2 yah
Pada saat mencoba AR, kita sering mendapatkan hasil gambar/obyek yang bergerak2(bergetar).
Spoiler for penjelasan:
ada cara untuk mengurangi efek ini, yaitu dengan memberikan filter pada detector kita. Yaitu dengan meningkatkan thresholding pada saat detector membaca pattern.
Ini code untuk filternya
Code:
package
{
\timport flash.display.BitmapData;
\timport flash.display.Sprite;
\timport flash.media.Camera;
\timport flash.media.Video;
\timport flash.utils.ByteArray;
\timport flash.events.*;
\timport org.libspark.flartoolkit.core.FLARCode; //Import yang berisikan command Untuk Merubah Pattern kita menjadi code.
\timport org.libspark.flartoolkit.core.param.FLARParam; //Import yang berisikan command Parameter untuk webcam kita
\timport org.libspark.flartoolkit.core.raster.rgb.FLARRgbRaster_BitmapData; //Import Yang Menampung Bitmap Data kita.
\timport org.libspark.flartoolkit.core.transmat.FLARTransMatResult; // Import yang berisikan command untuk menentukan letak pattern kita
\timport org.libspark.flartoolkit.detector.FLARSingleMarkerDetector; //Import yang berisikan command pendeteksi pattern
\timport org.libspark.flartoolkit.[COLOR="Red"]support[/COLOR].pv3d.FLARBaseNode; //Import yang berfungsi sebagai penampung virtual world kita di webcam nantinya
\timport org.libspark.flartoolkit.[COLOR="Red"]support[/COLOR].pv3d.FLARCamera3D; //Import untuk Camera
\timport org.papervision3d.objects.parsers.DAE; //Import yang berisikan command untuk mem-parse file DAE (3D objek)
\timport org.papervision3d.render.BasicRenderEngine; //Import yang berisikan command untuk merender di webcam
\timport org.papervision3d.scenes.Scene3D; // Import yang berfungsi sebagai scene di webcam (seperti stage di flash)
\timport org.papervision3d.view.Viewport3D; // Import yang Berfungsi sebagai viewport objek kita.
\t[COLOR="Red"]import rgb2bin.AdaptiveToBinFilter;[/COLOR]
\t
\tpublic class testAR extends Sprite
\t{
\t\tprivate var video\t: Video; //Variable Video
\t\tprivate var webcam\t: Camera;\t//Variable untuk Webcam
\t\t
\t\tprivate var flarBaseNode\t\t\t\t: FLARBaseNode;\t\t//Variable Base Node
\t\tprivate var flarParam\t\t\t\t\t: FLARParam;\t\t// Variable Parameter Webcam
\t\tprivate var flarCode\t\t\t\t\t: FLARCode;\t\t\t// Variable Untuk Code Pattern
\t\tprivate var flarRgbRaster_BitmapData\t: FLARRgbRaster_BitmapData;\t//Variable Untuk Menampung BitmapData
\t\tprivate var flarSingleMarkerDetector\t: FLARSingleMarkerDetector; //Variable Pengecek Pattern
\t\tprivate var flarCamera3D\t\t\t\t: FLARCamera3D;\t\t// Variable Camera3D saat di webcam
\t\tprivate var flarTransMatResult\t\t\t: FLARTransMatResult; //Variable Penentu letak pattern
\t\tprivate var bitmapData\t\t\t\t\t: BitmapData;\t// Variable Bitmap Data
\t\tprivate var FLAR_CODE_SIZE\t\t\t\t: uint \t\t= 16; //Variable Size Pattern
\t\tprivate var MARKER_WIDTH\t\t\t\t: uint \t\t= 80; // Varible untuk lebar pattern, disini kita pakai 80x80
\t\t
\t\t[Embed(source="./assets/pola/bumi.pat", mimeType="application/octet-stream")]
\t\tprivate var Pattern\t: Class; //Embed source pattern, disini nama pattern gw bumi.pat
\t\t
\t\t[Embed(source="./assets/pola/FLARCameraParameters.dat", mimeType="application/octet-stream")]
\t\tprivate var Params : Class; // Embed file parameter camera,
\t\t
\t\tprivate var basicRenderEngine\t: BasicRenderEngine; // Variable untuk merender objek
\t\tprivate var viewport3D\t\t\t: Viewport3D;\t\t// Variable Viewport di webcam
\t\tprivate var scene3D\t\t\t\t: Scene3D;\t\t\t// Variable Scene di webcam
\t\tprivate var collada3DModel\t\t: DAE;\t\t\t// Variable membaca objek 3D kita (.dae)
\t\t
\t\tprivate var Lebar_Video \t\t\t: Number = 640;\t\t\t\t
\t\tprivate var Tinggi_Video \t\t\t: Number = 480;\t\t\t\t
\t\tprivate var Lebar_Webcam\t\t\t: Number = Lebar_Video/2;\t
\t\tprivate var Tinggi_Webcam\t \t\t: Number = Tinggi_Video/2;\t
\t\tprivate var FrameRate\t\t\t\t: Number =25;\t\t\t\t
\t\tprivate var DETECTION_THRESHOLD\t\t: uint \t = 80;\t\t\t//set 1 - 100 untuk mendapatkan hasil yang akurat\t
\t\tprivate var DETECTION_CONFIDENCE\t: Number = 0.5;\t\t\t// set 0.1 - 1 untuk mendapatkan pengecekan pattern lebih akurat
\t\tprivate var Skala_Model\t\t\t\t: Number = 1;\t\t\t
\t\t
\t\tprivate var URL_MODEL \t\t: String = "./assets/objek/bumi.dae"; // URL model yang ingin kita tampilkan
\t\t
\t\tpublic function testAR ()
\t\t{
\t\t\tWebcam();
\t\t\tMarker();
\t\t\tObjek();
\t\t\t \t
\t\t\t
\t\t\taddEventListener(Event.ENTER_FRAME, proses);
\t\t}
\t\t
\t\tprivate function Webcam () : void
\t\t{
\t\t\tvideo = new Video(Lebar_Video, Tinggi_Video);
\t\t\twebcam = Camera.getCamera();
\t\t\twebcam.setMode(Lebar_Webcam,Tinggi_Webcam,FrameRate);
\t\t\tvideo.attachCamera(webcam);
\t\t\taddChild(video);
\t\t}\t
\t\tprivate function Marker () : void
\t\t{
\t\t\t
\t\t\tflarParam = new FLARParam();
\t\t\tflarParam.loadARParam(new Params() as ByteArray); //Menampung parameter camera
\t\t\tflarCode = new FLARCode (FLAR_CODE_SIZE, FLAR_CODE_SIZE);
\t\t\tflarCode.loadARPatt(new Pattern()); //Load Pattern
\t\t\t
\t\t\t
\t\t\tbitmapData = new BitmapData(Lebar_Video, Tinggi_Video);
\t\t\tbitmapData.draw(video); //set bitmapdata sebagai video, nantinya inilah yang dijadikan acuan kepada marker
\t\t\tflarRgbRaster_BitmapData = new FLARRgbRaster_BitmapData(bitmapData);
\t\t\tflarSingleMarkerDetector = new FLARSingleMarkerDetector (flarParam, flarCode, MARKER_WIDTH); //set Pendeteksi Marker
\t\t\t[COLOR="Red"]flarSingleMarkerDetector.setContinueMode (false);
\t\t\tflarSingleMarkerDetector.filter = new AdaptiveToBinFilter (80);[/COLOR]
\t\t}\t
\t\tprivate function Objek () : void
\t\t{
\t\t\t
\t\t\tbasicRenderEngine \t= new BasicRenderEngine();
\t\t\tflarTransMatResult \t= new FLARTransMatResult();
\t\t\tviewport3D \t\t\t= new Viewport3D();
\t\t\tflarCamera3D \t\t= new FLARCamera3D(flarParam);
\t\t\tflarBaseNode \t\t= new FLARBaseNode();
\t\t\tscene3D \t\t\t= new Scene3D();
\t\t\tscene3D.addChild(flarBaseNode);
\t\t\t
\t\t\t
\t\t\tcollada3DModel = new DAE();
\t\t\tcollada3DModel.load(URL_MODEL);
\t\t\tcollada3DModel.scaleX = collada3DModel.scaleY = collada3DModel.scaleZ = Skala_Model;\t\t
\t\t\t
\t\t\taddChild (viewport3D);
\t\t}\t
\t\t
\t\tprivate function proses (ev : Event) : void
\t\t{
\t\t\t
\t\t\tbitmapData.draw(video); //set bitmapdata sebagai video, nantinya inilah yang dijadikan acuan kepada marker
\t\t\t//ini dilakukan setiap frame yang ditampilkan dikamera, sehingga nanti kita akan mengecek secara real time
\t\t\t
\t\t\ttry {
\t\t[COLOR="Red"]\t\tvar af:AdaptiveToBinFilter = flarSingleMarkerDetector.filter as AdaptiveToBinFilter;[/COLOR]
\t\t\t\t
\t\t\t\tif(\tflarSingleMarkerDetector.detectMarkerLite (flarRgbRaster_BitmapData, DETECTION_THRESHOLD) &&
\t\t\t\t\tflarSingleMarkerDetector.getConfidence() > DETECTION_CONFIDENCE\t\t\t\t\t\t\t)//mendeteksi apakah pattern ada atau tidak di webcam
\t\t\t\t\t{
\t\t\t\t\t\t
\t\t\t\t\t
\t\t\t\t\tflarSingleMarkerDetector.getTransformMatrix(flarTransMatResult); //mendapat transformasi matrix posisi letak pattern
\t\t\t\t\tflarBaseNode.setTransformMatrix(flarTransMatResult); //menset posisi objek berdasarkan transformasi matrix
\t\t\t\t\t
\t\t\t\t\tif(collada3DModel.parent==null) // mengecek apakah model memiliki parent atau tidak
\t\t\t\t\t{
\t\t\t\t\t\tflarBaseNode.addChild(collada3DModel); // menambahkan model kedalam flarbase node (menambahkan objek)
\t\t\t\t\t}
\t\t\t\t\t[COLOR="Red"]if (af != null) af.adjustSearchArea (bitmapData.rect, flarSingleMarkerDetector.getSquare (), flarSingleMarkerDetector.getConfidence());[/COLOR]
\t\t\t\t\t
\t\t\t\t\t
\t\t\t\t}
\t\t\t\telse
\t\t\t\t{
\t\t\t\t\tif(collada3DModel.parent!=null)//mengecek apakah model sudah memiliki parent / tidak
\t\t\t\t\t{
\t\t\t\t\t\tflarBaseNode.removeChild(collada3DModel); // meremove model dr flarbase node (menghilangkan objek)
\t\t\t[COLOR="Red"]\t\t\tif (af != null) af.adjustSearchArea (bitmapData.rect, null, 0);[/COLOR]
\t\t\t\t\t}
\t\t\t\t\t
\t\t\t\t\t\t\t\t\t
\t\t\t\t\t
\t\t\t\t}
\t\t\t\tbasicRenderEngine.renderScene(scene3D, flarCamera3D, viewport3D); // rendering
\t\t\t} catch (error : Error) {}
\t\t}
\t\t
\t}
\t
\t
}
*code yg berwarna merahada code yg diupdate
ada beberapa file yg harus didownload untuk filter ini.
Spoiler for file tambahan:
Kalo ada yg mau menambahkan, atau punya solusi lain di share2 yah
0