BabloXR: An Authoring Tool for Developing WebXR Educational Applications
Abstract
:1. Introduction
2. Related Works
2.1. Developments and Trends in the Use of WebXR Technology
2.2. Tools for Building XR Learning Environments
3. Materials and Methods
3.1. The Authoring Tool
3.2. The Software Requirements and Architecture
- Client–Server: Since BabloXR works as a distributed system, client–server architecture supports the separation of responsibilities between the client (frontend) and the server (backend).
- Layers: The Model–View–Controller (MVC) architectural pattern is used to provide several quality requirements, like maintainability.
- Presentation (View):
- ○
- View: Displays the model data to the user in a visually appealing and comprehensible manner, without performing any actions, processing, or business logic.
- Controller:
- ○
- Controller: It acts as an intermediary between the model and the view, receiving user interactions and translating them into actions in the corresponding model or view, handling application control logic and validations.
- Business Logic (Model):
- ○
- Model: It manages data access and operations, enforcing business rules and operations.
- Persistence (Model):
- ○
- DAO (Data Access Object): It transforms information between the cloud database and objects that the system can manipulate, providing an abstraction for database operations.
- ○
- Storage: It handles uploading, storing, and retrieving media files to cloud servers, using services like Firebase Storage.
- Google Firebase Services:
- ○
- Data layer: It is hosted within the Google Firebase Firestore service and uses a NO-SQL database format to store the data.
- ○
- File layer: It is hosted within the Google Firebase Storage service and stores all multimedia files such as images, videos, 3D models, and others.
3.3. Methodology for Software Implementation
3.4. Graphic User Interface
BabloXR Blocks
3.5. Creation and Presentation of a Learning Environment
- Environment Initialization: This is the first step to creating the XR environment. It includes the essential components that provide the groundwork for the additional elements of the environment.
- Adding Elements: The next step is to add elements to the environment. These elements can be as many as the user wants and are crucial to building an interactive and educational environment.
- Adding Information (Optional): The third step is adding different types of media windows. These multimedia windows are used to provide additional information and/or instructions within the XR environment.
- Adding XR Experience: The fourth and final step is to create the XR experience.
4. BabloXR Evaluation
4.1. Methods
4.2. Participants
4.3. Data Collection Instruments
5. Data Analysis and Results
5.1. XR Applications Created with BabloXR
5.2. System Usability Scale (SUS) Test
5.3. Open-Ended Questions to Users
5.4. Comparison
6. Discussion
7. Conclusions
Author Contributions
Funding
Institutional Review Board Statement
Informed Consent Statement
Data Availability Statement
Acknowledgments
Conflicts of Interest
References
- Zatarain Cabada, R.; Barrón Estrada, M.L.; Sotelo Rivas, M.A.; Ibáñez, M.B. An Authoring Tool for XR Learning Environments. In Extended Reality; De Paolis, L.T., Arpaia, P., Sacco, M., Eds.; Springer Nature: Cham, Switzerland, 2024; pp. 192–208. [Google Scholar]
- Liu, D.; Bhagat, K.K.; Gao, Y.; Chang, T.-W.; Huang, R. The Potentials and Trends of Virtual Reality in Education. In Virtual, Augmented, and Mixed Realities in Education; Liu, D., Dede, C., Huang, R., Richards, J., Eds.; Springer: Singapore, 2017; pp. 105–130. ISBN 9789811054891. [Google Scholar]
- Marín-Vega, H.; Alor-Hernández, G.; Bustos-López, M.; López-Martínez, I.; Hernández-Chaparro, N.L. Extended Reality (XR) Engines for Developing Gamified Apps and Serious Games: A Scoping Review. Future Internet 2023, 15, 379. [Google Scholar] [CrossRef]
- Guo, X.; Guo, Y.; Liu, Y. The Development of Extended Reality in Education: Inspiration from the Research Literature. Sustainability 2021, 13, 13776. [Google Scholar] [CrossRef]
- Latif, M.; Lakhrissi, Y.; Nfaoui, E.H.; Es-Sbai, N. Review of Mobile Cross Platform and Research Orientations. In Proceedings of the 2017 International Conference on Wireless Technologies, Embedded and Intelligent Systems (WITS), Fez, Morocco, 19–20 April 2017; IEEE: Piscataway, NJ, USA, 2017; pp. 1–4. [Google Scholar]
- Farooq, M.S.; Riaz, S.; Alvi, A.; Ali, A.; Rehman, I.U. Cross-Platform Mobile Development Approaches and Frameworks. VFAST Trans. Softw. Eng. 2022, 10, 79–93. [Google Scholar] [CrossRef]
- Baruah, R. Physics and User Interaction in A-Frame. In AR and VR Using the WebXR API; Apress: Berkeley, CA, USA, 2021; pp. 289–302. ISBN 9781484263174. [Google Scholar]
- Yu, G.; Liu, C.; Fang, T.; Jia, J.; Lin, E.; He, Y.; Fu, S.; Wang, L.; Wei, L.; Huang, Q. A Survey of Real-Time Rendering on Web3D Application. Virtual Real. Intell. Hardw. 2023, 5, 379–394. [Google Scholar] [CrossRef]
- Prabhakaran, A.; Mahamadu, A.-M.; Mahdjoubi, L. Understanding the Challenges of Immersive Technology Use in the Architecture and Construction Industry: A Systematic Review. Autom. Constr. 2022, 137, 104228. [Google Scholar] [CrossRef]
- Lee, Y.; Yoo, B.; Lee, S.-H. Sharing Ambient Objects Using Real-Time Point Cloud Streaming in Web-Based XR Remote Collaboration. In Proceedings of the 26th International Conference on 3D Web Technology, Pisa, Italy, 8–12 November 2021; ACM: New York, NY, USA, 2021; pp. 1–9. [Google Scholar]
- Ratcliffe, J.; Soave, F.; Bryan-Kinns, N.; Tokarchuk, L.; Farkhatdinov, I. Extended Reality (XR) Remote Research: A Survey of Drawbacks and Opportunities. In Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems, Yokohama, Japan, 8–13 May 2021; ACM: New York, NY, USA, 2021; pp. 1–13. [Google Scholar] [CrossRef]
- Memmesheimer, V.M.; Ebert, A. Scalable Extended Reality: A Future Research Agenda. BDCC 2022, 6, 12. [Google Scholar] [CrossRef]
- Xie, X. Research on Immersion Teaching Method Based on 5G +XR Technology and Reinforcement Learning Model. Adv. Multimed. 2022, 2022, 7092100. [Google Scholar] [CrossRef]
- Hedlund, M.; Jonsson, A.; Bogdan, C.; Meixner, G.; Ekblom Bak, E.; Matviienko, A. BlocklyVR: Exploring Block-Based Programming in Virtual Reality. In Proceedings of the 22nd International Conference on Mobile and Ubiquitous Multimedia, Vienna, Austria, 3–6 December 2023; ACM: New York, NY, USA, 2023; pp. 257–269. [Google Scholar] [CrossRef]
- Nguyen, V.T.; Jung, K.; Dang, T. BlocklyAR: A Visual Programming Interface for Creating Augmented Reality Experiences. Electronics 2020, 9, 1205. [Google Scholar] [CrossRef]
- Jung, K.; Nguyen, V.T.; Lee, J. BlocklyXR: An Interactive Extended Reality Toolkit for Digital Storytelling. Appl. Sci. 2021, 11, 1073. [Google Scholar] [CrossRef]
- Glenn, T.; Ipsita, A.; Carithers, C.; Peppler, K.; Ramani, K. StoryMakAR: Bringing Stories to Life With An Augmented Reality & Physical Prototyping Toolkit for Youth. In Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems, Honolulu, HI, USA, 25–30 April 2020; ACM: New York, NY, USA, 2020; pp. 1–14. [Google Scholar] [CrossRef]
- Blattgerste, J.; Behrends, J.; Pfeiffer, T. TrainAR: An Open-Source Visual Scripting-Based Authoring Tool for Procedural Mobile Augmented Reality Trainings. Information 2023, 14, 219. [Google Scholar] [CrossRef]
- Dengel, A.; Iqbal, M.Z.; Grafe, S.; Mangina, E. A Review on Augmented Reality Authoring Toolkits for Education. Front. Virtual Real. 2022, 3, 798032. [Google Scholar] [CrossRef]
- Vuforia. Vuforia Studio Augmented Reality for Industrial enterprise—Ptc. 2025. Available online: https://www.ptc.com/en/products/vuforia/vuforia-studio (accessed on 22 February 2025).
- Blippar Augmented Reality (Ar) & Computer Vision Company—Blippar. Available online: https://www.blippar.com/ (accessed on 20 January 2025).
- Inglobe Technologies, Ar-Media Features. Available online: http://dev.inglobetechnologies.com/features/ (accessed on 20 January 2025).
- Areeka, Google Digital Distribution Service. Available online: https://play.google.com/store/apps/details?id=com.Amlogy.Areeka&hl=es_MX (accessed on 19 January 2025).
- Karoui, A.; Marfisi-Schottman, I.; George, S. JEM Inventor: A Mobile Learning Game Authoring Tool Based on a Nested Design Approach. Interact. Learn. Environ. 2022, 30, 1851–1878. [Google Scholar] [CrossRef]
- Larman, C. Agile and Iterative Development: A Manager’s Guide; Agile software development series; Addison-Wesley: Boston, MA, USA, 2004; ISBN 9780131111554. [Google Scholar]
- Bass, L. DevOps: A Software Architect’s Perspective; The SEI series in software engineering; Addison-Wesley: Old Tappan, NJ, USA, 2015; ISBN 9780134049885. [Google Scholar]
- Brooke, J. SUS—A Quick and Dirty Usability Scale; Redhatch Consulting Ltd.: Earley, UK, 1996; pp. 4–7. [Google Scholar]
- Brooke, J. SUS: A retrospective. J. Usability Stud. 2013, 8, 29–40. [Google Scholar]
Application | Technology | Platform | Operating System |
---|---|---|---|
BlocklyVR [14] | AR | Web | Multiplatform (Browser) |
BlocklyAR [15] | AR | Web | Multiplatform (Browser) |
BlocklyXR [16] | XR | Web | Multiplatform (Browser) |
StoryMakAR [17] | AR | Mobile | Android, iOS |
TrainAR [18] | AR | Desktop | Windows, MacOS |
Vuforia [20] | AR | Web, Mobile, Desktop | Android, iOS, Windows |
BlippAR [21] | AR | Web, Mobile | Android, iOS |
ARMediaStudio [22] | MR | Web, Mobile | Android, iOS |
Areeka [23] | AR | Web, Mobile | Android, iOS |
JEMInventor [24] | AR | Mobile | Android, iOS |
Block | Description | Example |
---|---|---|
Camera | A free camera with initial positions is created. | |
Light | A general light with the default values is displayed. | |
Ground | A soil with a specific size is defined. | |
Sky | A sky with a specific size is created, as well as a material with a texture image. Next, the material is assigned to the sky. |
Block | Description | Example |
---|---|---|
3D Figures | A box with 10 units of width, height, and depth dimensions is created (10 × 10 × 10). | |
Material and Texture | The material is instantiated and assigned to a color as texture. Subsequently, the material is added to the figure. | |
Colors | There are several alternatives for assigning a color. |
Block | Description | Example |
---|---|---|
Actions | An action is assigned to the figure, and then the “click” event is assigned to it, which will execute the action of executing a series of blocks. The available actions include click, double click, hover over the element, and hover outside the element. | |
Transformations | The figure is moved to another position. |
Block | Description | Example |
---|---|---|
Windows | An informative window is created with dimensions and content corresponding to the figure. A video window is also created with dimensions and a video to be played. | |
XR | Creation of the XR experience for the environment. |
Question | M | SD |
---|---|---|
Q1. Would you like to use BabloXR many times to make your own extended reality worlds? | 4.50 | 0.57 |
Q2. Did you find BabloXR too complicated to use? | 1.50 | 0.57 |
Q3. Do you think BabloXR is easy to handle? | 4.10 | 0.75 |
Q4. Would you need help from someone who knows a lot about technology in order to use BabloXR? | 3.00 | 0.94 |
Q5. Did you find that all the things you can do with BabloXR work well together? | 4.30 | 0.59 |
Q6. Do you think BabloXR is a bit messy or confusing? | 2.96 | 1.09 |
Q7. Do you think your friends could quickly learn to use BabloXR, even if they don’t know much about computers? | 3.93 | 1.04 |
Q8. I found the system very cumbersome to use? | 1.50 | 0.57 |
Q9. Was it easy to show someone else what you created with BabloXR? | 4.33 | 0.71 |
Q10. Did you have to know anything special before you could use BabloXR well? | 2.63 | 1.15 |
Question 1 | Question 2 | Question 3 |
---|---|---|
What do you think of BabloXR? | What new things would you like to see in BabloXR? | What things would you take away from BabloXR? |
At least for me, I feel that it is something innovative outside of the use it has, in the academic plan, I had never had the idea about what could be done, so they have a future. | Collaboration with someone else in real time. | For now, there is nothing that needs to be removed, it has the attributes that are necessary. |
It’s okay, I find it very practical, there are just a few bugs that need to be fixed. | It would be good having the options to save figures composed of several figures and to be able to copy and paste all the blocks that are connected to each other. | The truth is nothing is complete and useful to me. |
I found it quite practical and quite interesting how they were able to adapt to it so that every user could learn to use it. | I would like it to be a little more intuitive, I mean it is but more oriented towards people who are starting from scratch and have no experience in graphic environments. | The failure when you open a tab, and it bugs but it is due to a library problem already mentioned and it is understandable. |
Honestly, BabloXR has an interface that I would say is easy to use, and the wide variety and adaptability of the application for different areas is very good, such as, in this case, education. | Some sort of autosave as well as some way for multiple people to work on the same job at the same time. | That the free camera does not have to be moved with the direction arrows. |
I found it very interesting how simple it is to carry out a project, just by learning the essentials and then you flow on the page by yourself. | More blocks that do new things. |
Authoring Tool | VR | AR | Cloud Storage | Import | Import 3D Models | Display in Real Time | Tutorial | Export/Share |
---|---|---|---|---|---|---|---|---|
BabloXR | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||
BlocklyVR | ✓ | ✓ | ✓ | |||||
BlocklyAR | ✓ | ✓ | ✓ | ✓ | ||||
BloclyXR | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||
TrainAR | ✓ | ✓ | ||||||
StoryMakAR | ✓ | ✓ | ||||||
JEM Inventor | ✓ | ✓ | ✓ |
Disclaimer/Publisher’s Note: The statements, opinions and data contained in all publications are solely those of the individual author(s) and contributor(s) and not of MDPI and/or the editor(s). MDPI and/or the editor(s) disclaim responsibility for any injury to people or property resulting from any ideas, methods, instructions or products referred to in the content. |
© 2025 by the authors. Licensee MDPI, Basel, Switzerland. This article is an open access article distributed under the terms and conditions of the Creative Commons Attribution (CC BY) license (https://creativecommons.org/licenses/by/4.0/).
Share and Cite
Barrón-Estrada, M.L.; Zatarain-Cabada, R.; Sotelo-Rivas, M.A.; Ibáñez, M.B.; Bátiz-Beltrán, V.M. BabloXR: An Authoring Tool for Developing WebXR Educational Applications. Multimodal Technol. Interact. 2025, 9, 52. https://doi.org/10.3390/mti9060052
Barrón-Estrada ML, Zatarain-Cabada R, Sotelo-Rivas MA, Ibáñez MB, Bátiz-Beltrán VM. BabloXR: An Authoring Tool for Developing WebXR Educational Applications. Multimodal Technologies and Interaction. 2025; 9(6):52. https://doi.org/10.3390/mti9060052
Chicago/Turabian StyleBarrón-Estrada, María Lucía, Ramón Zatarain-Cabada, Manuel Alberto Sotelo-Rivas, María Blanca Ibáñez, and Víctor Manuel Bátiz-Beltrán. 2025. "BabloXR: An Authoring Tool for Developing WebXR Educational Applications" Multimodal Technologies and Interaction 9, no. 6: 52. https://doi.org/10.3390/mti9060052
APA StyleBarrón-Estrada, M. L., Zatarain-Cabada, R., Sotelo-Rivas, M. A., Ibáñez, M. B., & Bátiz-Beltrán, V. M. (2025). BabloXR: An Authoring Tool for Developing WebXR Educational Applications. Multimodal Technologies and Interaction, 9(6), 52. https://doi.org/10.3390/mti9060052