BLOKGROEP PROJECT

Hallo readers atau kamu yang ga sengaja kesini karena salah klik atau apapun, Hallo :D..

Kali ini gw ingin berbagi cerita tentang pembangunan sebuah project aplikasi interaktif untuk perusahaan Blokgroep di belanda sana (www.blokgroep.nl). Singkat cerita Blokgroep ingin membuat sebuah aplikasi berupa informasi mengenai mesin-mesin produksi yang mereka punya, sekalian ingin ‘showoff’ juga salah satu kantor sekaligus pabrik mereka (eksterior). Dan mengenai konsep meraka serahkan sepenuhnya pada TEF

Disini cuma dijelasin soal perancangan secara umum, untuk pembahasan yang lebih detail & teknikal bisa tanya aja lansung via komen atau email, it’s free, so feel free to ask :). 

Ok, proses pengerjaannya seperti ini:

0. Information gathering & konsep sistemnya bakal kaya gimana. Gw dikasi beberapa floorplan exterior juga interior gedung, filenya berupa CAD, gw ga bisa CAD, jadi pasti gw bawa ke 3ds max buat jadi acuan skala

1. Buat 3D exterior & interior berdasarkan denah yang disediakan & referensi foto dari google street view. Referensi dari foto sangat menolong terutama masalah materialing 

2. Buat mesin-mesin, kurang lebih 40 jenis mesin (32an yang terpakai) untuk di model ulang dalam bentuk 3D base on picts. Massive!

3. Membuat disain untuk komponen User Interface. Ini bagian yg gue suka, selain 3d i found my self enjoying User interface designing :D. 

4. Membuat engine untuk menampilkan foto ruangan (panoramic 360 derajat). Sayang sistemnya ga jadi diterapin, sebenernya sistem ini udah sepenuhnya jalan, kita punya tenaga di belanda buat take panoramic image & sudah sukses fully interactive, sayang pihak blokgroepnya membatalkan fitur ini karena alasan tertentu. No, prob at all, yang penting ilmu nya dapet 🙂

5. Menggabungkan semuanya dalam satu aplikasi interaktif. The big bang is here!! 😀

6. Memasukan informasi mesin beserta foto(s) ke tiap mesin 3D. 

dan, aplikasinya udah running sekarang, bisa dicek disini: http://www.blokgroep.nl/virtuele_tour.php prosesnya developmentnya memakan waktu +- 5 bulan (efektifnya 3 bulan) karena sempat tertunda oleh pihak Blokgroep. Yup lumayan ribet & panjang bukan 😀 tapi bangga juga sih kerjaan gw dipake perusahaan sekelas blokgroep. hehehehe 😀 *plak* *disambit*..

Pesan penulis: Fokuslah pada apa yang kamu sukai, what you focus on, grow, dan kamu akan kaget bahwa suatu saat apa yang kamu sukai itu berguna & bermanfaat bagimu & orang lain. Udah ah mau ngopi dulu 🙂

Thanks for stumbled here
Blogging later ;)..


Advertisements

PV3D Tutorial: Membuat objek 3D menggunakan kelas PV3D

[Bahasa pemrograman ActionScript 3.0 adalah bahasa yang murni menggunakan konsep OOP, diharapkan anda telah terbiasa dengan Object Oriented Programming]

Halo 😀 !! Selamat pagi/ siang/ sore/ malam/ dini hari/!! Semoga hari mu menyenangkan 😉 Melanjutkan postingan sebelumnya tutorial kali ini akan membahas bagaimana menampilkan objek 3D di web browser dengan menggunakan objek 3D bawaan PV3D (Papervision3D). Ada beberapa class objek 3D yang telah di sertakan dalam file swc (baca: swik), walaupun tergolong primitive objects (objek 3D sederhana/ dasar) namun kehadiran mereka sangat berguna, ringan untuk di load dan memungkinkan dimanipulasi sekreatif mungkin :), beberapa sangat berguna untuk kepentingan debugging & testing.

