Curved or rolling horizon shader (aka "Animal Crossing" rolling log world effect)

[mattdm]

I have a Bevy project where I have a 3D world with a simple flat tile plane as the ground, with buildings and objects sitting on that. My ground plane is finite — a big square. (Eventually, there will be chunks spawned in.) The camera can be at an angle where the camera is looking into the distance, with the horizon on-screen.

This works fine as long as the camera is oriented so it is perpendicular to the edge of the ground-square. But, if you turn... you see that it really is an edge, and if you're at 45°, you can see the corner. This effect can be reduced by making the ground plane really big, but it turns out to have to be ridiculously large in order to reduce the effect to less than a pixel at 1920×1080.

I know that fog is often the solution to this, but I'm not finding that sufficient. For what I'm doing now, I want a somewhat earth-like horizon, but I can imagine a more cartoon-like small-planet look. In fact, I don't have to imagine, because it turns out that Animal Crossing does exactly this.

Armed with that search term, I found a lot of resources for Unity, like this:

• https://notslot.com/tutorials/2020/04/world-bending-effect
• https://github.com/skylarbeaty/curved-world
• https://alastaira.wordpress.com/2013/10/25/animal-crossing-curved-world-shader/

and one for Godot

• https://github.com/NovemberDev/godot_curvature_shader/tree/master

... which doesn't handle everything the more sophisticated Unity examples do, but does seem like a nice simple starting point which I could modify and extend.

So, leaving aside the Unity examples (some of which say things like "it’s a surface shader, which means it’ll only work in Unity"), I'm at a loss as to how to even get started with doing something similar in Bevy. The instructions for godot_curvature_shader are GUI-based — click this, fill in these values, etc.

I've looked at and played with modifying some of the Bevy shader examples, but those mostly seem to be examples of doing a different sort of thing entirely — changing colors, array textures, etc. Other things I can find seem really complicated and involve a lot of rust / Bevy code.

I'd like the actual rendering to be the normal bevy PBR material, just with the y vertex lowered near the horizon (or, alternately, as distance increases from the camera, probably with a near-limit where everything is left flat).

Is there a simple example I can look at of something sort of similar? I don't need it be doing exactly this, just the same kind of vertex manipulation.

Thank you for your help!

[lynnpepin]

Hi! I did something like this in Godot awhile back, and it might be usefull. https://github.com/lynnpepin/rollinglogshader. The exact code is here: https://github.com/lynnpepin/rollinglogshader/blob/master/rolling_log.gdshaderinc

I found this post looking for the same. The core technique is called a vertex transform shader, and all I could find are these incomplete vertex shader notes.

I'm still figuring out how to do vertex transform shaders in Bevy, but for now, I can explain the math in the shader. It has a few conditions we can ignore (remap_normals works on lighting, hang turns the transform into a U shape and not an O shape).

The examples you linked use pretty complex shader graphs, but the core math is simple. Stripping away the extra conditions and math in my example, it's all easily expressed in a few lines:

float dist_z = VERTEX.z - player_pos.z;
float theta = dist_z / RADIUS;

VERTEX.y = (VERTEX.y + RADIUS)*cos(theta) - RADIUS;
VERTEX.z = (VERTEX.y + RADIUS)*sin(theta) + player_pos.z;

Here,

• The player does not have a vertex transform applied, only the world / surface. (If you want to apply a transform to everything, this math would change a lot!)
• player_pos and VERTEX are the xyz vectors representing the player and the mesh vertex, respectively.
• RADIUS is a constant, for the radius of the cylinder.
  • We use VERTEX.y + RADIUS for the radius of transformation, since y axis height translates to distance from the surface of the cylinder.
• The y axis is the gravity axis (up/down).
• The z axis is forward along the ground. So, when the player moves along z, the shader should "roll" under the player.
• The x axis stays straight (i.e. the "rolling log" rolls around this axis.)
• The VERTEX.y = ... - RADIUS has the -RADIUS bit to reposition the surface of the world at y = 0. (E.g. A flat plane at y=0 should be transformed to be tangent to y=0, no matter the RADIUS.)
• theta changes as the player moves forward/backwards, such that the log "rolls". But as it "rolls", we need it to move forward to stay under the player, hence VERTEX.z = ... + player_pos.z.

Sorry I can't provide an example in Bevy yet, but I hope this might help!! I am interested in the same