Basic doubts about JavaScript WebGL

Introduction

Try JavaScript WebGL After drawing a straight line finally familiar with it, but there are still some doubts, so I will record it here.

• Origin
• My GitHub

Why should the vertex coordinate range be between -1.0 and 1.0?

In the example of drawing a straight line, if you modify the vertex coordinates according to the size of the Canvas, it is found that most of the corresponding points cannot be seen. According to the information, the x, y, and z coordinates of each vertex should be between -1.0 and 1.0, and the vertices beyond this coordinate range will not be visible. The reason is that the conversion of multiple coordinate systems is involved in the whole process.

The advantage of multiple coordinate system conversion is that some operations or calculations are meaningful and more convenient and easier in a specific coordinate system. When a vertex is finally displayed on the screen, it mainly undergoes the following coordinate system transformations:

1. The local coordinate (Local Coordinate) in the local space of is the starting coordinate of the object.
2. Then through model matrix transformation, it becomes world coordinate (World Coordinate) in world space. These coordinates are relative to the global origin of the world, and they will be placed relative to the origin of the world together with other objects.
3. Then through the observation matrix transformation, it becomes the observation coordinate (View Coordinate) of the observation space, so that each coordinate is observed from the camera or the observer's angle.
4. Then it needs to be projected to the clipping coordinate (Clip Coordinate) of the clipping space. The clipping coordinates will be processed to the range of -1.0 to 1.0, and it will be judged which vertices will appear on the screen.
5. Finally, transform the cropping coordinates into the screen coordinates (Screen Coordinate) in the screen space, using a process called Viewport Transform. The viewport transformation transforms the coordinates in the range -1.0 to 1.0 to the coordinates defined glViewport The transformed coordinates will be sent to the rasterizer and converted into fragments.

Is the data buffered multiple times overwritten or incremental?

Buffering is divided into types, try the gl.ARRAY_BUFFER type every time the same variable will overwrite the previous data.

This is based on drawing a straight line example , and at the end only a vertical straight line is drawn:

  let vertices = [-0.5, 0, 0.0, 0.5, 0, 0.0]; // 水平直线
  let vertices2 = [0, 0.5, 0.0, 0, -0.5, 0.0]; // 垂直直线
  setBuffers(glContext, vertices);
  setBuffers(glContext, vertices2);

vertexAttribPointer is enough to parse the vertex once?

In scenes that are frequently drawn, vertexAttribPointer need to re-parse the vertex every time, or is it enough to parse it once?

Based on the example of drawing a straight line, try to find:

1. It is necessary to ensure that the data has been buffered before the function can be parsed effectively.
2. Every time the buffer is updated, it needs to be re-parsed to take effect.

enableVertexAttribArray method is similar.

Is it enough to activate the useProgram function once?

In frequently drawn scenes, 161b6a22c64375 need to be reactivated?

On the basis of drawing a straight line example, try to find that only needs to activate once, which is the example .

What is the coordinate system based on?

The coordinate system based on is the right-handed coordinate system.

Follow the steps below:

• Extend your right arm along the positive y axis and point your finger upward.
• The thumb points to the right.
• Point your index finger upward.
• The middle point is bent down 90 degrees.

If your actions are correct, then your thumb is pointing in the positive x-axis direction, your index finger is pointing in the positive y-axis direction, and your middle finger is pointing in the positive z-axis direction.

What are the common types of variables?

Taken from the official WebGL 1.0 card index.

Storage qualifier

• const: Compile-time constant, or read-only function parameter.
• attribute: Use this modified variable to indicate that it is used for the link between the vertex shader and OpenGL ES.
• varying: Use this modified variable to indicate that it is used for the link between the vertex shader and the fragment shader.
• uniform: The variable modified with this represents a global and unique variable, which can be accessed at any stage, and the value of the variable will always be saved.

basic type

type	meaning
void	Function with no return value or empty parameter list
bool	Boolean value
int	Signed integer
float	Floating-point scalar
vec2, vec3, vec4	2/3/4 component floating point vector
bvec2, bvec3, bvec4	Boolean vector of 2/3/4 components
ivec2, ivec3, ivec4	Signed integer vector of 2/3/4 components
mat2, mat3, mat4	2x2, 3x3, 4x4 floating point matrix
sampler2D	2D texture
samplerCube	Stereo map texture

What are the built-in input/output variables?

Taken from the official WebGL 1.0 card index.

Vertex shader special variables

enter:

variable	describe	Unit or coordinate system
highp vec4 gl_Position;	Convert vertex position	Shear coordinates
mediump float gl_PointSize;	Change point size (point rasterization only)	Pixel

Fragment shader special variables

enter:

variable	describe	Unit or coordinate system
mediump vec4 gl_FragCoord;	Fragment position in the frame buffer	Window coordinates
bool gl_FrontFacing;	The fragment belongs to the forward primitive	Boolean value
mediump vec2 gl_PointCoord;	Fragment position within a point (point rasterization only)	Each component from 0.0 to 1.0

Output:

variable	describe	Unit or coordinate system
mediump vec4 gl_FragColor;	Fragment color	RGBA color
mediump vec4 gl_FragData[n]	Color of the fragment of color attachment n	RGBA color

Reference

• WebGL lessons
• Coordinate system