Dibawah ini adalah daftar objek-objek 3D yang disertakan:

1. Plane (kotak)
2. Sphere (bola)
3. Cylinder (silinder)
4. Cone (kerucut)
5. Cube (kubus)
6. Arrow (panah)
7. PaperPlane (pesawat kertas) –> hehe, beneran pesawat kertas yang dulu waktu SD sering kita buat 😀

primitive objects
primitive objects

Untuk menampilkan objek 3D di browser, ada beberapa kelas yang wajib di import:
Scene 3D, viewport3D, camera3D, renderEngine

//import segala yang dibutuhkan
import flash.display.Sprite;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
//kelas Tampilkan3D adalah turunan dari Sprite
public Tampilkan3D extends Sprite
{
//inisialisasi properti dari kelas (tanpa nilai, diberi value di kontruktor)
private var scene:Scene3D;
private var viewport:Viewport3D;
private var camera:Camera3D;
private var renderEngine:BasicRenderEngine;
private var bola:Sphere;
//konstruktor (di run saat program pertama dijalankan)-ingat nama konstruktor harus sama dengan nama kelas dan nama file (Tampilkan3D.as)
public function Tampilkan3D()
{
   scene = new Scene3D();
   camera = new Camera3D();
   bola = new Sphere(); //tidak mengisi properti = menggunakan nilai default dari kelas Sphere
   scene.addChild(bola); //bola ditampilkan pada scene
   viewport = new Viewport3D();
   addChild(viewport);
   renderEngine = new BasicRenderEngine();
   renderEngine.renderScene(scene,camera,viewport);
}
}
}

dengan kode diatas kita bisa menampilkan objek-objek lainnya di viewport, hanya tinggal menginisialisasi, misal pesawatKertas: new PaperPlane; kotak: new Cube; — tapi ingat properti kelas harus dibuat sebelumnya.

code diatas sangat simple dan mudah untuk dipahami, kan? namun sebenarnya bisa dibuat lebih simpel lagi :D. Papervision 3D telah menyediakan kelas BasicView yang berisi kelas2 yang memungkinkan objek 3D ditampilkan. Yang perlu dilakukan hanya meng extends kelas sebagai BasicView (turunan dari BasicView). Sebenarnya apa saja yang berada di dalam kelas BasicView (yang pasti Scene 3D, viewport3D, camera3D, renderEngine sudah termasuk) berikut adalah isi dari kelas BasicView:
—karena kepanjangan jadi saya taruh di pastebin aja: http://pastebin.com/f1be8699e (BasicView.as) — BasicView ternyata masih turunan dari kelas AbstractView

Ok. Langsung saja kita aplikasikan code sebelumnya menggunakan kelas BasicView:

package {
import flash.events.Event;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;

public class Tampilkan3D extends BasicView
{
   private var bola:Sphere;
   public function Tampilkan3D()
{
   bola = new Sphere();
   scene.addChild(bola);
   startRendering(); //fungsi ini bekerja seperti renderEngine yang membuat objek mejadi tampak
}

// fungsi ini berasal dari kelas BasicView yang membuat semua code didalamnya di eksekusi terus menerus
override protected function onRenderTick(e:Event=null):void
{
   bola.localRotationX +=1; //tambahan saja, bila ingin membuat bolanya berputar
   super.onRenderTick();
}
}
}

Hasilnya:

Bola
Bola

(gambar diatas adalah bola dengan segmen 8×6 — sorry nge embed swf nya gagal terus, sebenernya itu bola berputar terhadap sumbu X)

Yup! keren kan 😀 dengan sedikit usaha kita telah bisa menampilkan objek 3D di viewport!

Ok.. semoga memberi pencerahan, silakan bertanya bila ada yang kurang dimengerti. Post berikutnya bagaimana menambahkan material.
Cukup dulu untuk post kali ini, Thanks for stopping by, catch you later ! 😀