Figuring out how much of the side of a cube is vis

Question

I have a simple Three.js scene with a camera that orbits around a cube, always looking directly at it. I need to figure out the percentage of the side that is currently most visible by the camera as it orbits around the cube.

So if I'm looking straight on then side 1 (the "front") can be seeing 100% and all other 5 sides are at 0%. If I rotate the camera slightly to the right right then part of side 2 (the "right side") can now be seen -- perhaps 20%, while side one can now be seen at %80. If I then rotate slightly up then perhaps side 3 (the top) is 10% visible, etc.

How can I go about figuring this out? Remember, the cube itself does not rotate -- only the camera. Three.js or JavaScript would be great, but I can deal with pretty much any programming language. I'm mostly interested in ideas for how to achieve this.

Answer 1

As another option, you could calculate the dot product of the camera's view vector and the cubes face normals, maybe? Then calculate the angle in degrees from the dot product and you know the angle of each face normal relative to the cameras view vector. I am not quite sure if this works, was just an idea. So everything above 90 degrees is not visible at all and 0 degrees is completely facing the camera. Well, not quite sure about the percentages but i don't know your use case. Just thought about saving the screenspace operations proposed by Gero3 somehow.... by only using the angles from the face normals. FOr example if you would be looking at the edge of the cube and have 2 faces in 45 degrees from the camera view direction, you know that you are 50% for each of the two faces?

Answer 2

First calculate the position of the vertexes in screen space.

HOW TO:

var screenspaceVertexPosition = vertex.position.applyProjection(
    this.projectionMatrix.multiplyMatrices(object.matrixWorld))

Do this for all 8 vertexes. Then figure out which planes are visible by checking the planes normals. Calculate then the area used by each face in screenspace. From there you can calculate the complete visible area and the percentage.