Crafting the Future: Realistic 3D Assets for Sustainable Design

ASHLEY CROWDER: Hi, my name is Ashley Crowder. I'm the Co-Founder and CEO of VNTANA. We're a 3D asset management platform. But today, I'm speaking on behalf of the Khronos Group, which has been creating standards for real-time 3D to make sure that when we're looking at 3D on a screen, we're all looking at the same thing.

And they have come out with a number of extensions to really create some realistic 3D models that can be used within programs like 3ds Max and Maya. And so today, we're going to be going over Crafting the Future-- How to Build Realistic 3D Assets for Sustainable Design.

And here's just that safe harbor statement. I'm going to be reviewing some existing client experiences, as well as talking about the future and what's possible.

Innovators today are extending 3D from design to commerce and they're driving serious ROI. They're using 3D models to fully replace physical samples, which is reducing carbon footprint, saving costs, and increasing speed-to-market. They're also improving that buyer experience, whether it's a B2B sale, someone who's maybe not traveling as much for conferences anymore, but really wants to see and understand how that complex product works, 3D is an amazing way to do that.

We've got manufacturers bringing 3D and digital twins into game engines to run simulations and mimic real-world experiences to have better just-in-time replacement of parts. And people are starting to build incredible consumer-facing experiences with 3D and Google Search, Amazon, e-commerce, and more.

But to do this, you need to make sure that you're building with real-time PBR materials so that you can have 3D on the web and in game engines. And so today, we're going to talk about how to do that at scale.

We've seen a number of clients actually use 3D to replace physical samples. And we've partnered with companies like Mesh01 to automate product testing. And with 3D and virtual testing, you can get way more tests done with way more options in a faster period of time with a much broader geographical location of potential buyers. So at the end of the day, you get a better product before you make those heavy investments into dies and casting.

We've also had clients like this children's clothing company that was able to fully replace their physical samples with 3D. So they're actually using 3D to sell to retailers instead of making those samples. And that saved almost $100,000 per line and 4.4 tons of carbon per line. That's equivalent to driving a gasoline car for over 100,000 miles. So it's really incredible what you can do.

And we've also seen people improve training. 3D and interactive 3D experiences are proven to help people retain that information better. It's so much easier to drop somebody a link and they can click on that product and be walked through exactly how to set it up or what those special features are.

So we've seen it enable, really, faster sales cycles with complex products and just better training in general, whether it's for your employees or your buyers.

So to do this, you want to make sure that you're setting up your organization with a scalable 3D workflow. It really is essential because otherwise, you're going to be building one-off 3D models for each of these different end use cases, which is expensive and time-consuming.

So we're going to walk through how you can go from design all the way to all the end use cases that you want using various Khronos extensions.

And again, I mentioned that we help people do this because they're trying to go to Google Search, Amazon storefronts, e-commerce, as well as P-L-M systems, CMS or PIM, digital showrooms or game engines, but it's all possible.

So let's dive in to some of the glTF extensions that have been released in the past couple of years to improve realism. So there are-- in 3ds Max, which is great, as attributes or nodes, which is awesome. And they are also in Maya. So today, I had to pick one. We only have 30 minutes, so we're going to walk through 3ds Max, but know that everything is available in Maya as well.

So some of the extensions for more complex materials are index of refraction. It lets you adjust the index of how that light is being reflected and refracted through that material, like this piece of glass casing in the image. Volume, which adjusts the thickness of that material. And so how that light is going to transpire through that material. How thick that needs to go through.

Specular is more to create that mirror-like effect. Transmission can also do a bit of that mirror-like effect. And emissive control is the color and light intensity by the material, and we're going to walk through a few examples.

So this is a really great use case of these three different balls and these different levels of transmissive spheres with varying levels of index of refraction. So you're never going to just use one of these extensions. It's really the combination of all of them that you can get these really complex 3D materials.

Attenuation can then be added on top of that and it changes the amount of light traveling through the volume. So the image on the left, that is uniform across the dragon, whereas that image on the right, you can see that we really made that look more realistic because the light is coming from one specific angle. So it's more see-through in the nose and the tail where it's a little more amber and red in the middle.

