3D No. 2 or Illustrate! do it yourself

    Some time ago, I published a topic about 3D with z-buffer, sub-pixel accuracy and Guro lighting on javascript using canvas.

    Today I present to your attention the option without a canvas (and without gouraud shading, which is already here). These are just test cases, but, nevertheless, they work (or better see for yourself ). Drawing polygons without a canvas is easy. Filled, with and without a gradient. Drawing 3D without canvas is easy. Using an artist’s algorithm, for example. Drawing 3D with self-intersections of polygons without a canvas is difficult. Because the "artist" is no longer suitable, and z-buffer is needed.

    The illustration above shows the classic problem of the artist’s algorithm. In whatever order the polygons are drawn, the correct picture will still not work.

    However, if we break these polygons into several smaller polygons, the problem disappears.

    There are several great books that describe various polygon partitioning algorithms. Unfortunately, I did not read any of them, so I had to invent a bicycle. This bike without a speed switch, with wheels "eight"; but, nevertheless, he goes forward.

    As usual, look best in Chrome. In second place, having risen by two points, Opera follows. Then FireFox. In Internet Explorer ... it works (but it's better to take any other browser).

    Unfortunately, the Raphael library (SVG / VML) does not work in mobile Chrome (for Android).

    Illustrate ? Who said Illustrate ?

    Unlike traditional rendering using the z-buffer-and, this approach allows to do different cool things, such as these : and these : By the way, if you still read at least one book with a description of these algorithms promise to remake the renderer.

    Also popular now: