Implementasi dan Analisis Immersive Web Berbasis WebGL untuk Anak Belajar Mengenal Objek Dengan Tensorflow JS

Implementation and Analysis of a WebGL-Based Immersive Web for Object Recognition Learning in Children Using TensorFlow.js

Perkembangan teknologi informasi yang pesat telah mendorong inovasi dalam berbagai bidang, termasuk pendidikan. Meskipun web browser telah lama digunakan sebagai media edukasi, pendekatan tradisional yang dominan berupa teks sering kali kurang efektif, terutama dalam mendukung pembelajaran anak usia dini yang memerlukan stimulasi aksi dan motorik. Untuk menjawab tantangan ini perlu adanya pengkajian lebih lanjut sebagai alternatif dari media edukasi pendekatan tradisional, Pengembangan sistem edukasi berbasis web yang immersive memungkinkan untuk menjadi jawaban alternatif kebutuhan media edukasi dengan pendekatan tradisional hal ini mampu diwujudkan melalui teknologi visualisasi dan interaksi. Salah satu teknologi yang mendukung hal tersebut adalah teknologi visualisasi 3D dengan React Three Fiber, sementara interaksi berbasis pendeteksian objek dapat dicapai menggunakan machine learning dengan TensorFlowJS.

Hasil pengujian menunjukkan bahwa sistem edukasi berbasis web yang dikembangkan berhasil menciptakan pengalaman immersive yang stabil pada berbagai perangkat. Pengujian kinerja rata-rata dilakukan pada perangkat laptop yang mendukung GPU dan smartphone tanpa GPU, dengan waktu respons rata-rata sebesar 8.000ms. Sistem ini mampu mendeteksi objek dan menjalankan aplikasi dengan baik, baik pada perangkat yang menggunakan GPU maupun CPU. ini menunjukkan bahwa sistem mampu memberikan pengalaman interaktif yang stabil dan efektif, sesuai dengan tujuan awal penelitian.

Kata Kunci: Media Edukasi, Performa Website, Machine Learning, Immersive web, React Three Fiber, TensorflowJs

The rapid development of information technology has driven innovation in various fields, including education. Although web browsers have long been used as educational media, the traditional text-based approach often proves less effective, especially in supporting early childhood learning, which requires action and motor skill stimulation. To address this challenge, further exploration is needed as an alternative to traditional educational media approaches. The development of immersive web-based educational systems presents a viable alternative to meet the needs of traditional media. This can be achieved through advanced visualization and interaction technologies. One such technology is 3D visualization with React Three Fiber, while object detection-based interaction can be implemented using machine learning with TensorFlowJS.

The test results showed that the developed web-based educational system successfully created a stable immersive experience across various devices. Performance testing was conducted on laptops with

GPU support and smartphones without GPU, with an average response time of 8,000ms. The system was able to detect objects and run applications effectively, both on devices using GPUs and CPUs. These results indicate that the system is capable of delivering a stable and effective interactive experience, aligning with the initial objectives of the research.

Keywords: Educational Media, Website Performance, Machine Learning, Immersive Web, React Three Fiber, TensorflowJs