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.
Copyrights © 2026