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
- Take the mesh, getVerticesData + getIndices, then use HTML5 canvas to create a UV stencil
- 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
- Ability Tint/color the albedo texture (change color of shirt)
- Base albedoTexture should be tileable (uScale/vScale) to keep texture size down
- Be able to overlay the user designed stencil texture (apply their custom designs)
- The user should only need to deal with PBRMaterials for simplicity. (since gltf imports as PBR)
Potential approaches
-
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.
-
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.
-
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#2 – but I can’t get this to work … I get the error
VERTEX SHADER ERROR: 0:175: 'worldPos' : redefinition ERROR: 0:176: 'view' : redefinition
Questions
-
Which of these approaches seem most reasonable? Is there another approach I’m missing?
-
If approach 3) can anyone help solve why this isn’t working? Is it not possible to combine two PBRMetallicTextures in NME?
-
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.