Different Tools to Implement Your WebVR Application

KEVIN VANDECAR: So welcome to Forge DevCon. This is our first time putting it on in conjunction with Autodesk University, so it's really fantastic to see so many people coming out. What we're going to talk about today in this class is a few different tools that you can use to develop a WebVR experience.

So we're going to start by talking about the platforms. We'll talk a little bit about the hardware. And then we're going to talk about four different frameworks that you can use.

So the material was proposed by my colleague Zhong Wu. And he's right here today, so he's going to help me with questions and answers, and I'll let him introduce himself.

ZHONG WU: Yeah, just a short introduction. I'm Zhong Wu. I'm from Shanghai. Oh, sorry. I'm Zhong Wu, and I come from Shanghai.

Today, I basically have worked with my colleague Kevin to present this-- to help with this presentation. And I started my job as a software developer in Autodesk and have then come to the Evangelist. OK, that's it.

KEVIN VANDECAR: All right. Thanks, Zhong. All right, so my name is Kevin Vandecar. My wife calls me the disorganized tinkerer. You can see-- this is my desk. I'm really bad at organization.

But I come from the world of C++. My day job is supporting 3ds Max developers with C++ plug-in development, and the Forge advocacy comes from all hands on deck to support Forge. So it's been a really great learning experience for me. I'm just getting into the WebVR development aspect.

How many people consider themselves WebVR developers? Ah. OK, good. I don't feel like I'm outsmarted here.

So we talked about what the agenda will be. So we're going to start with, What is WebVR? So the idea of virtual reality obviously has a 3D component to it, but the content doesn't have to be 3D, right? So you can use these spherical images, that sort of thing, to create this environment of feeling like you're in 3D. WebVR brings this virtual reality experience to your browser. And the WebVR spec in the library is a JavaScript API.

So the first thing I want to point out is, when you go look at the spec, if we look at the latest draft, you're going to see this thing is in motion. OK? So it was last updated October 31. So barely two weeks ago, the spec has moved.

So when you guys start working with WebVR, you need to know that this is kind of still cutting-edge, changing, evolving technology. But it is also matured quite a bit, so there's really good documentation. So if you go to the Mozilla site, they have really good WebVR documentation talking about the JavaScript API.

So why would you do WebVR in the first place? So it's a way to push a virtual reality experience to many devices really easily. Mobile phones and tablets are everywhere these days. Even kids will have a device. My kids have multiple devices. They have their phone and their tablet, because the phone's not big enough.

So I believe that the next generation is just going to assume these kinds of experiences. So that's why I think education, places where you're trying to show people how to do things, that's where VR in itself is really powerful, and WebVR is a way to distribute it really easily.

This particular company, if you're interested, I would go check them out. They specialize in WebVR experiences for education. So they actually build custom curriculums, and they deliver devices and the curriculum to schools, and it's a really interesting idea.

So let's start with the content. So what do I mean by the content doesn't have to be? So there's these different image formats that you can use that will simulate being in a 3D environment. The Google Cardboard VR photo format is one really good one.

If you have an Android device, you can go get the Google Cardboard VR camera, and it works like a panoramic image. But then that image will get stored in Google, and you can actually share it with other people. And when they click on it, if they have a WebVR-compatible device, they can be in the virtual experience that you've taken the picture of.

So this was one of the first experiences that came out. It was in conjunction with Google Cardboard, and it just is a really neat and easy experience. To give you an example of what this format kind of looks like, I'm going to show you this image. So we've used this image in one of the samples.

You can see that it's distorted when you're looking at it as an image. So the steps, for example, in the middle are bent. So this image is meant to be displayed through some sort of app that will put it back into its original perspective.

You can also create these images using stereo panorama renderings. So Autodesk actually has the A360 rendering service, and that's one way to create one of these. They're stereo panoramas. You can select that from the A360 rendering type.

