Hello all,
I’ve got a client who makes leather golf club covers and I’m building a customizer for them where a customer can apply different leathers to the club model. All good except that when applying the image as a texture, the “grain” of the leather is too large. What I need to do is to scale the image down to about half of what it is currently without tiling.
Here is the playground I’ve been, uh, playing with: https://playground.babylonjs.com/#3RF8ZV#1
If you rotate the model around to the back and look in the lower-left corner you’ll see the oval scales of the alligator leather. These need to be about half the size of what they are now. Image size doesn’t seem to make a difference and there are various texture image sizes to comment/uncomment in the playground to see what I mean.
I’ve tried using uScale/vScale as usual which does scale the texture image down but causes tiling which isn’t an accurate reflection of what the product will look like when made. It’s not only possible but quite likely I’ve missed something here about how textures are applied, this is pretty new to me.
Basically what I’m looking for is a way to apply an image texture to a model and have is scale down without tiling. From what I’ve seen from Babylon I feel like it’s possible and I just don’t have the knowledge and haven’t been using the right search terms, but thought I’d get some input from the experts on if that’s true. Thanks in advance!
1 Like
Welcome to the forum !!!
the thing is if you scale it down, it necessarily mean we would need to tile it or the texture itself needs to have more info (basically containing the missing part like being zoomed out) there are unfortunately no other ways: either we tile a small part everywhere or the texture itself contains a material zoomed out
so it contains more info.
The only other trick if you only look at is to mirror the wrapping instead of repeat so at least the tiles should feel more connected:
https://playground.babylonjs.com/#3RF8ZV#2
not sure I am 100% clear but @PatrickRyan might have some tricks
2 Likes
@chris-ablesense, I see what you are going for, and unfortunately in this equation, the texture is king. It doesn’t matter what renderer you use, tiling is going to become an issue with a texture that is not set up to tile. The mirror trick that @sebavan mentions above is about the best you can do if you have no access to a tiling texture, but this technique breaks down once you see more than two tiles of the texture as the human brain is really good at recognizing patterns and any lighting information or angled lines in the texture will definitely be spotted.
3D commerce is a quickly-growing subset of of the online shopping industry and there are several problems that everyone contributing to the space runs into and one of those is authoring textures. Getting a product to feel real will lead to a more satisfying shopping experience with fewer returns. To that end, having high-quality textures that are devoid of baked lighting information and have been correctly authored for PBR rendering is key. Part of that quality is a texture that can be seamlessly tiled. To that end, there are a few options here.
-
You can source a texture set that is already set up for PBR and tiling. Adobe Substance 3D Assets is one place where you can go to find materials that are ready to go. These have been created in Substance Designer and are set up for PBR and tiling. Each one has some controls with which you can customize the appearance of the material to suit the needs of your product.
-
If you need something that isn’t available elsewhere, or is a custom material, you can scan the material yourself. The key here is to de-light your textures and there is a good tutorial for doing this without any really expensive equipment, mostly your phone and cardboard/construction paper. Your smartphone is a material scanner, vol. II. (adobe.com). This also uses Substance Designer, but I will say that having access to software like this makes texture creation and processing infinitely easier that trying to do it without.
-
Lastly, you could take your image into an image editor like GIMP or Photoshop and edit the texture to tile, which is the cheapest route (GIMP is free) but also the hardest and most manual process because with a texture like crocodile leather, you will need to recreate the cells to hide the tiling and manually remove the lighting information present in the texture. And if you are only starting with an image, you will need to manually create the rest of the channels like roughness, AO, and normal. Here is a tutorial about this process in Photoshop but the steps could also be applied to GIMP.
This is a problem space that a lot of effort is being applied to, but right now there isn’t a one-click solve for taking a real material and converting it into a seamless digital material. I wish there was a simpler answer, but I actually find the process of creating textures like this very rewarding since overcoming the challenge is part of the fun.
5 Likes
Thank you both very much for your insights and recommendations! This is exactly what I was looking for, some expert direction.
For now I’m going to use sebavan’s trick, it looks pretty good for the majority of textures we’ll be using, and then I’m going to digest PatrickRyan’s excellent, informative post. I think there may be something for us there even if it’s not for v1.
Thanks again, has been a very positive introduction to the community.
3 Likes
