Pengembangan Fast Render Objek Grafis Menggunakan Shader dan Non-Shader Berbasis WebGL dari Primitive Object untuk Membuat Raw Metaverse Material Objek Skybox 3D di Filkom UB

Penulis

  • Imam Cholissodin Universitas Brawijaya
  • Eriq Muhammad Adams Jonemaro Universitas Brawijaya, Malang
  • Bayu Rahayudi Universitas Brawijaya, Malang
  • Willyan Eka Ksatria Universitas Brawijaya, Malang
  • Annisa Sukmawati Universitas Brawijaya, Malang
  • Muhammad Farid Muzayyani Universitas Brawijaya, Malang

DOI:

https://doi.org/10.25126/jtiik.2022976739

Abstrak

Dalam perkembangannya, teknologi komputer telah mengalami peningkatan yang cukup signifikan. Seiring berkembangnya komputer sekarang, setiap pengembang dapat merekayasa suatu objek di dunia maya. Permasalahan pengembangan yang muncul biasanya terkait kecepatan proses render rekayasa objek yang dalam penelitian ini membuat raw metaverse material berupa penambahan objek dasar grafis 3D (bola, kubus, torus, silinder, dan lainnya) pada Skybox sebagai bagian dari augmented reality dengan disertai efek tekstur mapping, pencerminan, gradasi pewarnaan, dan animasi kontrol pergerakan objek. Salah satu hasil dari berkembangnya Grafika Komputer ini adalah munculnya WebGL yang mendukung penggunaan shader maupun non-shader untuk mengatasi permasalahan tersebut, yaitu sebuah JavaScript API yang digunakan untuk rendering grafis 3D interaktif dan grafis 2D dalam browser web yang kompatibel tanpa menggunakan plug-in. Semenjak kemunculan WebGL ini, banyak pengembang/developer browser yang telah memanfaatkannya ke dalam browser mereka. Karena sistemnya yang interaktif dan tidak memerlukan plug-in, WebGL mendapat sebutan “future of the internet” atau “masa depan dari internet”. Pada penelitian ini diberikan pengembangan contoh dari apa yang dapat dilakukan melalui Grafika Komputer dan WebGL, yaitu untuk pembuatan raw metaverse material objek Skybox 3D di FILKOM UB dengan beberapa macam penambahan augmented reality objek grafis 3D. Hasil pengamatan pengujian pada beberapa skenario yang berbeda berdasarkan lama waktu proses render objek untuk membuat raw metaverse material objek Skybox 3D tersebut, didapatkan rata-rata waktu 0,12668 detik.

 

Abstract

In its development, computer technology has undergone a fairly significant improvement. Along with the development of computers today, any developer can engineer an object in the virtual world. The development problems that arise are usually related to the speedy rendering process of object engineering which in this study is making raw metaverse material in the form of adding basic 3D graphic objects (balls, cubes, torus, cylinders, and others) to the Skybox as part of augmented reality accompanied by effects of texture mapping, mirroring, coloring gradations, and animation control of object movements. One of the pillars of the development of Computer Graphics is the emergence of WebGL that supports the use of shaders and non-shaders to solve these problems, i.e., a JavaScript API utilized for rendering interactive 3D graphics and 2D graphics in compatible web browsers without using plug-ins. Since the emergence of WebGL, many browser developers have utilized it into their browsers. Because the system is interactive and does not require plug-ins, WebGL gets the name of “the future of the internet”. In this study, an example of the development of the thing can be performed through Computer Graphics and WebGL was given, i.e., for the creation of raw metaverse material of 3D Skybox objects at FILKOM UB with several kinds of addition of augmented reality 3D graphic objects. The results of testing observations in several different scenarios based on the length of time for the object rendering process to create the raw metaverse material of the 3D Skybox object obtained an average time of 0.12668 seconds.


Downloads

Download data is not yet available.

Biografi Penulis

  • Imam Cholissodin, Universitas Brawijaya

    Artificial Intelligence, Pattern Recognition, Information Retrieval, Decision Support System, Mobile Programming, Big Data, GPU Programming

    Google Scholar :

    https://scholar.google.com/citations?user=2WTulU4AAAAJ&hl=en

    ID SCOPUS : -

    ID SINTA : 5992948

Referensi

CHOLISSODIN, I., 2022. Materi MK Grafika Komputer 2022 Filkom UB [WWW Document]. URL https://github.com/imamcs19/fpgrafkom-2022 (accessed 8.1.22).

CHOLISSODIN, I., KURNIAWATI, M., 2014. Buku Grafika Komputer Pada Android.

ECK, D.J., 2021. Introduction to Computer Graphics [WWW Document]. URL https://math.hws.edu/graphicsbook/index.html (accessed 8.1.22).

KOLAEI, A.Z., HEDAYATI, E., KHANZADI, M., AMIRI, G.G., 2022. Challenges and opportunities of augmented reality during the construction phase. Automation in Construction 143, 104586. https://doi.org/10.1016/j.autcon.2022.104586

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

MATHUR, M., BROZOVICH, J.M., RAUSCH, M.K., 2022. A brief note on building augmented reality models for scientific visualization. Finite Elements in Analysis and Design 103851. https://doi.org/10.1016/j.finel.2022.103851

MATSUDA, K., LEA, R., 2013. WebGL Programming Guide [WWW Document]. URL https://sites.google.com/site/webglbook/home (accessed 8.1.22).

NUSANTARA, P.H.I., 2021. Mengenal SaaS, IaaS, dan PaaS dalam Cloud Computing [WWW Document]. Helios. URL https://www.helios.id/blog/detail/mengenal-saas-iaas-dan-paas-dalam-cloud-computing (accessed 8.1.22).

PALACIOS-IBÁÑEZ, A., NAVARRO-MARTÍNEZ, R., BLASCO-ESTEBAN, J., CONTERO, M., CAMBA, J.D., 2023. On the application of extended reality technologies for the evaluation of product characteristics during the initial stages of the product development process. Computers in Industry 144, 103780. https://doi.org/10.1016/j.compind.2022.103780

PARKINSON, M., 2020. The Power of Visual Communication. Billion Dollar Graphics. URL https://innovativeresearchmethods.org/wp-content/uploads/2020/10/The-Power-of-Visual-Communication_Parkinson.pdf (accessed 8.1.22).

PERMANA, Y., 2016. Mengenal WebGL [WWW Document]. URL https://codepolitan.com/mengenal-webgl (accessed 8.1.22).

ZHANG, Q., 2019. Medical data visual synchronization and information interaction using Internet-based graphics rendering and message-oriented streaming. Informatics in Medicine Unlocked 17, 100253. https://doi.org/10.1016/j.imu.2019.100253

Diterbitkan

29-12-2022

Cara Mengutip

Pengembangan Fast Render Objek Grafis Menggunakan Shader dan Non-Shader Berbasis WebGL dari Primitive Object untuk Membuat Raw Metaverse Material Objek Skybox 3D di Filkom UB. (2022). Jurnal Teknologi Informasi Dan Ilmu Komputer, 9(7), 1357-1362. https://doi.org/10.25126/jtiik.2022976739