And one of our guys that works with us, his name is Michael Beale. He actually did a full presentation on this idea at our previous DevCon. So I would go, if you're interested in that aspect, go check out his presentation. The slides are here. He's got detailed techniques for using that format.

So how do you get the 3D asset? Well, obviously, authoring tools-- so products like SolidWorks, Fusion, Revit, they're all good candidates for this. You just need to get that data into some other format that you can load into the WebVR experience. Blender, 3ds Max, and Maya-- but if you don't want to author them, there's alternatives.

So there's these online marketplaces as well. So rather than have an artist build a model of some specific car that you want to show in VR, you might be able to find that already in a marketplace. So take a look at places like TurboSquid and the Autodesk Creative Market. These are places where people are selling.

Sometimes they post them for free. And if you're just experimenting, this is a great place to find some assets that you can test and play with. Go to TurboSquid or the Creative Market, and look for their free models. And it gives you some geometry that you can work with.

So this particular example is using both ideas of the pseudo 3D, which is an image, and a true 3D model. It's a simple sample that Zhong put together, and I'll see if it'll load here. So this particular example is using React VR, and it loaded much quicker. OK, there we go.

So one of the things about React VR is that it's kind of new, and so in order for it to work best, you need one of the browsers that really supports it. So the Oculus Carmel seems to be the one that works the best. But I can emulate it in the desktop browser, so I'm not seeing it in stereo, but I can navigate and kind of get an idea of what this is.

So first of all, what you're going to notice is that image that I showed you earlier. So you can see how that image is seamed together. So they basically took that flat image, and they're putting it into a sphere and creating that environment that you're in.

So this image is done really well except for the fact that if you look closely, you can see that seam. And it's just because when the photo was taken, the light changed slightly during the exposure. And so you see in the sky a little bit of a seam, the clouds actually lined up pretty well.

As we rotate down and when we get into the darker areas, that seam is almost gone. You can see part of the tripod, for example-- but overall, really good. And all of those lines that were kind of curved and whatever, the app has actually straightened that out.

So here's those stairs, and you have a nice straight form. So that's all provided just from that image to give you the background environment, and then we've loaded a model that we actually got from TurboSquid of Iron Man. So this was a very small amount of work to get this kind of quick experience using assets that we found already.

So WebVR is virtual reality for the web, so you need to have a browser to make it work. You also need a device that it can display on. So we're going to talk first about the compatible browsers, and this is where it gets a little bit tricky.

So when you look at the various sources of information, what you want to do is make sure you double-check things, OK? And don't always believe what you see, because again, this is moving technology. So a browser that wasn't supported yesterday may be supported today.

So if we look at the source from Create WebVR, you'll see the Samsung Internet browser is only supported on the mobile platform, but Mozilla Firefox supports the desktop environment. Chrome is listed as only supporting the mobile environment. So how did I get that to work? We'll talk about that in a minute.

The WebVR Rocks site has a little bit more detailed information, and here you can see some of the specific VR devices and how they're supported. So Firefox, again, is one of the better ones in terms of supporting all the different environments, so they list both the Vive and the Oculus as being supported here. Windows Mixed Reality, for example, well, you got to move over here to Microsoft Edge to have the WebVR support.

Google's Chromium, which is their open-source browser, also has some good support. So you'll see Vive and Oculus are both supported here. But in their production browser, they're not listed at all.

So let's move to hardware. So I just found this image when I was doing some research. I thought it was an interesting way to do VR. So NASA, they actually train their astronauts to do their spacewalks ahead of time using VR. And in this particular case, they strapped the guy to the hardware.

So they've got this rig, and they've got a laptop strapped in it. And you can actually see it's kind of an upside-down laptop, so this is the base of it, and the display is over here. So you do what you have to do to get the VR experience, I guess.

But this is what you typically see more often-- people having a really wonderful time, in awe, and smiling, and just having a good time. But what does that mean? Well, it's not the hardware. It's not the platform.

