pemodelan 3d jembatan cable.pdf
Post on 12-Apr-2015
34 Views
Preview:
DESCRIPTION
TRANSCRIPT
PEMODELAN 3D JEMBATAN CABLE
STAYED DAN SUSPENSION
MENGGUNAKAN WEB HTML 5
Emyka Binus University, Jakarta, DKI Jakarta, Indonesia
Adrianita Fauziah Binus University, Jakarta, DKI Jakarta, Indonesia
dan
Simon Ardhi Yudanto Binus University, Jakarta, DKI Jakarta, Indonesia
Abstrak Perkembangan teknologi dari waktu ke waktu yang semakin pesat, dan tidak dipungkiri setiap
hari pasti ada saja produk teknologi yang bermunculan tidak terkecuali teknologi yang
berkembang dalam aplikasi website. Tujuan penelitian ini adalah membuat objek 3D jembatan di
dalam web yang diperlukan untuk mengatasi sulitnya merepresentasikan objek 3D untuk orang
yang berada jauh dan juga dibutuhkannya spesifikasi komputer yang tinggi untuk melihat sebuah
objek 3D. Metode penelitian yang digunakan adalah dengan melakukan wawancara kepada pihak
yang terkait serta studi pustaka. Metode perancangan terdiri atas pengambilan dan pengolahan
data, membangun pemodelan 3D menggunakan web HTML 5. Hasil yang didapat adalah dapat
membentuk sebuah objek 3D jembatan untuk divisualisasikan kepada setiap orang dalam suatu
web sehingga dapat melihat pemodelan objek tersebut dari jarak jauh atau penggunaan internet
dengan performance yang cepat. Simpulan yang dapat diambil adalah dengan adanya aplikasi
pemodelan 3D jembatan ini akan menvisualisasikan objek tersebut secara lebih nyata dengan
performance yang cepat di dalam web sehingga memberikan kreativitas dalam merancang
sesuatu yang baru dan nantinya diharapkan dapat berguna bagi lingkungan masyarakat terutama
dalam mengontrol keadaan jembatan.
Kata kunci Objek jembatan 3D, performance, web
1. Pendahuluan Teknologi website pada saat ini sudah memasuki era web 3.0 dimana teknologi
web tersebut sudah mendukung adanya multimedia dan salah satunya objek 3D. Dengan
adanya web 3.0 dapat dimanfaatkan sebagai media visualisasi model dalam bentuk 3D.
Seperti yang kami ketahui pemodelan 3D dahulu hanya dapat dibuat atau dipresentasikan
melalui aplikasi desktop yang mana hal tersebut juga membutuhkan suatu spesifikasi
computer yang tinggi.
Pada saat ini sudah banyak software berbasis desktop yang sudah dapat
mengimplementasikan hasil rancangan menjadi objek 3D, akan tetapi pada saat ini banyak
orang berlomba membuat aplikasi kedalam bentuk web karena mereka melihat dari segi
kemudahan dalam mengakses data dan informasi dimanapun dan kapanpun. Selain dari pada
itu dilihat dari segi performance pemodelan 3D, aplikasi yang berbasis web lebih cepat dan
ringan dibandingkan dengan aplikasi berbasis desktop.
Untuk mengatasi masalah tersebut, kami akan megimplementasikan rancangan ke
dalam bentuk 3D yang ditampilkan melalui website. Dalam hal ini kami membuat pemodelan
3D pada sebuah jembatan.
2. Metodologi Ruang lingkup dari penelitian ini mencakup analisa, perancangan dan
implementasi pemodelan 3D untuk jembatan cable stayed dan suspension. Adapun
pembahasan yang dilakukan meliputi sebagai berikut :
− Perancangan
− Implementasi
− Evaluasi
Gambar 1. Perancangan spesifikasi proses sistem
2.1 Perancangan 1. Use case Diagram
Use case diagram menggambarkan sekumpulan use case dan actor serta
hubungannya. Sebuah use case menggambarkan interaksi antara actor dengan
sistem.
2. Sequence Diagram
Sequence diagram digunakan untuk menggambarkan sekumpulan objek
dan interaksinya, termasuk message yang dikirim terhadap urutan waktu. Sequence
diagram digunakan untuk menggambarkan skenario atau rangkaian langkah-
langkah yang dilakukan sebagai tanggapan dari sebuah event untuk menghasilkan
keluaran tertentu.
3. Activity Diagram
Activity diagram dirancang untuk menyederhanakan apa saja yang terjadi
selama berlangsungnya sebuah operasi atau proses. Activity diagram sebenarnya
merupakan flowchart yang menunjukkan aliran control dari suatu aktivitas ke
aktivitas lain. Jenis diagram ini biasanya digunakan untuk merepresentasikan aliran
kerja dan operasi obyek dalam sistem. Activity Diagram memberikan visualisasi,
menspesifikasikan, mengkonstruksi serta mendokumentasikan kelompok obyek
yang dinamis.
2.2 Implementasi Aplikasi ini akan dibangun dengan menggunakan dokumen HTML 5
dengan bahasa pemrograman bahasa JavaScript.
Dilakukan pencodingan yakni membuat pemodelan 3D jembatan cable
stayed dan suspension dengan menggunakan rumus-rumus matematika untuk
membentuk objek 3D dan pembuatan user interface untuk web tersebut.
Gambar 2. Pemodelan 3D Jembatan Cable Stayed
Gambar 3. Pemodelan 3D Jembatan Suspension
2.3 Evaluasi Untuk menguji kestabilan aplikasi ini, dijalankan beberapa test seperti
testing fungsi-fungsi pada sistem dan juga testing bandwidth.
1. Performance fungsi-fungsi pada sistem
Nama Fungsi Status
Rotation up OK
Rotation down OK
Rotation right OK
Rotation left OK
Scale perbesar OK
Scale perkecil OK
Keyboard Event OK
2. Testing bandwidth
Testing bandwidth digunakan untuk mengetes kecepatan pada aplikasi ini. Testing
bandwidth yang dilakukan adalah sebagai berikut :
- Di test menggunakan simulasi kecepatan 57,6 Kbps dapat menload object model
3D dalam waktu 286ms (onload 318ms)
Gambar 4. Grafik kecepatan 57,6 Kbps
- Di test menggunakan simulasi kecepatan 1 Mbps dapat menload object model
3D dalam waktu 87ms (onload 179ms)
Gambar 5. Grafik kecepatan 1 Mbps
3. Kesimpulan Setelah melakukan perancangan, implementasi dan evaluasi maka dapat
disimpulkan bahwa aplikasi pemodelan 3D jembatan cable stayed dan suspension
menggunakan Web HTML 5 adalah sebagai berikut ;
1. Aplikasi ini digunakan untuk memvisualisasi objek yang digunakan untuk melihat objek
tersebut secara nyata.
2. Aplikasi ini diimplementasikan dalam website untuk memudahkan dalam melihat
pemodelan objek dari jarak jauh atau penggunaan internet.
3. Aplikasi ini memiliki performance kecepatan load model didalam web sangat cepat.
4. Aplikasi model yang kami buat dapat dilihat secara real time jika terjadi perubahan dari
titik sumber pada model (terutama didukung dengan adanya ajax dari Javascript).
Daftar Pustaka
[1] Bambangwirawan, Paulus. (2004). Grafik Komputer dengan C.
Yogyakarta: Penerbit Andi.
[2] Brooch, Grady, James Rumbaugh, & Ivan Jacobson. (1999). The Unified Modelling
Language.
User Guide: Addison Wesley, USA.
[3] Capizzi, Tom. (2002). Inspired 3D Modeling and Texture Mapping. (1st edition).
Boston: Course Technology PTR.
[4] Connolly, Thomas. M. (2005). Database System : A Practical Approach to Design,
Implementation and Management. (4th edition).
User Guide: Addison Wesley, USA.
[5] Fulton, Steve, & Fulton, Jeff, (2011). HTM5 Canvas. O'Reilly Media: Sebastopol.
[6] Giuseppe Sicari. 2009. Chrome Experiments: Javascript 3D Model Viewer
http://www.giuseppesicari.it
[7] Kendall, Kenneth. E., & Kendall, Julie. E. (2005). System Analysis and Design.
(6th edition). New Jersey: Prentice Hall.
[8] Khronos Group. (2000). OpenGL – The Industry’s Foundation for High Performance
Graphics. http://www.khronos.org/opengl
[9] Khronos Group. (2000). WebGL – OpenGL ES 2.0 for the Web.
http://www.khronos.org/webgl/
[10] Meyer, Jeanine. (2010). The Essential Guide to HTML5: Using Games to Learn HTML5
and JavaScript. New York: Friendsof.
[11] Murdock, Kelly. (2005). 3ds Max 8 Bible. Indiana: Wiley.
[12] Nafisah, Syifaun & Effendy, Nazrul. (2010). Grafika Komputer dengan Borland C++
Builder Professional. (Edisi Pertama). Yogyakarta: Graha Ilmu.
[13] Pressman, S, Roger. ( 2005). Software Engineering: A Practitioner's Approach.
New York: McGraw-Hill.
[14] QA Internasional. (2007). Road Transport.
http://visual.merriam-webster.com/transport-machinery/road-transport/fixed-
bridges/cable-stayed-bridges.php
[15] Shneiderman, Ben. (2005). Designing the User Interfaces : Strategies for Effective Human
Computer Interaction. (4th edition).
USA : Pearson Education, Inc.,.
[16] Sidik, Betha. (2011). Javascript. (Edisi Pertama). Penerbit Informatika: Bandung.
[17] Sun Microsystems, Inc. (1997). Java 3D API Specification.
http://graphcomp.com/info/specs/java3d/j3dguide/Intro.doc.html
[18] Turban, Efraim, Rainer, R.Kelly Jr., Potter, Richard E. (2005). Introduction to Information
Technology. (3rd edition). Sine Nomine.
[19] Zakas, C, Nicholas. (2005). Professional JavaScript for Web Developers.
Indiana: Wiley Publishing.
3D MODELING CABLE STAYED AND
SUSPENSION BRIDGES USING WEB
HTML 5
Emyka Binus University, Jakarta, DKI Jakarta, Indonesia
Adrianita Fauziah Binus University, Jakarta, DKI Jakarta, Indonesia
dan
Simon Ardhi Yudanto Binus University, Jakarta, DKI Jakarta, Indonesia
Abstract
Technological developments from time to time is rapidly increasing, and no doubt every day
there must be an emerging technology products are no exception in the application of technology
developed website. The purpose of this study is to create 3D objects in a web bridge needed to
overcome the difficulty of representing 3D objects for people who are far away and also needed
high computer specs to see a 3D object. The method used is to conduct an interview to the
parties concerned as well as literature. Design method consists of taking and processing the data,
build web 3D modeling using HTML 5. The results obtained are able to form a bridge to
visualize 3D objects to each person in a web so that they can see that object modeling from a
distance or use of the internet with a fast performance. Conclusions can be drawn is with the 3D
modeling application of this bridge will visualize it in a more tangible object with rapid
performance on the web so as to provide the creativity to design something new and hopefully
will be useful to the community, especially in controlling the state of the bridge.
Keyword : 3D object bridge, performance, web
1. Intoduction Technology website at the time is now entering an era web 3.0 where web
technology is already supporting one of the multimedia and 3D objects. With the web 3.0
can be used as a media model visualization in 3D. As we know in advance 3D modeling
can only be made or presented in a desktop application where it would also require a high
specification computer.
At this time many desktop-based software that is able to implement the design
into a 3D object, but at present many people compete to create the application into a web
form as they look in terms of easy access to data and information wherever and whenever.
Apart from that performance in terms of 3D modeling, web-based applications faster and
lighter than the desktop-based application.
To overcome this problem, we will implementation the design into a 3D form that
is displayed through the website. In this case we create a 3D modeling on a bridge.
2. General Guidelines The scope of this study include analysis, design and implementation of 3D modeling for
cable stayed and suspension bridges. The discussion is carried out include the following:
− Design
− Implementation
− Evaluation
Figure 1 Design specifications of the system
2.1 Design 1. Use case Diagram
Use case diagrams describe a set of use cases and actors and their
relationships. A use case describes the interactions between the actor and the
system.
2. Sequence Diagram
Sequence diagrams are used to describe a set of objects and their
interactions, including the messages being sent to the order of time. Sequence
diagrams are used to describe a scenario or sequence of steps performed in response
to an event to produce a specific output.
3. Activity Diagram
Activity diagrams are designed to simplify what is happening during an
operation or process. Activity diagram is actually a flowchart showing the flow of
control from one activity to another. This type of diagram is usually used to
represent the flow of work and operation of objects in the system. Activity diagrams
provide visualization, specifying, constructing, and documenting the dynamic
object.
2.2 Implementation This application will be built using HTML 5 document with the programming
language JavaScipt.
The process of coding to build 3D modeling of cable stayed and suspension
bridges using mathematical formulas to create 3D objects and making the user interface
for the web.
Figure 2. 3D Modeling Cable Stayed Bridge
Figure 3. 3D Modeling Suspension Bridge
2.3 Evaluation To test the stability of this application, there are some tests such as testing
the functions of the system and also bandwidth testing.
1. Performance of the functions of the system
Functions Status
Rotation up OK
Rotation down OK
Rotation right OK
Rotation left OK
Scale zoom in OK
Scale zoom out OK
Keyboard Event OK
2. Bandwidth Testing
The bandwidth testing is used to test the speed on this application. The following
testing used bandwidth simulation :
- Testing using a simulation speed of 57.6 Kbps can loading object 3D model
within 286ms (onload 318ms).
Figure 4. Chart speed of 57,6 Kbps
- Testing using a simulation speed of 1Mbps can loading object 3D model within
87ms (onload 179ms).
Figure 5. Chart speed of 1 Mbps
3. Conclusion The following conclusion to this application of 3D modeling using Web HTML 5
after the design, implementation and evaluation :
1. This application is used to visualize the object to see in a real object.
2. This application is implemented in a website to facilitaties the modeling of objects to see
from a distance or use of the internet.
3. This application has a performance speed of web load very fast in the model.
4. Application model that we create can be viewed in real time if there is a change from a
point source in the model (mainly supported by the ajax from Javascript).
References
[1] Bambangwirawan, Paulus. (2004). Grafik Komputer dengan C.
Yogyakarta: Penerbit Andi.
[2] Brooch, Grady, James Rumbaugh, & Ivan Jacobson. (1999). The Unified Modelling
Language.
User Guide: Addison Wesley, USA.
[3] Capizzi, Tom. (2002). Inspired 3D Modeling and Texture Mapping. (1st edition).
Boston: Course Technology PTR.
[4] Connolly, Thomas. M. (2005). Database System : A Practical Approach to Design,
Implementation and Management. (4th edition).
User Guide: Addison Wesley, USA.
[5] Fulton, Steve, & Fulton, Jeff, (2011). HTM5 Canvas. O'Reilly Media: Sebastopol.
[6] Giuseppe Sicari. 2009. Chrome Experiments: Javascript 3D Model Viewer
http://www.giuseppesicari.it
[7] Kendall, Kenneth. E., & Kendall, Julie. E. (2005). System Analysis and Design.
(6th edition). New Jersey: Prentice Hall.
[8] Khronos Group. (2000). OpenGL – The Industry’s Foundation for High Performance
Graphics. http://www.khronos.org/opengl
[9] Khronos Group. (2000). WebGL – OpenGL ES 2.0 for the Web.
http://www.khronos.org/webgl/
[10] Meyer, Jeanine. (2010). The Essential Guide to HTML5: Using Games to Learn HTML5
and JavaScript. New York: Friendsof.
[11] Murdock, Kelly. (2005). 3ds Max 8 Bible. Indiana: Wiley.
[12] Nafisah, Syifaun & Effendy, Nazrul. (2010). Grafika Komputer dengan Borland C++
Builder Professional. (Edisi Pertama). Yogyakarta: Graha Ilmu.
[13] Pressman, S, Roger. ( 2005). Software Engineering: A Practitioner's Approach.
New York: McGraw-Hill.
[14] QA Internasional. (2007). Road Transport.
http://visual.merriam-webster.com/transport-machinery/road-transport/fixed-
bridges/cable-stayed-bridges.php
[15] Shneiderman, Ben. (2005). Designing the User Interfaces : Strategies for Effective Human
Computer Interaction. (4th edition).
USA : Pearson Education, Inc.,.
[16] Sidik, Betha. (2011). Javascript. (Edisi Pertama). Penerbit Informatika: Bandung.
[17] Sun Microsystems, Inc. (1997). Java 3D API Specification.
http://graphcomp.com/info/specs/java3d/j3dguide/Intro.doc.html
[18] Turban, Efraim, Rainer, R.Kelly Jr., Potter, Richard E. (2005). Introduction to Information
Technology. (3rd edition). Sine Nomine.
[19] Zakas, C, Nicholas. (2005). Professional JavaScript for Web Developers.
Indiana: Wiley Publishing.
top related