Interactive 3D Rendering of the Human Heart on Mobile Web Using WebGL and Three.js

Sunardi Sunardi; Herman Herman; Krisna Astianingrum

doi:10.30595/juita.v14i1.27793

Authors

Sunardi Sunardi Universitas Ahmad Dahlan
Herman Herman Universitas Ahmad Dahlan
Krisna Astianingrum Universitas Ahmad Dahlan

DOI:

https://doi.org/10.30595/juita.v14i1.27793

Keywords:

3D Rendering; mobile web; WebGL; Three.js; human heart.

Abstract

The advancement of web-based 3D visualization technology has created new opportunities for interactive medical learning, particularly in anatomy education. The existing rendering techniques for the mobile web still face challenges due to limitations of cellular and mobile device capacity This study focuses on optimizing real-time rendering of an interactive 3D heart model for mobile web platforms using WebGL and Three.js. Several optimization techniques were applied, including Draco compression, polygon reduction, and the GLB file format, to achieve high rendering performance while maintaining anatomical accuracy. Performance testing was conducted on three device tiers—low-, mid-, and high-end—under different network conditions. Key metrics such as frame rate, loading time, and memory usage were systematically measured. The optimized system achieved stable rendering at 58–60 FPS with a reduced loading time from 6.2 seconds to 1.4 seconds, demonstrating strong scalability and responsiveness. From an educational perspective, this interactive 3D heart model enables medical students, trainees, and patients to dynamically explore cardiac anatomy, improving their spatial understanding of complex structures without requiring high-end VR hardware. The novelty of this work lies in its optimization pipeline tailored for mobile web, making real-time anatomical visualization lightweight and accessible. Future research will involve larger user studies to evaluate educational effectiveness.

Author Biographies

Sunardi Sunardi, Universitas Ahmad Dahlan

Electrical Engineering Department

Herman Herman, Universitas Ahmad Dahlan

Master Program of Informatics

Krisna Astianingrum, Universitas Ahmad Dahlan

Master Program of Informatics

References

[1] N. M. Farhan and B. Setiaji, “Indonesian Journal of Computer Science,” Indonesian Journal of Computer Science, vol. 12, no. 2, pp. 284–301, 2023.

[2] N. Setiyawati and V. A. O. P. Warisman, “Integrasi Framework Kivy dan Webix pada Pembangunan Framework Mobile Web Easy Development System,” JUITA: Jurnal Informatika, vol. 8, no. 2, p. 253, Nov. 2020, doi: 10.30595/juita.v8i2.7464.

