masputih.com - OLD SITE

04 March 2008 in Papervision3D, Tutorial | permalink

Papervision3D : Primitives & Wireframe Material

Dalam tutorial ini, saya akan membahas tentang dasar-dasar penggunaan 3D engine yang bernama Papervision3D ( udah pernah denger, kan? ). Karena saya juga masih baru belajar selama semingguan, saya hanya akan membahas tentang pembuatan objek-objek primitif (built-in) dan sedikit tentang penggunaan beberapa texture/material dasar untuk skinning .

Oke, mari kita mulai dengan mendownload source code Papervision dari SVN repo di googlecode.

Mendonlod Papervision3D v2.0 ( Great White )

Karena source code Papervision ada di SVN server, pertama kita harus menginstall SVN client. Silakan tanya Om Google untuk mendapatkan SVN client yang sesuai dengan OS Anda. Saya sendiri menggunakan TortoiseSVN.

Karena saya hari ini agak malas menulis tentang penggunaan TortoiseSVN untuk mendonlod Papervision, silakan baca tutorialnya di blognya Om Dennis . Di sana Om Dennis menjelaskan tentang cara mendonlod Papervision versi 1.x , jadi silakan ikuti tutorialnya tapi jangan lupa memasukkan URL ini http://papervision3d.googlecode.com/svn/trunk/branches/GreatWhite/ pada bagian “Repo Browser”. Sekedar informasi, GreatWhite adalah code name untuk Papervision3D v2.0.

Oh ya, satu lagi. Berbeda dengan apa yg dicontohkan Om Dennis, untuk mempermudah proses update source code, jangan klik “Export” tapi klik “Checkout” pada context menu. Dengan cara ini, setiap kali Anda ingin meng-update source code Papervision, Anda cukup mengklik kanan folder Papervision di komputer Anda dan pilih “SVN Update” di context menu. Anda tidak perlu mendonlod semuanya. Biar irit bandwidth.

Mempersiapkan project

Dalam tutorial ini saya menggunakan FlashDevelop + FlexSDK. Mempersiapkan project untuk Papervision3D cukup mudah. Caranya gini:

1. Buat AS3 Empty Project
2. Set project classpath, arahkan ke ke folder di mana Anda mendonlod source Papervision3D. Di komputer saya, path-nya adalah D:\projects\flash\flashlib\as3\3d\pv3d\greatwhite\src
3. Buat class baru, beri nama Basic1. Kalo class ini nggak muncul pada Project Panel, klik kanan nama project di project panel, lalu klik menu “Show Hidden Items”.
4. Masih di project panel, Klik kanan class Basic1 lalu klik opsi “Always Compile”.

Oh ya, kalo Anda belum pernah mengeset FlashDevelop supaya bisa melakukan kompilasi dengan FlexSDK, silakan cari tutorialnya di forum FlashDevelop. Atau baca tutorial ini .

Mempersiapkan project di Flash IDE

Silakan baca petunjuk tentang cara setting classpath dan tambahkan path ke folder /src di mana Anda mendonlod Papervision3D.

Kemudian buat file .as baru, beri nama Basic1.as. Jadikan class/file ini sebagai Document Class.

Sudah siap? Mari kita mulai. :-)

Komponen Utama Papervision3D

Ada 4 komponen utama Papervision yang harus kita buat, yaitu Viewport3D, Scene3D, Camera3D ( atau alternatifnya, misalnya FreeCamera3D), dan BasicRenderEngine ( atau alternatifnya ).

Viewport3D bisa dianggap seperti adalah jendela dari mana Anda bisa melihat sebuah dunia 3D. Scene3D bisa dianggap seperti bidang gambar, dimana object 3D ditampilkan. Camera3D sudah jelas, adalah camera virtual. BasicRenderEngine adalah komponen yang bertugas menampilkan semuanya di stage.

Jadi, kita mulai dengan mempersiapkan keempat komponen ini dalam bentuk instance variables. Pertama, kita impor dulu class-classnya.

Catatan – Anda yang menggunakan FlashDevelop nggak perlu repot-repot mengetikkan statement import karena FlashDevelop akan otomatis menuliskannya bagi Anda pada saat Anda memilih datatype. Asik kan? Belum lagi kecepatan kompilasi, di Flash IDE kompilasi bisa sampe 20 – 30 detik, tapi dengan FlexSDK, kompilasi ga sampe 10 detik.

