2
\$\begingroup\$

I am using the procedural skybox shader that Unity provides, but have tweaked it so that I can have a cloud texture.

The problem I have, is that the texture is not tiling correctly, even though it is a repeatable pattern.

In the GIF below you will see the stretching, but it tiles everywhere else.

Here is the test cloud texture I am using.

Am not doing anything unusual in the shader I don't think.

// In the vertex (copied this from another shader, could this be the problem?)
OUT.uv = TRANSFORM_TEX(v.uv, _Sky_Clouds);


// in the fragment before returning the color

c = c + tex2D(_Sky_Clouds, IN.uv);

How can I use the cloud texture so it tiles around the whole skybox without stretching?

The look I am trying to achieve is like this...

That image is from this video tutorial by BlenderGuru.

https://www.youtube.com/watch?v=9Q8PwcDzb8Y&t=1046s

Improve this question
\$\endgroup\$
7
  • 2
    \$\begingroup\$ Try this exercise: take a beach ball, and try to tile sheets of wallpaper across it seamlessly. It won't work. A square pattern that tiles the plane won't tile the sphere or even the hemisphere without stretching. So you're going to need a different strategy. If you only need the upper hemisphere, you could use a stereographic projection with just moderate stretching. Or you could switch to a cube map or other wrap-around source for your cloud texture, or blend several samples a la tri-planar mapping. It depends what's most important for the effect you want. \$\endgroup\$
    – DMGregory ♦
    Jan 17, 2018 at 14:18
  • \$\begingroup\$ That makes sense Thanks. So I need to texture the whole skybox sphere. Could you advise me on a method that would be beginner friendly to attempt? I plan to have other textures as well, stars, moon etc. But if I can get the clouds looking right, the rest should be easy. \$\endgroup\$
    – JacketPotatoeFan
    Jan 17, 2018 at 15:05
  • \$\begingroup\$ Not exactly. Each of those items you describe is best served by different techniques. Let's start with the clouds. Edit your question to include a target visual of how you'd like the clouds to look, and we can try to achieve that effect. For instance, in your current version, the clouds aren't just above, but wrap around below the horizon too. Is that intentional/desired? \$\endgroup\$
    – DMGregory ♦
    Jan 17, 2018 at 15:08
  • \$\begingroup\$ Will try and create a visual. The plan was to have them to wrap all the way around, though am not sure if that would be correct. Instead of it being a planet, you are on a tiny island floating (still rotates like the earth though) in the sky where you can look all around you. So looking over the edge, you would be able to see the sun. I found shader that I have tweaked that makes the sun go all the way around the skybox, but there is no horizon, not sure if that would be correct or not. \$\endgroup\$
    – JacketPotatoeFan
    Jan 17, 2018 at 15:53
  • 1
    \$\begingroup\$ Why aren't you using something like a cubemap? \$\endgroup\$
    – Bálint
    Jan 17, 2018 at 16:02

1 Answer 1

Reset to default
0
\$\begingroup\$

I know it's been a while since the question emerged, but because I'm now trying to do something similar with procedural skybox shader, I just wanted to share what I've found. The trick is that the uv's coming from the skybox aren't actual uv's. They are running in the [-1:1] range and have a third component (w or z, or whatever), and to me it seems more likely that they are the normals of a sphere, encompassing the world. You can use them to map the skybox as a sphere, but have to transform them into [0:1] range values, and there still will be distortion errors at the top end bottom of the sphere, unless you use a latlong map, which already has a distortion at the poles, suitable for spherical mapping. For the v coordinate it should be easy - just remap the range:

float v = i.uv.y*.5+.5;

For the u it's a bit trickier, since it wraps around twice, so you should check on what side of the z axis are you and do some magic there:

// Remap to [0 : .5]
float u = i.uv.x*.25 + .25;
// Check the side of the z axis, invert and compress to [.5:1] range
if (i.uv.z < 0) u = (1-u*2)*.5+.5;

Hope that helps to someone.

Improve this answer
\$\endgroup\$
1
  • 1
    \$\begingroup\$ I recommend reading up on cubemaps as mentioned above. They can save you a lot of trouble in trying to map a 3D direction to a texture coordinate, since that's what they're built for. \$\endgroup\$
    – DMGregory ♦
    Jul 15, 2018 at 7:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .