3D on the Web & WebXR

3D Libraries Discussion & Resources

Ayşegül Yönet

Ayşegül Yönet

Microsoft
3D on the Web & WebXR

Check out a free preview of the full 3D on the Web & WebXR course

The "3D Libraries Discussion & Resources" Lesson is part of the full, 3D on the Web & WebXR course featured in this preview video. Here's what you'd learn in this lesson:

Ayşegül answers questions about Three.js, Babylon.js, and AFrame. Resources for downloading and using 3D models are also covered in this segment.

Preview
Close

Transcript from the "3D Libraries Discussion & Resources" Lesson

[00:00:00]
>> I actually have a question. So there's, a famous Babylon and there's three js. Is there one you would recommend focusing on? I mean, I don't see a reason why you'd use all three.
>> Exactly, that's true you can use A frame and three JS together. That will make sense.

[00:00:22]
But otherwise you wouldn't use three of them because these are engines that you need to download just once. You don't have to have all of them. Well, it's up to you the reason I wanted to show you both is because I just want you to see the different syntax so you can compare.

[00:00:46]
It's basically under the hoods, they're all doing the same thing creating a theme creating a camera and objects and rendering the main functionality works exactly the same way. So, whichever syntax you find more interesting, you should go with that one. Or if you want.
>> The one that gives you more control.

[00:01:11]
>> No, they're pretty much the same because it's JavaScript like you can control a lot of them. The only difference I would point out is the tooling, that's one. Babylon J's is supported by Microsoft and three J's is supported by Google at the moment. But the person who wrote it, which is his nickname is Mr. Doob.

[00:01:35]
He started working on it, and worked on it, long long years before he joined Google. There are still open source projects and whatever happens, whatever decisions happens at Google or Microsoft is not going to affect how these libraries is going to be available to us. And in the future, there might be any other library that comes up it's much more fascinating.

[00:02:02]
I would like to give you the idea of it with the JavaScript library. It is going to be the same thing with different syntax that you're going to do. One thing that you can also do is look at their example, and start playing with them there. What you want to build with WebEx R or TV on the web.

[00:02:25]
Just look at the examples. They both have really good example sites if you type in 3js.org these are all of the highlighted projects that are done with 3 js. But also they have a really cool searchable examples on one side. One thing I have to say about Babylon js is the team is very good with fixing the bugs if you happen to find one, their goal is to fix it in 24 hours.

[00:03:08]
They're very dedicated and hopefully they'll be able to do that forever. I don't know how they do it [LAUGH] honestly. So that's one thing to consider. One question is if you want to make an interactive theme with 3D models, which will be easier and less code, there are actually model loaders out there too.

[00:03:29]
There's a web component that you can call model loader that you can just load a model with. If all you want to do is view a model, model viewer is the name sorry. This is something that you could do, or there are also services. Let's look at the glitch demo of it.

[00:03:54]
So we have the model we have the capacity to, turn it around, look at it. And let's say if you are a product company, then you want to just show everything in 3D and don't want to deal with it. This is one thing that you can do and since this is a remix, I don't know if you're familiar with it.

[00:04:18]
I'll paste it on the chat. What you can do is say remix this and then you can look at the code itself. There are services that does all of these as well. So if your goal is to write no code, you can actually do that, it is possible.

[00:04:43]
But if you want to have a little bit more interactive experience, then you want to write your own JavaScript. In that case, the still the least code would be using A frame. The question was, is there any asset stores that you can just download some applications I mean some models and use it.

[00:05:09]
I have resources like GitHub repo for you and all of the assets, libraries, I put them together that are free. Some of them are paid, but most of them are free and the most exciting ones for me are museums. I used to work at Autodesk if you're not familiar or vest is the company that makes most of the 3D tools like Maya and 3Ds Max, as well as cat for architecture, and there we worked on a tool for Smithsonian, and we have to scan their artifacts.

[00:05:52]
So they scanned almost everything and they're all available to be downloaded. So this was the tool actually that we built. Right now, I'm not sure if it's still doing the same thing. So you can download all of these things and there are other cool stuff like protein data that you can download and visualize, note NASA recently I have these resources that you can download as well.

[00:06:26]
One warning I would give you is when we were creating these experiences because we scan them. The the polygon count, polygons are those triangles that I was telling you about, was really high, and when you scan things another thing that's different is sometimes you have one that's just pointing outwards so you still have to go in and clean it up yourself.

[00:06:59]
There are some free tools to do that, blender is one. You can download it and you can take a look at it but if you are not very familiar with 3D, that will be a thing to learn and easiest one and the most performance one is Poly.google.com these are usually low poly models.

[00:07:28]
Unfortunately, Poly announced that they will be closing and we had something similar for Microsoft that close down too. But there's still lots of place that says that you can find 3D assets, but just make sure that you check the polygons and they are not humongous models. So the question is, can we use anything other than JavaScript to create WebEx our experiences?

[00:07:59]
You can actually write your own C code and then use web assembly to translate it to the web. That's one option. And you can use other tools as well like, for example, unity does have a tool that translated for you to WebxR. How performances, I'm not sure but it is possible.

[00:08:25]
One question is is Polyclosing for low demand? I don't think so it might be. Google also close Daydream team, which was their headsets, very cheap headset that might be the reason but also saving all of these models 3D models is a very expensive thing. It's probably not cost effective.

[00:08:49]
One question is can we use same 3D models for web as well as in unity? Yes, you can, we have multiple formats of 3D models which we will cover in the section that you're going to upload our own model. GLTF is the most popular one and the most efficient one and that's the one that we recommend but there are other ones like OBJ that you can also use both in other tools and as well as WebExR and what if you want to translate one model format to another blender is a great tool.

[00:09:30]
But there are other tools that allows you to do that and export it as a different formats. And OBJ and gltf is pretty much very universal. All of the 3D tools do support it. Building a 3D model is graphic work am I right? It is a great question it is a different job for sure.

[00:09:55]
So and this is where I started I used to create 3D models and 3D animations using some of the design tools but looks the people who are creating AR and VR experiences, designers and developers are almost merged together. Although I think creating the model part is a totally different thing and it requires a lot of work.

[00:10:23]
So I would definitely recommend getting some cheaper models from somewhere else instead of trying to create it yourself because it will be a very time consuming thing too. One thing that I've noticed for HoloLens developers they are designers Have been architects most of time because those are the people who are used to working with these 3D models and are familiar with creating 3D experiences.

[00:10:58]
One question, do we have experienced with Trimble SketchUp for architectural presentation. No, I don't have any experience. I did work on a whole bunch of tools at Autodesk, which allowed you to do something like that. You could think of it as Word documents for 3D, which was really exciting work.

[00:11:27]
>> Sorry, I one last question before you move on, is there maybe you mentioned it the recommended poly size for each model like don't go over 5000 triangles or over 10,000 triangles.
>> It really depends if you have a very simple object, like columns and spheres and things like that.

[00:11:52]
You don't actually have to go big but if you have something a little bit more detailed, for example a architecture, then you have to go way up. And one thing that is going to happen in the future, it is happening for native development is having services cloud services like remote rendering.

[00:12:19]
Right now, for they're not supporting WebEx R, I'm sure they will be in the future. What you can do with that is if you have a much bigger and in static model like a house you can render it on the clouds and that would not use as much computer power.

[00:12:41]
Anything that you want to have interaction. For example, if you want to change the color of the walls or click something to change the design then you have to add that on top of it, but still having static things rendered will help you. So the answer is unfortunately it depends.

[00:13:05]
If you just have a simple shape, use the least amount of that looks good. That's the basic idea.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now