Moch  Fachri,  Risanto  Darmawan  (2022)  Visualisasi  Model  3d  Dinamis  Berbasis  Web  Menggunakan WebGL, Jurnal Syntax Literate: Jurnal Ilmiah Indonesia, (7) 10 E-ISSN: 2548-1398 Published by: Ridwan Institute
Syntax  Literate:  Jurnal  Ilmiah  Indonesia  p–ISSN:  2541-0849 e-ISSN: 2548-1398 Vol. 7, No. 10, Oktober 2022

## VISUALISASI  MODEL  3D  DINAMIS  BERBASIS  WEB  MENGGUNAKAN WEBGL
Moch Fachri, Risanto Darmawan Universitas Krisnadwipayana, Indonesia Email: moch.fachri@unkris.ac.id, risantodarmawan@unkris.ac.id

## Abstrak
Penelitian ini memanfaatkan suatu graphic library yang memungkinkan visualisasi model  dimensi  3(3D)  pada website . Graphic  library yang  dimaksud  adalah WebGL.  Visualisasi  objek  didunia  nyata  dengan  foto  biasa  tidak  mewakili perspektif  dimensi  tiga  dari  objek  tersebut.  Hal  ini  dikarenakan  foto  diambil  dari satu  perspektif,  kemudian  memproyeksikan  objek  dunia  nyata  yang  memiliki ukuran volumetrik kedalam bidang planar dalam bentuk citra digital. Karena itulah WebGL  sebagai graphic  library yang  bersifat open  source dan  mendukung penggunaan  dalam website ,  dapat  menjadi  solusi  dalam  visualisasi  3D  dalam bentuk aplikasi berbasis web . Hasil yang didapat menunjukkan tampilan visualisasi 3D  yang  tertanam  pada server  website ,  dan  dapat  ditampilkan  dalam  antarmuka client yang mengakses konten visualisasi pada server tersebut.
Kata Kunci : Visualisasi 3D; WebGL; Graphic library

## Abstract
This research employs a graphic library that allows the visualization of 3D models on the website. The graphics library in question is WebGL. Visualization of objects in the real world with the digital image is unable to represent the three-dimensional perspective of the object. This is because the picture is taken from a single point of capture, then projects a real-world object that has a volumetric size into a planar plane in the form of a digital image. That's why WebGL as a graphic library that is open source and supports use on websites, can be a solution in 3D visualization in the form of web-based applications. The results obtained show the 3D visualization display that is embedded on the website server and can be displayed in the client interface that accesses the visualization content on the server.
Keywords: 3D Visualization; WebGL; Graphic library

## Pendahuluan
Visualisasi  dalam  bentuk  objek  dimensi  tiga  memiliki  kelebihan  dalam menyajikan informasi visual suatu objek dibanding visualisasi dengan gambar dimensi dua.  Kelebihan  ini  yaitu  ada  pada  representasi  objek  dengan  berbagai  titik  perspektif serta informasi lengkap dimensi ukuran objek yang divisualisasikan (Storz et al.,2012);
(Brown et al., 2012); (Alverson et al., 2004). Hal tersebut tidak bisa didapatkan dalam visualisasi 2D (Satish and Mahendran,2019).
Visualisasi  3D  masih  memiliki  tantangan  dalam  penggunaan  berbasis web . Konten-konten yang ada pada website masih berfokus dengan visualisasi 2D (Speiginer and Macintyre, 2019). Untuk menjawab tantangan ini, maka telah banyak pengembang yang  membuat graphic  library untuk  digunakan  dalam  tampilan website .  Salah  satu graphic library ini adalah WebGL yang dikembangkan oleh Khronos Group Inc (The Khronos  Group  Inc,2010).  Dibandingkan  dengan graphic  library lain  yang dikembangkan  untuk web seperti  VRML  (Mi  et  al.,2019).  X3D  (Stefan  et  al.,  2018), O3D (Boutsi et al., 2019), WebGL memiliki kelebihan dalam integrasi dengan konten web  yang seamless (Saunders,2019).  Selain  itu  bila  teknologi  visualisasi  yang pixel based  seperti  canvas memiliki  masalah  performa  pada  visualisasi  resolusi  tinggi (Hristov and Petkov, 2019) dimana hit performa akibat WebGL tidak signifikan(Hristov and  Petkov,  2019);  (Liu  et  al.,2019).  WebGL  juga  memiliki modularity dengan kombinasi library berbasis  web  lainnya  (Hristov  and  Petkov,2019).  Dengan kemampuan  WebGL  dalam  memvisualisasikan  objek  3D  berbasis  web,  diharapkan mampu menyajikan konten pada website dengan dinamis.

## Gambar 1
Proses WebGL dalam menampilkan render objek(The Khronos Group Inc,2020)
WebGL  ( Web  Graphics  Library )  adalah graphics  library yang  memanfaatkan API (Application Programming Interface) dari JavaScript untuk melakukan pemrosesan grafik  interaktif  pada  konten-konten  yang  diakses  melalui web  browser (Mobeen  and Feng,2012). WebGL terintegrasi sepenuhnya ke semua web browser yang mendukung HTML5.  Karena  itulah  elemen  pada  WebGL  dapat  dicampur  dengan  elemen  HTML
serta  dikombinasikan  dengan  bagian  dari  suatu  halaman web .  WebGL  dirancang  dan dikelola oleh organisasi non-profit Khronos Group Inc (The Khronos Group Inc,2020).
WebGL  memiliki  proses  dalam  menampilkan  visualisasi  objek  dalam web seperti ditunjukkan pada gambar 1. Proses render dilakukan dalam oleh prosesor sentral dalam host tempat konten WebGL diimplementasikan dan oleh dikirim ke client berupa data-data  yang  dibutuhkan  dalam  di web  browser  client untuk  penampilan  visualisasi. Dimana  proses  service  dari  visualisasi  di-handle  oleh  GPU  ( Graphic  Processing Unit )(Mobeen  and  Feng,2012). Web  browser dan  GPU  memproses  data-data  tersebut dalam shared memory yang berisi data-data 3D objek yang divisualisasikan.
Untuk  visualisasi  sendiri  WebGL  memiliki  kegunaan  dalam  visualisasi  3D secara luas. Salah satu contoh pada visualisasi macromolecular menunjukkan kelebihan WebGL  dibandingkan  alat  visualisasi  yang  umum  digunakan  pada  bidang  tersebut (Yuan  et  al.,2017).  Pada  studi  tersebut,  WebGL  mampu  menjadi  solusi shared visualisation secara real-time antar  banyak  pemakai  di  tempat  berbeda  secara online (Yuan  et  al.,2017).  Studi  lain  dalam  visualisasi  struktur  protein  menunjukkan kemampuan  interaktif  WebGL  serta  kemampuannya  dalam  perangkat mobile (Shi  et al.,2017). WebGL juga mampu memenuhi kebutuhan visualisasi 3D skala besar. Pada studi  visualisasi  tampilan  geografis  secara  3D,  WebGL  dapat  menangani  format  3D untuk keperluan visualisasi model geografis dengan okupasi ruang penyimpanan relatif rendah dan transmisi cepat (Miao,et al.,2017). Rerata response time dalam memproses request dari user kurang  dari  1  ms  untuk  visualisasi  geografis  skala  sebuah  kota menunjukkan potensi besar WebGL ini yang memang didesain untuk aplikasi web yang bisa  diakses  berbagai platform (Miao,et  al.,2017).  Pada  studi  penggunaan  WebGL beserta graphics  library lain  untuk  visualisasi  polutan  udara,  WebGL  mampu memvisualisasikan  efek  partikel  dengan  jumlah  banyak  tanpa  ada  masalah  performa yang signifikan dibandingkan dengan graphics library lainnya (Liu et al.,2019).

## Metode Penelitian
Tahapan  pertama  yang  perlu  dilakukan  dalam  penelitian  ini  adalah  pembuatan model  3D  yang  akan  divisualisasikan  pada  tampilan web .  Pembuatan  model  3D  ini direncanakan menggunakan model berdasarkan benda-benda kesenian dan objek-objek lain yang memiliki value of interest . Contoh objek tersebut seperti vas, guci, dll. Selain itu dibutuhkan juga model lingkungan virtual sebagai latar tempat visualisasi 3D model tersebut.  Dalam  prosesnya  dibutuhkan  survey  ke  lapangan  untuk  mengambil  sampel model  yang  akan  dibuat  dalam render 3D.  Setelah  model  3D  tersebut  selesai, selanjutnya  pengimplementasian  model  tersebut  pada  WebGL.  Agar  bisa  terintegrasi dengan  baik,  model  3D  yang  dibuat  perlu  disesuaikan  dengan  format  yang  di- support oleh WebGL.
Karena WebGL dibuat untuk kebutuhan graphic library pada web , maka disaat bersamaan perlu juga dilakukan pembuatan website sebagai wadah berjalannya aplikasi visualisasi.  Sebagaimana  ditunjukkan  pada  gambar  2,  pembuatan website ini  berjalan bersamaan  dengan  pembuatan  model  3D  untuk  nantinya website yang  dibuat  akan
diintegrasikan dengan WebGL. Website tempat berjalannya aplikasi visualisasi ini akan hosting secara  lokal. Website yang  nantinya  dibuat  ini  oleh  jasa  pembuatan  website perlu  mensupport  WebGL  secara native ,  yang  berarti website ini  perlu  dibuat  dengan HTML5.

