The webviewer is going to be used on a website to support a game we are making in Unity. We already have our pipeline setup for the game, but much of the pipeline tooling is done in Unity so it can’t really be reused. Our artists work in Maya and then export FBX’s.
Currently I’ve been taking the animated FBX’s, importing into Blender, and manually removing unnecessary elements (nodes, keyframes, LODs, etc.). I then save each file out and append to a master blend file so that I can export everything as one single GLB file. The textures are not included as they are loaded at runtime.
This has worked at the prototyping stage, but I’m wondering if there would be a better way to possibly approach this. My main question being, should I keep using the single GLB file, or should I break it up into separate files. I did try a rig file and then separate animation files, but I was having issues loading the animation files into Three.js due to a parsing issue with undefined node definitions.
Not sure if this was the right place to ask this question, but I wanted to make sure I was approaching this problem properly.
This has been done successfully, there was a thread on this forum a while back but i can’t find it at the moment. Roughly I think the approach was to include a dummy mesh and the full skeleton in each .glb animation file, then to reassign the animation when loading into three.js.
It’s also technically possible to write a single .gltf file with each mesh or animation referenced within a separate .bin file, and then to use GLTFLoader’s more advanced APIs to lazy load things only as needed. The downside of that approach is that you’ll have to write tooling to split the binary data into those separate files – the Blender exporter can’t do it for you.
Assuming the following req, would you suggest a custom shader or multiple materials using an included shader in Three?
Base layer which is a solid color
Multiple, layered textures with transparency
Looks like a shiny plastic toy
If I could do multiple materials I feel like I could use a Phong material for each layer and just play around with the settings. Or I could make a custom shader.
Sorry I have zero experience with shaders and I’m not sure what the tradeoffs are either way. I really appreciate though.
Just to clarify this since we’re talking about layers - a mesh can have multiple materials, but can only show one at a time per face. There’s no way to layer materials on top of each other using the built-in materials.
Multiple, layered textures with transparency
Again, there’s no way to do this with the built-in textures.
The simplest approach here is to see if you can avoid these requirements. Can you combine the textures in Photoshop to get a reasonably similar effect?
Going beyond the built-in materials, of course you can write your own shaders to achieve this. However if you have zero experience with shaders that might be hard to achieve.
You can also check out the node-based material system in the examples:
At some point hopefully this will replace the built-in materials, but at the moment it’s experimental and you’ll need to include the files separately to the main three.js script.
