CODEWITHSUNDEEP
javascriptthree.jswebglgame-engineperspective
Hunter Larco
Hunter Larco

Reputation: 780

Rounded Plane In THREE JS

THREE JS, can often seem angular and straight edged. I haven't used it for very long and thus am struggling to understand how to curve the world so to speak. I would imagine a renderer or something must be changed, but the idea is to take a 2d map and turn it into a simple three lane running game. However, if you look at the picture below from another similar game, how can i achieve the fish eye effect?


(source: applenapps.com)

Upvotes: 0

Views: 1226

Answers (2)

yaku
yaku

Reputation: 3111

I'm sure there are many possible different approaches... Here's one that creates nice barrel distortion effect.

You can do something like that by rendering normal wide angle camera to a texture, then project it to a lens-shaped plane (a sphere even), then the actual on-screen render is from a camera pointing to that.

I don't have the code available ATM, but I should be able to dig it up in few days if interested. Or you can just adapt from the three.js examples. Three.js includes some postprocessing examples where the scene is first rendered into a texture, that texture is applied to a a quad then photographed with ortographic camera. You can modify such an example by changing the ortographic camera to a perspective one, then distorting/changing the quad to something more appropriately shaped.

Taken to extremes, this approach can produce some pixelization / blocky artifacts.

Upvotes: 0

Dragan Okanovic
Dragan Okanovic

Reputation: 7771

I would do that kind of effect on per-vertex base depending on the distance from the camera. Also, maybe a bit tweaked perspective camera with bigger vertical fov would boost up the effect of the "curviness". It's just a simple distortion effect that has been simulated in some way, it probably isn't really curved. Hope this helps.

Upvotes: 0

Related Questions