## Gambar 2 Diagram Alir Penelitian
Keseluruhan  proses  tersebut  selesai  ketika  aplikasi  bisa  berjalan  dalam webserver lokal  tanpa  ada  kendala  dalam  penampilan  visualisasinya.  Dengan menjalankan  metode  tersebut  hingga  tercapai  integrasi  dalam  aplikasi  bebasis web , konten  visualisasi  dapat  diakses  oleh  pemakai  dengan  mengakses web  server .  Dalam penelitian ini, web server tempat meng- hosting website aplikasi dilakukan secara lokal.

## Hasil dan Pembahasan
Pembuatan model 3D didapat dari hasil 3D scan objek dunia nyata. Gambar 3 menunjukkan  salah  satu  objek  3D  tersebut.  Model  3D  pada  gambar  3  menunjukkan objek guci dengan mesh yang belum diberi tekstur. Tekstur model tersebut diperlihatkan pada gambar 4, dimana teksur itu nantinya akan dipasangkan pada model di gambar 3 ketika dipergunakan dalam visualisasinya.

## Gambar 3 Tampilan objek 3D dari hasil pemindaian objek dunia nyata

## Gambar 4 Data Teksur objek 3D dari hasil pemindaian objek dunia nyata
Untuk pengintegrasian model 3D yang akan ditampilkan dan model lingkunan, kami  meutilisasi  mesin  permainan  Unity3D  yang  memiliki  kemampuan  dalam mengkompilasi  hasil  3D  kedalam  format  yang  dikenali  webGL  dan  men- generate file HTML  dasar  untuk  diintegrasikan  dalam website yang  dibuat.  Cuplikan  gambar lingkungan  visualisasi  beserta  model  3D  pada  mesin  permainan  ditunjukkan  pada gambar 5.
Gambar 5
Tampilan objek 3D dalam mesin permainan untuk diintegrasikan dengan WebGL
Gambar 6 Tampilan menu utama website
Website untuk  menampilkan  WebGL  sendiri  ditunjukkan  pada  gambar  6.  pada gambar  6  tersebut  menunjukkan  tampilan  utama  dari website yang  diakses  oleh client terhadap web server secara lokal. Pengguna akan dihadapkan pada menu untuk pilihan visualisasi  empat  objek  yang  berbeda.  Gambar  7  menunjukkan  salah  satu  contoh visualisasi  objek  3D.  Pada  contoh  tersebut  objek  3D  beserta  lingkungannya  diakses menggunakan aplikasi web browser oleh pengguna yang mengakses server . Pengguna sebagai client disini  mengirimkan request dalam  protokol  HTTPS( Hypertext  Transfer Protocol Secure ) sehingga dapat ditampilkan dengan webGL.
Gambar 7
Tampilan website ketika menampilkan visualisasi dengan WebGL
Pada pengujian ini kami menguji beban penampilan WebGL pada kemampuan server untuk  meng- handle banyak client secara  bersamaan( concurrent ).  Pengujian beban concurrency  client dapat  menggambarkan  penggunaan  sumber  daya  komputasi untuk  penggunaan  webGL  dalam  visualisasi  3D. Web  Server dipasang  secara  lokal untuk terkoneksi dengan client . Prosesor server menggunakan Intel® Xeon® processor E3-1275 dengan memori sebesar 32GB. Client yang terlibat bersamaan bervariasi dari satu client hingga  500 client .  Grafik  pada  gambar  8  menujukkan  grafik average response  time .  Nilai average  response  time menunjukkan  kemampuan  server  dalam merespon client ,  dalam  kasus  ini  respon  terhadap  request  pada  protokol  jaringan HTTPS. Grafik gambar 8 menunjukkan kecendrungan peningkatan waktu respon seiring bertambahnya client yang mengakses secara bersamaan. Rerata waktu respon tertinggi selama 67,34 detik.
Gambar 8
Grafik average response time server webGL terhadap penambahan jumlah client
Gambar 9
Grafik Throughput server webGL terhadap penambahan jumlah client
Gambar 10
Grafik average transaction per second yang ditangani server webGL terhadap
penambahan jumlah client
Pada  grafik throughput yang  ditunjukkan  pada  gambar  9,  penambahan  jumlah client tidak menunjukkan pola. Throughput sendiri menunjukkan keberhasilan data yang berhasil diterima client dari bandwidth yang ada pada jaringan, nilai dari throughput ini lebih  dipengaruhi  kestabilan  jaringan  dan  jumlah request dari client terhadap  server. Data throughput yang kami dapat tidak menunjukkan masalah performansi server untuk memenuhi permintaan client karena tidak ada trafik congestion yang disebabkan proses dari server . Throughput tertinggi  ada  pada  nilai  72,88  mbps  dari  bandwidth  jaringan gigabit ethernet 1.000 mbps
Gambar  10  adalah  rerata  transaksi  perdetik. Server semakin  banyak  meng- handle proses transaksi data seiring bertambahnya jumlah client . Grafik pada gambar 10 memiliki kecendrungan yang sama dengan grafik rerata waktu respon pada gambar 8, karena  semakin  banyak client yang  mengakses  bersamaan,  maka  makin  banyak transaksi data client-server yang ditangani sehingga waktu respon juga bertambah lama.