Anisotropy, which I can never pronounce, can help you achieve that look like brushed metal. So like this beautiful pot. And iridescence lets you do a thin, semi-transparent layer that allows for inner reflections and interference. So when you want to get that rainbow effect with an insect wing or bubble, iridescence is great to achieve that.

Clear coat is another. So you're going to get that shiny, plasticky look. And for this one, we're actually going to have our 3D technical artist Tyler walk you through within 3ds Max exactly how we use this and export and get it into a web viewer.

TYLER LEWIS: Hey, guys. Tyler here, Senior Technical Artist at VNTANA. I hope everyone's having a great day so far. Today, we're going to be getting into advanced materials and exporting those out of 3ds Max. Let's dive in.

All right, so to begin with, we need to make sure that we have the glTF exporter installed into our version of Max. And to do that, I'd like to come over to vntana.com, and then head on over to our Resources Center, and check out our export directions, and click on 3ds Max. At the top of the article, you should see a link to the babylon.js exporter GitHub page.

So if you click that, navigate over there, this should take you to the latest release of the Babylon exporter. Download the installer, unzip it, and install it to-- and just follow the onscreen instructions and install it to Max. After you've installed it to Max, you should see this Babylon tab in your file-- in your file tab.

All right, so now that we have Babylon installed, one more thing that I want to say before we dive into the materials is that sometimes we can get into this scenario where we do not have one-to-one parity between what we see in the viewport and what we see on glTF web viewers.

This is especially true when we start getting into some very advanced material settings like transmission, and then we have then we are using the Arnold Active Shader. It's just one thing to keep in mind, but we're going to start off with a simple example, so let's dive in.

So we have this really awesome wicker sphere here. And it's-- we have a wicker texture with a wicker material with some clear coat to make it look like it's been wrapped in plastic, which is awesome. And so note, we are using just the default Max 3D viewport. So no extra rendering here. So let's go open up the Material Editor and see what we got going on in the material graph.

So we have and we have the glTF-- it's using a glTF material, which is a new material type. It's a Max 2023. So let's check it out. So if I click and drag-- so hold on. If we go back here to our Material Editor and go to the search bar and type in glTF, you can see this brings up our glTF material. If I click and drag into our viewport now, we can see it in our workspace.

So what is the glTF material? So glTF material, like I said, is a new material to 3ds Max 2023. And it's designed to work with the Open Babylon GLTF Exporter.

Now it's really awesome because it gives us a lot of options to our standard PBR material, like base color, metalness, roughness, normal map, ambient occlusion, [INAUDIBLE], double-sided, and we also have access to our blend modes, which is really awesome. We don't have to export and then go back and edit and re-export to get these right. We have access to these right out of the box, which is really awesome.

Additionally, we have access to a bunch of glTF extensions which gives us added material functionality. So we gain access to clearcoat, sheen, specular color, transmission, and index of refraction, which can be really awesome and help us get some really nice effects in a glTF viewer.

All right, so now that's the high level of the glTF material, let's go take a look at what we've got clicking on the material applied to our scene. So if we click on the clearcoat material. You can see that we have-- it's a pretty basic material in terms of our base material. And then we have just some-- we just have clearcoat added to give us that additional effect.

Now I won't dive into the glTF material-- the base material too much other than we have-- we're using alt texture maps in these materials. So as you can see, we have our base color texture, we have our roughness texture, we have our metalness texture, we have our normal map texture, our ambient occlusion texture, and we have our clearcoat, and normal texture.

So diving into the Clearcoat settings, you can see we have clearcoat value of 1 enabled. This is just the global flag to enable or disable clearcoat. We can put a texture here to help if you want-- if you're using [INAUDIBLE] textures and want to put in a very specific part, you can use that to define where you want the clearcoat.

Next up, we have a Clearcoat Roughness Map, and then we have a Clearcoat Normal Map. And our roughness-- our value's just-- is set to 0, so we're going to be using a value of 0 for our roughness. And then we have that clearcoat normal map.

Now because the glTF materials are designed to work with the glTF Exporter, we don't have to do anything extra or special to export our materials, and so we're good to go. So in order to export our materials, I'm just going to close out of the Slate Material Editor. I'm going to select my awesome wicker sphere, I'm going to click the Babylon, Babylon File Exporter, and now this opens up all our GLB export options.