But it's the content that really matters. So when it comes right down to it, if you build an app, and it doesn't have really good content, it doesn't look very good, you're not going to have these smiling people. You might have someone throwing their phone across the room, by the way, so you need to keep that in mind.

So let's talk about the VR devices. So Google Cardboard we're going to talk a bit about; Daydream as well; the Samsung Gear VR; and then the higher-end ones, the HTC Vive and the Oculus Rift. So first of all, from what I could find in my messy desk, I was able to find these viewers that I had laying around.

So we'll start at the top here. This brown cardboard one was one of the very first cardboards that I received. It's not branded. It was given to me at a conference, and it works. And that's the kind of cool thing about cardboard is that they're very low, low technology to get it to work. You basically need to have lenses and something that holds the phone at the right distance from those lenses.

So we move here. This white one is one of the first Autodesk ones that we branded. It was before we even called Forge, Forge. So we gave this out in the early days just to kind of promote the idea of 3D on the web.

We move further. This guy-- I bought this from a guy online. He 3D prints them. He's got his own supplier for lenses, so the lenses are a bit bigger. And you can connect this to an iPad mini or a Nexus tablet, so a small form-factor tablet. And it works pretty well.

Coming down here towards the bottom, this one is made out of rubber, which is pretty cool. So it collapses, and it kind of is like a bellow. So you can put it in your pocket and carry it around. But when you put your phone in it, you pop the bellow out, and it becomes a viewer. So really simple idea, but it works really well, and it breaks down into something you could put in your backpack.

At the bottom, these kind of steampunk ones is basically a pair of lenses in a plastic glasses frame-- very kind of cheap, low budget. And then finally, this one here is one that I bought at Christmastime last year. It was about $15, and it has the form-factor more like a HTC or a Gear VR.

So it's comfortable. You put the phone inside of it. It's got a pretty strong magnet. It holds it. It's got the cardboard controller on the side. It even has earbuds, so you can have sound if you want to. So very cheap to purchase, but pretty decent quality for what the device is.

And then in the center, this is my gold standard-- cereal. So Kellogg's had a series around the time that the movie came out. You could get the Captain America, the Iron Man, or the Black Panther. So we tried to get all three of them, and the Black Panther was out of stock, so we only have the two.

But the point with these cardboards is that they're really cool marketing devices as well. They're very cheap. If you're going to be doing some kind of conference or installation, it's a really cool way to get your brand out there in a branded way. And if you provide the VR experience along with it, it creates a lasting impression, I think.

So how do you get a Google Cardboard? You can either make it yourself, or you can find a free one. There's lots of free ones. Autodesk has given away a lot of them. Unfortunately, they didn't give me any this time, which I was expecting. So I kind of had to brand my own as a giveaway.

So you can see on the left, this is clearly a marketing one. And on the right, somebody hand-built one. It's a pretty cool steampunk do-it-yourself project.

So I'm going to give the first one away. Who can tell me what the first VR technology that Autodesk had was called? Anyone? Want to do this quick. No idea? What did you say? No. But you can have the viewer, because you answered.

It was actually the Cyberspace Developer's Kit. It was built on DOS with DOS extender technology, so you had 16 megabytes of RAM. Whoo! And it was a C++ SDK, and it was one of the first technologies that I got to support when I was at Autodesk, so very cool thing.

All right. So what does Google Cardboard require? So it basically needs to support WebGL, the device, and it needs to have the proper sensors so you get the camera movements that you want with your experience. So just a word about this.

So one of the things that we learned about the proper sensors is that some of the hardware doesn't always have it. So even if you go out and you buy a brand-new Android phone, maybe from Walmart with the Straight Talk plan or something, you want to be careful to check that phone's hardware before you actually purchase it for WebVR, because a lot of those lower-end devices don't have a gyro, for example. And without a gyro, you're not going to get the camera movement. So you may be able to see the geometry. It may support WebGL, but the navigation won't work. So keep that in mind.

So switching to Google Daydream, this is an interesting thing. So we go from Google Cardboard, which was open source, publish the plans, make it out of a pizza box, to buy it from us now. So the Daydream is a purpose-built device that supports only a certain technology layer. So if you're going to support Google Daydream, make sure you go to the Google Daydream site and look at the phones that are there. So when we go down through this list, you can see Pixel, the Galaxy S8 and S8+.

Interesting thing about Samsung is they are really cool at supporting everything. So even though they have their own VR Gear, they're also supporting the Google Daydream, which is great. But it does not work on the S7, so my S7 phone can't do Daydream unless I root it or brick it, which might be the result of rooting it. But you can see that there is only a handful of phones here that support the Daydream today.

What is the difference between Cardboard and Daydream? Well, so again, the Cardboard is mainly requiring the phone to have the proper hardware. That's the only requirement. So it's got to be able to render WebGL, and it's got to have a certain level of Android, which is way back, 4.1. I don't even know if you could find that on a newer phone.

Supports iOS 8 and Windows Phone 10, if you happen to have one, and it's dead now. I was a Windows Phone fan, so I was a little disappointed. But I'm an Android guy now.

So the material-- of course, the Cardboard is made of whatever you want. Cardboard is the basic idea there. The Daydream is better material. It actually has a cloth cover that you can take off and wash. And it, again, is a built piece of hardware that you buy from Google.

The communication-- the Cardboard, if you had the connection or if you had the hardware, it was basically a magnet with a washer attached that you could slide up and down, and it created the magnetic field that the phone could recognize and control. It was a very simple idea.

The Daydream uses near-field communication. So that's one of the requirements that the phone would have to support. And then controllers-- the Cardboard, again, just had that washer and magnet. And the Daydream has a specially designed controller that comes with it.

WebVR devices that are not in that Google realm, we can start with Samsung Gear VR. So Samsung Gear VR is actually a co-developed project with Oculus. It's a very good and affordable experience, but you do need the Samsung hardware. So last I looked, it was limited to the Note 5, the S6, the S7, and the S8. So even some of their lower-end-branded Samsung phones aren't going to work with VR Gear.

The typical WebVR requirement is to also use the Samsung browser. So you're kind of stuck with their software. Now, their browser's very good, and it does a great job with WebVR. So it's fine if you're going to work in that environment.

The one thing I would suggest with Gear VR is, think about your deployment. So if you're building an installation for 30 Gear VRs that are going to be put in a museum and that's all they're going to be used for, you might consider, instead of using WebVR, use the native development environment, because you'll have a richer experience and more functionality.

But if you need to have the democratization of the WebVR experience across multiple devices, then it works. HTC Vive and the Oculus Rift are the higher-end devices. They both support WebVR. And it works.

If you want a demo of it, you can come to the Reality Playground, and we can show you what that looks like. It's an interesting experience. But I don't think that you can create a WebVR app and assume that your customer base or your user base is going to have one of these devices. So these are really-- currently, they're used with high-end gamers, in design visualization environments, and that sort of thing. So you can't assume that your customer's going to have that.

And then finally, controllers-- so both Gear VR and Daydream have these proprietary controllers. They're basically thumb pads, so like three degrees of motion. The higher-end devices like HTC and Oculus have these floating devices that can find themselves in space as well as have buttons on them. And they're called six degree of motion, so they have a lot more functionality. So if you're designing for one of those platforms, you want to look at the controller aspect as well and how you would hook that up.

There are some generic ones out there. It's interesting-- Xbox One controller supports Bluetooth now, and you can connect that to your phone. So I have connected it and played some games with it. I haven't figured out a way to hook it up directly to a WebVR experience yet, but I think it's possible.

