"Preface
In 2019, VR, AR, XR, 5g, industrial Internet and other terms frequently appeared in our vision. The combination of information sharing and virtual reality has become the general trend. 5g is an important direction for the upgrading of the new generation of information and communication technology, and industrial Internet is the development trend of the transformation and upgrading of manufacturing industry.
VR mentioned in this paper is another exchange between machinery manufacturing industry and equipment. When a new technology star meets the manufacturing trend, it will undoubtedly become an important driving force for the digital transformation of manufacturing industry, industrial control industry and other industries“ 5g + VR + industrial Internet "will become a constant topic in the new year. How to combine the problems encountered in the current industry through virtual reality, so that we can better communicate and feel the changes brought by technology.
At Apple's press conference this year, I believe everyone knows that Apple's 5g mobile phone has not come out, which shows that the application and development of 5g are still in the stage of rapid development, but the app with AR function has come out long ago. The speed of 5g and the immersive experience of AR and VR make us feel more than technological innovation, It also makes us feel the actual application scenarios of technology in different fields. I believe that the new year of 2020 must be another new beginning of the application of "5g + VR + industrial Internet". The next part of this paper is the specific application case developed by HT for web combined with webvr.
System Preview
VR disassembly and restore
VR operation
VR scene switching
PC side disassembly and restore
PC test
System introduction
The system is divided into three practical application levels:
Three dimensional training: users can disassemble the equipment by touching the finger on the MB end or dragging the mouse on the PC end, and then restore the equipment to its original state by one click restore, or view the process of automatic disassembly and automatic restoration after disassembly through the disassembly or restore button.
Examination system: this part tests your familiarity with equipment disassembly. After the three-dimensional training in the first step, you can assess your understanding of the disassembly process in this system.
VR mode: this part is the specific implementation application of 3D scene combined with webvr. After entering VR, you can disassemble and restore the equipment by operating the VR handle.
This article mainly explains the VR mode in the third part, so that we can understand how to build a VR scene combined with HT. The following describes the main operations in VR. When you do not enter VR, the following six button operations will not appear. When you click to enter webvr, the system will automatically display the six operation buttons in VR scene. On the contrary, when you exit VR, the system will automatically hide the six operation buttons in 3D. The main operations in VR are as follows:
Device switching: as the name suggests, you can point the handle ray at the left list in the scene and press the trigger to switch the scene devices.
Operation switching: there are two operations for the equipment in VR, which can be switched by clicking the mode button in the lower right corner.
Translation mode: in this mode, the user can aim at the device and press the tablet to move the device from one position to another, and can pull the device parts closer and farther by touching the touch pad.
Grabbing mode: in this mode, the user can aim at the device and press the tablet to grab the device. After grabbing, the user can rotate, enlarge or shrink the parts by touching the touch pad.
One click Restore: restore all parts of the equipment to the original position.
Disassembly Animation: disassemble all parts of the equipment step by step through the predetermined position.
Restore Animation: this operation can be understood as rewinding the disassembly animation, that is, the disassembly process is restored in reverse order.
Wireframe switching: HT supports the representation of the triangular surface of the equipment node, and you can see the wireframe outline of the equipment.
system development
The three-dimensional scene HT supports the import of obj model. The equipment parts in the VR scene are all obj models. Since the equipment needs to be disassembled later, the parts of the equipment need to be modeled separately, rather than the whole equipment. If the whole equipment is modeled, it is a data node in the HT scene, Therefore, parts cannot be disassembled. If they are disassembled, multiple objs can be loaded in HT, and there are multiple data nodes. After there are data nodes of multiple parts, equipment parts can be moved or rotated. For the specific meaning of data in HT, please refer to the HT for web data model manual
The following is the obj model in the imported scene:
It can be seen from the above figure that after we import obj, parts are scattered, so we need to adjust the initial position of parts to adjust a complete equipment composed of many parts. Of course, the adjustment cannot be adjusted by code. There is a three-dimensional editor to adjust and drag to piece together different parts, The following is the overall equipment after combination:
VR setting up the VR scene is based on the first step. The buttons only displayed in the VR scene mentioned above are also built in the scene. In normal scenes, we can hide the corresponding nodes. The code above node. S ('3d. Visible ', false) is the code for hiding 3D nodes under 3D in HT, Because when entering and leaving VR, HT will send corresponding status to tell the user that it has entered or left VR at this time. The corresponding pseudo code is as follows:
1 / / graph3dview is the 3D scene view container in HT
2 / / VR get VR objects mounted on graph3dview
3 var vr = graph3dView.vr;
4 vr.mp(function(e) {
5 / / VR event type corresponding to property. Detail the status of the event
6 var property = e.property;
7 var detail = e.newValue;
8 / / present represents entering or leaving the VR scene at this time
9 if (property === 'present') {
10 / / when detail is true, it indicates entering VR, and false indicates leaving VR
11 if (detail) {
12 / / perform the operations of nodes to be displayed in the display VR scene
13 } else {
14 / / hide the nodes in the VR scene
15 }
16 }
17 });
The above property will send the following types in HT, mainly including VR status and handle operation type:
Enable: the enable information of VR changes
Present: the present information of VR changes, indicating that it enters and exits the VR world
Gamepad.pose: handle position or rotation changes, parameter ID, position, rotation
Gamepad.axes: touch point change of the turntable in the middle of the handle, parameter ID, axes; The axes format is as follows: [0.2, 0.7], and the resolution represents the horizontal and vertical percentage
Gamepad.button.thumbpad: when the thumbpad key is pressed, the parameter ID and state include down and up
Gamepad.button.trigger: when the trigger key is pressed, the parameter ID and state include down and up
Gamepad.button.grips: when the grips key is pressed, the parameter ID and state include down and up
Gamepad.button.menu: when the menu key is pressed, the parameter ID and state include down and up
A key configuration in VR is the scale bar, because the units in VR are consistent with the length units in reality. If we walk 1m with helmets, we need a corresponding relationship to how far we need to go in HT 3D scene. The VR plug-in provided by HT will provide a configuration item of measureoflight, as follows:
1 var vr_ config = {
2 measureOflength: 0.01,
3 }
The above 0.01 means that the unit length 1 in the HT scene represents 0.01M of the real scene. Therefore, if you move forward 1m in the real scene wearing a helmet, the corresponding perspective in HT will move forward 100 units. Therefore, if you need to build a VR scene, pay attention to the difference between the model modeling scale of the scene and the real world, Modeling is based on a unified scale, otherwise there will be problems of different equipment sizes in the VR scene, resulting in illusion. As shown in the comparison figure below, the scale of 0.01 is on the left, the small point of the ray is very small, and the scale of 0.001 is on the right, resulting in the small point of the ray becoming larger.
HT has encapsulated the APIs of webvr related interfaces provided by the browser, including obtaining the device navigator. Getvrdisplays(), which is the first step to enter the VR world. If the result returned by executing this code is empty at this time, it means that obtaining the VR device fails, not to mention obtaining the handle information navigator. Getgamepads(), The user can type in the above two lines of code on the browser console to check whether the browser has obtained VR device information and VR handle information. If the return is empty, it indicates that the acquisition failed. HT can start VR by executing graph3dview.vr.enable = true. Of course, the user does not need to execute this code. The VR plug-in provided by HT will also provide the corresponding configuration item vrenable: true to represent starting VR, and the corresponding configuration is also hung on the VR_ Config object, as follows:
1 var vr_ config = {
2 measureOflength: 0.01,
3 vrenable: true, / / indicates that VR is enabled
4 }
In the displayed system, there is the function of directly switching scenes in VR, because the VR of each scene_ The configuration item values in config may vary. For example, the size of the measureoflength scale of the first scene is 0.01, and the size of the measureoflength scale of the second scene may become 0.02. Therefore, the VR plug-in provides a destruction function to destroy the resources of the previous scene. Destroying the resources of the scene includes emptying all nodes of the previous scene, Therefore, when loading a new scene, you do not need to clear the scene nodes, that is, you do not need to execute datamodel. Clear (). Because the destruction function provided by VR has been cleared, and the handle and ray are both a data node in the scene, you do not need to clear the handle and ray nodes in the new scene, so the plug-in helps you manage the scene nodes. After calling the destroy function, you can call the serialization function graph3dview.deserialize ('scene resource JSON address') of graph3dview to serialize the new scene JSON file. In the callback function after serialization, you can modify the current VR according to the new scene_ Config, and then call again
Graph3dview. Initvrforscene() to initialize the VR scene again. The pseudo code of relevant steps is as follows:
1 / / window.gvr is a global VR plug-in variable initialized after calling graph3dview. Initvrforscene(). It is used by users to obtain plug-in objects
2 window.GVR.destory();
3 / / execute the new scene serialization operation
4 graph3dview. Deserialize ('scene resource JSON address',
5 function(json, dm, g3d, datas) {
6 / / modify the new scene scale to 0.02
7 window.vr_ config.measureOflength = 0.02;
8 / / modify the new VR scene initialization Perspective
9 window.vr_ config.vrEye = ht.Default.clone(g3d.getEye());;
10 / / initialize VR scene again
11 graph3dView.initVRForScene()
12 });
Of course, the VR plug-in provided by HT has many configuration items to facilitate users to better adjust the VR scene, including terrain brushing, scene movement mode and scene operation mode. The main process of VR construction using HT is shown in the following flow chart:
Through the above flow chart, we can generally understand how to quickly build a VR scene with the VR plug-in provided by HT.
Our other product:
