Advice on asset pipeline

Hello all,

I’m new to Three.js and I wanted to get some advice on setting up a asset pipeline for a 3d character viewer. Here are the current requirements:

  • 3 models with identical rig
  • Multiple animations (idle, dance1, dance2, emote, etc.)
  • Material has a base texture, and then up to 6 layers of “modifier” textures
  • Plastic toyesque shader. Thinking phong currently.
  • Background color

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.


1 Like

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.

1 Like

And, this is a totally reasonable place to ask. There’s also a Khronos Group slack with a #gltf channel, if you have questions more specific to glTF:

Do you mean layered textures? These are not currently supported.

You can use scene.background = new THREE.Color( 'red' );.

scene.background can be a Texture, Color, or CubeTexture.

1 Like

I think the first solution sounds like the more straight forward one to start off with. However the second one also sounds very interesting. Thanks!

Yes. That was the terminology I was searching for :smiley:

I wrote a custom shader to support 2 layered textures. Would I simply need to expand it to support more textures?

Are multiple materials per mesh not supported?

That’s supported, yes. Or if you’re writing custom shaders you have plenty of options. :slight_smile:

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 :slightly_smiling_face:

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.

Are multiple materials per mesh not supported?

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?

  • Base layer which is a solid color
  • Looks like a shiny plastic toy :slightly_smiling_face:

Either Phong or Standard material will work here.

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.