So the second one-- can anyone tell me what the first animation software put out by Autodesk was called? You got it. We also had a product called Animator. But the great thing about 3D Studio is that that became 3ds Max, and it's still an unused product. And it has its own VR experience. Now you can use this Max Interactive, which is part of this subscription now. So it's a great tool. Thanks for answering that.

So let's take a look at a quick interesting demo. So what can you do with WebVR? So this particular example was built by the Wall Street Journal using Three.js natively. And basically, what they've done is they've taken the NASDAQ data points, and they've put it into this 3D kind of virtual experience.

So do you need to have a 3D model to make VR experience interesting? They basically coded this geometry and created what the stock market typically feels like-- a roller coaster. So very cool idea. And it kind of gets the point across that there's lots of ups and downs in this market.

So we'll talk about the JavaScript API next. So WebVR is a JavaScript library. It can be accessed from many frameworks, and we're going to look at a few different ones.

The first thing to realize is that in order to make a WebVR app work, it requires two fundamental things. The browser needs to support WebVR. And so that's where if it doesn't initially work, you need to go kind of check that compatibility and see if it's meant to work and figure that out.

If it's not meant to work, you can use this thing called polyfill. So polyfill has been around for a while to support the WebVR initiative. And it basically is a wedge that turns your browser into something that can do WebVR.

So as a backup, if you want to make the best experience for your users, you should use polyfill when the native WebVR functionality is not there. And then to initiate the VR experience, you need to have at least one VR display object that comes back from the navigator's get VR displays. So you put that in your JavaScript code, or the framework itself will do that for you. And then mobile phones and the VR devices will usually provide at least one of those.

So we're going to look at Three.js, A-Frame, React VR, and the Autodesk Forge Viewer as some example frameworks. This is by no means all of the options, but these were the kind of interesting ones that we thought were popular and gives a good comparison between the frameworks.

So first of all, Three.js-- how many people know about Three.js? OK, quite a few of you. Good.

So first of all, Three.js is a library on top of WebGL. So you could do all of this in WebGL if you wanted to, but it would be a huge amount of code. WebGL is a primitive graphics language, much like OpenGL, and it's closer to the hardware. When you want to render geometry, for example, you need to tell it the vertice array, how the indices of those vertices make the faces, so really kind of low-level stuff.

Three.js abstracts that into a much more usable library. And if you want to create a box, for example, they have an API for creating a box. So it's much easier to use. It is open source. It's very well documented.

Assets can be directly loaded and imported, and that's something to look for in your framework to make sure that you can import geometry from other sources. And the drawback is, again, you're going to be doing a lot more coding than you would in some of the frameworks that are designed to support WebVR directly.

So let's take a quick look at this example. So the first thing is, you can see I'm running Chrome on the desktop. So does it support WebVR? Not natively.

So with Chrome, the cool thing is is that there is a plug-in that you can get from the Chrome store that's called Web VR. This plug-in is kind of a helper, and it uses polyfill. So it actually uses that polyfill layer to allow you to see the geometry, but it also emulates a mobile device's movements. So you can do this translation and move the camera view around.

It also supports orbit, or rotate, which is a very common aspect of a mobile device. So if you're in a cardboard, you're getting this rotational effect. So for example, I can choose this, and I can rotate it all the way around. And there's my box again. So a very cool tool to help you in the development aspects of your WebVR app.

So in order to code this, well, first of all, I'm demoing this in a tool called CodePen. CodePen is an online kind of playground for building JavaScript-based applications. So it's a cool way to kind of just play with coding without having to write a full website and have a server to run it and all of that. So what I can do with CodePen is show you just the code necessary to make these experiences work.

So the first thing you're going to notice is that I have very little HTML. it's just the button definitions for these buttons. CSS is also very small. And the bulk of this web experience is this JavaScript code.

So the first thing you're going to see is, in the code-- let me open this up. You're going to see we initialize the WebGL renderer, so that's the first hint that Three.js is using WebGL directly. The renderer is what's going to create the finished render of the geometry.

So we also need to have a scene. So the scene is going to be the container for the things that we're going to render. We're creating a camera, so we have something viewing the geometry. And then we're using a 3 wrapper, so they have another layer over the WebVR API that helps you to use WebVR in Three.js. So this first one is the VR controls, and I'm basically placing the camera into that. And that's what's going to give me the ability to get the positional data so that the camera will follow the positional data of the device.

The next one is another wrapper around WebVR called the effect, and this is what applies the stereo rendering. So you get the two views that you can look at through the separate lenses. We're going to load a texture, and I basically have a star pattern in a sky box, so a box that has that pattern to create the space that I'm in.

So the box geometry creates the box. I have a material. And then I'm going to create a mesh that contains the geometry and the texture, and that's what ultimately gets rendered. Here's the call to the Navigator.getVRDisplays.

So this is what we were talking about before, one of the requirements to make the WebVR work. We're going to put a light. The box that's tumbling is created here. I can position it in space. I need to add it to my scene.

And then I have some event listeners. So let me just scroll through this. These are the buttons. There's an animation loop, and this is where the animation part takes place.

So you'll see that the cube that I created has a rotation property, and the Y and the X rotations are being changed for each frame rendered. And that's what gives you the tumbling effect of that box. And I think that's it for this one. Oh-- the asset.

So one of the nice things about Three.js is it has many different types of file format asset loaders. So I took an X-wing fighter from 3ds Max, and I exported it to OBJ and created a material library for it as well. And I can load that up here.

So I've got the three material loader loading up the material, and then I've got the object loader loading up the X-wing geometry. So I can basically create this just by pushing this button, and you should see it sitting there. So at runtime, you can also, of course, change the scene, interact with the scene, and do different things.

So the next framework we're going to talk about is A-Frame. So this one is interesting. It was designed from the beginning to be a virtual reality experience. It was originally from Mozilla and is now open source. And again, it has this facility to load assets. And the interesting thing about this one is it's based on HTML. So let's take a look at this one.

So now you'll see that most of my code is in HTML, and there's actually no JavaScript here at all. It is a JavaScript library, so I need to get the A-Frame framework loaded at some place. So I left that in my HTML just to load the script here. But then in my body, you'll see the first thing is an HTML tag called a-scene, and that's the A-Frame scene.

And basically, again, there's the notion of a scene containing all of your geometry that you're going to display. So in this example, I've also got the X-wing asset, so this particular part of the code is loading the asset. And it's giving it an ID so that I can reference it later.

I've got a box, so that's the blue box that's twirling here. And within its tag is an animation tag, so I can take an individual object and put the animation characteristics with that object. So it's a little bit different than in the pure Three.js sense, where you have to work on that within the animation loop. Here, you can just set the attribute of the animation with the object as you construct it. Of course, you can go back and add that later as well.

I've got a cylinder, I've got a sphere, and I've got the plane, and then the sky color in the background. And then here, you'll see I'm using their OBJ loader, and I'm referencing that X-wing OBJ that I specified as an asset earlier. So this is actually putting it into the scene, and I've got an animation value on it as well, so you can see it spinning around. All of that was just pure HTML to get this scene experience that I have over here.

AUDIENCE: [INAUDIBLE]

KEVIN VANDECAR: Yeah, so you can do CSS. You can also have JavaScript mixed with it as well for callbacks and that kind of thing. But it really was designed to be fundamentally an HTML structure.

All right, so the next one is the React VR framework. This one is powered by Facebook and Oculus. So Facebook acquired Oculus not too long ago. And so it was kind of inevitable that they would merge those two technologies.

So React VR is also now open source. And again, it has an asset loader, so you can load assets from other sources. And React VR is really a natural platform if you already know React and you want to mix this 2D and 3D content, because it has really easy tools to bring those things together.

