CODEWITHSUNDEEP
javascriptcss3d
jackreichert
jackreichert

Reputation: 1979

How to deskew a fisheye panorama using css3?

I feel that it has come time to convert my flash panoramas to js/html5/css3. I've seen some elegant solutions using separate flat images, but mine are all fisheye...

My intuition tells me that it's doable using -webkit-transform: matrix3d but I'm not quite hitting it.

Any ideas if this can really be done in css3?

Thanksya kindly.

Upvotes: 4

Views: 3064

Answers (2)

jackreichert
jackreichert

Reputation: 1979

I discovered three.js.

It looks promising.

Upvotes: 1

aaaaaaaaaaaa
aaaaaaaaaaaa

Reputation: 3700

Yes, it can be done, but you better know your mathematics. Note that you are not using CSS3 but rather a proprietary extension, this will only work in webkit browsers. You'll probably be better off using a Canvas element for the job, not only is it supported by more browsers, it also gives you far greater freedom to do whatever transformation you desire.

Edit:
Well then, cut your image into a number of thin vertical slices, each slice should be scaled by approx 1/cos([angle off centre]), and skewed to account for the angle being different at the right and the left side of the slice. This way you should end up with an "inverse fisheye" shape where the top and the bottom of the image is concave, you might want to cut it to a square.

Upvotes: 1

Related Questions