[Post] Learn about the Bump Map Technology

The purpose of this tutorial is to help those who are interested in graphic rendering technology but suffer from finding free Chinese learning materials. None of my colleagues engaged in computer science have learned the basic operations of WINDOWS, and my computer technology has been completely self-taught step by step, the programming history of computing has been nearly five years. I often spend more than half of my learning time querying learning materials (I remember that it took nearly two weeks to compile a program for displaying GIF images when I learned the GIF image compression and decompression algorithm, the main reason is that there is not enough information. I only read one or two short tutorials to write programs. Most of the time is spent debugging code and guessing formats ). Therefore, I feel the same for those learners who are not engaged in computer science and have no computer experts around them-querying a pile of data is the most painful process of self-study. I have been learning the bump mapping algorithm over the past few days. After reading a simple E-document tutorial, I feel that I should make a small contribution to the tutorial industry in China. I am not a 3D expert, but also a beginner of OpenGL, so I can only translate it first. I also hope that my translation samples can be used as an example. More and more experts in China can write their own things and share them with you. Due to my limited level, translation may be incorrect or inappropriate. please correct me more.

To respect the original author and to allow readers to compare the original text, the original article address is posted here:
Http://freespace.virgin.net/hugo.elias/graphics/x_polybm.htm
　

Bump ing Bump Mapping

The concave-convex ing and texture ing are very similar. However, texture ing adds the color to the polygon, while concave-convex ing adds the rough information to the polygon. This will produce attractive effects on the polygon vision. We only need to add a bit of information to an object that originally needs to use a large number of polygon. Note that this object is flat, but it looks rough and uneven. Let's take a look at the Cube on the left. If you observe it very closely, you will find many details above it. It looks like it is composed of thousands of polygon. In fact, it is composed of only six rectangles. You may ask, "What is the difference between this and texture ing ?" Their difference is that the concave-convex ing is a texture ing for the light direction.

(1) Principle behind the concave-convex ing

Let's look at a rough surface.
　　　　

From a distance, the only evidence that this object is rough is that the brightness on its surface changes. Your brain is able to get these bright and dark pattern information and determine that they are concave and convex parts on the surface.

Then you may ask: How do I know which points should be bright and which ones should be dark? This is not difficult. The vast majority of people live in this environment-most of the light sources in this environment come from the top (for example, the main light in the day is from the sun, and the main light in the night is from the fluorescent light on the ceiling ). So the tilting area is brighter, and the tilting area is darker. Therefore, when your eyes see a bright and dark area on an object, you can determine its concave and convex. Relatively bright blocks are determined to be in the upward direction, while relatively dark blocks are determined to be in the downward direction. So I just need to color the lines on the object.

If you want more evidence, there is an almost identical image, unlike the previous one, which rotates 180 degrees. So it is the reverse image of the previous image. The areas that previously appeared to be concave and now seem convex.
　　　　

At this time, your brain is not completely deceived. The visual impression in your mind makes you still have the ability to determine that this is the previous figure, but its light source has changed, your brain may be forced to figure it as the first image. In fact, as long as you keep staring at it and try to imagine that light shines in the lower right corner, you will understand it as concave, you can easily determine these images as protruding images, but with the impression of the previous comparison, you may notice that these blocks are actually concave, it's just that the judgment method does not conform to our daily habits, because at this time, most of the light is not from the top, but from the bottom up ).

(2) What is a Bump Map)

A concave-convex chart is similar to a texture chart. However, the difference is that a concave-convex chart contains not the color information, but the concave-convex information. The most common method is to store the height value. We need to use a gray texture map. The gray brightness shows the protruding points of each point (see the picture on the right ). This is a very convenient way to save the concave and convex chart, and this graph is easy to create. How is this figure used by the Renderer? You can see it later.

Of course, you don't have to limit yourself to these simple graphics. You can expand and use it for wood, stone, and painted walls, do anything you want to do.
　　　　

(3) How does it work?

Concave-convex ing is an extension of Phong Shading Technique, but in complementary rendering, the normal on the polygon surface is changed, and this vector is used to calculate the brightness of the point. When you add a concave-convex ing, the normal vector will slightly change. How to change it is based on the concave-convex map. Changing the normal vector changes the color value of the polygon point. That's simple.

There are several ways to achieve this (Translator's note: This goal refers to changing the normal vector ). I have not actually compiled a program for complementary rendering and concave-convex ing, but here I will introduce a method I like to implement it!

Now we need to convert the height information in the concave-convex chart into the adjustment information of the normal used for complementary rendering. This is not difficult to do, but it is difficult to explain.

　　　　
Okay. Now we can convert the bitmap information into some small vectors. A vector corresponds to a vertex. See the enlarged concave and convex chart on the left. Relatively bright points are more prominent than relatively dark points. Are you clear? Calculate the vectors of each vertex. These vectors represent the skew of each vertex. See the description. The red dot in the figure indicates that the vector is down:
　　　　

There are many vector calculation methods. Different methods have different precision, but the method you choose depends on what level of accuracy you require. The most common method is to calculate the skew of X and Y on each point separately:

X_gradient = pixels (x-1, y)-pixel (x + 1, y)
Y_gradient = pixel (x, Y-1)-pixel (x, y + 1)

After the two skew degrees are obtained, you can calculate the normal of the polygon point.

　　　　

There is a polygon, and a normal vector -- n is drawn on the figure. In addition, there are two vectors that will be used to adjust the normal vector of the point. These two vectors must be aligned with the concave and convex map of the currently rendered polygon. In other words, they must use the same axis as the concave and convex chart. The following figure shows the concave and convex charts and polygon. The two pairs both show the U and V vectors (note: the two axes of the 2D coordinates of the plane ):

　　　　

Now you can see the new line vector after adjustment. This adjustment formula is simple:

New_Normal = Normal + (U * x_gradient) + (V * y_gradient)

With the new line vector, you can use the complementary rendering technology to calculate the brightness of each point in the polygon.