## Tabel 1
Data Performansi Halaman Web Pada Client Yang Mengakses
Jenis KPI( Key Performance Indicator ) Rerata Performa(detik) Time to First Byte (TTFB) 1,4 First Contentful Paint 2,2 Speed Index 14,5 Largest Contentful Paint 13,3 Time to Interactive 13,4 Backend Duration 1,94
Adapun  dari  sisi client ,  responsivitas web yang  diakses  akan  memengaruhi pengalaman  pengguna  dalam  menikmati  visualisasi  3D  yang  ditampilkan.  Tabel  1 menunjukkan key  performance  indicator (KPI)  dari webserver pada  sisi client .  TTFB ( Time to First Byte ) adalah jumlah total waktu dari awal permintaan hingga saat server menerima byte pertama  data  untuk  merespon. First  Contentful  Paint menunjukkan
seberapa  cepat  konten  seperti  teks  atau  gambar  ditampilkan  ke  halaman  antar  muka client . Speed  Index menunjukkan s eberapa  cepat  konten  halaman client terlihat  terisi sepenuhnya. Largest  Contentful  Paint menunjukkan  berapa  lama  waktu  yang dibutuhkan elemen konten terbesar untuk ditampilkan di halaman halaman antar muka client . Time  to  Interactive Berapa  lama  waktu  yang  dibutuhkan  halaman  antar  muka client untuk  bisa  berinteraksi  dengan client . Backend  Duration adalah  waktu  yang dibutuhkan server untuk menghasilkan respons awal. Dari data yang didapatkan terlihat bahwa  waktu Largest  Contentful  Paint mendominasi  waktu  yang  dibutuhkan  agar website  yang  ditampilkan  dihalaman client sudah  dapat  berinteraksi  dengan client sebagai pengguna. Largest Contentful Paint dalam website yang diakses client tidak lain adalah konten webGL yang merupakan konten terbesar dalam kasus layanan web server ini.  Dari  rerata  waktu Speed  Index selama  14,5  detik,  webGL  menghabiskan  rerata waktu untuk penampilan sebanyak 13,3 detik.

## Kesimpulan
Eksperimentasi  yang  kami  lakukan  mendemonstrasikan  kemampuan  WebGL untuk keperluan visualisasi 3D berbasis web . WebGL mampu menyajikan konten pada website dengan  dinamis  berkat  visualisasi  3D.  Visualisasi  3D  yang  memiliki keunggulan  pada  representasi  objek  dengan  berbagai  titik  perspektif  serta  informasi lengkap  dimensi  ukuran  objek  yang  divisualisasikan  bila  dibandingkan  dengan visualisasi  2D  pada  citra  digital.  Meskipun  begitu,  pada  studi  kami  terlihat  bahwa konten visualisasi 3D dengan WebGL cukup membebani performa web server dan juga mendominasi ukuran konten dari suatu web ketika konten tersebut dimuat oleh client . Penggunaan visualisasi 3D dengan WebGL perlu memerhatikan kemampuan komputasi yang  dimiliki web  server serta  prediksi concurrency  client yang  akan  mengakses layanan web server tersebut.

