Seeking a practical method for applying two textures to one mesh

Context
I am building a tool to design 3d models in a web app (give users the ability to customize textures).

Example of what I have now: gif link

Current approach

  1. Take the mesh, getVerticesData + getIndices, then use HTML5 canvas to create a UV stencil
  2. Allow user to design that stencil then export the dataURL as an image which gets applied as a texture

This works great for simple cases where models don’t already have a base albedo texture. The problem comes when a model already has an albedo texture.

Let’s use a t-shirt as an example.

Requirements

  1. Ability Tint/color the albedo texture (change color of shirt)
  2. Base albedoTexture should be tileable (uScale/vScale) to keep texture size down
  3. Be able to overlay the user designed stencil texture (apply their custom designs)
  4. The user should only need to deal with PBRMaterials for simplicity. (since gltf imports as PBR)

Potential approaches

  1. Resize and tile the albedo texture (using html5 canvas) to match uv scaling and create a texture on client side – this can then be tinted and I can overlay the user designed stencil (again with canvas) to create a single texture image. The problem I see here is that shrinking the albedo/normal/bump that much can be super lossy.

  2. Node materials: here is an example NME doing exactly what I need. https://nme.babylonjs.com/#VSBYPV#1 … the base albedo can be tiled but this breaks requirement 4: stick with PBR materials for simplicity.

  3. Create a process of mapping PBRMaterials to NodeMaterials and use a similar approach in 2) to overlay. Here is an example of that attempt https://nme.babylonjs.com/#KV1WLC#2but I can’t get this to work … I get the error

VERTEX SHADER ERROR: 0:175: 'worldPos' : redefinition ERROR: 0:176: 'view' : redefinition

Questions

  1. Which of these approaches seem most reasonable? Is there another approach I’m missing?

  2. If approach 3) can anyone help solve why this isn’t working? Is it not possible to combine two PBRMetallicTextures in NME?

  3. How does babylon handle uScale/vScale changes under the hood? Is this pure image manipulation then re-applying the texture? That would be the same as approach 1) but as far as I can see it’s lossless.

It seems you are trying to do the same thing than in this post:

You are not allowed to use two PBRMetallicRoughness blocks in a node material (how did you get 2 in the first place? There is an error message when trying to add a new one when there’s already an existing one…). You can make 3/ work like this:

uScale and vScale are simply factors that are multiplied with the actual uv coordinates before looking up a texture.

2 Likes

Incredible!! Then approach 3 should work great. Many thanks @Evgeni_Popov

I see now that you cannot “drop” two PBRMetallicRoughness blocks, but you can copy and paste them.