So the first thing we need to do is come to our output format and ensure that we have GLB selected. Now we can come to our output path and select where we want to save the asset. So we're going to save our asset here, which is awesome. And click Save. So now we've defined where we're going to save our GLB, and we can come down to our export flags.

Now by default, these flags will work, and these are the perfect export settings, but if these settings are not the ones that you see, the ones that we just need to make sure we have are export materials, export textures. Since we selected our asset, I'm going to do Export Only selected, and then I'm going to also ensure to enable KHR texture transfers. And I can click Export.

ASHLEY CROWDER: Awesome. So that will export the GLB file and bring us to where we can then upload that to a web viewer. So here we go. So this is that same asset exported from 3ds Max in a 3D web viewer. I can adjust the lighting, the HDRi map to really get the look and feel that I want. Background color as well.

All of this-- depending on the viewer you use, you can probably edit as well. For any of you at home, if you want to check it out yourself, you can scan this QR code and check it out on your mobile device. AR will work as well. So you need the GLB file for 3D on the web and AR on Android. And then with our platform, we're automatically creating the optimized USDZ file so that iOS AR works as well. And we also create an optimized FBX.

So with these three, GLB, USDZ, and FBX, you can pretty much go anywhere. We often bring in a GLB or FBX into Unreal Engine as well. So we've got in Unreal Engine plugin, whether we're creating real-time interactive experiences within game engine or we recently did an integration with a company, [INAUDIBLE], to automate our renders in Unreal because we always like to say, if you have a 3D asset, it's the highest-level asset, you can create anything you want from it. Render, product shots, videos, as well as have real-time 3D.

So yeah. So this is a great example of clearcoat. So now we're going to hop back. And now we'll get into sheen. So sheen is another great extension that really helps you create something like a suede. So this suede chair is a great example, and we're going to let Tyler walk you through how to use that within 3ds Max as well.

TYLER LEWIS: So we have this awesome chair material-- or chair asset here that is using the sheen texture, or some sheen, but we're not really seeing it right now in our standard viewport. So in order to change that, I'm going to come up to High Quality and I'm going to change to active shape. And now you can see that I have that we have our nice sheen material coming through, and it's looking really nice.

And so I'm going to disable this real quick just so that it runs smoother while I'm recording. I'm going to disable Active Shade and I'm going to come over to our Material Editor, and these are the materials that we're using in our scene. So they're all glTF materials.

We have-- most of them are pretty standard, so we'll just walk through them. We have a pretty standard woodbound material. We're not making use of any extensions. We have a texture map that we're blending with a color to get our base color, and then we're using values for our supporting. So we have a value for our metalness and our roughness, and then we also have an ambient occlusion map that we're using to provide a little extra depth to the asset.

Next up, we have our metalness map. Pretty much the same setup, except we don't have a texture in our base color and we're just using a value for our base color. And then again, we have values for supporting channels like metalness being 1 and roughness being 0.4.

Next up, we have our Velvet, which is our seat cushion. And again, a pretty standard basic material here. We have a texture for our base color map, and then we also have values for metallic and roughness. Where it gets a little bit fun is that we're enabling the sheen extension and we have a sheen color and a sheen roughness. These can be driven by textures, but we are using values for them.

Next up is our last material, and another really basic material, we have a texture for our base color, and then we're using values for our supported channels. Again, we have metalness at 0 and roughness at 1. Now because, again, these are glTF materials, we are ready to export them as is. So I'm going to close out of my Slate Material Editor, I'm going to marquee select everything, I'm going to come up here to Babylon, Babylon File Exporter, and again, we need to change our output format from glTF to GLB. And this is where we get to define where we're exporting, and then the export settings will be good the way they are.

ASHLEY CROWDER: Awesome. And so same thing. We can now take that GLB and upload it to a real-time 3D web viewer. So we're going to grab that from my dam. And now I can see this beautiful suede. And if I zoom in, I can see a lot better what that sheen is doing.

And same thing. If anyone wants to scan the QR code, you can look at it much closer on your phone, sometimes better than screen sharing. I do want to get deeper into lighting now. So lighting is so, so important for real-time assets. You can think about having a chair outside during sunrise, it's going to look totally different than the middle of the day.

