Virtual Reality (VR) Application for Smart Office Visualization
Tags: vr, ar, javascript, webgl
Published: 2023-06-30 09:21:43

“Virtual Reality”, or VR technology, is a computer-generated simulation of an environment or situation that can be experienced through a VR headset or similar device. The rapidly growing field of VR has the potential to revolutionize many industries, from gaming to education to healthcare.

{% embed https://youtu.be/exinJFf-Nxw %}

**Project Overview**
With the self-developed graphic engine “HT for Web”, Hightopo Software has built a 3D model of the Tianjin office. The office has been transferred into a virtual reality scene, maintaining a 1:1 ratio with the real-world office environment. The 3D scene within the VR setting showcases the functional areas of the office, including room distribution, workstation layout, meeting rooms, and bathroom facilities. Managers can receive real-time feedback on key locations through video surveillance, temperature and humidity monitoring, and water level tracking, providing them with a more accurate understanding of the office’s situation.

**System Analysis**
The essence of VR lies in creating a virtual three-dimensional interactive environment. With the help of special hardware devices, users can immerse themselves in a virtual world that transcends physical boundaries and allows for natural interactions. By using a VR headset as a display terminal, along with VR controllers, sensors, wireless kits, and other tools, it’s easy to present a 3D scene from an office right within the VR headset.

Hightopo leverages the WebXR standard to allow users to interact with various devices in a virtual office setting in real-time. Through language, gestures, walking, and 360° free movement using VR devices, users can immerse themselves in the Hightopo VR scene and focus on experiencing the office layout, personnel information, and current usage status of functional areas while interacting with others. This creates an immersive experience. Additionally, Hightopo VR now supports multiple VR devices, including HTC Vive, Oculus, Qeust2, and Pico.

**First Person Roaming**
Hightopo Software uses 3D virtual simulation technology and digital twin technology to simulate the Tianjin office environment in the real world. This includes accurately replicating office equipment and wall structures in three dimensions, allowing for a clear and comprehensive visualization of the entire environment in a browser.

Once the VR feature is enabled, users will be able to move around the virtual space with ease by wearing VR devices. They can explore the office from a first-person perspective and view various devices, wall-mounted demo pictures, and other objects within the office from any angle.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyv5jtfnaw916gu8w4e2.gif)
Users can move the VR controller to the demo image on the wall and click the interaction button to play the demo video. This feature makes it easier for visitors to view relevant content and improves the user experience.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldkq5un74dgqhubvttxp.gif)
When users view 3D scenes on other devices such as PCs or mobile phones, “HT for Web” graphics engine can support both first-person free roaming and third-person perspective free roaming.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73t21vvosboodb4e2utm.gif)
**VR Access Control**
The VR virtual office also includes an access control function. To use it, the viewer can press the control button on the controller and aim the handset ray at the lock on the door to open the menu. They can then select the appropriate number on the menu, and after entering the correct password, the company door will be opened.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sovvzp2oo6hbphvsjf5.gif)
This system can connect with the company’s security and protection system. By monitoring dynamic data such as access control status, area location, card swiping times, and passage time, the administrator can manage the office remotely.

**VR Zone Management**
Hightopo VR employs a handheld interactive menu to optimize visual space in VR mode. Users can easily access the function menu by clicking the button on the gamepad. Selecting “Personnel Distribution” on the menu will display the distribution status of personnel on workstations in the office. In the 3D scene, Hightopo uses electronic fences of varying colors and textual descriptions to identify workstations based on different professions, facilitating quick comprehension of personnel distribution by new colleagues and visiting clients.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3cs7c6xx6y4hwdy2f36.gif)

The electronic fence function is a commonly used feature in industrial digital twins, which is widely used in various fields, such as substations, sewage treatment plants, thermal power plants, commercial communities, and airports. With “HT for Web”, designer an developer can rapidly produce perimeter models tailored to customer specifications. By integrating UWB personnel positioning or fence alarm data, the software can achieve perimeter prevention and alarm functions in hazardous areas. This capability enables managers to quickly respond to diverse situations.

**VR Resource Management**
By using Hightopo software’s 2D panel components, this system can display real-time information of personnel or equipment in a 3D scene without distortion. This enables managers to easily grasp the situation in the office at any time and perform remote control.

When the user clicks on the employee nameplate on the desktop, a popup window will appear in the scene displaying real-time information about the employee at the current cube, such as name, position, contact information, current status, and device list.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jh6hvy2tlltier0g1fns.gif)
When clicking on the computer on the desktop, a pop-up window will appear in the scene displaying information about the employee and device at the current workstation, such as the employee name, position, equipment being used at the current cube, and a list of all company equipment.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqm19kmgcmrgr6lcdmjo.gif)
Office restrooms and meeting rooms are two public areas with high usage frequency. With “HT for Web”, we can add corresponding prompt panels on the model to help users quickly understand the usage situation of the current place. Meeting rooms can also be booked and queued through the company’s management system to improve office efficiency.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qw146g39rtz0nudkp38r.gif)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kha1j69t9rpt581jtksx.gif)
Users can click on the character model in the scene and use the pop-up operation panel to change the character’s clothing and logo style.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xuukxcpzpwvszifcffxs.gif)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zto9vnv4pxdtrqr9vfn.gif)
In digital twins, changing the model texture can alter the appearance and texture of the model surface, thereby affecting the visual effect of the model. This is very important for model design, rendering, and previewing. The “HT for Web” supports replacing model textures and improves the authenticity and credibility of digital twins.

Additionally, the 3D graphic engine “HT for Web” supports changing model textures to simulate different materials and textures, such as metal, wood, and fabric, which makes digital twins more detailed and realistic. This is of great significance for industrial design, product manufacturing, and architectural design.

**VR Device Management**
“HT for Web” supports using pop-up windows to display real-time camera data in a 3D scene. The software also supports integrating video surveillance with security systems to form a complete security system. Managers can remotely check the office status to ensure the safe operation of the office.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cip9xto4y9dk1z42lr2k.gif)

Temperature and humidity are another important indicators that need special attention in the office. The Hightopo VR Office system combines temperature and humidity sensor data with 2D panel components to display real-time values in the office. Managers can quickly adjust related equipment to provide employees with a comfortable working environment.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ruj7vy1e56ey5dwi5ko.gif)

**VR Remote Control**
The system also supports two-way control between 3D simulation and physical equipment. That is, managers can directly control the lights or air conditioners in the office through VR; office personnel switch lights or adjust air conditioners, and they can also be presented in real-time in the 3D simulation scene.

Hightopo software supports two-way control between 3D scene and physical equipment. This means that managers can directly manage the lights or air conditioners in the office through VR. Meanwhile, office personnel can turn on/off lights or adjust air conditioning, and these actions can be displayed in real-time in the 3D scene.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/riy66wh2xm5q00y6yirk.gif)
During cold winters or hot summers, managers can pre-start the air conditioning to adjust the office temperature, making the working environment more comfortable for employees.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0gbgya3kwgd6f6sfo1u.gif)

Bi-directional control is often used in digital twin projects for factories. In some dangerous environments, conventional operation may cause harm to the worker. By using digital twin bi-directional control technology, administrators can remotely turn on/off the corresponding equipment, which is both convenient and safe.

**VR Alarm Control**
Hightopo software supports integrating the data resources of the existing office system and establishing corresponding threshold alarm triggering rules.

In the following example, we have enabled event monitoring for the water level in the office. An alert message will be automatically triggered when the water level exceeds the threshold.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5bllncnt8vroktf7wfe.gif)

The system also provides quick troubleshooting based on recognized fault information or abnormal operation. This helps guide users to the corresponding location for fault diagnosis. Additionally, the system will display the alarm parameter panel, which assists users in analyzing key indicators, alarm information, and historical tracing, among other aspects.

**Summary**
With the support of VR and AR technologies, the interaction between users and digital twins is no longer limited to traditional screen display, but begins to resemble physical entity interactions. This makes the digital world closer to the real world in terms of sensory and operational experience. Decisions made based on digital twins for physical entities will be more accurate and closer to reality.

Hightopo Software insists on independent innovation and development. In addition to providing VR/AR visualization technology, it also provides web visualization application solutions for BIM, GIS, XR, MR, 2D configuration, and 3D configuration. Our self-developed graphic engine “HT for Web” not only supports the ability to provide graphical configuration SCADA, but also supports building low-code and zero-code IoT platforms at the PaaS and SaaS levels. Hightopo products have been widely used in various fields such as smart cities, parks, buildings, factories, intelligent manufacturing, water, energy, photovoltaics, wind power, electricity, new infrastructure, operation and maintenance, government affairs, transportation, medical, finance, and scientific research.

For more industry application examples, please refer to the Hightopo Software official website.

[Hightopo Software Official Website](https://www.hightopo.com/demos/en-index.html)

To get a free trial: [https://www.hightopo.com/en-request.html](https://www.hightopo.com/en-request.html)

Hightopo YouTube: [https://www.youtube.com/hightopo](https://www.youtube.com/hightopo)
Hightopo LinkedIn: [https://www.linkedin.com/company/hightopo](https://www.linkedin.com/company/hightopo)
Hightopo Facebook: [https://www.facebook.com/hightopo2d3d](https://www.facebook.com/hightopo2d3d)
Hightopo Twitter: [https://twitter.com/hightopo2d3d](https://twitter.com/hightopo2d3d)
Hightopo Instagram: [https://www.instagram.com/hightopo](https://www.instagram.com/hightopo)