Virtual Fire Evacuation Drills through a Web-Based Serious Game

: Evacuation capacity is very important in building ﬁre. In order to improve the safety evacuation capacity of occupants, a web-based serious game for virtual ﬁre evacuation drills is proposed. As a prototype of the serious game, a stand-alone system for virtual drill had been developed. On this basis, the system framework of the serious game is ﬁrst designed for web-based training, including the database, front and back ends. Secondly, an optimization solution including ﬁre scenes and web codes is designed for smooth rendering performance. Lastly, a solution is designed to visualize the evacuation paths of numerous trainees, which can be used to reveal the evacuation rules, and an evaluation model of evacuation performance is created considering the features of evacuation paths and ﬁre hazards, to provide comprehensive feedback for trainees. Thus, a convenient and accessible web-based serious game was developed. More than 100 people participated in the online virtual evacuation drill of a dormitory building ﬁre. Through the drills, the average evacuation time of the trainees decreases from 79.77 s to 54.32 s, and the safety scores of the trainees improve from 74.71 to 81.21. Therefore, the evacuation abilities of trainees gradually improve, which demonstrates the effectiveness of the drill. Consequently, virtual ﬁre drills using a web-based serious game can play an important role in improving the evacuation ability.


Introduction
As one of the most frequently occurring disasters, fires cause significant property losses and heavy casualties.Currently, many modern buildings have complex internal structures, which makes evacuating occupants difficult during fires.Consequently, casualties in many fire accidents are mainly caused by unsafe evacuation behaviors [1][2][3][4].Therefore, improving the safety evacuation capacity of occupants is very important.
Serious games can be a great way to improve evacuation capacity and investigate evacuation behavior.Serious games are identified as "a thought-out educational purpose and are not intended to be played primarily for amusement" [5,6].Serious games have been widely adopted for a variety of training, such as medical training [7][8][9], mental healthcare [10][11][12], emergency decision [13,14], earthquake and fire evacuations [15][16][17][18].
Currently, some studies on serious games for virtual fire evacuation drills have been conducted [19][20][21][22].Ruffino et al. [23] developed a serious game to train people to evacuate on a floor during a fire, through which people better understand the location of fire exits and firefighting equipment.Almeida et al. [24] revealed the evacuation behaviors of people in unknown buildings in different emergency situations through serious games.
However, most serious games on fire evacuation are stand-alone programs; therefore, these serious games need to be downloaded and installed before use, which limits their popularization.Additionally, stand-alone serious games are mainly used for individual training, making it difficult to reveal the characteristics of multiple people evacuation.To enable greater participation in fire evacuation training, web-based serious games need to be developed, thus eliminating the process of downloading and installing, which is beneficial for popularization.In this way, the evacuation characteristics of numerous trainees can be revealed through convenient online training, which can better guide the trainees to efficiently evacuate at the time of the fire.
To establish a web-based serious game for fire evacuation drills, the following three challenges need to be resolved: (1) System design of a web-based serious game.
As mentioned earlier, most of the research on serious games is based on stand-alone programs, and a web-based serious game for virtual fire drills has not been fully studied.Designing a workable system is a primary and critical issue in a web-based serious game.
(2) Optimization of the rendering performance.
The rendering performance of the virtual fire scene drill should be as smooth as possible.However, the models of fire evacuation scenes are generally large in volume because of accurate and realistic effects, leading to slow rendering performance.Compared to stand-alone games, fewer rendering resources can be employed in web games.Therefore, reducing the size of fire evacuation scenes and improving the rendering performance is challenging for web-based serious games.
The evacuation behaviors of the trainees need to be evaluated so that the trainees can improve their evacuation capabilities according to the feedback evaluation results.For such evaluation, different types of data (e.g., location, smoke density, and temperature) in the process of evacuation drills can be collected.However, owing to the variety of drill data and the complexity of evacuation characteristics, it is difficult to evaluate the drill in web-based serious games.
To resolve Challenge (1), some existing serious games [22][23][24][25][26] provide good references.For instance, Xu et al. [27,28] developed a stand-alone serious game of a fire evacuation training system for people trapped in fires and firefighters engaged in rescue efforts.This serious game is based on the numerical simulation data of fire and fully considers the physical collision of occupants, which guarantees the effectiveness of evacuation training.Additionally, some web-based serious games have been developed in other fields [11,13,19].For example, Lievense et al. [11] designed a web-based serious game to study the selfconcept of visually impaired children.Sermet et al. [13] developed a web-based serious game decision support tool for hydrological multi-hazard analysis.However, few studies have investigated and developed web-based serious games for fire evacuation training; therefore, the web-based training systems need to be fully designed.
To resolve Challenge (2), many optimization methods for 3D scenes can be employed [29][30][31][32][33][34].For instance, Yan et al. [31] designed a real-time fire evacuation system by simplifying the models of a large-scale scene and dynamic smoke.Liu et al. [34] proposed a Web3D-based lightweight solution for real-time visualization of large-scale building information modeling (BIM) models, which can consider the redundancy, semantics, and parameterization of BIM data under the limited resources of network bandwidth and web browsers.However, most of the existing optimization methods are mainly focused on simplifying 3D scenes but not on web programs.In this study, the optimization solution for both 3D scenes and web programs were investigated.
To resolve Challenge (3), certain studies can provide methods for assessing drill data [35][36][37][38].For example, Cao et al. [36] allowed participants to explore a virtual museum based on a real-time interactive environment, and the way-finding performance of the participants during a fire emergency scenario was evaluated according to their spatial exploration mode.Mitsuhara et al. [38] proposed a real-time virtual reality (VR) training system for evacuation based on Kolb's experiential learning theory, where the evacuation time of trainees can be outputted in a timely manner to assess the training effect.However, most evaluations of fire drills are based on evacuation characteristics (e.g., evacuation time and spatial exploration mode), and fire hazards (e.g., high temperature and smoke toxicity) are rarely considered.In this study, both evacuation characteristics and fire hazards were considered in the evaluation to provide a comprehensive guide for training.
In this study, a web-based serious game for virtual fire evacuation drills is proposed.Firstly, the system framework of the serious game is designed for web-based training.Secondly, an optimization solution including fire scenes and web codes is designed for smooth rendering performance.Lastly, a solution is designed to visualize the evacuation paths of numerous trainees, which can be used to reveal the evacuation rules, and an evaluation model of evacuation performance is created considering the features of evacuation paths and fire hazards, to provide comprehensive feedback for trainees.To validate the effectiveness of the proposed web-based serious game, more than 100 people participated in the online virtual evacuation drill of a dormitory building fire.The drill results indicated that the evacuation abilities of trainees gradually improved with the addition of training times.

