Simple Graphics (1)

I saw Ye Da's article Playing Computer Graphics with JavaScript (1) Introduction to Ray Tracing - Milo Yip - Blog Park , there are several small examples, so I will use C++ to implement these effects again.

bajdcc/GameFramework , this series has been stopped for a long time, but I didn't think of more interesting ideas. It's better to use it to practice. The reasons are: Direct2D rendering, support for lua scripts, and C++ writing. Because it is ray tracing, it can actually be said that it does not depend on any library, as long as there is a CPU to complete the calculation.

At present, only two effects have been made, and I will not repeat them in detail.

Code:

• https://github.com/bajdcc/GameFramework/blob/master/CCGameFramework/base/pe2d/RenderSphere.cpp (ray tracing)
• https://github.com/bajdcc/GameFramework/blob/master/CCGameFramework/base/pe2d/PhysicsEngine2D.cpp#L73 (colormap)

colormap

colormap

This is just a basic example of how to change color through pixel manipulation.

Our picture is like a second-order matrix, each color is an int, it's that simple.

The specific implementation process:

1. The window receives the WM_PAINT message and starts to enable Direct2D drawing
2. Our window is a tree-like window/control group, so the drawing operation is performed recursively
3. Show controls to perform drawing operations
4. Create an array of colors, modify it
5. Create a bitmap from an array and save it for reuse
6. Render the bitmap using Direct2D rendering operations

simple ray tracing

Ray tracing (left) and normal map (right)

I didn't understand the ray tracing on the left at first, until I realized it.

The implementation principle is very simple:

1. One eye, one ball, no light
2. The final result needs to be projected on a screen, and there is a distance between the screen and the eyes, just like the hand is bigger than a photo frame when taking pictures
3. Eyes, screen, ball, everything is ready (for details, please refer to Playing Computer Graphics with JavaScript (1) Introduction to Ray Tracing - Milo Yip - Blog Park The first picture)

The main operation:

1. Mark a point on the screen for each pixel
2. The eye forms a ray (ray) with those points
3. The ray is infinitely extended (tracing), you think of it as a laser
4. The laser may or may not be on the ball
5. For the laser that hits the ball, I just need to calculate the distance from the laser's starting point (eye) to the laser's ending point (where the laser meets the ball) .
6. The distance between the two (positive number) is finally mapped to 0-255, that is, RGB, and the pixel color is determined according to the RGB value
7. If the laser does not hit the ball, the corresponding pixel appears black

Manage the mapping relationship: 3D space --> 2D screen, distance --> pixel color .

On the right is a normal vector map, the difference is that the pixel color is not determined by the distance, but by the normal vector of the point .

When the laser hits the ball, we calculate the coordinates of the intersection, and also calculate the straight line from the laser to the point, which is actually the normal vector.

The normal vector equation has four parameters, but the scene here is very simple - the normal vector (unit vector) of the ball passes through the center of the sphere , so there are actually only three parameters, and we map the three parameters (-1~1) to RGB.

What to do next:

1. Play Computer Graphics with JavaScript (2) Basic Light Source - Milo Yip - Blog Park
2. Drawing light in C language (1): basics
3. Drawing light in C language (2): constructing solid geometry

Backed up by https://zhuanlan.zhihu.com/p/30864679 .