Curved World? need to replicate that perspective fx


#1

Is there a way to set a shader or something to render like this?

Im making a game similar to Flippy Race, need the perspective on the distance to appear curved like we’re on a globe

Thanks,
Yohami


#2

You need to have GLSL knowledge to write a WebGL Shader that curves all of the world’s vertices based on the player or camera position; the farthest away, the more curve applied.

Here’s a shader someone wrote for unity: https://alastaira.wordpress.com/2013/10/25/animal-crossing-curved-world-shader/

You can use it as a base to write the shader from scratch in GLSL.


#3

I was thinking of cheating and render the scene to a render texture and then apply it to a curved mesh


#4

I think that game in the video was actually built on a rotating cylinder or other curved geometry. I don’t think the curved effect is from a post-process. From what I see, I don’t see how simply applying a post effect would replicate what is happening in this game.

The GLSL shader devMidgard appears to actually displace vertices before rendering. So that approach is viable if you can find a way to do it in PlayCanvas.


#5

It may seem like it’s actually built on a rotating cylinder or something like that, but that’s actually the magic of shaders.

Just imagine how complex would a game like that be to design, because if you build everything on a rotating cylinder, setting up colliders and other stuff is quite tricky.

However with a shader like the one I found you can simply design the game like any other, on a flat scene, then the shader would take care of making the illusion and tricking you into believeing it’s actually been built like that.

No games would choose the “build directly on an actual rotating cylinder” approach because of the difficulty on design.

Now, another question that raised in my mind while looking up shaders that curve the world like in Animal Crossing or any mobile game, is what happens with colliders? If you displace the vertices then the collider volume you’ve set up in the editor simply won’t be on the right spot, because it doesn’t know what the shader is doing, right?

But actually, it’s all fine! Because by the time the player is about to collide with the object in question, the displace of the vertices is minimal or even nothing, because the distance to the player is very near, so the shader has stopped displacing its vertices.

It’s a very neat and genius approach to making game worlds like that, I was pretty surprised reading about it and have long wanted to make a “curved world” game. Maybe in the future :stuck_out_tongue:


#6

Its a shader


#7

I am doing exactly this for my current project with just an easy code that curves the vertices downwards the further they are in world space (you could change that, eg. distance from camera etc).
This code is part of a vertex shader (vec4 getPosition() to be exact, in transformVS chunk)

float depth = posW.z;
float noCurveDistance= 20.0;

if(depth > noCurveDistance) {
    float amountX = pow(depth - minDistanceToCurve, 2.0) * 0.0001;
    posW = posW + vec4(amountX, 0.0, 0.0, 0.0);
}

This code curves the world downwards for me, you can change the function to fit your needs.


#8

Thanks Karel, sounds like what I need. Where should I paste that code?


#9

Just copy and replace the transformVS chunk vertex shader with above specified lines in section:

 #ifdef SCREENSPACE
      screenPos = posW;            
 #else
      ....paste code here
 #endif

#10

Thanks, and sorry for the newbie question - how do I apply the vertex shader to the sccene?