How do I make a radial UV texture coordinate map?

staffpicks

#21

This community is probably 40-60% of why I love realtime FX. You guys are awesome.


#22

Using processing for generating textures like this is a great idea. I’m usually not happy with most methods I’ve tried on the past for doing “data” texture generation. I might have to pay around with it next week.

For actually using the radial uv texture in a real time application you’ll want to do a couple of things. As mentioned in that older blog post you want to set it to be a linear texture. After that you’ll want to disable compression, mip maps and bilinear filtering (use point filtering). This is specifically because of the seam that shows up at the point the angle gradient wraps, if you just need the radial gradient you don’t have to do any of that. That seam will be minimized, but not completely removed at this point. You’ll have gotten rid of the seam caused by mip maps and bilinear sampling softening the edge and adding a small unwanted gradient, but you’ll still have the problem of the GPU mip level calculation seeing a large change between one pixel and the next. I posted a longer explanation on Facebook when this topic came up there, but the ultimate solution is to override the texture sampler uv derivatives with your own values. For Unity this is done by using tex2dgrad, and with Unreal you can enable the option to provide derivatives.

Using a cone mesh gets around the issues with the seam since uv derivatives are calculated per polygon, so the triangle edges where the uv seam would show up doesn’t cause any issues.


#23

I’ve actually never heard about Processing before, will have to check it out!
Also I’ve been working on the last few days on a lil gradient generating tool inside Substance Designer, to create more complex gradients for my texture work, like those:

Which can be used as a UV Lookup texture too:

And since I’m creating them using the Pixel Processor node, it’s basically the same shader math that you’d be using in Unreal :blush:


#24

brilliant bro! I love substance design :slight_smile:


#25

Thanks for the atan2 code! (That seam has plagued me before).

I’ve got the Unreal Material Function “Vector To Radial value” to give a seamless V now:

(Swapped the x and y, added 0.5 instead of doing a frac)


#26

Actually the seam seems to come back at a lower MIP?


#27

Yeah that’s kind of typical of the radial UVs stuff that’s built in to unreal. Usually I enforce mip0 if I can get away with it to avoid any seaming.


#28

As mentioned above you will need to override the mip settings on your texture sampler to remove the seam.

From the facebook discussion on this:


#29

Excellent, that resolves it, many thanks for digging that up!


#30

Edit: with all the info shared in this topic I would suggest to bring it to the resources section.:stuck_out_tongue:


#31

2 years too late, but hhank you for this, I’ve been looking for a solution to this. Yet again it is a pretty simple fix. :slight_smile:


#32

Here is some more info on how to generate radial (polar) coordinates in the shader and a mention of the problem there the coords start/end:


#33

what node works like pixel processor in unreal engine?


#34

That’d be the entire material editor really. The pixel processor node works like a pixel shader kinda. See below:


#35

thnx for sharing this…


#36

can you make same shader in unreal engine… it will be really helpful i could not find channel shuffle in unreal engine…


#37

Here you go buddy:

Channels Shuffle in Substance is basically appending/masking different channels from the inputs. In this case we want to append together the radial gradient and the angle gradient to create UV coordinates that are polar instead of cartesian. In the lower right you can see the same texture with default cartesian UVs


#38

There’s the VectorToRadial material function in Unreal too, for quick simplicity


#39

thanks a lot for sharing this…