Need help for a shader

Questions
1

Hi,
I am trying to make plane and farther object look curved like in the Subway Surfers. After a little search I found out that it is a shader effect. I don’t know much about shaders and couldn’t find any similiar shader in threejs.

I find a few in Unity like this one: https://answers.unity.com/questions/288835/how-to-make-plane-look-curved.html?_ga=2.152763001.1731729126.1585582695-1717120585.1539868710

I didn’t understand much from Unity shader. Can anyone help me rewriting this in threejs or is there any similiar shader written in threejs?

2

I am not Unity expert (or even user) but I think this

float4 vPos = mul (UNITY_MATRIX_MV, v.vertex);

would be this:

vec4 vPos = modelViewMatrix * vec4 (position, 1.0);

for example, and

o.pos = mul (UNITY_MATRIX_P, vPos);

would be

gl_Position = projectionMatrix * vPos;
1 Like
3

Thanks it helped a lot. I was able to add the effect with a vertex shader like this:

const vertexShader = `
            varying vec2 vUv
            void main()
            {
                vUv = uv;
                vec4 vPos = modelViewMatrix * vec4 (position, 1.0);
                float zOff = vPos.z/10.0;
                vPos.y -= 0.1*zOff*zOff;
                gl_Position = projectionMatrix * vPos;
            }
        `

Now I need to find a way to add the texture on it.

Edit: I added the texture it was easy but I couldn’t find a complete example on how to use directional lights in shader with textures. Is there any good example about this?