How to make plane look curved?

Hi! could anyone help me how to make plane and farther object look curved, just like Subway Surfers Video Gameplay

thanks!

Hi, I try to connect this shader property with the default shader Mobile/Particles/Additive. But i can't get the exact solution. Please help me

6 Answers

6

Unfortunately it’s not possible to do this just with a projection matrix since it only can do linear projection. What you want requires z². It is possible to do this with a custom shader, but your geometry need to have “enough” vertices along the “bend”. See this example in Minecraft. I think you can’t do the bending in the fragment shader since it requires you to offset the geometry depending on the distance to the camera. AFAIK this can only be done in the vertex shader.

edit
I’m far from being a shader expert, so it take a while until it worked (i hate syntax errors and totally useless errors :D). I’ve written a very simple shader that can bend the objects that are drawn with it. However it has one downside: Every object needs a custom shader or it won’t fit together with the other things.

This example scene has 3 objects in a row (two planes and one cube). The camera is sliding linearly on the z-axis over the objects. The first plane has my curved shader, the second plane has a normal diffuse shader and the cube also has my curved shader.

Webplayer

I’ve packed the sample together in a package.

Here’s the important part of the vertex shader:

v2f vert (appdata_base v)
{
    v2f o;
    // The vertex position in view-space (camera space)
    float4 vPos = mul (UNITY_MATRIX_MV, v.vertex);
    
    // Get distance from camera and scale it down with the global _Dist parameter
    float zOff = vPos.z/_Dist;
    // Add the offset with a quadratic curve to the vertex position
    vPos += _QOffset*zOff*zOff;

    o.pos = mul (UNITY_MATRIX_P, vPos);
    o.uv = v.texcoord;
    return o;
}

_Dist wouldn’t be necessary. It just scales the whole vector, but it helps to find nice values :wink:

As you can see the first plane bends quite nicely because the default Unity plane consists of 10x10 quads, so there are many vertices along the bending edge.

The cube doesn’t have subdivs. The vertices bend correctly, but the edges will stay linear.

The second plane keep the original position since it doesn’t have a bending shader.

Keep in mind that the actual objects will be on a straight line. This is very useful for physics and collisions. Only the view is bent.
Note that the visibillity check that is performed by Unity does not take the bending into account. So an object could be bend outside of the viewport, but it is still rendered because the actual position is still in view. Also the other way round. If an object would be bend into the viewport, but the actual object is outside of the viewing frustum, the object will not be drawn at all.

thank a lot Bunny :D

Hi Bunny! a bit more problem is come out. when i changed shader to Custom/Curved, why the function " Renderer.material.SetTextureOffset("_MainTex", Vector2(offset,0)); " not working? Please help :(

ok! Thanks again!

I am exploring this shader and quite impressed, Bunny83. Thanks! If doing similar to Subway Surfers, we would apply this shader for the train track. How should we do for objects along the track, say the train?

Hey bunny, I've been trying to figure out a way to make objects on a plane wrap around a sphere. Like [tetrisphere][1]. I think using a vertex shader like this could be the way to do it, you think it would be possible to make that shader bend objects in a radius like that, not only on a horizon? You can see in the tetrisphere illusion how they had to make the pieces disappear before they were out of sight, I would assume it's a limitation of the perspective trick? [1]: http://www.youtube.com/watch?feature=player_detailpage&v=2o3-hl3nr0Q#t=25s

Oryginal curving world script is free, may be found here:

Hey ! I’ve made shader that gives complete subway surfers look. Try to fiddle with the vertices in view matrix. (i.e their z axis). I made through vertex and fragment shaders. Message again if you get stuck anywhere

impressive !

Hi,

I try to connect this shader property with the default shader Mobile/Particles/Additive. But i can’t get the exact solution.

Please help me

here i put the shader,

Shader “Custom/Curved” {
Properties {
_MainTex (“Base (RGB)”, 2D) = “white” {}
_QOffset (“Offset”, Vector) = (0,0,0,0)
_Brightness (“Brightness”, Float) = 0.0
_Dist (“Distance”, Float) = 100.0
}

SubShader {
	Tags { "Queue" = "Transparent"}
	Pass
	{
		
        Blend SrcAlpha OneMinusSrcAlpha 
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "UnityCG.cginc"
		
		

        sampler2D _MainTex;
		float4 _QOffset;
		float _Dist;
		float _Brightness;
		
		struct v2f {
		    float4 pos : SV_POSITION;
		    float4 uv : TEXCOORD0;
		    float3 viewDir : TEXCOORD1;
		    fixed4 color : COLOR;
		};

		v2f vert (appdata_full v)
		{
		   v2f o;
		   float4 vPos = mul (UNITY_MATRIX_MV, v.vertex);
		   float zOff = vPos.z/_Dist;
		   vPos += _QOffset*zOff*zOff;
		   o.pos = mul (UNITY_MATRIX_P, vPos);
		   o.uv = v.texcoord;
		   return o;
		}
		half4 frag (v2f i) : COLOR0
		{
		  	half4 col = tex2D(_MainTex, i.uv.xy);
		  	col *= UNITY_LIGHTMODEL_AMBIENT*_Brightness;
			return col;
		}
		ENDCG
	}
}

FallBack "Diffuse"

}

I had the exact same question and ended up googling a lot and implementing our own version: