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 langkahlangkah 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/fixedbridges/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/fixedbridges/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.