[3] F. Adinda, A. K. Hidayah, D. Sunardi, and M. Muntahanah, “Comparison of the Use of Blender and Sketchup Applications in 3d Animation (Case Study: PT Rico Putra Selatan,” Jurnal Komputer, Informasi dan Teknologi, vol. 2, no. 2, pp. 569–570, 2022, doi: 10.53697/jkomitek.v2i2.1011.

[4] B. Fenesi, C. Mackinnon, L. Cheng, J. A. Kim, and B. C. Wainman, “The effect of image quality, repeated study, and assessment method on anatomy learning,” Anat Sci Educ, vol. 10, no. 3, pp. 249–261, Jun. 2017, doi: 10.1002/ase.1657.

[5] J. Munkberg. “Extracting Triangular 3D Models, Materials, and Lighting From Images,” Proceedings of the IEEE Computer Society Conference on Computer Vision and Pattern Recognition, vol. 2022-June, pp. 8270–8280, 2022, doi: 10.1109/CVPR52688.2022.00810.

[6] A. Rosidi and A. Afriyudi, “Aplikasi Pencatatan Keuangan Pribadi Berbasis Web Mobile,” Jurnal Teknologi Informatika dan Komputer, vol. 9, no. 1, pp. 100–113, 2023, doi: 10.37012/jtik.v9i1.1447.

[7] U. U. Sufandi and D. Trihapningsari, “Pengembangan Aplikasi Mobile SITTA Universitas Terbuka Berbasis Android,” INSERT: Information System …, vol. 3, no. 1, pp. 28–41, 2022.

[8] F. Riana, S. Hidayat, A. Ikhsan, R. Makbul, F. Satrya, and F. Kusumah, “Aplikasi Augmented Reality Pengenalan Tanaman Obat Keluarga (TOGA) Berbasis Android,” Krea-TIF: Jurnal Teknik Informatika, vol. 10, no. 2, pp. 68–78, 2022, doi: 10.32832/krea-tif.v10i2.8510.

[9] A. P. Nanda, “Implementasi Web Mobile Sebagai Media Informasi,” SEAT: Journal Of Software Engineering and Technology, vol. 2, no. 2, pp. 1–7, 2022.

[10] S. N. Kamal and A. A. Ibrahim, “3D Model Visualization Function for Responsive Web Design,” Iraqi Journal for Computer Science and Mathematics, vol. 4, no. 4, pp. 76–91, 2023, doi: 10.52866/ijcsm.2023.04.04.007.

[11] F. Ristanto, T. W. Astuti, D. Handoko, A. Syarifuddin, A. P. Nanda, and F. A. Phang, “Mobile Web Implementation As Media Information System in Margodadi Village,” Asia Information System Journal, vol. 1, no. 2, pp. 74–79, 2023, doi: 10.24042/aisj.v1i2.15775.

[12] D. Sukmana and S. Sugiarti, “Prototype Penerapan Hasil Kombinasi Kriptografi Diffie-Hellman, Message-Digest 5 Dan Rivest Chiper 4 Pada Layanan Pesan Singkat Smartphone Android,” JIPI (Jurnal Ilmiah Penelitian dan Pembelajaran Informatika), vol. 7, no. 3, pp. 926–934, 2022, doi: 10.29100/jipi.v7i3.2881.

[13] N. Rahanra, D. Erlianti, Rissa Megavitry, D. J. A. Butarbutar, and Z. HB, “Design and Development of Android-Based Traditional Indonesian Clothing Image Guessing Game,” Jurnal Teknik Informatika (Jutif), vol. 4, no. 1, pp. 199–203, 2023, doi: 10.52436/1.jutif.2023.4.1.377.

[14] C. Moro, Z. Štromberga, A. Raikos, and A. Stirling, “The effectiveness of virtual and augmented reality in health sciences and medical anatomy,” Anat Sci Educ, vol. 10, no. 6, pp. 549–559, Nov. 2017, doi: 10.1002/ase.1696.

[15] Y. Kim, “Regional thickness of facial skin and superficial fat: Application to the minimally invasive procedures,” Clinical Anatomy, vol. 32, no. 8, pp. 1008–1018, Nov. 2019, doi: 10.1002/ca.23331.

[16] H. Petersson, D. Sinkvist, C. Wang, and Ö. Smedby, “Web‐based interactive 3D visualization as a tool for improved anatomy learning,” Anat Sci Educ, vol. 2, no. 2, pp. 61–68, Mar. 2009, doi: 10.1002/ase.76.

[17] P. Dama Ramadhan, A. Triayudi, and R. Tamara Aldisa, “Animasi Sinematik Dinosaurus Secara 3D Menggunakan Blender dengan Metode Pose to Pose,” KLIK: Kajian Ilmiah Informatika dan Komputer, vol. 3, no. 6, pp. 1100–1107, 2023, doi: 10.30865/klik.v3i6.881.

[18] T. P. Utomo, M. I. Prasetya, and M. A. Murtadho, “Aplikasi Pengingat Sholat Dan Pencarian Masjid Berbasis Android,” Jurnal Sistem Informasi dan Informatika (Simika), vol. 5, no. 1, pp. 10–18, 2022, doi: 10.47080/simika.v5i1.1409.

[19] M. Muthmainnah and D. B. Tabriawan, “Prototipe Alat Ukur Detak Jantung Menggunakan Sensor MAX30102 Berbasis Internet of Things (IoT) ESP8266 dan Blynk,” JISKA (Jurnal Informatika Sunan Kalijaga), vol. 7, no. 3, pp. 163–176, 2022, doi: 10.14421/jiska.2022.7.3.163-176.

[20] S. Steeger, D. Atzberger, W. Scheibel, and J. Döllner, Instanced Rendering of Parameterized 3D Glyphs with Adaptive Level-of-Detail using three.js, vol. 1, no. 1. Association for Computing Machinery, 2024. doi: 10.1145/3665318.3677171.

[21] A. Aristoteles, A. Jasmine, Y. T. Utami, and F. R. Lumbanraja, “Design of Virtual Map Building Using Unity 3D with MDLC Method,” International Journal of Electronics and Communications Systems, vol. 3, no. 1, p. 21, 2023, doi: 10.24042/ijecs.v3i1.17196.

[22] L. Franke and D. Haehn, “Modern scientific visualizations on the web,” Informatics, vol. 7, no. 4, 2020, doi: 10.3390/INFORMATICS7040037.

[23] C. Wuu, “Multiface: A Dataset for Neural Face Rendering,” no. 1, 2022.

[24] Z. Yan, W. F. Low, Y. Chen, and G. H. Lee, “Multi-Scale 3D Gaussian Splatting for Anti-Aliased Rendering,” pp. 20923–20931, 2023, doi: 10.1109/CVPR52733.2024.01977.

[25] H. Mustafidah, A. Imantoyo, and S. Suwarsito, “Pengembangan Aplikasi Uji-t Satu Sampel Berbasis Web,” JUITA: Jurnal Informatika, vol. 8, no. 2, p. 245, Nov. 2020, doi: 10.30595/juita.v8i2.8786.

[26] N. Setiyawati and V. A. O. P. Warisman, “Integrasi Framework Kivy dan Webix pada Pembangunan Framework Mobile Web Easy Development System,” JUITA: Jurnal Informatika, vol. 8, no. 2, p. 253, Nov. 2020, doi: 10.30595/juita.v8i2.7464.