Framework
The framework of this study is shown in Figure 1 and includes three parts.
Appl.Sci.2021, 11, x FOR PEER REVIEW 3 of 16 system for evacuation based on Kolb's experiential learning theory, where the evacuation time of trainees can be outputted in a timely manner to assess the training effect.However, most evaluations of fire drills are based on evacuation characteristics (e.g., evacuation time and spatial exploration mode), and fire hazards (e.g., high temperature and smoke toxicity) are rarely considered.In this study, both evacuation characteristics and fire hazards were considered in the evaluation to provide a comprehensive guide for training.
In this study, a web-based serious game for virtual fire evacuation drills is proposed.Firstly, the system framework of the serious game is designed for web-based training.Secondly, an optimization solution including fire scenes and web codes is designed for smooth rendering performance.Lastly, a solution is designed to visualize the evacuation paths of numerous trainees, which can be used to reveal the evacuation rules, and an evaluation model of evacuation performance is created considering the features of evacuation paths and fire hazards, to provide comprehensive feedback for trainees.To validate the effectiveness of the proposed web-based serious game, more than 100 people participated in the online virtual evacuation drill of a dormitory building fire.The drill results indicated that the evacuation abilities of trainees gradually improved with the addition of training times.

Framework
The framework of this study is shown in Figure 1 and includes three parts.(1) Technical methods for a web-based serious game.
A prototype of the drill system is necessary for the construction of a web-based serious game.In this study, an existing stand-alone fire drill system developed by the authors [28] was adopted as a prototype.Aside from the above prototype system, the proposed web-based serious game still needs system design, an optimization solution, and an evaluation model.(1) Technical methods for a web-based serious game.
A prototype of the drill system is necessary for the construction of a web-based serious game.In this study, an existing stand-alone fire drill system developed by the authors [28] was adopted as a prototype.Aside from the above prototype system, the proposed web-based serious game still needs system design, an optimization solution, and an evaluation model.
In this study, the system framework of the serious game includes the database, front end, and back ends.The database is used to store drill data, the front end is used for the user interface, and the back end is used for function operation.
In the optimization solution, the fire scene and web codes of the serious game were optimized.Additionally, a test of the rendering performance of the web-based serious game was performed to validate the effectiveness of the proposed optimization solution.
In the evaluation of the drills, a solution was designed to obtain and visualize the evacuation paths of numerous trainees, which can be used to reveal the evacuation rules.Additionally, a model based on the integrated hazard dose (IHD) [27] was proposed to evaluate the safety of evacuation drills.In this way, feedback evaluation results can be provided to improve the abilities of the trainees.
(2) Virtual fire evacuation drills A virtual fire evacuation drill scheme was designed.Drills were performed three times to examine the effectiveness of the proposed serious game with the same fire scene.In this study, more than 100 people participated in virtual fire evacuation drills according to the drill scheme.
(3) Result analysis and discussions The evacuation characteristics were analyzed based on the evacuation spatio-temporal paths of more than 100 trainees.Subsequently, the effectiveness of the proposed serious game was examined according to the evaluation results of the three drills.

