[WebGL entry] 3. Basic 3D drawing knowledge, webgl3d

[WebGL entry] 3. Basic 3D drawing knowledge, webgl3d

Note: The article is translated from http://wgld.org/, the original author shanbenya (doxas). If I have additional instructions in the article, I will add [lufy:]. In addition, the research on webgl is not in-depth enough, and some professional words are required, if the translation is incorrect, please correct me.

2D and 3D

3D space-the real world we live in is a 3D space.

In a 3D world, everything is made up of vertical, vertical, and depth. Recreating these things is a real-time 3D rendering. However, to reproduce this 3D space, we implemented it on a 2D display.

The screen of the computer and mobile phone is a 2D display. At least there is no 3D display device yet. Of course, there may be research areas, but ordinary families certainly do not.

WebGL can be used to simulate 3D space, but the output must be displayed on a two-dimensional display. The frontend and backend relationships determined by depth are amplified and reduced based on the distance. These operations must be performed in advance to obtain the results.

OpenGL, DirectX, and other basic computing methods from 3d to 2D are generally not changed. Of course, the same is true for WebGL.

Right hand? Left hand? Coordinate System

Although 3D computing is basically the same, there is a small difference between DirectX and OpenGL.

When talking about the differences between DirectX and OpenGL, we often use the coordinate system as an example. Is to use the left-hand or right-hand coordinate system. OpenGL uses the right-hand coordinate system.

It is an illustration of the right coordinate system.

Is the diagram of the left-hand coordinate system.

In comparison, the zcoordinate direction is different. Which coordinate system is the same for x and y coordinates.

Except for the zcoordinate processing, the coordinate system does not have the concept of depth, so it is unnecessary to think too complicated. WebGL is a branch of OpenGL. Of course, it uses the right-hand coordinate system.

Coordinate Transformation

Whether DirectX or OpenGL is used, 3D intelligence must be transformed to two-dimensional intelligence. As I said at the beginning, the final images are displayed on a two-dimensional display.

At this time, coordinate transformation is required. Coordinate transformation can be roughly divided into three types. These correct combinations ultimately determine the position on the display.

For example, the 3D conversion to two-dimensional is a camera. The photos and images have all been changed to two-dimensional through the camera, and finally are output into photos and animations.

Imagine taking a photo with a camera. Let's try to understand the coordinate transformation.

Model Transformation

The first of the three coordinate transformations is model transformation. Although it is generally called model transformation in OpenGL processing, it is called World transformation in DirectX.

Model Transformation refers to coordinate transformation to define the position of a reference object in a three-dimensional space. Unlike the real world, the three-dimensional space in the program defines the benchmark of the center of the world, that is, the origin. Starting from this origin, in order to know the relative position of the reference object, we need to perform the necessary coordinate transformation.

Assume that there is an apple in the virtual 3D space. In order to indicate the location of the apple, the corresponding model transformation is required.

View Transformation

The second of three coordinate transformations is view transformation.

View conversion defines the actual position of the lens and the direction of the lens. Taking Apple as an example, even if there is an apple in the 3D space, if the camera is not in the direction of the apple, the apple will not be seen. In addition, if you keep the camera away from Apple, you may not be able to see the apple.

In order to determine the camera position and angle, the coordinate transformation is called view transformation.

Projection Transformation

The last of the three coordinate transformations is the projection transformation.

This transformation defines the photographic area of a three-dimensional space. For example, horizontal photography or vertical photography, the farthest shooting distance, etc.

A general camera directly takes all the images in front of the camera, and basically has no consciousness as far as shooting. However, the program cannot simulate an infinite space. Therefore, there must be a clear range for where to start shooting and where to photograph.

The projection changes. Through the Law of distance, the objects that can be close to are relatively large, while objects in the distance are relatively small.

Summary

The content is a bit long. Let's summarize it.

When a program is used to simulate a 3D space, the final intelligence must be transformed into two-dimensional data. In addition, the processing of the Z axis varies with the platform. WebGL is the processing system of OpenGL and uses the right-hand coordinate system.

To simulate 3D space, it is necessary to convert the intelligence of 3D space to the intelligence of two-dimensional space. They are model transformation, view transformation, and projection transformation. These transformations are combined to determine the drawing content.

In order to use WebGL for development, the introduction of coordinate system and coordinate transformation knowledge is essential. Let's not talk about the details first. If you do not understand the general meaning, you will certainly be confused when dealing with the details later. At the minimum, the meaning of the three coordinate transformations must be remembered.

Next time, let's take a look at what preparations are required to use WebGL.

Reprinted Please note: