Fish eye and reverse fish eye

[ozRocker]

Does anyone know how to change the lens of a web cam feed to fish eye and also how to make it reverse of fish eye (for cams that already have a fish eye effect and need to be reversed).

I have a web cam playground here, just not sure how to add those effects.

https://www.babylonjs-playground.com/#1R77YT#6

[JCPalmer]

No clue about the webcam part.  Maybe this discussion will give you a clue.  To make a fisheye scene camera, you can just set the FOV.  A 10mm focal length lens == 2.024394 radian FOV.

camera.fov = 2.024394;

I am using a 120mm "lens" for my close up scenes (0.265103 radian FOV).  BJS's default is 45.8mm.  The default for a Blender exported camera is 35mm.  Here are some effects:

45.8mm: (BJS default)

120 mm: (wide angle)

10 mm: (fisheye)

[ozRocker]

17 minutes ago, JCPalmer said:

No clue about the webcam part.  Maybe this discussion will give you a clue.  To make a fisheye scene camera, you can just set the FOV.  A 10mm focal length lens == 2.024394 radian FOV.

camera.fov = 2.024394;

 

This doesn't change the appearance of the video on the plane though.

Here's an example using a video texture https://www.babylonjs-playground.com/#1R77YT#7

[JCPalmer]

It changed the size, but as it is just a plane, I guess there is not much difference.  For pre-recorded video, like your example, looks like you are stuck with what it is recorded in.  Whether this adjustable for when using CreateFromWebCam() looks doubtful as well.

[ozRocker]

I found this which is a shader for fisheye

https://www.shadertoy.com/view/4s2GRR

Trying to figure out how to incorporate it into my babylon.js texture

 

[JCPalmer]

I do not know how to do that, but I do know that shaders are implemented at the Material level.  You might look into the CustomMaterial under dev.

[ozRocker]

I got fish-eye working here http://www.babylonjs-playground.com/#TRNYD#18

Does anyone know what I need to change to make it reverse fish-eye?

Edit: I actually mean "pin cushion" when I say reverse fish-eye.  So really, its reverse barrel distortion

[ozRocker]

Here's my shader that alternates between barrel and pin-cushion

http://www.babylonjs-playground.com/#TRNYD#20

 

I used this shader:

https://www.shadertoy.com/view/lttXD4

I'm not really certain if "iResolution" is meant to be the full screen size.  My texture looks massive so something is off. But at least I understand shaders a little more now.

[GameMonetize]

Excellent! And happy to see one ore shader guy in the team

iResolution is meant to be the size of your texture

[ozRocker]

9 hours ago, Deltakosh said:

Excellent! And happy to see one ore shader guy in the team

iResolution is meant to be the size of your texture

Hmm...that doesn't work out so well for me http://www.babylonjs-playground.com/#TRNYD#21

I think I need a "shaders for dummies" book :/

[GameMonetize]

oh sorry..I read too quickly

the iResolution is the resolution of the host (I guess this shader was meant to be fullscreen). So you can approximate it with canvas' size