Prototype System
The web-based serious game allows trainees to experience fire evacuation, which adopted the system developed by Xu et al. [28] as a prototype.
First, the prototype system had an accurate fire scene.The building layout was based on a BIM model of a building, and accurate smoke spread was based on computational fluid dynamics (CFD) simulations.By using the modeling and visualization algorithm consistent with the CFD results, a well-founded and realistic fire scene was constructed.
Second, a crowd evacuation was considered in the system.The evacuation process of non-player characters (NPCs) was constructed based on the evacuation simulation using FDS + Evac [39,40], the evacuation simulation module for the widely used fire dynamics simulator (FDS).The evacuation simulations were fully coupled with the fire situations so that an accurate crowd evacuation scene was provided to the trainees.
Finally, the trainees can choose the evacuation path by their operation in the virtual drill.Additionally, the fire hazards (e.g., heat and smoke toxicity) were quantified, and the physical collisions between the trainee, NPCs, and building in the virtual drill can be fully calculated.The key parameters in the collision calculation were determined through a collision experiment so that the physical interaction in the drill was simulated.

System Design
The web-based serious game includes three main functions: registration/login, evacuation drill, and result feedback.Firstly, trainees need to register or log into the game, from where their basic information (e.g., usernames and IDs) can be collected.Secondly, trainees can perform the virtual evacuation drill using the game.In this process, the game records the drill data of the trainees, such as the evacuation path, evacuation time, and smoke hazards.Lastly, the game calculates the safety scores of evacuations and shows them to the trainees after the training.
To implement the above functions, the system of the web-based serious game is composed of a front end, back end, and database, as shown in Figure 2. The front end is designed as the interface of the above three functions, whereas the back end is used for the operation of these functions.Additionally, the database is used to store and manage the data of this system.operation of these functions.Additionally, the database is used to store and manage the data of this system.A widely used database, MySQL [41], was selected as the database for this system.The database includes two main groups of data.One is the user information, and the other is the drill data (e.g., evacuation path, evacuation time, and smoke hazard value).In the front end, the functions of registration/login and result feedback are easily implemented using JavaScript [42], and the evacuation drill function can be developed by WebGL [43].However, efficiently visiting the database from the front end is a primary issue for the above functions.In this study, the widely used Socket protocol was employed to directly access the MySQL database from the front end.
As mentioned before, the front end was developed using JavaScript.To match the front end, the Spring MVC [44], a Java framework, was used to build the back-end web applications.Note that the key algorithms of the back end for the result evaluation will be elaborated in the chapters of drill evaluation.

Scene Lightweighting
Rendering 3D scenes requires abundant computational resources (e.g., memory and CPU usage).However, compared with stand-alone programs, web programs can only access limited computational resources; thus, lightweight 3D scenes are necessary.
In this study, a virtual evacuation drill program was developed based on a popular graphics engine, Unity [45], and then released to the WebGL version for online applications.The Unity engine defines "static" objects, which do not move during the entire process of scene rendering.These static objects can be pre-processed to achieve a high rendering efficiency.
Lightmap baking, which is most commonly applied to static objects, was used to preprocess the static objects in this study.A lightmap is a data structure used in lightmapping, a form of surface caching in which the brightness of surfaces in a virtual scene is precalculated and stored in texture maps for later use.By using a lightmap solution, lighting effects such as global illumination can be provided at a relatively low computational cost.
The indoor objects (e.g., doors and walls) in the virtual evacuation drill are typical static objects.First, the properties of these indoor objects were defined as static in Unity.Then, the lightmaps of these static objects were baked in advance for rendering efficiency in the virtual drill.A widely used database, MySQL [41], was selected as the database for this system.The database includes two main groups of data.One is the user information, and the other is the drill data (e.g., evacuation path, evacuation time, and smoke hazard value).In the front end, the functions of registration/login and result feedback are easily implemented using JavaScript [42], and the evacuation drill function can be developed by WebGL [43].However, efficiently visiting the database from the front end is a primary issue for the above functions.In this study, the widely used Socket protocol was employed to directly access the MySQL database from the front end.
As mentioned before, the front end was developed using JavaScript.To match the front end, the Spring MVC [44], a Java framework, was used to build the back-end web applications.Note that the key algorithms of the back end for the result evaluation will be elaborated in the chapters of drill evaluation.

Scene Lightweighting
Rendering 3D scenes requires abundant computational resources (e.g., memory and CPU usage).However, compared with stand-alone programs, web programs can only access limited computational resources; thus, lightweight 3D scenes are necessary.
In this study, a virtual evacuation drill program was developed based on a popular graphics engine, Unity [45], and then released to the WebGL version for online applications.The Unity engine defines "static" objects, which do not move during the entire process of scene rendering.These static objects can be pre-processed to achieve a high rendering efficiency.
Lightmap baking, which is most commonly applied to static objects, was used to preprocess the static objects in this study.A lightmap is a data structure used in lightmapping, a form of surface caching in which the brightness of surfaces in a virtual scene is precalculated and stored in texture maps for later use.By using a lightmap solution, lighting effects such as global illumination can be provided at a relatively low computational cost.
The indoor objects (e.g., doors and walls) in the virtual evacuation drill are typical static objects.First, the properties of these indoor objects were defined as static in Unity.Then, the lightmaps of these static objects were baked in advance for rendering efficiency in the virtual drill.

Code Optimization
The script is the core component of the web-based virtual drill system.If the script code is optimized, the operation of the web application will be more efficient.In the Unity-based web program, scripts are executed independently, and each script has its own lifecycle.In the entire lifecycle of a script, some functions (e.g., Update()) are called frame-by-frame, and too many calls may decrease the rendering efficiency.Therefore, the script should be optimized to reduce the function calls for every frame.
In the stand-alone virtual drill system, the Update() function is called every frame in Unity to control the animation of NPCs, while a delay function, Invoke(), is also called every frame, to destroy the NPCs who finish the evacuation.To optimize the web code, the Update() function for the NPCs is removed.The code for controlling the animation of the NPC is added to the Start() function, which is run at the beginning of the web program.In this way, the animation of NPCs is precomputed, and the Update() function is no longer called every time.Additionally, the Invoke() function is replaced by a "trigger" that can start the specific function if the corresponding condition is triggered in Unity.The trigger is not called every frame; it is only called once.In this study, the NPC is destroyed by setting a trigger at the exit to detect whether the NPCs finish the evacuation.By removing the Update() and Invoke() functions, the calls decrease every frame, which increases the rendering efficiency.

Rendering Test
The rendering efficiencies before and after optimization were tested to demonstrate the effectiveness of the above optimization solution.A six-story dormitory was selected as a test scene, which was also used as a case study, as shown in Figure 3.The total height and built-up area of this building are 21.60 m and 9600 m 2 , respectively.The fifth floor of the building was selected to perform a fire evacuation drill with dozens of NPCs.A low-voltage laptop was used for testing, and its specific parameters are listed in Table 1.

Code Optimization
The script is the core component of the web-based virtual drill system.If the script code is optimized, the operation of the web application will be more efficient.In the Unitybased web program, scripts are executed independently, and each script has its own lifecycle.In the entire lifecycle of a script, some functions (e.g., Update()) are called frameby-frame, and too many calls may decrease the rendering efficiency.Therefore, the script should be optimized to reduce the function calls for every frame.
In the stand-alone virtual drill system, the Update() function is called every frame in Unity to control the animation of NPCs, while a delay function, Invoke(), is also called every frame, to destroy the NPCs who finish the evacuation.To optimize the web code, the Update() function for the NPCs is removed.The code for controlling the animation of the NPC is added to the Start() function, which is run at the beginning of the web program.In this way, the animation of NPCs is precomputed, and the Update() function is no longer called every time.Additionally, the Invoke() function is replaced by a "trigger" that can start the specific function if the corresponding condition is triggered in Unity.The trigger is not called every frame; it is only called once.In this study, the NPC is destroyed by setting a trigger at the exit to detect whether the NPCs finish the evacuation.By removing the Update() and Invoke() functions, the calls decrease every frame, which increases the rendering efficiency.

Rendering Test
The rendering efficiencies before and after optimization were tested to demonstrate the effectiveness of the above optimization solution.A six-story dormitory was selected as a test scene, which was also used as a case study, as shown in Figure 3.The total height and built-up area of this building are 21.60 m and 9600 m 2 , respectively.The fifth floor of the building was selected to perform a fire evacuation drill with dozens of NPCs.A lowvoltage laptop was used for testing, and its specific parameters are listed in Table 1.The test browser is Firefox because its web development tools provide a test program for rendering the frame rate.The fire evacuation scene in Figure 4 is separately rendered 10 times with and without the proposed optimization solution, and the corresponding frame rates are shown in Figure 4.
frame rates are shown in Figure 4.
According to the test results in Figure 4, the average frames per second (FPS) of the web application without and with the optimization solution are 25.94 and 30.93, respectively.Generally, these programs run smoothly when the frame rate is greater than 30 FPS.Evidently, the web-based fire evacuation drill system has a good rendering performance when using the proposed optimization solution.Note that the performance could be further improved if better hardware was used.

