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.