3D # 2 or Illustrate! do it yourself
Some time ago, I published a topic about 3D with z-buffer, subpixel precision and Gouraud lighting in javascript using canvas.
Today, I present to your attention a version without a canvas (and even without gouraud shading, which is already there).
')
This is just a test of operating time, but, nevertheless, they work (or better see for yourself ).
Drawing polygons without canvas is easy. Flooded, with and without gradient.
Drawing 3D without canvas is easy. Using an artist's algorithm, for example.
Drawing 3D with self-intersections of polygons without canvas is difficult. Because the “artist” is no longer suitable, and a z-buffer is needed.
In the illustration above, the classic problem is the artist's algorithm. In whatever order the polygons would not be drawn, the correct picture will not work anyway.
However, if you break these polygons into several smaller polygons, the problem disappears.
There are several wonderful books that describe various polygon partitioning algorithms. Unfortunately, I did not read any of them, so I had to invent a bicycle. This bicycle without a gearshift, with wheels "eight"; but, nevertheless, he goes forward.
As usual, it is best to look in Chrome. In second place, having risen by two points, should be Opera. Then firefox. In Internet Explorer ... it works (but it is better to take any other browser).
To my regret, the Raphael library (SVG / VML) does not work in mobile Chrome (for Android).
Illustrate ? Who said illustrate ?
Unlike traditional rendering using z-buffer, this approach allows you to do various cool things, for example:
or such :
By the way, if I read at least one book with a description of such algorithms, I promise to remake the renderer.
Today, I present to your attention a version without a canvas (and even without gouraud shading, which is already there).
')
This is just a test of operating time, but, nevertheless, they work (or better see for yourself ).
Drawing polygons without canvas is easy. Flooded, with and without gradient.
Drawing 3D without canvas is easy. Using an artist's algorithm, for example.
Drawing 3D with self-intersections of polygons without canvas is difficult. Because the “artist” is no longer suitable, and a z-buffer is needed.
In the illustration above, the classic problem is the artist's algorithm. In whatever order the polygons would not be drawn, the correct picture will not work anyway.
However, if you break these polygons into several smaller polygons, the problem disappears.
There are several wonderful books that describe various polygon partitioning algorithms. Unfortunately, I did not read any of them, so I had to invent a bicycle. This bicycle without a gearshift, with wheels "eight"; but, nevertheless, he goes forward.
As usual, it is best to look in Chrome. In second place, having risen by two points, should be Opera. Then firefox. In Internet Explorer ... it works (but it is better to take any other browser).
To my regret, the Raphael library (SVG / VML) does not work in mobile Chrome (for Android).
Illustrate ? Who said illustrate ?
Unlike traditional rendering using z-buffer, this approach allows you to do various cool things, for example:
or such :
By the way, if I read at least one book with a description of such algorithms, I promise to remake the renderer.
Source: https://habr.com/ru/post/94190/
All Articles