So in this particular example, because the React framework is much larger, I wasn't able to get a CodePen to actually run it, so I have a Node.js server. This is running a sample that this guy wrote over at Pluralsight. He had a very nice tutorial that walked you through all the steps.

So I encourage you-- if you want to use a WebVR through React, take a look at that tutorial, because it walks through and shows you a lot of the different steps that you would take to build a nice WebVR experience. So let me just show you this example.

While that's loading, let's take a look at the code first. So the main piece here is in JavaScript. This was from his sample, and I just basically modified it to load my X-wing fighter again. The first thing you're going to notice is that it's a class that extends a React component. They set up a sky map just like we did in the Three.js. In this particular case, they're taking six raster images to build that cube that creates your environment.

They've got a rotate function, and then there's a render function. And this render function has this idea of a view, so it's kind of similar to the idea of a scene. They just called it something different.

They've set up their sky map to be in the background. They've got some ambient light settings. They have a callback on the button to use the React zoom in and out. And then their model definition is here. They've basically set it up to load on OBJ again. OBJs seem to be very popular in a lot of these frameworks as examples, because they're very simple geometry formats.

So they're loading the earth OBJ and the earth material. And they've set some transform information-- so it's position in space, and then the same for the moon. And you'll notice that they've set a state value for the rotation, and so that's animating those planets, the earth and the moon, to revolve around their axes. And then finally, my X-wing asset is loaded down here.

OK, so it's loaded now. So this experience is very much similar to that first one I showed you. But you can see just by using some rich textures and loading those assets that there's not a lot of code in the actual building of the view to get that WebVR experience. So if you know React already and all the other pieces, React VR is a really, really good choice.

OK, and then the last one is the Forge Viewer. So Forge Viewer uses Three.js underneath as well. So the cool thing with Forge Viewer is that it's very easy to mix Three.js and the viewer code together. So if you need some specialized functionality, you can do that.

The assets from the Forge Viewer aspect come from the SVF bubble, though. So this is a little different than those other three frameworks we looked at where we're just loading an OBJ file. So the viewer needs an SVF from the Model Derivative service.

But the benefit here is that it can be potentially a very small amount of code to add the WebVR experience. It includes many of the 3D navigation viewing and the data aspects already. The metadata from the original model are also included. And you can, of course, access that from your WebVR app as well.

And it can handle very large models and data sets. That's its claim to fame. That's why on the user side it's called the Large Model Viewer, because it can just handle these really big data sets. And when you're talking about WebVR, the performance becomes even more important, right? So now you're not only displaying it in a browser but you have two views of that same geometry set.

So in order to create that asset, you have to use the Model Derivative service. So a developer is going to upload a seed file. That can be multiple CAD formats. It can be different 3D formats. It supports OBJ and some of the common formats.

And then you go through a translation phase, and you'll get back a URN, which is an encoded URL, to that translated file. And then you simply take the viewer, and you point it at that URN, and you got a view of that file, basically.

So the Model Derivative service supports many different file formats. I think it's something like 60 right now. It has a translation aspect, which is taking that source geometry and translating it into these other formats, including SVF, which is what the viewer requires. It includes other aspects though, including thumbnails and the geometry extraction.

So the geometry extraction piece is really interesting. One of the things that we're working on right now is what we're calling the AR/VR Toolkit. And that idea of geometry extraction becomes even more important when you want to put this into a VR experience where you want an even higher optimized model so that the performance is good.

So one of the key benefits to using Forge with that AR/VR Toolkit is that you can pull the asset directly and tell it what you want your mesh decimation to be. So you can reduce the mesh into something that's even higher performing on these platforms. So we're just now working on this, and we're looking for people who are interested in it. And if it is something that sounds good to you, come and talk to us at the VR Playground in the Forge Village.

