Curved World? need to replicate that perspective fx

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.

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:

2 Likes

Its a shader

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.

3 Likes

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

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

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

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

Hi Karel, thank you for sharing the code!
How can I change it so it use z distance to camera instead of z-value of it’s position?
I’m newbie at shaders)

Hi @DmitryDevGuy,

You can pass the current camera position as a custom uniform to the vertex shader and do something like this:

float amountX = pow(posW.z - cameraPos.z, 2.0);

Done, thank you :slight_smile:

2 Likes

any chance get this shader?

Hi @Makri and welcome,

Here is my try on it, on a single direction (move around by clicking the mouse and using WASD or arrow keys). It takes into account the active camera position to calculate the curve center.

https://playcanvas.com/editor/scene/1353984

Note: the effect works in the vertex shader, meaning for it to create a curve all prolonged geometry requires sufficient decimation (polygons).

8 Likes

thank you :grinning:

Nice one @Leonidas

Very tempted to make something with this now, maybe a vertical space shooter!

2 Likes

Yeah, that curve on the horizon is so Nintendo like!

Hi @Leonidas I could not access this project. Could you please share this curve shader?

Don’t bother I was opening the link in incognito mode.

1 Like

Hi @Leonidas I am trying to use curve shader in my game, but not all entities in the hierarchy are being effected by the same. Could you please help me? Here is the link to the test project.

https://playcanvas.com/editor/scene/1794753

Which entities aren’t affected? I think this sample shader will not work for rigged/animated entities.

Entities under the “WORLD” in hierarchy. I have not used animations, it’s just the code.