Hazardous environment 3D/VR training for industrial engineers
At a glance
We created an interactive 3D/VR virtual training environment which enables companies to provide orientation, navigation and equipment familiarity training in what would otherwise be a hazardous environment.
The project enabled the user to move around a large multi-floor 3D space. The virtual environment contained hotspots that loaded training content in the form of interactive diagrams/videos, and locations where the user can stand to view and understand how to operate the complex machinery systems. Finally, the application featured an audio-visual tour.
Project type
Sector
Services provided
Technologies
Project length
Orientation of 3D environment
The first challenge was to ensure the new recruits could confidently find their way around the facility. We did a brainstorming exercise to consider all the different ways we could make the experience as easy as possible for the user by providing useful navigational tools.
Interactive hotspots & locations
We designed transparent location circles which the user could click on to move to stand in, creating a visually rich hover state for the locations with pulsing blue lines to make it very obvious that the user will be taken to the location should they click on the location circle. In addition we created pulsing circular Hotspots which on click would reveal the name of the equipment and system it is part of along with an accompanying icon – the hotspots when clicked would reveal the training content via a modal.
Visual equipment search
At the bottom of the screen we created a toolbar which was sticky and sat over the top of the UI of the 3D environment. The toolbar include details of the location the user was currently standing at, the floor they were on supported by a highlighted icon, and a chevron with rounded button background to indicate this was interactive. When clicked this would open a draw sliding up from the bottom to enable the user to change floor, and search for a location across all of the floors. The locations would include a visual preview to help the user identify familiarity with the facility.
Multi-level interactive floorplans
We took the design of the 3D environment and created custom illustrated maps for each floor level showing where all the equipment and systems were positioned. We then designed a navigation which enabled the user to view the equipment either as a list view in the form of a breakdown per floor or in map view to see where the equipment was positioned. The illustrated map also contained interactive hotspots which revealed a preview of the equipment name a visual of the 3D model with the ability to go there on click.
In addition to all these ways to enable multi-layered orientation of the facility, we also included full screen and VR modes to enabled the user to better explore the environment.
Live Radar orientation
In the top right of the UI we included a radar to help with orientation of the facility. The radar included several small outline circles which indicated where the user was in relation to other locations nearby. The radar also helped to show the user the direction they were facing in the facility. We considered designing a simple representation of the map of the floor, however we decided a simple circle was better as it kept the UI cleaner and we could be a better job on the map at a larger scale and make it into an interactive floor plan.
Learning about complex equipment
The equipment used during this training was complex and required in depth instructions for how to use it safely. Therefore, all instructions had to be clearly signposted and easily interactive, to ensure users were able to access the content.
Multi-sensory learning experience
When the user clicked on an equipment hotspot a full screen modal would open containing the training which was broken down into bite-sizes digestible content modules enabling the user to build on their learning bit by bit and not feel overwhelmed.
The learning modals contained a variety of supporting content including Text, videos, images and interactive 3D animated diagrams which demonstrated and taught the new recruits about the complex equipment showing the internal operations. The users could also see other related equipment which formed part of the overall system (collection of equipment).
Replicating in-person guided training
Physical training where the new recruit is there in person and with an experienced colleague demonstrating and explaining each piece of equipment and how that equipment fits into each system is something which needed to be replicated virtually.
Guided learning tour
Noting both the dangers and risks of the environment and therefore the need to onboard and train new recruits well being of the upmost importance, we created a guided audio tour. The tour was accessed from the bottom left of the sticky toolbar controls and when clicked opened up a mini menu giving the user options as to which system they would like to learn about. Once opened the user was then taken on a guided journey to learn about equipment in a particular system (a group of machines which produce an output). The audio tour also solved the orientation problem too enabling the user to move around the space and familiarise themselves.
Delivery via web including VR mode
There was tension between providing a rich browser-based experience whilst also balancing modest download speeds. We wanted to ensure each user’s experience was both frictionless and enjoyable.
Virtual Reality experience
In addition to the rich interactive content in the modals we also enabled the users to view the content in both a full screen and VR mode, which assisted with the navigation and orientation of the facility but also with the richness of the interactive learning of the equipment and systems.
Technologies used
We researched the latest cutting edge technologies and best practices before getting started on development. We built the frontend using three.js and the Svelte JavaScript framework, with a straightforward JSON configuration working closely with the 3D models to provide exact specifications for the rendering requirements. The other key technologies we used were WebGL (Three.js), DeviceMotionApi and WebXR to deliver a full VR experience which works on both mobile and desktop devices.
The completed project contained 57 explorable locations, 6 audio tours.
Full Clarity supported us in providing a highly interactive learning experience for operators of an industrial facility. They took the time to really understand the learning objectives and the target users, and they built an immersive experience which allowed the users to orient themselves in a risk-free environment.
Other client stories
