Frustum plane calculus

Question

I am writing a simple JavaScript engine from scratch using Canvas and box as primitives (à la Minecraft), damn it. I implement as many optimizations as I can, and still I have a back face, culling and hidden occlusion of the face, but I can’t figure out how to make a truncation that selects the optimal path.

I tried two-dimensional sampling, but I have one specific problem that I can not solve: if one single vertex from a 4-point plane goes behind the camera, it is still drawn, but completely distorted (the x and y coordinates are reversed I think) - see. Image.

I'm starting to think that this does not have a real solution without using more complex mathematical and rendering sequences.

I tried to limit the x and y vertices to the coordinates inside the 2D screen if at least one of the 4 vertices is still inside the screen (see below), but this completely distorts the square face (although I think I can go with more fancy math and additional triangles).

I have some experience with OpenGL and it does things in a completely different way, so this is not even a problem.

Do I have a chance to fix this without pulling my hair?

---

Decision

The final solution was to check each of the 8 vertices with respect to the clipping plane in 3D before performing a 2D projection and then clipping the screen.

This is the second clipping step, the first of which is to check whether the box is completely beyond the clipping plane using the bounding sphere of radius sqrt(3/2)*boxSideLength .

Additional triangles (actually points in this case) were too complex and mathematically intense, this solution is not perfect, but pretty beautiful.

Answer 1

You cannot project a three-dimensional point located behind your camera into the space of a 2d screen and make sense. therefore, you will need to define at least an approximate plane for the clip. After you transform the points from world space into camera space, but before you design the screen space, you need to do some clipping. You want to determine the nearest plane, something like z = 1 or something close, but in front of the camera, and determine the space in which points can be projected into the screen space.

You have three options, the first - if any point in the polygon is behind the nearest plane, then do not draw the entire polygon. It is simple but usually unacceptable. Compare each point with the nearest plane (if polygon.points[i].z < near.z ). But this will lead to the fact that the polygons disappear and appear, apparently, by accident at the edges of the screen.

The second option is to copy your polygon to the nearest plane. For triangles, if all three points are behind the near plane, then do not draw. If the two points are behind, fasten two line segments to the near plane and draw a triangle. If one point is behind the near plane, then fasten and create two new triangles and draw. If none of them are beyond the nearest plane, then just draw. If I hadn’t published this from my phone, I would go into more detail, but I hope this makes sense.

Finally, you can do a full crop fustrum and, instead of just cutting the nearest plane, fix all 6 sides of your visible truncation.

There are optimization algorithms for each of these approaches, but I would start with the basics and work forward. Each step is basically a continuation of the last, so I will start from the first and then get complicated until you get the visual and level of performance you are looking for.

Answer 2

Look at the cropping . Cohen-Sutherland is a fairly easy to use method. The wikipedia page even has some C / C ++ code to implement it.

If you introduce things like gouraud shading and mapping mapping, you will find that clipping post to divide w will distort things quite significantly (for example, texture and color interpolation will look wrong). As such, I often am better off doing something like Cohen-Sutherland in 3D.