How to tile 3 textures for Mobile using Customized UVs?

AJ_Graphix · May 9, 2017, 6:59pm

Hello all,

I’m having difficulty figuring out how to tile 4 textures separately using Customized UVs for mobile. First I am limited to 3 Custom UVs on ES2, and then I am limited to 3 texture coordinate sets in ES2, as stated in the error below:

Error [ES2] (Node TextureCoordinate) Only 3 texture coordinate sets can be used by this feature level, currently using 4.

Below is a screenshot of what I want, but I am unsure how to achieve this while still abiding by the above guidelines.** Is it even possible to accomplish the following on ES2 in a material using Custom UVs?**

I have a single RGB image consisting of 3 separate grayscale textures. Grass is on Red, Transition Mask is on Green, and Rock is on Blue. I want to tile the Grass texture** twice** [Grass Small (x100) and Grass Large (x10)], the Rock texture once (x20), and blend between the grass and rock using a painted white/black Transition Mask. The Mask doesn’t tile, so it needs texture coordinates equaling (x1).

I would also be interested to know the potential performance hits of tiling the channels of this single 1024 x 1024 image as many times as I have (x100, x10, x20) using Custom UVs on mobile.

Thank you so much for any advice you can offer on this.

-Adam

(Please right click image and select “Open in New Tab” to view larger image if desired.)

AJ_Graphix · May 10, 2017, 5:28pm

Solution

Here is one way to do it:

Since the Transition Mask texture needs the UV to be at 1,1 (not tiled), pick one of the 3 Custom UVs for its TexCoordinate, and Divide by the tiling amount applied to that Custom UV to return it to 1. You can see this in the image below, highlighted in green. This way you can tile 4 (or more) textures using only 3 Custom UVs.