Vector rendering: 3D graphics in icon design
I bring to your attention a popular science article from our tridechnik Andrey Pushkin ( push ) about how to turn 3D into a vector. Since there are a lot of problems with this, this is only the first article of the whole cycle.
Over the past few years, technologies in 3D graphics have been developing at a frantic pace. Algorithms for calculating photorealistic images, increasing the processor cores and RAM (as well as new rendering technology using GPUs) made it possible to get high-quality images in “home” conditions. 3d has become a powerful graphic design tool. There are a number of indisputable advantages of using the “three-dimensional” approach, and the most important and essential thing is speed of work.
')
A reasonable question arises: is it possible to use 3D graphics in the design of icons, logos and pictograms? After all, these branches of graphic design are traditionally “vector”. In addition to the advantages of the 3D approach (speed, ease of changing angles, the right perspective, etc.), there are a number of serious drawbacks that make drawing icons in the 3D editor almost impossible:
1. It is very difficult to get colors exactly or to get “pure” colors. Often in the design of icons is required to follow a given range. The thing is that 3D graphics are designed to produce photo-realistic images. And the color of any real object depends on the illumination of the surrounding diffused and direct light. So even setting the exact colors in the material editor, we almost never get the desired color at the output.
The illustration shows that even when setting “pure” colors in the material settings (colors and their codes are shown on the dice) we get “dirty” colors on the final render.
2. Impossible to get into pixels.
The picture shows that neither the vertical nor the horizontal lines in the pixels do not fall. Hence the feeling of a general “blurred” image.
3. It is difficult to get the exact size of the object. Everyone understands that when rendering, you can safely set the size of the frame. But here try to render a rectangle exactly in the size of 127? 84 pixels. Almost everything needs to be done "by eye".
As you can see, even in the 3ds max program (one of the most powerful programs for 3D graphics), it is possible to adjust only the frame size, and not individual objects.
4. It is time consuming to build an accurate perspective. This item looks controversial and always puzzling people who do not work in 3D. You can build a correct and natural perspective, you can build a 2-point. But often the exact angles of construction are given in the guidelines, and following them is not a trivial task for a 3shurnik.
Here the illustration shows the exact lines of building perspectives. Many icon drawing guides (for example, for Windows XP) indicate the exact angles along which the perspective grid is built. To get into them when rendering, you need to really try to do it, as I illustrate with the wallet (it is clear that the far edge has not become completely vertical :)).
5. Photorealism :) In 3D it is much easier to make a photorealistic image than vice versa. It is difficult to get rid of the feeling of “reality in icons”.
The picture shows 2 road cones - on the left render, on the right an icon. Rendering photorealism would be preferable for many illustrations, but still in icons it is not always appropriate and getting rid of it is quite difficult.
There are a number of purely technical problems (not always a clear selection of the alpha channel, incomprehensible white strokes with some filters in Vray, the difficulty of obtaining translucent shadows, etc.) Well, the last and most important drawback:
6. The impossibility of vector rendering
Solving the last 6th problem would immediately discard all others. Modern rendering technologies are very complex and inherently work "pixel-by-pixel". All the solutions that now exist to obtain an output vector are only analogous to tracers. And if there is still no imputed raster image tracing algorithm, you can forget about vector rendering. And the main problem here is the same: at the moment, no trace algorithm can imputably build gradients. The most advanced ones break an object into a vector mesh and assign a specific fill to each cell. No gradients. This means that obtaining photo-realistic vector images is a matter for the distant future.
So how to integrate 3d into icon design? Now there are only 3 main ways to do this. Each of them deserves a separate article, and then we will go over them briefly.
1. Directly tracing images in AI (or in other external trace programs). The only way this method can help is to build the correct perspective and shape of the object. There are a couple of subtleties. First, before tracing it is necessary to separate the image from the background. Secondly, for proper tracing, it is necessary to render the object without reflections, highlights and transparencies. The best option is to use any NPR-render. Photorealism is the enemy of tracing :)
On the illustration are 2 images of a tractor. On the left - the render with the reflections settings turned off, on the right - the traced vector image in AI.
2. Stroke raster render in AI (or overlay vector shapes in PS). The most "low-tech", but, unfortunately, the most effective method. In fact, this is the only serious way to introduce 3D into the icon-making process. To do this, you need to render an image as close as possible to the desired result. All highlights, reflexes, colors. And then the designer draws a vector image on the finished image.
The results of this process are visible in the picture - on the left is a “naked” render, on the right - the vector icon drawn on it.
The approach gives good results in complex and large icons (for example, when drawing equipment, especially with wheels :))
3. Vector rendering programs and plugins . Today there are 2 main tools that develop this direction. This is an illustrate! and Swift 3D. I use both products in the form of plug-ins and external renders to 3ds max. Also, the standard 3ds max render - Mental Ray allows you to render the edges and outlines of objects right in EPS. Although these areas are developing quite actively (from version to version Swift 3d is getting better), it is still very far from the real vector rendering. At the moment, all Swift3D can do is a vector mesh with color-grouped objects. Working with him is almost impossible. The only use case is rendering in 2 colors, when the whole image is decomposed into 2 primary colors, and each of them becomes a separate object with a fill.
In the picture, the first gear is rendered with a photorealistic visualizer (raster image). The second is Swift3D with the setting of rendering in 2 colors (Cartoon Two Color Fil) in EPS format. By opening this file in AI, we get 2 objects: gray and black. The latter is with 1 superimposed gradient on a gray object in AI. As you can see, if you work with this further, you can get quite an acceptable result.
Today we do not have a universal way, and each of these three is good in specific situations. Summing up, I will say one thing - it makes sense to apply 3D in the design of icons only in cases where the size exceeds 128x128 pixels or there are many details with a complex shape. In the meantime, no new revolutionary vector rendering technology has appeared, AI will remain the main tool of the icon designer :)
PS: I work in 3ds max, modo and mudbox. Perhaps in other editors the situation is a bit wrong, but the general principles and problems are relevant for the 3D approach to icon design in all programs. The methods for obtaining vector blanks may differ slightly, for example, in Rhinoceros it is possible to obtain a vector directly by importing from a program. But this is essentially the same thing as rendering to EPS format using mental ray.
Over the past few years, technologies in 3D graphics have been developing at a frantic pace. Algorithms for calculating photorealistic images, increasing the processor cores and RAM (as well as new rendering technology using GPUs) made it possible to get high-quality images in “home” conditions. 3d has become a powerful graphic design tool. There are a number of indisputable advantages of using the “three-dimensional” approach, and the most important and essential thing is speed of work.
')
A reasonable question arises: is it possible to use 3D graphics in the design of icons, logos and pictograms? After all, these branches of graphic design are traditionally “vector”. In addition to the advantages of the 3D approach (speed, ease of changing angles, the right perspective, etc.), there are a number of serious drawbacks that make drawing icons in the 3D editor almost impossible:
1. It is very difficult to get colors exactly or to get “pure” colors. Often in the design of icons is required to follow a given range. The thing is that 3D graphics are designed to produce photo-realistic images. And the color of any real object depends on the illumination of the surrounding diffused and direct light. So even setting the exact colors in the material editor, we almost never get the desired color at the output.
The illustration shows that even when setting “pure” colors in the material settings (colors and their codes are shown on the dice) we get “dirty” colors on the final render.
2. Impossible to get into pixels.
The picture shows that neither the vertical nor the horizontal lines in the pixels do not fall. Hence the feeling of a general “blurred” image.
3. It is difficult to get the exact size of the object. Everyone understands that when rendering, you can safely set the size of the frame. But here try to render a rectangle exactly in the size of 127? 84 pixels. Almost everything needs to be done "by eye".
As you can see, even in the 3ds max program (one of the most powerful programs for 3D graphics), it is possible to adjust only the frame size, and not individual objects.
4. It is time consuming to build an accurate perspective. This item looks controversial and always puzzling people who do not work in 3D. You can build a correct and natural perspective, you can build a 2-point. But often the exact angles of construction are given in the guidelines, and following them is not a trivial task for a 3shurnik.
Here the illustration shows the exact lines of building perspectives. Many icon drawing guides (for example, for Windows XP) indicate the exact angles along which the perspective grid is built. To get into them when rendering, you need to really try to do it, as I illustrate with the wallet (it is clear that the far edge has not become completely vertical :)).
5. Photorealism :) In 3D it is much easier to make a photorealistic image than vice versa. It is difficult to get rid of the feeling of “reality in icons”.
The picture shows 2 road cones - on the left render, on the right an icon. Rendering photorealism would be preferable for many illustrations, but still in icons it is not always appropriate and getting rid of it is quite difficult.
There are a number of purely technical problems (not always a clear selection of the alpha channel, incomprehensible white strokes with some filters in Vray, the difficulty of obtaining translucent shadows, etc.) Well, the last and most important drawback:
6. The impossibility of vector rendering
Solving the last 6th problem would immediately discard all others. Modern rendering technologies are very complex and inherently work "pixel-by-pixel". All the solutions that now exist to obtain an output vector are only analogous to tracers. And if there is still no imputed raster image tracing algorithm, you can forget about vector rendering. And the main problem here is the same: at the moment, no trace algorithm can imputably build gradients. The most advanced ones break an object into a vector mesh and assign a specific fill to each cell. No gradients. This means that obtaining photo-realistic vector images is a matter for the distant future.
So how to integrate 3d into icon design? Now there are only 3 main ways to do this. Each of them deserves a separate article, and then we will go over them briefly.
1. Directly tracing images in AI (or in other external trace programs). The only way this method can help is to build the correct perspective and shape of the object. There are a couple of subtleties. First, before tracing it is necessary to separate the image from the background. Secondly, for proper tracing, it is necessary to render the object without reflections, highlights and transparencies. The best option is to use any NPR-render. Photorealism is the enemy of tracing :)
On the illustration are 2 images of a tractor. On the left - the render with the reflections settings turned off, on the right - the traced vector image in AI.
2. Stroke raster render in AI (or overlay vector shapes in PS). The most "low-tech", but, unfortunately, the most effective method. In fact, this is the only serious way to introduce 3D into the icon-making process. To do this, you need to render an image as close as possible to the desired result. All highlights, reflexes, colors. And then the designer draws a vector image on the finished image.
The results of this process are visible in the picture - on the left is a “naked” render, on the right - the vector icon drawn on it.
The approach gives good results in complex and large icons (for example, when drawing equipment, especially with wheels :))
3. Vector rendering programs and plugins . Today there are 2 main tools that develop this direction. This is an illustrate! and Swift 3D. I use both products in the form of plug-ins and external renders to 3ds max. Also, the standard 3ds max render - Mental Ray allows you to render the edges and outlines of objects right in EPS. Although these areas are developing quite actively (from version to version Swift 3d is getting better), it is still very far from the real vector rendering. At the moment, all Swift3D can do is a vector mesh with color-grouped objects. Working with him is almost impossible. The only use case is rendering in 2 colors, when the whole image is decomposed into 2 primary colors, and each of them becomes a separate object with a fill.
In the picture, the first gear is rendered with a photorealistic visualizer (raster image). The second is Swift3D with the setting of rendering in 2 colors (Cartoon Two Color Fil) in EPS format. By opening this file in AI, we get 2 objects: gray and black. The latter is with 1 superimposed gradient on a gray object in AI. As you can see, if you work with this further, you can get quite an acceptable result.
Today we do not have a universal way, and each of these three is good in specific situations. Summing up, I will say one thing - it makes sense to apply 3D in the design of icons only in cases where the size exceeds 128x128 pixels or there are many details with a complex shape. In the meantime, no new revolutionary vector rendering technology has appeared, AI will remain the main tool of the icon designer :)
PS: I work in 3ds max, modo and mudbox. Perhaps in other editors the situation is a bit wrong, but the general principles and problems are relevant for the 3D approach to icon design in all programs. The methods for obtaining vector blanks may differ slightly, for example, in Rhinoceros it is possible to obtain a vector directly by importing from a program. But this is essentially the same thing as rendering to EPS format using mental ray.
Source: https://habr.com/ru/post/107800/
All Articles