## BIBLIOGRAFI
Alverson, G., Eulisse, G., Muzaffar, S., Osborne, I., Taylor, L., & Tuura, L. A. (2004). IGUANA:  A  high-performance  2D  and  3D  visualisation  system.  Nuclear Instruments  and  Methods  in  Physics  Research  Section  A:  Accelerators, Spectrometers,  Detectors  and  Associated  Equipment,  534(1–2),  143–146. https://doi.org/10.1016/j.nima.2004.07.036
Boutsi,  A.-M.,  Ioannidis,  C.,  &  Soile,  S.  (2019).  INTERACTIVE  ONLINE VISUALIZATION  OF  COMPLEX  3D  GEOMETRIES.  ISPRS  -  International Archives  of  the  Photogrammetry,  Remote  Sensing  and  Spatial  Information Sciences,  XLII-2/W9,  173–180.  https://doi.org/10.5194/isprs-archives-XLII-2-W9- 173-2019
Brown,  P.  M.,  Hamilton,  N.  M.,  &  Denison,  A.  R.  (2012).  A  novel  3D  stereoscopic anatomy tutorial. The Clinical Teacher, 9(1), 50–53. https://doi.org/10.1111/j.1743- 498X.2011.00488.x
Hristov,  P.,  &  Petkov,  E.  (2019).  Study  of  3D  Technologies  for  Web.  p.  6.  in Conference:  Digital  Presentation  and  Preservation  of  Cultural  and  Scientific HeritageAt: Bulgaria Volume: 9, Oct.2019.
Liu, D., Peng, J., Wang, Y., Huang, M., He, Q., Yan, Y., Ma, B., Yue, C., & Xie, Y. (2019).  Implementation  of  interactive  three-dimensional  visualization  of  air pollutants  using  WebGL.  Environmental  Modelling  &  Software,  114,  188–194. https://doi.org/10.1016/j.envsoft.2019.01.019
Mi,  Q.,  Zhai,  Z.,  Wang,  J.,  Cai,  Z.,  Cheng,  L.,  &  Wu,  M.  (2019).  VRML-Based Investigation of Binary Compression Technology. 2019 14th IEEE Conference on Industrial Electronics and Applications (ICIEA), 2114–2117. https://doi.org/10.1109/ICIEA.2019.8834151
Miao,  R.,  Song,  J.,  &  Zhu,  Y.  (2017).  3D  geographic  scenes  visualization  based  on WebGL.  2017  6th  International  Conference  on  Agro-Geoinformatics,  1–6. https://doi.org/10.1109/Agro-Geoinformatics.2017.8046999
Mobeen,  M.  M.,  &  Feng,  L.  (2012).  High-Performance  Volume  Rendering  on  the Ubiquitous  WebGL  Platform.  2012  IEEE  14th  International  Conference  on  High Performance  Computing  and  Communication  &  2012  IEEE  9th  International Conference on Embedded Software and Systems, 381–388. https://doi.org/10.1109/HPCC.2012.58 Satish,  C.  J.,  &  Mahendran,  A.  (2019).  The  effect  of  3D  visualization  on  mainframe application maintenance: A controlled experiment. Journal of King Saud University - Computer and Information Sciences, 31(3), 403–414. https://doi.org/10.1016/j.jksuci.2017.03.003
Saunders,  B.  V.  (n.d.).  Complex  Variables,  Mesh  Generation,  and  3D  Web  Graphics: Research and Technology Behind the Visualizations in the NIST Digital Library of Mathematical Functions. 12.
Shi,  M.,  Gao,  J.,  &  Zhang,  M.  Q.  (2017).  Web3DMol:  Interactive  protein  structure visualization  based  on  WebGL.  Nucleic  Acids  Research,  45(W1),  W523–W527. https://doi.org/10.1093/nar/gkx383
SIGGRAPH LA 2010—The Khronos Group Inc. (2010). Retrieved September 1, 2020, from https://www.khronos.org/events/siggraph-la-2010/
Stefan,  L.,  Hermon,  S.,  &  Faka,  M.  (2018).  Prototyping  3D  Virtual  Learning Environments with X3D-based Content and Visualization Tools. 9, 15.
Storz,  P.,  Buess,  G.  F.,  Kunert,  W.,  &  Kirschniak,  A.  (2012).  3D  HD  versus  2D  HD: Surgical task efficiency in standardised phantom tasks. Surgical Endoscopy, 26(5), 1454–1460. https://doi.org/10.1007/s00464-011-2055-9
WebGL  Overview—The  Khronos  Group  Inc.  (2020).  Retrieved  September  1,  2020, from https://www.khronos.org/webgl/
Yuan,  S.,  Chan,  H.  C.  S.,  &  Hu,  Z.  (2017).  Implementing  WebGL  and  HTML5  in Macromolecular Visualization and Modern Computer-Aided Drug Design. Trends in Biotechnology, 35(6), 559–571. https://doi.org/10.1016/j.tibtech.2017.03.009

## Copyright holder:
Moch Fachri, Risanto Darmawan (2022)

## First publication right:
Syntax Literate: Jurnal Ilmiah Indonesia
This article is licensed under: