Dancing Robot with extra skybox in WebVR
Ever since Forge Viewer version 2.12, we brought the WebVR extension out of box to make the forge 3D model working in VR mode. I would say, it makes our life so easy, just one line of code to bring you into the VR world. Your can either do this way to load the extension by the following method:
viewer.loadExtension(‘Autodesk.Viewing.WebVR’)
Or to add the extension in the config and pass this parameter to Autodesk.Viewing.Private.GuiViewer3D like this:
var viewerElement = document.getElementById('forgeViewer');
var config = {
extensions: ['Autodesk.Viewing.WebVR']
};
viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerElement, config);
Both ways are working same, if you are not clear about this, you can reference the blog post Add WebVR support to the Viewer, it will help you to understand.
Here, I brought a nice dancing robot model from my colleague Denis, he created a nice robot model by Fusion360, put it in the viewer after translated by Model derivative service, and created the animation to make it dance, the cool thing is that the animation can be sent to a real robot to make it dance as same as you saw in the viewer. If you are interested, I highly recommend you to check out the 2 blogs of Know-How: Complex component transformations in Viewer - Part 1 (Basics) and Know-how: Complex component transformations in Viewer - Part 2 (Hierarchical Transformations).
Can that robot and animation work in WebVR mode? With this question, I graded the robot sample and just simply loaded the WebVR extension, and with the WebVR supported browser, here is the result, the model and animation look great, it’s so easy and nice to have it, isn’t it?
But, we are not here to just stand and watch it, you may ask, I’d like to add some additional geometries into the viewer to look better, or I’d like to add some UI to show the properties/information, and if you are a BIMer, you may even ask how about to have some interaction with the model and scene, for example, walk through in the model with a controller, those are common use case that people usually asks, let’s talk about them one by one.
1st, how to add extra 3D object into viewer and supported in WebVR mode? Yes, we have bunch of samples talking about how to add three.js mesh into viewer, can that be supported by WebVR extension out of box? Unfortunately, the answer is No.
If you are checking the code of our WebVR extension at WebVR.js, you can see that the WebVR tool actually overrides the renderer with Autodesk.Viewing.Extensions.WebVR.StereoRenderContext. I wouldn’t talk detail about that, the code is there, you can download and check. But the general ideas is: For each frame, get the information from VR device, and set the information(including position, orientation .etc) to the camera, then set the information for left and right camera, and render the whole scene separately into left half and right half windows. Unfortunately, the three.js mesh that you added into the scene is not handled, take one of Phillip’s Skybox sample for example, it will look like this when in VR mode.
This is not correct, because the sky box is not rendered into 2 different half view as the viewer model does, how should I do to handle that. The answer is, for any new added three.js mesh that you want to be supported by WebVR, you need to create it and add it to a separate scene, and use the similar approach as mentioned above to render that scene to both left and right half windows. You can refer the way WebVR extension did for menu and cursor, but to not pollute the WebVR extension, I create a new copy of WebVR extension and renamed the namespace to Autodesk.Viewing.Extensions.ADN.WebVR based on the original one, also removed all these unnecessary parts related to menu and cursor that I basically won't use. After that, I add a new class named Autodesk.Viewing.Extensions.ADN.WebVR.Customization, this class will be used to create a new scene and add all three.js meshes into it. Again, I toke the sky box cube model from Philip's sample, and add it into my Autodesk.Viewing.Extensions.ADN.WebVR.Customization. Yes, there is an issue about clip plan as Phillip mentioned in his blog post, for now, I just hardcoded to enlarge the clip plan to make the sky box not be cut. It turns out like this with the robot.
Next, we will talk about how to add GUI to show some information of the model or the scene, it will look like this:
Yes, I do understand performance is always 1st priority in VR mode, currently, we basically do not touch any of that, and it worth a deep topic to dig into, I will do more on that later, and will push all the blog post including sample code soon, stay tuned.