package{ import flash.display.Sprite; import org.papervision3d.cameras.FreeCamera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.scenes.Scene3D; import org.papervision3d.view.Viewport3D; public class Basic1 extends Sprite{ //komponen utama papervision3d private var _viewport:Viewport3D; private var _camera:FreeCamera3D; private var _scene:Scene3D; private var _renderer:BasicRenderEngine; //constructor public function Basic1() { initPapervision(); } private function initPapervision():void{ //buat viewport dengan ukuran 400 px x 400 px _viewport = new Viewport3D(400, 400); //scene _scene = new Scene3D(); //kamera virtual _camera = new FreeCamera3D(); //rendering engine _renderer = new BasicRenderEngine(); //tambahkan viewport ke dalam DisplayList addChild(_viewport); } } }

Sekarang papervision siap digunakan.

Untuk sekedar mengecek apakah semua sudah benar, silakan coba di-compile . Kalo masih ada error, cek lagi apakah classpath sudah benar & import statement sudah lengkap.

Sudah benar? Nggak ada error ? Good. Kita lanjutkan.

Untuk menampilkan dunia 3D papervision, kita perlu memanggil renderScene() yang dimiliki oleh BasicRenderEngine. Dan karena setiap kali ada perubahan pada komponen-komponen Papervision BasicRenderEngine.renderScene() harus dipanggil ulang, maka untuk memudahkan, kita manfaatkan saja event ENTER_FRAME untuk mengeksekusi method tersebut.

Tambahkan baris berikut pada initPapervision(), di bawah addChild(_viewport) :

addEventListener(Event.ENTER_FRAME, enterFrameListener);

Dan kita buat sebuah listener function untuk event ENTER_FRAME. Jangan lupa impor class flash.events.Event.

private function enterFrameListener(e:Event):void { _renderer.renderScene(_scene, _camera, _viewport); }

Silakan coba di-_compile_ lagi. Pastikan semuanya sudah benar.

Material paling sederhana : Wireframe Material & Color Material

Material dasar di Papervision yang paling sederhana adalah WireframeMaterial dan ColorMaterial. Wireframe , seperti namanya, adalah material berupa garis-garis seperti kawat ( wire ), material ini mirip seperti tampilan wireframe pada software 3D misalnya 3Dsmax. ColorMaterial adalah material berupa warna dalam format bilangan heksadesimal.

Material bisa dianggap sebagai kulit dari object 3D yang akan kita buat. Tanpa ada material, object yang kita buat tidak bisa dilihat. Jadi, minimal kita harus membuat instance WireframMaterial atau ColorMaterial, kemudian mengaplikasikannya pada object 3D.

Ok, sebelum membuat object 3D, kita buat sebuah function baru bernama init3DObject(). Di dalam function ini nanti kita akan membuat material dan object 3D.

private function init3DObject():void { var mat:WireframeMaterial = new WireframeMaterial(); }

Kemudian kita panggil init3DObject() dari constructor, setelah initPapervision().

Membuat Plane ( bidang datar, persegi empat )

Mari kita coba membuat sebuah object Plane. Pertama kita import class org.papervision3d.objects.primitives.Plane lalu dalam init3DObject() setelah var mat: … dst di atas, kita tambahkan :

//buat sebuah object plane dengan ukuran 400 x 400 //dan jumlah segmen horisontal & vertikal masing2 8 buah //gunakan "mat" sebagai materialnya var plane:Plane = new Plane(mat,400,400); //beri nama, supaya bisa diakses melalui _scene.getChildByName() plane.name = "My3DObject"; _scene.addChild(plane);

Catatan – Semua object primitif terbentuk dari segmen-segmen yang berbentuk segitiga. Semakin banyak segmen, semakin halus bentuk object, tapi juga semakin berat bagi CPU. Jumlah segmen ditentukan melalui argumen pada constructor setiap object.

Untuk menyederhanakan tutorial ini, tambahkan baris berikut ke dalam enterFrameListener() , sebelum baris _renderer.renderScene(_scene, _camera, _viewport). Di sinilah gunanya properti “name” dari object 3D yang kita buat dan untuk semua object yang kita buat, nama objectnya tetap sama “My3DObject”:

//semua object 3D adalah turunan dari DisplayObject3D var my3dObject:DisplayObject3D; if (_scene.getChildByName("My3DObject")) { my3dObject = DisplayObject3D(_scene.getChildByName("My3DObject")); //set camera supaya selalu mengarah kepada my3dObject _camera.lookAt(my3dObject); //putar object pada sumbu z my3dObject.roll(1); //putar object pada sumbu y my3dObject.yaw(1); }

Jangan lupa impor class org.papervision3d.objects.DisplayObject3D.

Sampai di sini, kode Basic1.as adalah:

package{ import flash.display.Sprite; import flash.events.Event; import org.papervision3d.cameras.FreeCamera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.scenes.Scene3D; import org.papervision3d.view.Viewport3D; import org.papervision3d.materials.WireframeMaterial; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.objects.primitives.Plane; public class Basic1 extends Sprite{ //komponen utama papervision3d private var _viewport:Viewport3D; private var _camera:FreeCamera3D; private var _scene:Scene3D; private var _renderer:BasicRenderEngine; //constructor public function Basic1() { initPapervision(); init3DObject(); } private function initPapervision():void{ //buat viewport dengan ukuran 400 px x 400 px _viewport = new Viewport3D(400, 400); //scene _scene = new Scene3D(); //kamera virtual _camera = new FreeCamera3D(); //rendering engine _renderer = new BasicRenderEngine(); //tambahkan viewport ke dalam DisplayList addChild(_viewport); //enterframe loop addEventListener(Event.ENTER_FRAME, enterFrameListener); } private function init3DObject():void { var mat:WireframeMaterial = new WireframeMaterial(); //buat sebuah object plane dengan ukuran 400 × 400 //dan jumlah segmen horisontal & vertikal masing2 8 buah //gunakan “mat” sebagai materialnya var plane:Plane = new Plane(mat,400,400); //beri nama, supaya bisa diakses melalui _scene.getChildByName() plane.name = “My3DObject”; //tambahkan ke dalam DisplayList sebagai child dari scene _scene.addChild(plane); } private function enterFrameListener(e:Event):void { var my3dObject:DisplayObject3D; if (_scene.getChildByName(“My3DObject”)) { my3dObject = DisplayObject3D(_scene.getChildByName(“My3DObject”)); //set camera supaya selalu mengarah kepada my3dObject _camera.lookAt(my3dObject); //putar object pada sumbu z my3dObject.roll(1); //putar object pada sumbu y my3dObject.yaw(1); } //tampilkan dunia 3D Papervision _renderer.renderScene(_scene, _camera, _viewport); } } }

Hasil kompilasinya adalah seperti ini:

Selamat, Anda telah membuat object 3D pertama! Ho ho ho :-)

Membuat Sphere ( Bola )

Berikut ini kode untuk membuat bola, dengan diameter 200px dan segmen sebanyak 16 buah. Silakan ganti kode untuk object Plane di atas.

//buat bola dengan diameter 200 px, segmen sebanyak 16 var sphere:Sphere = new Sphere(mat,200,16); sphere.name = "My3DObject"; _scene.addChild(sphere);

Hasil kompilasinya adalah seperti ini:

Membuat Cone ( kerucut )

Kerucut? Gampang!

var cone:Cone = new Cone(mat,400,400); cone.name = "My3DObject"; _scene.addChild(cone);

Membuat Cylinder

Silinder? Piece of cake!

var cylinder:Cylinder = new Cylinder(mat,200,400,16); cylinder.name = "My3DObject"; _scene.addChild(cylinder);

Membuat Kubus

Kubus memiliki 6 sisi yang masing-masing bisa memiliki material yang berbeda. Jadi untuk kubus, kita nggak bisa langsung menggunakan WireframeMaterial, tapi harus memasukkannya ke dalam object MaterialsList. Selain itu kita juga harus mendefinisikan pada sisi manakah material ini digunakan. Opsinya adalah “front”, “back”, “top”,“bottom”,“left”,“right”, dan “all”. Sementara kita pilih “all” saja.

var m:MaterialsList = new MaterialsList(); //tambahkan mat ke dalam materialsList //gunakan untuk semua sisi kubus ("all") m.addMaterial(mat, "all"); //create a cube var cube:Cube = new Cube(m,500,500,500,2,2,2); cube.name = “My3DObject”; _scene.addChild(cube);

Sekian dulu tutorial ini. Pada tutorial selanjutnya Insya Allah saya akan menjelaskan tentang cara menggunakan Bitmap (gambar) sebagai texture/skin dari object 3D.

Mudah-mudahan bermanfaat. Amin. :-)

Next article:

DisplayObject dan Custom Event

Previous article:

Lowongan Kerja di Trippert Labs