Previous Article in Journal
Methods and Findings in the Analysis of Alignment of Bodily Motion in Cooperative Dyadic Dialogue
Previous Article in Special Issue
Personalized and Timely Feedback in Online Education: Enhancing Learning with Deep Learning and Large Language Models
 
 
Font Type:
Arial Georgia Verdana
Font Size:
Aa Aa Aa
Line Spacing:
Column Width:
Background:
Article

BabloXR: An Authoring Tool for Developing WebXR Educational Applications

by
María Lucía Barrón-Estrada
1,
Ramón Zatarain-Cabada
1,*,
Manuel Alberto Sotelo-Rivas
1,
María Blanca Ibáñez
2 and
Víctor Manuel Bátiz-Beltrán
1,†
1
Instituto Tecnológico de Culiacán, Tecnológico Nacional de México, Culiacán 80220, Sinaloa, Mexico
2
Departamento de Ingeniería Telemática, Universidad Carlos III de Madrid, 28911 Leganés, Spain
*
Author to whom correspondence should be addressed.
This paper is an extended version of our paper published in Zatarain Cabada, R.; Barrón Estrada, M.L.; Sotelo Rivas, M.A.; Ibáñez, M.B. An Authoring Tool for XR Learning Environments. In Proceedings of the Extended Reality; De Paolis, L.T., Arpaia, P., Sacco, M., Eds.; Springer Nature Switzerland: Cham, 2024; pp. 192–208.
Multimodal Technol. Interact. 2025, 9(6), 52; https://doi.org/10.3390/mti9060052
Submission received: 28 April 2025 / Revised: 27 May 2025 / Accepted: 27 May 2025 / Published: 29 May 2025

Abstract

:
Different areas of education have undergone a significant transformation due to the rapid progress of extended reality in recent years. Nonetheless, existing eXtended Reality (XR) authoring tools often require advanced programming skills, limiting their accessibility to educators and students. To address this challenge, we introduce BabloXR, an intuitive authoring tool that leverages Blockly to enable visual, code-free programming for creating educational XR environments. BabloXR was evaluated through a user study involving teachers and students who successfully designed their own XR learning environments. The results indicate that users of BabloXR were able to create complete and detailed scenarios, with usability testing revealing high ease of use, positive user experience, and strong interest in extended reality.

1. Introduction

In this paper, we present an expanded and revised version of a conference paper originally presented at the International Conference on eXtended Reality (XR Salento 2024) [1]. The term extended reality (XR) has been used to embrace diverse spatial technologies like augmented reality (AR), virtual reality (VR), and mixed reality (MR). The term refers to technologies that are used to generate interactive environments that combine reality with virtual scenarios based on the representation of digital environments and elements. Thus, XR includes the full spectrum of the virtual continuum concept, which represents the degree of virtuality of an interactive environment between man and machine using a continuous scale. This degree of virtuality ranges between the extremes of a completely virtual environment to a completely real one.
Web-based XR learning tools allow end users to interact with educational material through a web browser. The spatial and immersive computer technologies developed aim to improve educational experiences by presenting information while enhancing sensory perception, achieving this through AR techniques. AR allows virtual elements to be overlaid on real-world scenes to interact among them. On the other hand, VR can be used to recreate a fully virtual and immersive environment, where users experience the learning material while isolated from reality.
Implementing XR technology allows students to have more active control over their learning strategies, increasing student–teacher interaction as well as peer connectivity. In this context, the application of XR approaches includes observational learning, operational learning, social learning, and academic learning, covering a broad range of educational experiences [2]. In the scoping review conducted in [3], the authors explore the current landscape of extended reality (XR) engines used to create gamified apps and serious games. The authors analyzed the literature from 2019 to 2023 to identify XR engines and their core functionalities. They also identified the specific game attributes these engines support for serious games, such as rules, goals, and feedback, as well as the types of learning activities the engines can facilitate. The research ultimately aims to help developers select the most appropriate XR engine for their educational or training applications based on the desired features and learning outcomes. Today, there are many examples of applications that have explored the effectiveness of XR in education, ranging from biology experiments, art education, language, music, medicine, and physics [4].
Presently, different methods for presenting AR, VR, and MR content rely on how programs are made for particular platforms and devices; this strategy carries several limitations, including cross-platform support. Consequently, the development of XR applications typically necessitates numerous cycles of adaptation to different platforms natively, thereby increasing both the financial cost and the implementation time of these applications. As a result, web-based XR implementations have been developed that aim to address current challenges taking advantage of the current paradigm of providing online services for any type of application. Web-based application development has become relevant due to its basic capacity to provide cross-platform functionality and simplicity of access. Using these methods, applications can be created in a hybrid fashion that combines web services with native capabilities, giving them the benefits of both techniques [5,6]. Overall, these advancements in services and infrastructure offer a common platform for the extensive adoption of XR online.
The World Wide Web Consortium (W3C) has published a set of standards, known as WebXR Device API (WebXR), to enable the deployment of XR applications on the web, relying on WebGL to display 2D or 3D graphics. WebXR facilitates the development of applications while also providing users with a convenient way to improve accessibility. Through WebXR, XR applications may be accessed using any device equipped with basic web browsing capabilities and a mainstream browser (e.g., Chrome and Firefox). These benefits, both for developers and users, have resulted in the increased popularity of WebXR, with open-source graphic engines, such as A-Frame and Babylon.js [7,8], offering great input in the development and distribution of XR content.
Despite current improvements, challenges remain to fully leverage the use of this technology in the classroom. Developing XR tools generally requires considerable technical skills, which teachers may lack altogether, thus posing a gap that would require educators to go on a complex and demanding learning curve to train as developers. Learning to develop XR apps can, therefore, add to an already brimful workload and can divert time and attention that should be focused on preparing lessons for students [9]. This technical barrier highlights the need for intuitive authoring tools that simplify content creation.
To address this gap, we introduce BabloXR, an authoring tool designed with the aim of providing a fast and easy approach to creating XR learning environments. BabloXR eliminates the requirement for programming skills by incorporating block-based visual programming, allowing educators to design and visualize interactive lessons in real time. Once completed, these XR environments can be instantly shared with students via a simple link, fostering accessibility and engagement in digital learning.
This research paper is structured as follows: Section 2 presents work related to Web XR technology and different authoring tools for the creation of XR applications; Section 3 presents the software architecture, the implementation methodology, the user interface of BabloXR, and the steps to create a learning environment; Section 4 presents the experimental design for the testing phase; Section 5 describes the results and discussion; and, finally, Section 6 provides conclusions and outlines future research directions.

2. Related Works

Below are recent works related to the development and usage trends of WebXR technology and XR authoring tools. As previously stated, the term XR is used as an umbrella term that includes both AR and VR, as both technologies are addressed for the purposes of this study.

2.1. Developments and Trends in the Use of WebXR Technology

Next, we present different state-of-the-art works that are oriented towards discussing connectivity, scalability, and remote collaboration as representative characteristics of WebXR technology.
The research conducted in [10] introduces a new approach to extended reality (XR) collaboration that improves upon existing methods by separating and sharing information about objects of interest (OOIs) and ambient objects (AOs) differently. Instead of creating complex 3D models of the entire workspace, the system pre-models only the OOIs with high precision while reconstructing the AOs in real time as point clouds using LiDAR technology. These point clouds are then streamed with low latency using WebRTC, providing remote collaborators with intuitive spatial awareness of the local site without requiring extensive setup or limiting collaboration to pre-scanned areas. This hybrid method aims to make XR collaboration more practical and efficient for tasks involving physical objects by reducing preparation time and allowing flexibility in location.
In the work presented in [11], the authors explore the potential and challenges of conducting XR research remotely, rather than in a traditional lab setting. A survey of XR researchers identifies drawbacks, such as difficulties in participant recruitment and technical hurdles, alongside significant opportunities, including the ability to collect detailed data using built-in XR features and conduct studies more cost effectively. The authors suggest viewing XR devices as powerful data collection tools and encourage the development of frameworks to facilitate robust remote XR experimentation.
The research work in [12] explores the need for XR experiences that can scale between different devices, levels of virtuality, and numbers of collaborators. While current XR applications often focus on single-use cases, technologies, and limited users, the authors propose the concept of Scalable Extended Reality (XRS) to foster broader adoption by enabling fluid transitions across these dimensions. The paper reviews existing research in key areas—collaboration features, visualization, and interaction techniques—and identifies challenges and future research directions to realize the potential of XRS.
Finally, the study in [13] investigates a new immersive teaching method that leverages the capabilities of 5G and extended reality XR technologies, enhanced by a reinforcement learning model. The research argues that traditional teaching struggles with limited methods and resource utilization and proposes this 5G + XR approach as a solution to create engaging and effective learning experiences. Experiments comparing this immersive method to traditional teaching showed improved student learning outcomes, participation, and overall experience, highlighting its potential superiority and paving the way for modern educational reforms.

2.2. Tools for Building XR Learning Environments