And so having consistent environment maps will really help give you consistency across your pipeline and everywhere you're trying to use a 3D asset. So just to show you a drastic difference, if I switch this environment map, it's going to completely change the look and feel of this chair.

So something that we do with our clients is we can upload custom HDRi maps, and we also automatically usually match maps from programs like 3ds Max and Maya which come with standard ones. But yeah, the lighting makes a huge, huge difference of everything that you're seeing.

Another thing to touch on is optimizing assets. So we have automated optimization built on our platform, but we also integrate with others like RapidCompact, Simplygon, there's a lot of tools out there. They're all going to optimize your file and usually bring down the polycount and overall size, but they can do that in a lot of different ways.

VNTANA's works-- we built some intelligence into it, so ideally it's going to get as small as possible without any visual differences. But if you force it and say, I want to go down to 1K texture size versus 4K, there's going to be some degradation there. Or if you force it to a really small size. So that's something to take note of as well, but sometimes that optimization is required depending on where you're trying to go, which we'll get into in a second. I'm just going to hop back over.

But first, to dig deeper into the HDRi maps and lighting, 3ds Max and Maya do come with default HDRi maps; however, you can update these on your own. A really great resource company I know, CGIBackgrounds.com, it's like the stock photo of HDRi maps. I would suggest as a team selecting the ones that you want to work with and keeping those consistent. And you can have those within your design programs, as well as within your viewers to make sure that you're looking at apples to apples.

You will drive yourself crazy if you're trying to compare an image within 3ds Max and in a viewer and you're using different HDRi maps. You just will. It's really important those are the same.

The other thing that you can do is use the extension lights_punctual to keep your directional point and spotlights within that GLB file so that the lighting that you're looking at within that chair or other object within 3ds Max or Maya all gets exported and uploaded to the viewer that you're looking in. So again, you're just looking at apples-to-apples comparison.

And then when you do that, you can also create beautiful renders. So this was a client of ours who used 3D to create interactive 3D ads, 3D on eCom, which helped increase conversion rate, reduce returns. But they also used the same 3D model to automatically create 2D renders within Unreal Engine, which includes images and videos that they use for ads. So it was really incredible. They went from design all the way through to every sales and marketing aspect using 3D and derivatives of 3D to do that and real-time 3D GLB files. It's pretty cool.

So in conclusion, just wanted to hit on some best practices for doing 3D at scale. One, make sure you use a certified Khronos viewer. So Khronos has a certification process. This way, you know that the viewer that you're using will support all the extensions you might be using.

So if you create a beautiful iridescent-looking wing, but you put it in a viewer that doesn't support the iridescent extension, you're not going to see what you thought you had from 3ds Max or Maya. So this is a really great program really trying to help make it easy so that when we look at a 3D asset, we're looking at the same thing across different screens and different platforms.

You also want to know where you're going. So besides 3D on a website and in a game engine, you might want to publish your 3D model to Google Merchant Center so you can surface 3D in Google Search. You now can. We publish stuff there automatically for clients all the time.

But Google requires things to be under 15 megabytes in size and 30,000 polys today, whereas we work with Meta to launch 3D ads. They're not public yet, but they tested them, so you may or may not see them. They can have up to 100,000 polys.

So you're always going to want to probably give the largest asset because you're going to get the highest quality, but you're going to need a automation tool to make sure you're set up for success to take that 3D model and automatically create all the derivatives you need for the different platforms and use cases that you're going to.

And lastly, not technical, but more from a team organization perspective, you should create a library of HDRi maps that your team should use and stick with so everyone's looking at the same thing. Free to find some ideal lighting setups, especially if you're doing products at scale. We have clients who launch 40,000 products a year. There's no way you could customize each one of those. You want to set something up that's repeatable.

Also creating a standard material library is huge and can really help your team move faster. Clearly defining naming conventions is also great. And then you want to make sure you're agreed upon what is that main file format and display format that you're going to use? So is it GLB? Are you going to use USD for a transfer file format but GLB for everything external-casing?

So going through this list with your team and deciding how you're going to set up your workflow from the beginning will really help you save time.

So that's everything. I hope this was helpful. In my handout, I will have a quick cheat sheet of all the GLB extensions and what they do, but reach out if you have any questions.