CODEWITHSUNDEEP
javascripthtmlcss
Iter Ator
Iter Ator

Reputation: 9299

Convert Field of View value, to CSS3D perspective value

If I would like to have a camera, with 60° fov, then how to calculate the CSS3D perspective value?

perspective: ?;
perspective-origin: center center;

I've found a description about, how to calculate the projection matrix from perspective value, but I still don't really understand it: http://www.w3.org/TR/css-transforms-1/#perspective-matrix-computation

So if I have a given Field of View, and I know the element's offsetWidth/offsetHeight, then how should I calculate the needed perspective value?

And where are the near plane and the far plane?

Upvotes: 6

Views: 1663

Answers (1)

user578895
user578895

Reputation:

I asked a similar question a few years ago and got the response below. The article linked has since changed, so I'm quoting the text since it no longer exists in the article (but there may still be other useful info).

If I'm reading it correctly, you have a pyramid with the base at [perspective px] away from the viewer. So if you want a 60° fov, you have a 30° triangle from the center to the corners and you need to find the length of the adjacent edge:

Math.pow( w/2*w/2 + h/2*h/2, 0.5 ) / Math.tan( 30 * Math.PI / 180 )

I think ;) It yields a perspective of 968 for a 1000x500 view, which seems about right from having played randomly with -webkit-perspective a fair bit

The CSS 3D Transforms Module working draft gives the following explanation:

perspective(<number>)

specifies a perspective projection matrix. This matrix maps a viewing cube onto a pyramid whose base is infinitely far away from the viewer and whose peak represents the viewer's position. The viewable area is the region bounded by the four edges of the viewport (the portion of the browser window used for rendering the webpage between the viewer's position and a point at a distance of infinity from the viewer). The depth, given as the parameter to the function, represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect. The value is given in pixels, so a value of 1000 gives a moderate amount of foreshortening and a value of 200 gives an extreme amount. The matrix is computed by starting with an identity matrix and replacing the value at row 3, column 4 with the value -1/depth. The value for depth must be greater than zero, otherwise the function is invalid.

Upvotes: 6

Related Questions