Implementing a curved world vertex shader

Questions
1

Hi! I’ve been wanting to achieve a “curved world effect” for a project. It’s a shader effect often used in 3D runners game. A good example is this unity package - Curved World - Classic Runner - Asset Store .

I’ve found this example in ThreeJS that looks really good. opengl es - Warp / curve all vertices around a pivot point / axis (Three.js / GLSL) - Stack Overflow
So i want to do a similar thing with babylon, but i’m not sure on what would be the best way to approach it.

Should i try and implement it as a new shader in babylonJS? And then add whatever lighting/shading i would need for this project?
Or is it a way i could add this effect to the vertexshader of the babylon standard material somehow?

Here’s a screenshot of how the game i’m working on is looking now. As you can see it would benefit from the curved world effect :slight_smile:

screen
screen.jpg472×680 28.7 KB

Happy for any help!

2

Here’s what I get if I copy that example:
https://playground.babylonjs.com/#DEV5Y5#4
And it does Not look right :stuck_out_tongue:
As I have no idea what I’m doing, I’m using view in place of 3JS’ modelViewMatrix and viewProjection in place of 3JS’ projectionMatrix.

3

Thanks! That’s really helpful in how to move forward with it! And it does look like it does something right at least, but not all the way. I’ll have a closer look a bit later!

4

This might actually be a good use case for @Deltakosh brand new nodeMaterial: How To use the Node Material - Babylon.js Documentation

5

One is possible ways (at least to imitate curving in this case) could be some refraction plane or mesh just before the camera; I suppose it is also possible to write own projection matrix.

6

Unity Curved.shader

Babylon shader
https://playground.babylonjs.com/#B9URAJ#49

4 Likes