Path Visualization
In the developed serious game, the evacuation paths of trainees were recorded and stored in the database, as shown in Table 2.The locations (i.e., X, Y, and Z coordinates in the fire scene) of trainees were recorded at a fixed time from the beginning of the drill.However, it is difficult to analyze the spatial characteristics of evacuation paths in such a version of coordinates; therefore, a visualization method is needed for the recorded locations.In this study, the Plot function of MATLAB [46] was employed to visualize the evacuation path.The lower-left corner and boundaries of the room plan are defined as the coordinate origin and axes, respectively, as shown in Figure 5.The Y coordinates are useless for the visualization of evacuation paths because all the trainees are on the same floor; According to the test results in Figure 4, the average frames per second (FPS) of the web application without and with the optimization solution are 25.94 and 30.93, respectively.Generally, these programs run smoothly when the frame rate is greater than 30 FPS.Evidently, the web-based fire evacuation drill system has a good rendering performance when using the proposed optimization solution.Note that the performance could be further improved if better hardware was used.

Path Visualization
In the developed serious game, the evacuation paths of trainees were recorded and stored in the database, as shown in Table 2.The locations (i.e., X, Y, and Z coordinates in the fire scene) of trainees were recorded at a fixed time from the beginning of the drill.However, it is difficult to analyze the spatial characteristics of evacuation paths in such a version of coordinates; therefore, a visualization method is needed for the recorded locations.In this study, the Plot function of MATLAB [46] was employed to visualize the evacuation path.The lower-left corner and boundaries of the room plan are defined as the coordinate origin and axes, respectively, as shown in Figure 5.The Y coordinates are useless for the visualization of evacuation paths because all the trainees are on the same floor; thus, the X and Z coordinates are inputted to the Plot function of MATLAB.Using this function, the evacuation paths of the trainees can be visualized on the building plan, as shown in Figure 5.
thus, the X and Z coordinates are inputted to the Plot function of MATLAB.Using this function, the evacuation paths of the trainees can be visualized on the building plan, as shown in Figure 5.

Safety Evacuation
To improve the evacuation capabilities of the trainees, they need to receive immediate feedback from the evacuation safety score after the drill is finished.The assessment of evacuation safety is a key issue for this feedback.
In this study, the integrated hazard dose (IHD) [27] was adopted to assess the safety of different evacuation paths.The IHD can assess the hazards of indoor fires by considering toxic gases and heat using values from 0 to 1.A higher IHD implies a more severe hazard.When the IHD is 1.0, the corresponding hazard is fatal.
In a virtual evacuation, the IHD along different paths (i.e., IHD ) can be calculated by the toxic and heat hazards along the evacuation path, as shown in the following equation: where FED is the toxic hazard caused by six common gases along the evacuation path and FED indicates the heat hazard along the evacuation path.The details of these two hazards are elaborated in the reference [27] by Xu et al.
In the evacuation drill, the data of smoke toxicity and thermal radiation are obtained from the results of the CFD simulation according to the current coordinates of the trainees, and the IHD of the current position can be calculated by Equation (1).Finally, the IHD values of different locations along the evacuation path are accumulated as the safety results of this evacuation path.In this study, the location coordinates of the evacuation path were obtained by a fixed time (i.e., 1 s).The safety score of the evacuation is the percentage score converted from the IHD , as shown in Equation (2).

Drill Scheme Design
In virtual fire evacuation drills, three indexes need to be tested as follows: (1) Evacuation time.In the virtual evacuation drill, the trainee is initially located in a fixed original room.Evacuation time is the time that the trainee evacuates from the initial position to the exit, which can indicate the efficiency of evacuation.

Safety Evacuation
To improve the evacuation capabilities of the trainees, they need to receive immediate feedback from the evacuation safety score after the drill is finished.The assessment of evacuation safety is a key issue for this feedback.
In this study, the integrated hazard dose (IHD) [27] was adopted to assess the safety of different evacuation paths.The IHD can assess the hazards of indoor fires by considering toxic gases and heat using values from 0 to 1.A higher IHD implies a more severe hazard.When the IHD is 1.0, the corresponding hazard is fatal.
In a virtual evacuation, the IHD along different paths (i.e., IHD path ) can be calculated by the toxic and heat hazards along the evacuation path, as shown in the following equation: where FED path 6−Gas is the toxic hazard caused by six common gases along the evacuation path and FED path heat indicates the heat hazard along the evacuation path.The details of these two hazards are elaborated in the reference [27] by Xu et al.
In the evacuation drill, the data of smoke toxicity and thermal radiation are obtained from the results of the CFD simulation according to the current coordinates of the trainees, and the IHD of the current position can be calculated by Equation (1).Finally, the IHD values of different locations along the evacuation path are accumulated as the safety results of this evacuation path.In this study, the location coordinates of the evacuation path were obtained by a fixed time (i.e., 1 s).The safety score of the evacuation is the percentage score converted from the IHD path , as shown in Equation (2).

Drill Scheme Design
In virtual fire evacuation drills, three indexes need to be tested as follows: (1) Evacuation time.In the virtual evacuation drill, the trainee is initially located in a fixed original room.Evacuation time is the time that the trainee evacuates from the initial position to the exit, which can indicate the efficiency of evacuation.(2) Safety scores.The trainee suffers different fire hazards according to their evacuation times and paths.Safety scores can evaluate the hazard of the trainee and therefore guide the trainee for safe evacuation.
(3) Drill effectiveness.A trainee will perform virtual evacuation drills multiple times.
Comparisons of evacuation time and safety scores between different drills can demonstrate the effectiveness of the drill.

Drill Process
The fire evacuation drill scene is on the fifth floor of a dormitory building, where the initial position of the trainee is adjacent to the ignition room as shown in Figure 6.There are two evacuation exits located on both sides of the building; thus, three evacuation paths can be selected for the trainee.
Appl.Sci.2021, 11, x FOR PEER REVIEW 9 of 16 (2) Safety scores.The trainee suffers different fire hazards according to their evacuation times and paths.Safety scores can evaluate the hazard of the trainee and therefore guide the trainee for safe evacuation.(3) Drill effectiveness.A trainee will perform virtual evacuation drills multiple times.
Comparisons of evacuation time and safety scores between different drills can demonstrate the effectiveness of the drill.

Drill Process
The fire evacuation drill scene is on the fifth floor of a dormitory building, where the initial position of the trainee is adjacent to the ignition room as shown in Figure 6.There are two evacuation exits located on both sides of the building; thus, three evacuation paths can be selected for the trainee.In the developed serious game, the trainee observes the fire scene with the first-person view and controls the evacuation movement (e.g., moving, turning, and speeding up) through the keyboard.In this way, the trainee can experience a realistic fire scene (e.g., smoke and NPCs) and make decisions on evacuation paths by themselves.A typical evacuation drill process is shown in Figure 7.The trainee leaves from the initial position and moves to the exit through the corridor.During the drill, the serious game collects the basic information (see Figure 8a) and drill data of the trainee, and gives the evaluation back to the trainee after evacuation.The evacuation results include the safety score and evacuation time (see Figure 8b).In the developed serious game, the trainee observes the fire scene with the first-person view and controls the evacuation movement (e.g., moving, turning, and speeding up) through the keyboard.In this way, the trainee can experience a realistic fire scene (e.g., smoke and NPCs) and make decisions on evacuation paths by themselves.A typical evacuation drill process is shown in Figure 7.The trainee leaves from the initial position and moves to the exit through the corridor.During the drill, the serious game collects the basic information (see Figure 8a) and drill data of the trainee, and gives the evaluation back to the trainee after evacuation.The evacuation results include the safety score and evacuation time (see Figure 8b).(2) Safety scores.The trainee suffers different fire hazards according to their evacuation times and paths.Safety scores can evaluate the hazard of the trainee and therefore guide the trainee for safe evacuation.(3) Drill effectiveness.A trainee will perform virtual evacuation drills multiple times.
Comparisons of evacuation time and safety scores between different drills can demonstrate the effectiveness of the drill.

Drill Process
The fire evacuation drill scene is on the fifth floor of a dormitory building, where the initial position of the trainee is adjacent to the ignition room as shown in Figure 6.There are two evacuation exits located on both sides of the building; thus, three evacuation paths can be selected for the trainee.In the developed serious game, the trainee observes the fire scene with the first-person view and controls the evacuation movement (e.g., moving, turning, and speeding up) through the keyboard.In this way, the trainee can experience a realistic fire scene (e.g., smoke and NPCs) and make decisions on evacuation paths by themselves.A typical evacuation drill process is shown in Figure 7.The trainee leaves from the initial position and moves to the exit through the corridor.During the drill, the serious game collects the basic information (see Figure 8a) and drill data of the trainee, and gives the evaluation back to the trainee after evacuation.The evacuation results include the safety score and evacuation time (see Figure 8b).

Results and Discussions
A total of 105 trainees were recruited for a web-based virtual evacuation drill.The test scale is quite considerable compared to the stand-alone serious game.Safe Environments, for instance, a stand-alone serious game developed by Volejnikova-Wenger et al. [7] recruited only eight participants.The stand-alone serious game could only be played offline so that fewer volunteers could be recruited.In contrast, the web-based serious game in this study could be widely promoted.
Additionally, the evacuation paths were visualized, and the effectiveness of the drill was discussed in this study.

Evacuation Path
Using the developed serious game, the evacuation paths of the above 105 trainees were recorded, as shown in Figure 9.It can be observed that the evacuation paths change with the addition of drills.In detail, evacuation paths reflect the following spatial characteristics.
(1) Less and less trainees chose Path 1 for evacuation (see the red line in Figure 9), which is a wise choice for an efficient evacuation.The rooms are located on both sides of Path 1, but only on one side of Paths 2 and 3. Consequently, Path 1 is more crowded than Paths 2 and 3 because more people exit the rooms into the corridor.Therefore, the choice of Path 1 is not ideal for trainee evacuation.(2) Less and less trainees switched paths (see the yellow area in Figure 9), which benefits the evacuations.From the yellow area, it can be observed that the cross lines become increasingly smaller.The cross lines reflect the switch between Paths 2 and 3.However, the switch path generally takes a longer distance and more time; therefore, a smaller switch will cause faster evacuation.
(3) Less and less trainees (see the blue area in Figure 9) moved the wrong way, which also benefits the evacuations.The blue area represents the dead end.When the trainees move to the dead end, it will waste evacuation time, which is detrimental.
In summary, the above characteristics indicate that the evacuation performance of trainees improves through the drills.

Results and Discussions
A total of 105 trainees were recruited for a web-based virtual evacuation drill.The test scale is quite considerable compared to the stand-alone serious game.Safe Environments, for instance, a stand-alone serious game developed by Volejnikova-Wenger et al. [7] recruited only eight participants.The stand-alone serious game could only be played offline so that fewer volunteers could be recruited.In contrast, the web-based serious game in this study could be widely promoted.
Additionally, the evacuation paths were visualized, and the effectiveness of the drill was discussed in this study.

Evacuation Path
Using the developed serious game, the evacuation paths of the above 105 trainees were recorded, as shown in Figure 9.It can be observed that the evacuation paths change with the addition of drills.In detail, evacuation paths reflect the following spatial characteristics.
(1) Less and less trainees chose Path 1 for evacuation (see the red line in Figure 9), which is a wise choice for an efficient evacuation.The rooms are located on both sides of Path 1, but only on one side of Paths 2 and 3. Consequently, Path 1 is more crowded than Paths 2 and 3 because more people exit the rooms into the corridor.Therefore, the choice of Path 1 is not ideal for trainee evacuation.(2) Less and less trainees switched paths (see the yellow area in Figure 9), which benefits the evacuations.From the yellow area, it can be observed that the cross lines become increasingly smaller.The cross lines reflect the switch between Paths 2 and 3.However, the switch path generally takes a longer distance and more time; therefore, a smaller switch will cause faster evacuation.(3) Less and less trainees (see the blue area in Figure 9) moved the wrong way, which also benefits the evacuations.The blue area represents the dead end.When the trainees move to the dead end, it will waste evacuation time, which is detrimental.
In summary, the above characteristics indicate that the evacuation performance of trainees improves through the drills.

Drill Effect
Through the developed serious game, the evacuation time and safety score of each trainee were calculated.As shown in Figure 10, the average trainee evacuation times of three drills were 79.77, 60.17, and 54.32 s.In the second and third drills, the evacuation times decreased by 19.60 s (24.6%) and 25.45 s (31.9%), respectively, compared to that of the first drill.Therefore, the evacuation time decreased significantly with the increase in evacuation training.

Drill Effect
Through the developed serious game, the evacuation time and safety score of each trainee were calculated.As shown in Figure 10, the average trainee evacuation times of three drills were 79.77, 60.17, and 54.32 s.In the second and third drills, the evacuation times decreased by 19.60 s (24.6%) and 25.45 s (31.9%), respectively, compared to that of the first drill.Therefore, the evacuation time decreased significantly with the increase in evacuation training.Additionally, the average safety scores of the three-time drills increased, which were 74.71 to 78.69, and 81.21, as shown in Figure 11.Through the second and third drills, the safety scores improved by 5.3% and 8.7%, respectively.This indicates that the evacuation of trainees becomes safer through the drills.
Generally, the improvement in evacuation time and safety scores demonstrates the effectiveness of the developed serious game.

Effect of Evacuation Signs
To further discuss the effect of the signs on evacuation, evacuation signs were added to the scene after three-time drills.Thus, the trainees participated in the fourth drill with evacuation signs.In detail, the signs were placed along the corridor to indicate the evacuation paths, as shown in Figure 12.The trainees can follow the signs and choose paths to evacuate.Additionally, the average safety scores of the three-time drills increased, which were 74.71 to 78.69, and 81.21, as shown in Figure 11.Through the second and third drills, the safety scores improved by 5.3% and 8.7%, respectively.This indicates that the evacuation of trainees becomes safer through the drills.
Generally, the improvement in evacuation time and safety scores demonstrates the effectiveness of the developed serious game.

Effect of Evacuation Signs
To further discuss the effect of the signs on evacuation, evacuation signs were added to the scene after three-time drills.Thus, the trainees participated in the fourth drill with evacuation signs.In detail, the signs were placed along the corridor to indicate the evacuation paths, as shown in Figure 12.The trainees can follow the signs and choose paths to evacuate.Additionally, the average safety scores of the three-time drills increased, which were 74.71 to 78.69, and 81.21, as shown in Figure 11.Through the second and third drills, the safety scores improved by 5.3% and 8.7%, respectively.This indicates that the evacuation of trainees becomes safer through the drills.
Generally, the improvement in evacuation time and safety scores demonstrates the effectiveness of the developed serious game.