The other piece of it is the metadata extraction, of course. So all of the files that you translate, if they have metadata-- so a Revit file, for example, or a Fusion file-- that metadata that was part of the original design intent comes through the translation phase and as part of the data set. So if you want to create a WebVR experience with some pop-up information about the objects that you're looking at, you can certainly do that.

So let's take a look at some sample code here. So again, you'll see that there's very little HTML for the viewer. We basically need to have an ID for a div tag that specifies the viewer, and we set some height information here. In this case, I don't have any CSS listed, but just know that I'm referencing the CSS from the Model Derivative API. So that's one requirement.

And then from a JavaScript perspective, it's very simple. So first of all, let me just comment this line out. And you'll see the cardboard logo went away.

So this ability to view this SVF model in the browser is limited to just this little body of code. So I've got a View It function. I'm passing in the model name and a light preset for the background.

The main thing here is to set up a few options, so it's mainly the model name. And I'm using a local SVF file, so I'm not actually pulling it from the storage on the Forge platform. I extracted it and put it into my own GitHub repo. And what that allows me to do is not have to worry about the access token, so that's the reason I did that just so you could see just the viewer-specific code.

So the viewer element-- this is basically giving me the viewer from the document. And then this is telling the viewer what GUI to load. So you can have a headless version, which doesn't have any of the controls at the bottom.

And in that circumstance, if you use the headless version, you would have to at least enable the WebVR yourself so that the user could switch into the WebVR mode. But you could still have a completely headless WebVR experience then, or you can use our GUI, which includes all these buttons at the bottom by default, the different kinds of navigation-- so the ability to do the explode, and the browser, the properties of the different aspects of the model.

And then we basically initialize it, and that's it. So that's all you need to do to create this viewing instance. To enable WebVR, you simply load the extension. And now the cardboard icon comes up, and you can switch into VR mode.

And in this particular case, it's not going to display perfectly, but you'll see it's doing the stereo rendering there. So very, very easy to code. If you're interested in seeing this in something like an HTC or even a cardboard, you can come on up to the VR Playground, and we can demo that so you can actually see this working.

All right. So there's a even more robust sample out there that one of our guys wrote, Kean Walmsley. A lot of you guys probably read his blog if you do anything with AutoCAD. So he did this at a hackathon, and it's a really interesting idea where he's taking a model from the SVF Model Derivative service.

He's allowing you to load it on the desktop. And then by scanning this QR code, you can actually get a WebVR experience in a collaborative environment. So anyone scanning that can put it on into a cardboard and see the WebVR version of this model. So I can emulate that just by starting the session over here.

And this is the circumstance where he turned off all the buttons and is just providing the cardboard icon. And then, in a cardboard experience, you can rotate and view that. And then the person running the desktop instance can do the explode, for example.

And the person viewing it will see that explode happen, so it's a very cool interactive experience. It's a live demo online, and I gave you the link in the handout and in the PowerPoint, so you can check that out on your own.

So there are some authoring solutions as well. This is a programming conference, so I just wanted to point out that you don't have to do all this programming to get that WebVR experience. Autodesk has a beta product called Play, and it supports WebVR.

There's also some third-party companies. Vizor.io and Insta VR were a couple that I looked at that looked interesting. But there are a lot of other ones out there. There's a gaming framework called PlayCanvas, which looks really cool. I haven't had a chance to do much there, but it supports really interactive gaming experiences, and it supports WebVR as well.

So just a note about AR-- so where are we heading with AR? Well, first of all, WebVR is this kind of democratization of the web experience in VR. There is no such thing yet as a WebAR initiative.

Microsoft has their HoloLens, ARKit from Apple, and ARCore from Google. It's their own kind of native environments. Microsoft has their own SDK, for example, and they're also supporting Unity. So if you want an experience on the HoloLens, you either have to do a lot of coding or you author something in Unity using the HoloLens template, and then you can get your experience onto the HoloLens pretty easy. So this is, again, where the Forge AR/VR Toolkit we think will be really important.