Mix Material and Multi-UV Layout

Maybe this is wishful thinking, but I’m wondering if I can utilize 2 separate UV layouts for a single Mix Material.

Here’s the scenario: imagine that I have map that’s segmented into several pieces; each piece is equal in length as it is in width, like a checkerboard, and each piece has it’s own 1024x1024 image texture instead of sharing one giant high resolution texture – so that being said, all the 3D pieces fit together to make a single image (like a mosaic, or a map). Now I’d like to have a second UV layout for each piece where they all fit together on a single image texture that’ll be used as a Mix Map.

The reason being is that I’d like to dynamically paint on a HTML canvas, use the canvas as the Mix Map texture and have all the 3D pieces update accordingly. I realize that I can avoid complicating the matter by just having a single UV layout where they all share the same diffuse texture that’s getting mixed, but by doing so I’m compromising image resolution significantly.

Looking forward to getting your thoughts, and thanks in advance!

Invoking the creator of the MixMaterial: @julien-moreau

1 Like


I had some success in the Node Material Editor:


Even better :wink:

I’m going through the exported code generated by the NME, and I can’t seem to make sense of how to access a UV Map. I see uv1.output.connectTo(Texture1.uv); but when I look at Babylon’s documentation, I can’t seem to find a property or method for selecting a UV and applying it to a texture.

@3D_Wave_Design hey !
Welcome! Always a pleasure to help :slight_smile:
I would like to understand better: the request is to be able to repeat x times the mixmap, right?

You can pick uv2 like that:

@Deltakosh I was able to create my desired effect in the NME no problem, but for future reference I’m wondering how I can toggle UV maps like you pointed out in Javascript/Typescript.

Hey! Well, sort of. I’m ultimately wondering if I can mix a texture that’s mapped to UV1 using a MixMap textured mapped to UV2. You can see the desired effect somewhat in my experimenting in the Node Material Editor and Blender, but I’m wondering how to do it with Javascript/Typescript.

You can toggle them with code like:

var input = nodeMaterial.getInputBlockByPredicate(i => i.isAttribute && i.name === "uv");
input.name = "uv2";

Hey everyone, thanks for your suggestions! In the end I used a much easier solution (of course it was staring me right in the face). I ended up creating a Dynamic Texture for each 3D tile, and used the drawImage() method for offsetting the canvas animation that was being used as the Mix Material Texture.

how I’ve never thought of that before? that’s absolutely ingenious!

1 Like