Effect of Evacuation Signs
To further discuss the effect of the signs on evacuation, evacuation signs were added to the scene after three-time drills.Thus, the trainees participated in the fourth drill with evacuation signs.In detail, the signs were placed along the corridor to indicate the evacuation paths, as shown in Figure 12.The trainees can follow the signs and choose paths to evacuate.The average evacuation time and safety scores are shown in Figure 13.The results of the drill with signs were compared with the third drill (without signs).It can be seen that the average evacuation time of trainees reduced from 54.32 to 45.98 s, and the safety scores increased from 81.21 to 83.80.It suggests that the evacuation efficiency was further im-  The average evacuation time and safety scores are shown in Figure 13.The results of the drill with signs were compared with the third drill (without signs).It can be seen that the average evacuation time of trainees reduced from 54.32 to 45.98 s, and the safety scores increased from 81.21 to 83.80.It suggests that the evacuation efficiency was further improved with evacuation signs.Evacuation signs can facilitate the occupants' evacuation and improve evacuation safety.

Cognitive Differences
Human cognition is different between the virtual world and the real world.For example, distances traveled with artificial locomotion will be underestimated [47].Therefore, whether cognitive difference affects the training effect needs to be discussed.
The character locomotion in the serious game of this study was controlled by the keyboard, which is different from the real behavior.However, according to the study of Boletsis et al. [48], the keyboard controller provides an overall experience of good quality and is easy to use.Therefore, the developed serious game also can provide a good experience of evacuation for trainees.
Additionally, the main purpose of the web-based serious game is to train trainees to find a safe path.The trainees only need to choose a path by comparing the relative distance between the paths in the virtual drills.Accordingly, there is no cognitive difference between the real and virtual world for path choice.Consequently, the virtual fire evacuation drill is effective for path decisions.

Cognitive Differences
Human cognition is different between the virtual world and the real world.For example, distances traveled with artificial locomotion will be underestimated [47].Therefore, whether cognitive difference affects the training effect needs to be discussed.
The character locomotion in the serious game of this study was controlled by the keyboard, which is different from the real behavior.However, according to the study of Boletsis et al. [48], the keyboard controller provides an overall experience of good quality and is easy to use.Therefore, the developed serious game also can provide a good experience of evacuation for trainees.
Additionally, the main purpose of the web-based serious game is to train trainees to find a safe path.The trainees only need to choose a path by comparing the relative distance between the paths in the virtual drills.Accordingly, there is no cognitive difference between the real and virtual world for path choice.Consequently, the virtual fire evacuation drill is effective for path decisions.

Conclusions
A web-based serious game for virtual fire evacuation drills was developed in this study, and a case study of fire evacuation drills with more than 100 trainees was performed.The following conclusions were drawn: (1) Through the developed serious game, virtual evacuation drills can be smoothly performed on the web, and the safety evaluation results of evacuation drills can also be provided in a timely manner for trainees.(2) The drill results indicated that the average evacuation time of the trainees decreased from 79.77 to 54.32 s after two drills, a drop of 31.9%.Additionally, the safety scores of the trainees improved from 74.71 to 81.21.The above results demonstrated the effectiveness of the developed serious game.(3) The average evacuation efficiency and safety scores in the virtual drill with signs also improved, which suggests that evacuation signs can facilitate the occupants' evacuation.
(4) The developed serious game for virtual fire evacuation drills can improve the safe evacuation capabilities of trainees in a convenient web-based way, and therefore can play an important role in fire safety education.

Figure 1 .
Figure 1.Framework of this study.

Figure 1 .
Figure 1.Framework of this study.

Figure 2 .
Figure 2. System structure of the web-based serious game.

Figure 2 .
Figure 2. System structure of the web-based serious game.

Figure 3 .
Figure 3. Test scene of fire evacuation.

Figure 4 .
Figure 4. Frames per second (FPS) without and with the optimization solution.

Figure 4 .
Figure 4. Frames per second (FPS) without and with the optimization solution.

Figure 10 .
Figure 10.Evacuation time of three drills.

Figure 11 .
Figure 11.Safety scores of three drills.

Figure 10 .
Figure 10.Evacuation time of three drills.

Figure 10 .
Figure 10.Evacuation time of three drills.

Figure 11 .
Figure 11.Safety scores of three drills.

Figure 13 .
Figure 13.Average evacuation time and safety score of third drill and drill with sign.

Figure 13 .
Figure 13.Average evacuation time and safety score of third drill and drill with sign.

Table 1 .
Hardware specifics for rendering test.
Figure 3. Test scene of fire evacuation.

Table 1 .
Hardware specifics for rendering test.

Table 2 .
The data of evacuation paths.

Table 2 .
The data of evacuation paths.