Three.js - Fisheye effect

Question

So, I\'ve messed around with three.js, works out great. The only thing I can\'t figure out, is how to make a camera with a real fisheye effect.

How is that possible?

Answer 1

One way is to set a large field of view on the camera:

new THREE.PerspectiveCamera(140, ... )

This will not technically be a fisheye effect, but it may be the effect you're looking for.

In a real camera lens, getting a large field of view without distorsion would likely make the lens pretty expensive, but in computer graphics, it's the easy way.

A real fisheye lens distorts the image so that straight line become curved, like in this image:

If you want to create an actual fisheye effect with this kind of distorsion, you would have to modify the geometry, as in Three.js's fisheye example. In that example, the geometry is actually modified beforehand, but for a more advanced scene, you'd want to use a vertex shader to update the vertices on the fly.