In the work of [14], the authors created BlocklyVR, a VR web app that uses a block-based programming interface that includes a workspace where users may interact by dragging blocks in a 3D world. The objective of this study was to compare the efficiency of performance in 2D and 3D environments. The findings indicate that the acquisition of specific programming skills is enhanced in virtual environments. This enhancement can be attributed to the users’ sense of immersion, which enables them to concentrate on resolving problems.
As outlined in [15], to create AR environments, the authors developed a web application called BlocklyAR. A workspace and a place to view the AR world being created in real time are provided by this program. The primary objective of BlocklyAR is to facilitate the development of AR applications without necessitating proficiency in the syntax of a programming language.
Another web application that combines VR and AR technologies was developed by [16]. The tool, BlocklyXR, combines VR and AR technologies; it has a graphical coding editor where the user implements the logic and a panel to choose a portion of the real world that will then be recreated in 3D.
What is remarkable about this software is its capacity to import 3D models and its easy-to-use feature according to the results of the technology acceptance model.
In a different study [17], the authors developed a mobile application called StoryMakAR to create Internet of Things (IoT) applications. This application turns electronic devices into internet-connectable devices, complemented by two additional applications: the first to program electronic components is a block-based programming web application, and the second, called EventMakAR, is an event planning application.
On the other hand, Ref. [18] highlights the importance of authoring tools in staff training. In this study, the users are able to develop particular scenarios using a script-based authoring tool. This tool, TrainAR, is a plugin of the Unity editor that defines the program logic by working with the sequence of states of nodes that are interrelated. Among other things, TrainAR offers a file structure of 3D elements and textures as well as a scene element inspector.
In [19], the authors presented a review of 43 relevant AR Authoring Toolkits for Education. Half of the AR Authoring Toolkits were not accessible, and more than half of the toolkits required some kind of programming knowledge. Moreover, the results of this study show a lack of empirical evaluation. The authors found that only five toolkits met the needs of teachers in designing educational AR experiences. They are VuforiaStudio [20], BlippAR [21], AWE (not openly accessible), ARMediaStudio [22], and Areeka [23]. A drawback is that none of the five tools were evaluated with a statistical method.
Finally, in [24], the authors developed JEM Inventor an authoring tool based on MIT App Inventor to generate Mobile Learning Games (MLGs). This technology eliminates the need for prior technological experience by allowing users to access more complex mobile device functionalities as their proficiency increases. According to the test results, it works well to improve learning and streamline the MLG production process, making instructional games easier for teachers to use and more accessible.
Table 1 shows a comparison between these authoring tools, including their applications, technologies, platforms, and operating systems. These tools use virtual reality (VR), augmented reality (AR), mixed reality (MR), or extended reality (XR) technologies. Most of these applications are designed to be used on a web platform and are cross-platform and accessible through any browser. StoryMakAR and JEM Inventor are designed just for mobile devices (Android and iOS), and TrainAR is available for desktops running Windows and MacOS operating systems.

3. Materials and Methods

3.1. The Authoring Tool

In this study, we introduce BabloXR, a cloud-based platform using Google Firebase services designed to facilitate the creation of XR learning environments for teachers without technical training. Although Google Firebase makes it possible to access data from anywhere, it also has the security features required to restrict access to authorized individuals only. Through BabloXR, teachers can create their profiles, upload multimedia files (such as audio, images, and videos), and design XR learning environments. These environments can be shared with students via a link, providing an interactive and accessible learning experience.

3.2. The Software Requirements and Architecture

User requirements were obtained through research techniques, including a study of authoring tools for creating virtual reality (VR), augmented reality (AR), and/or mixed reality (MR) environments. User requirements for BabloXR include the ability to use blocks to create XR learning environments and visualize modifications in real time, access the platform from any internet-enabled device, allow for the import of 3D objects and multimedia, and facilitate the sharing of created environments. Functional requirements for BabloXR include the creation of XR environments that can be saved, shared, and visualized in real time, allowing for the import of multimedia files to enrich such environments. Quality requirements for BabloXR include portability, which is met through the design of the tool as a web platform accessible on any device with a browser, security by handling authentication of all accesses to protect the integrity of user information, and usability, which is demonstrated in Section 5.2. These quality requirements guarantee that BabloXR is accessible, secure, available, easy to use, and efficient.
Figure 1 shows the software architecture of the system, with the following characteristics:
  • 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.
Layers of the System:
  • 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

For the development of this project, an iterative and incremental methodology was used, as well as various technologies that contributed to the software development cycle. This combination of methodologies and tools allowed for an agile and efficient development process, ensuring the quality and functionality of the final product. The iterative and incremental methodology is an agile approach to software development; it is based on repeated development cycles (iterations), in which the product is improved and expanded incrementally. Each iteration includes planning, design, implementation, and testing phases. This approach allows for rapid adaptation to changes and continuous improvement of the product [25]. The integration of technologies in the software life cycle was carried out following the DevOps philosophy [26], which promotes collaboration between development and operations teams to improve software delivery and quality. DevOps focuses on continuous automation, integration, and deployment, facilitating the rapid and reliable delivery of software. Figure 2 shows the technologies that were used during each stage of the DevOps cycle.
No specific technology was used during the planning stage, but rather the analysis and design of the agile methodology was followed, with the most critical functionalities being addressed first. During the code phase, GitHub (https://github.com/features/actions) was used as a repository to store code. GitHub facilitates collaboration, versioning, and changing management through pull requests. During construction, NPM (version 10) was used as a Node.js (version 18) package manager for building the project, allowing it to be converted into a single-page application (SPA). Node.js is a cross-platform, open-source, server-side runtime environment and is useful in creating highly scalable network programs. For the next testing phase, Jest (version 27.5.1), a JavaScript library for unit testing, was used to make sure that every component functions properly when used alone. Cypress (version 13.7.0) was also used for end-to-end (e2e) testing, verifying that the entire system works correctly from the end-user perspective. For publishing, GitHub Pull Requests were used. Every time a pull request was made, unit tests were automatically run to make sure the new changes were bug free. Once the tests were successfully passed, the changes were merged into the main branch. In the deployment, GitHub Actions were used. Every time a push was sent to the main branch after a successful pull request, an automatic deployment to the Firebase Hosting service was executed. The operation and monitoring parts were not applicable to this project, as the primary objective was the development and deployment of the product. The entire development ecosystem can be run locally on a computer with Node.js and Git installed. Alternatively, Docker can be used to run the development environment.

3.4. Graphic User Interface

This section describes the workings of the GUI. Figure 3 shows the main graphical user interface (GUI) for the sections “working area” (left side of the figure) and “viewing area” (right side of the figure).
The toolbar is located on the left side and contains blocks to create operations or components such as Conditions, Loops, Logic, Arithmetic, Text, Variables, Functions, 2D Shapes, 3D Shapes, Cameras, Lights, Floors, Skies, Materials, Textures, Colors, Actions, Audio, Transformations, Utilities, Windows, and XR Environments. Each category contains specific blocks that can be used to build and customize the XR environment. The workspace area is located on the right side of the toolbar; this is where users can drag and drop blocks to build their XR environment. Blocks can be connected to define the logic and behavior of the environment. In this space, users can create cameras, lights, geometric shapes, and other interactive elements to enrich their environment.

BabloXR Blocks

The following elements served as the fundamental components in the construction of the XR environment. These components are essential elements, as they efficiently facilitate the construction and customization of XR environments.
Table 2 delineates the blocks necessary to initiate the environment in which the camera and its assigned properties are situated. Furthermore, a block for the creation of the light is generated. Additionally, the ground elements and their dimensions are specified, with dimensions being defined as measurements in units, with one unit corresponding to one m in reality. Finally, the sky style and texture are defined by specific blocks.
Table 3 illustrates the block for creating 3D shapes. The example describes the creation of a box (cube) with the respective dimensional parameters. Additionally, the generation of material is demonstrated, employing a red color selection and subsequent allocation to the designated box. Finally, the diverse techniques for generating colors are presented.
The blocks for assigning events are displayed in Table 4, along with an example that demonstrates how to carry out a sequence of blocks. Clicking on the component to which the action has been attached is the triggering event. The next row showcases another block aiming to change the position of a figure by moving it 5 units on the y-axis.
As illustrated in Table 5, the blocks for creating a message window are delineated, accompanied by specific pixel dimensions, a designated title, and a representative message that articulates the content to be imparted. Furthermore, a video window is created with the video clip to be shown, its size in pixels, and a title. To produce the XR experience, there is a specific block for that task.

3.5. Creation and Presentation of a Learning Environment

Figure 4 illustrates the workflow to construct an XR learning environment using BabloXR. This workflow has four main stages: initializing the environment, adding elements, incorporating information windows (optional), and creating the XR experience. Each of these stages is detailed below:
  • 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.
This construction flow allows BabloXR users to create customized and effective XR environments for educational purposes, ensuring that each step is well defined and that the necessary elements are correctly configured.
To present the learning environment created above, the link provided by the creator of the XR environment is used. This link allows users to access the environment through various devices, including computers, cell phones, and virtual reality headsets. The versatility of BabloXR allows XR environments to be accessible on multiple platforms. Figure 5 presents two ways of viewing the XR environment.
Virtual Reality Viewing (Figure 5A): For a more immersive experience, users can use virtual reality (VR) headsets to view the VR environment. By opening the link on a VR-compatible device, the environment is presented in a VR-optimized format, allowing for a greater sense of presence and depth. Users can move around and interact with the environment using VR headset controllers, exploring the environment in a more natural and immersive way. Figure 5 showcases an environment viewed in VR mode, highlighting the total immersion that this technology offers.
Augmented Reality Visualization (Figure 5B): In addition to virtual reality, environments created with BabloXR can also be visualized in augmented reality (AR). Using a mobile device with AR capabilities, such as a cell phone or tablet, users can overlay the AR environment over the real-world environment. By accessing the link on an AR device, the environment is integrated with the physical world through the device’s camera, allowing users to interact with virtual elements in their real world. The right panel in Figure 5 displays an environment viewed in AR mode, showcasing the ability to combine the virtual and real world.

4. BabloXR Evaluation

This section describes how the authoring tool was evaluated. Section 4.1 presents information about the participants. Finally, Section 4.2 describes the instrument used to collect data for the experiment.

4.1. Methods

Figure 6 shows the evaluation process of BabloXR. First, a 60 min tutorial was presented to participants explaining the platform’s function. In this step, the tutorial was accompanied by a video on the YouTube platform that provides a detailed explanation of how to create a learning environment. Subsequently, test subjects were asked to develop their own XR environment within a two-week period. Within these two weeks, the authors of the BabloXR tool offered direct advice in person or via email for subjects who had encountered problems while creating their XR application. Finally, to measure the usability of the authoring tool, a questionnaire was applied, where participants spent 10 min providing their responses. In this last step, participants also were asked to answer a group of three open-ended questions about their experience using BabloXR.

4.2. Participants

This investigation was carried out at the Culiacán campus of the Tecnológico Nacional de México in May 2024. Thirty undergraduate engineering students, ages 19 to 25 (M = 20.3, SD = 1.48), participated in this study.

4.3. Data Collection Instruments

The data collection instrument employed in this study was the System Usability Scale or SUS [27], which consists of a 10-question Likert scale with five response options ranging from strong agreement to strong disagreement. The SUS questionnaire was applied to measure the usability of the authoring tool. The SUS is used to measure the three core factors or dimensions of usability [28]: effectiveness (whether individuals can truly finish their duties and reach their objectives); efficiency (the number of resources they use to accomplish their objectives); and satisfaction (the degree of ease with which they accomplish those objectives). The SUS questionnaire provides a reliable and validated method for evaluating the usability of a software tool.

5. Data Analysis and Results

In addition to applying the SUS to measure usability, we present a comparison between the characteristics of BabloXR and other authoring tools presented in Section 2.2, the state of the art. Additionally, we present nine different XR applications created with BabloXR.

5.1. XR Applications Created with BabloXR

Figure 7 illustrates examples from the main interfaces of XR applications created by participants in the evaluation. Figure 7A shows the application created to teach how to calculate the area of a circle; Figure 7B shows the application created to teach how to use the elimination method in linear equations using a Pokémon theme. Similar XR applications are shown in Figure 7C, which describes the water cycle using a demonstration video. Figure 7D shows the solar system, where clicking displays relevant information about each planet; Figure 7E presents an environment in which the evolution of atomic models throughout history is explained; Figure 7F shows an art gallery; Figure 7G shows a grass field environment with four cube blocks with different textures, where each block serves a distinct purpose in relation to fractional operations; Figure 7H displays an art gallery with different paintings from the renaissance age; they also contain a small description of each one; and, finally, Figure 7I illustrates the works of art made by Eugène Delacroix.
Full access to the environment is available through the QR code, which is located in the lower right corner of each display.

5.2. System Usability Scale (SUS) Test

The results (M, and SD) obtained from the SUS test are presented in Table 6. The test contains ten questions with responses ranging from strongly disagree (1) to strongly agree (5) on the Likert scale. To measure the reliability of the SUS test, Cronbach’s alpha was calculated, obtaining a value of 0.80. This value is regarded as highly satisfactory, signifying that the evaluation process is both consistent and reliable in its assessment of the system’s usability. The usability of the system is good, as indicated by the SUS score of 74 out of 100, which is above average.

5.3. Open-Ended Questions to Users

Table 7 presents a selection of responses from 30 participants to a set of three open-ended questions about BabloXR.
Participants praised BabloXR’s innovation, ease of use, and adaptability, with some suggesting improvements like real-time collaboration, autosave, and more intuitive features for beginners. While most found no major features to remove, a few highlighted issues such as a bug when opening tabs and the difficulty in moving the free camera using arrow keys. Overall, the suggestions focused on enhancing functionality and user experience.

5.4. Comparison

Table 8 presents a comparative analysis of the authoring tools from Section 2.2 of the related work and BabloXR. The comparison is made with respect to a selection of the most relevant features that a learning environment must present.
This comparative analysis highlights the significance of BabloXR’s cloud integration, an essential characteristic that facilitates easy access in the digital age. Additionally, it possesses a multitude of functionalities analogous to those of other tools. These functionalities include real-time visualization of the construction process, exporting and sharing of the environment, and other features.

6. Discussion

The results obtained from the questions used in the SUS test mentioned in Table 6 allow us to discuss the advantages and disadvantages that participants identified when using the tool. First, the average scores for questions Q1 (Would you like to use BabloXR many times to make your own extended reality worlds?), Q3 (Do you think BabloXR is easy to handle?), Q5 (Did you find that all the things you can do with BabloXR work well together?), Q7 (Do you think your friends could quickly learn to use BabloXR, even if they don’t know much about computers?), and Q9 (Was it easy to show someone else what you created with BabloXR?) range between 3.93 and 4.5, indicating a very positive attitude towards the use of BabloXR. This suggests that most of the surveyed participants find the idea of creating extended reality worlds very attractive. These scores reflect a high level of interest, which could be explained by the growing fascination with augmented and virtual reality in education, entertainment, and technology in general. The possibility of creating personalized worlds allows users to be creative and explore new forms of interaction, which could foster innovation and learning in students. Nonetheless, the obtained standard deviation values (between 0.57 and 1.04) show that, although most users have a positive view, there is a slight variability in opinions. This suggests that, although the tool is attractive to most, there are some users who might not be so interested or perhaps do not see its immediate usefulness in their learning context. We believe it is important to mention that the population of the experiment was focused on engineering undergraduate students; thus, there is a selection bias in the participants, so these values could be much better if the system were used by educators.
Likewise, the results of questions Q4 (Would you need help from someone who knows a lot about technology in order to use BabloXR?) and Q10 (Did you have to know anything special before you could use BabloXR well?), which present means of 3.0 and 2.63, respectively, indicate the possibility that some users do not feel comfortable with the technology or do not see the value of creating worlds in extended reality if they do not have prior training in similar tools. Finally, the results of questions Q2 (Did you find BabloXR too complicated to use?) and Q8 (I found the system very cumbersome to use?), with means of 1.50 and standard deviations of 0.57, show that users did not consider the tool to be complicated to use. In summary, the generally positive response to BabloXR implies a strong interest in extended reality, although the small variability in the responses suggests that some students might need more time or training to obtain most of the tool.
Participants were also asked a set of open questions to give their opinion of the tool. In general, participants were enthusiastic about the possibilities that the tool offers them, emphasizing the diversity of tasks that it can focus on and how the various elements of extended reality environments could be easily added through the use of blocks. Among the aspects of improvement they mentioned, it would be desirable for projects to be able to be worked on collaboratively and for more elements to be added, such as auto-saving functions, allowing for the creation of composite figures from base shapes and exporting models, among others.
It is important to point out that BabloXR enables users to access the tool from any device and from any location with Internet connectivity due to its integration with the cloud; it is also a tool that includes most of the elements partially present in other tools, making it a very complete application. Also noteworthy is BabloXR’s ability to import multimedia elements that can be reused in various projects, except for JEM Inventor; the rest of the tools evaluated lack this important feature.

7. Conclusions

As far as we know, our study describes the first fully accessible and device-compatible, cloud-based, robust authoring tool designed to build XR learning environments.
The usability test results demonstrated that users were capable of creating comprehensive and meticulous scenarios by following a concise video tutorial. The outcomes include several interactive and immersive environments, which were created in a relatively short period of time of 2 weeks. This showcases the ability of BabloXR to overcome the technical training and time-consuming limitations that usually impair the development of XR applications by educators in different fields and levels.
In comparison with other tools, as shown in Table 8, BabloXR stands out considerably due to its cloud-based design. This feature enables users to manage their environment in a streamlined manner. It facilitates efficient progress tracking and facilitates the sharing of environments with other users.
Looking forward, several areas for improvement and expansion have been identified. The invaluable cooperation of multiple educators has been important in the design and development of BabloXR. Nonetheless, it is believed that the project might gain from an assessment by a group of educators who are not part of the research team. It is suggested that future work on the application expand the block library with additional components, like predefined scenes and templates, to facilitate the rapid creation of educational environments by teachers; the importation of custom 3D models; the creation of integrated interactive tutorials to enhance accessibility; the integration of generative artificial intelligence; and the implementation of online collaboration features that enable multiple users to work simultaneously. These enhancements would further solidify BabloXR as a powerful and versatile tool in the field of XR-based education.

Author Contributions

Conceptualization, M.L.B.-E., R.Z.-C., M.A.S.-R., M.B.I. and V.M.B.-B.; formal analysis, M.L.B.-E., R.Z.-C., M.B.I. and V.M.B.-B.; investigation, M.L.B.-E., R.Z.-C., M.B.I. and V.M.B.-B.; methodology, M.L.B.-E., R.Z.-C., M.A.S.-R., M.B.I. and V.M.B.-B.; resources, M.L.B.-E., R.Z.-C., M.A.S.-R., M.B.I. and V.M.B.-B.; software, M.A.S.-R. and V.M.B.-B.; supervision, M.L.B.-E., R.Z.-C. and M.B.I.; validation, M.L.B.-E., R.Z.-C., M.A.S.-R., M.B.I. and V.M.B.-B.; writing—original draft, M.A.S.-R.; writing—review and editing, M.L.B.-E., R.Z.-C., M.A.S.-R., M.B.I. and V.M.B.-B. All authors have read and agreed to the published version of the manuscript.

Funding

This research received no external funding.

Institutional Review Board Statement

The study was approved by the TECNM Instituto Tecnológico de Culiacán on 1 August 2024, protocol code are 2024-DEPI-103.

Informed Consent Statement

Informed consent was obtained from all subjects involved in the study.

Data Availability Statement

The original contributions presented in this study are included in the article. We have created a small website (https://catalabs.mx/apps/babloxr/ accessed on 22 May 2025) to maintain up-to-date information on the availability of the tool and instructions on its use for educators who wish to evaluate it. Further inquiries can be directed to the corresponding author.

Acknowledgments

We appreciate the support provided by TecNM Instituto Tecnológico de Culiacán and SECIHTI (Secretaría de Ciencia, Humanidades, Tecnología e Innovación) in México.

Conflicts of Interest

The authors declare no conflicts of interest.

References

  1. 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]
  2. 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]
  3. 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]
  4. 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]
  5. 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]
  6. 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]
  7. 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]
  8. 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]
  9. 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]
  10. 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]
  11. 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]
  12. Memmesheimer, V.M.; Ebert, A. Scalable Extended Reality: A Future Research Agenda. BDCC 2022, 6, 12. [Google Scholar] [CrossRef]
  13. Xie, X. Research on Immersion Teaching Method Based on 5G +XR Technology and Reinforcement Learning Model. Adv. Multimed. 2022, 2022, 7092100. [Google Scholar] [CrossRef]
  14. 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]
  15. Nguyen, V.T.; Jung, K.; Dang, T. BlocklyAR: A Visual Programming Interface for Creating Augmented Reality Experiences. Electronics 2020, 9, 1205. [Google Scholar] [CrossRef]
  16. Jung, K.; Nguyen, V.T.; Lee, J. BlocklyXR: An Interactive Extended Reality Toolkit for Digital Storytelling. Appl. Sci. 2021, 11, 1073. [Google Scholar] [CrossRef]
  17. 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]
  18. 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]
  19. 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]
  20. 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).
  21. Blippar Augmented Reality (Ar) & Computer Vision Company—Blippar. Available online: https://www.blippar.com/ (accessed on 20 January 2025).
  22. Inglobe Technologies, Ar-Media Features. Available online: http://dev.inglobetechnologies.com/features/ (accessed on 20 January 2025).
  23. 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).
  24. 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]
  25. Larman, C. Agile and Iterative Development: A Manager’s Guide; Agile software development series; Addison-Wesley: Boston, MA, USA, 2004; ISBN 9780131111554. [Google Scholar]
  26. 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]
  27. Brooke, J. SUS—A Quick and Dirty Usability Scale; Redhatch Consulting Ltd.: Earley, UK, 1996; pp. 4–7. [Google Scholar]
  28. Brooke, J. SUS: A retrospective. J. Usability Stud. 2013, 8, 29–40. [Google Scholar]
Figure 1. Software architecture.
Figure 1. Software architecture.
Mti 09 00052 g001
Figure 2. Methodology and technologies for implementing BabloXR following the DevOps philosophy.
Figure 2. Methodology and technologies for implementing BabloXR following the DevOps philosophy.
Mti 09 00052 g002
Figure 3. The graphic user interface.
Figure 3. The graphic user interface.
Mti 09 00052 g003
Figure 4. Flowchart for creating a learning environment.
Figure 4. Flowchart for creating a learning environment.
Mti 09 00052 g004
Figure 5. BabloXR viewing styles: (A) virtual reality view mode, (B) augmented reality view mode.
Figure 5. BabloXR viewing styles: (A) virtual reality view mode, (B) augmented reality view mode.
Mti 09 00052 g005
Figure 6. Evaluation process.
Figure 6. Evaluation process.
Mti 09 00052 g006
Figure 7. BabloXR XR environment examples: (A) calculate the area of a circle (VR, AR), (B) Pokémon-themed system of linear equations (VR, AR), (C) water cycle (VR), (D) solar system (VR), (E) explanation of atomic models (VR), (F) art gallery (VR), (G) Minecraft-themed fraction tutorials (VR), (H) gallery of famous renaissance paintings (VR), and (I) paintings by Eugène Delacroix (VR, AR).
Figure 7. BabloXR XR environment examples: (A) calculate the area of a circle (VR, AR), (B) Pokémon-themed system of linear equations (VR, AR), (C) water cycle (VR), (D) solar system (VR), (E) explanation of atomic models (VR), (F) art gallery (VR), (G) Minecraft-themed fraction tutorials (VR), (H) gallery of famous renaissance paintings (VR), and (I) paintings by Eugène Delacroix (VR, AR).
Mti 09 00052 g007
Table 1. Comparison among XR authoring tools.
Table 1. Comparison among XR authoring tools.
ApplicationTechnologyPlatformOperating System
BlocklyVR [14]ARWebMultiplatform (Browser)
BlocklyAR [15]ARWebMultiplatform (Browser)
BlocklyXR [16]XRWebMultiplatform (Browser)
StoryMakAR [17]ARMobileAndroid, iOS
TrainAR [18]ARDesktopWindows, MacOS
Vuforia [20]ARWeb, Mobile, DesktopAndroid, iOS, Windows
BlippAR [21]ARWeb, MobileAndroid, iOS
ARMediaStudio [22]MRWeb, MobileAndroid, iOS
Areeka [23]ARWeb, MobileAndroid, iOS
JEMInventor [24]ARMobileAndroid, iOS
Table 2. XR environment’s setting blocks.
Table 2. XR environment’s setting blocks.
BlockDescriptionExample
CameraA free camera with initial positions is created.Mti 09 00052 i001
LightA general light with the default values is displayed.Mti 09 00052 i002
GroundA soil with a specific size is defined.Mti 09 00052 i003
SkyA sky with a specific size is created, as well as a material with a texture image. Next, the material is assigned to the sky.Mti 09 00052 i004
Table 3. Element and texture blocks.
Table 3. Element and texture blocks.
BlockDescriptionExample
3D FiguresA box with 10 units of width, height, and depth dimensions is created (10 × 10 × 10).Mti 09 00052 i005
Material and TextureThe material is instantiated and assigned to a color as texture. Subsequently, the material is added to the figure.Mti 09 00052 i006
ColorsThere are several alternatives for assigning a color.Mti 09 00052 i007
Table 4. Blocks for assigning events to components.
Table 4. Blocks for assigning events to components.
BlockDescriptionExample
ActionsAn 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.Mti 09 00052 i008
TransformationsThe figure is moved to another position.Mti 09 00052 i009
Table 5. Blocks for different types of media windows.
Table 5. Blocks for different types of media windows.
BlockDescriptionExample
WindowsAn 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.Mti 09 00052 i010
XRCreation of the XR experience for the environment.Mti 09 00052 i011
Table 6. SUS test mean and standard deviation for each question [1].
Table 6. SUS test mean and standard deviation for each question [1].
QuestionMSD
Q1. Would you like to use BabloXR many times to make your own extended reality worlds?4.500.57
Q2. Did you find BabloXR too complicated to use?1.500.57
Q3. Do you think BabloXR is easy to handle?4.100.75
Q4. Would you need help from someone who knows a lot about technology in order to use BabloXR?3.000.94
Q5. Did you find that all the things you can do with BabloXR work well together?4.300.59
Q6. Do you think BabloXR is a bit messy or confusing?2.961.09
Q7. Do you think your friends could quickly learn to use BabloXR, even if they don’t know much about computers?3.931.04
Q8. I found the system very cumbersome to use?1.500.57
Q9. Was it easy to show someone else what you created with BabloXR?4.330.71
Q10. Did you have to know anything special before you could use BabloXR well?2.631.15
Table 7. Open-ended questions.
Table 7. Open-ended questions.
Question 1Question 2Question 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.
Table 8. Authoring tool feature comparisons.
Table 8. Authoring tool feature comparisons.
Authoring
Tool
VRARCloud StorageImport Import 3D
Models
Display in Real TimeTutorialExport/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.

Share and Cite

MDPI and ACS Style

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

AMA Style

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 Style

Barró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 Style

Barró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

Article Metrics

Back to TopTop