Introduction
After reading the source code of a library, WebGL was used in it, and I started looking for WebGL information. I found a lot of relevant knowledge points, and organized records according to my own understanding habits.
Introduction
WebGL is a cross-platform, free, open web standard for primary 3D graphics API OpenGL ES High-performance interactive 3D and 2D graphics can be rendered in any compatible web browser without the use of plug-ins. It can be used in JavaScript through the Canvas element of HTML5. WebGL 1.0 based on OpenGL ES 2.0, WebGL 2.0 based on OpenGL ES 3.0. For the current browser support, see Can I use WebGL?
WebGL official guidance related resources, see here , feeling somewhat slow to load browsing, a separate download to Github: WebGL 1.0 , WebGL 2.0 .
OpenGL ES is a cross-platform, free API for rendering advanced 2D and 3D graphics on embedded and mobile systems (including consoles, mobile phones, devices, and vehicles). It is a subset OpenGL
OpenGL is the most widely used 2D and 3D graphics API in the industry, bringing thousands of applications to various computer platforms. It is independent of the window system and operating system. OpenGL exposes all the functions of the latest graphics hardware.
The OpenGL specification strictly stipulates how each function should be executed and their output value. As for the specific implementation of each internal function, it will be determined by the developer of the OpenGL library. Therefore, the same API in different systems may exhibit inconsistent behavior.
The programming language corresponding to OpenGL ES is OpenGL ES Shading Language (GLSL ES), which is based on OpenGL Shading Language (GLSL). GLSL is the main shading language of OpenGL. Its style is similar to that of C language. It is tailor-made for graphics calculations. It contains some useful features for vector and matrix operations.
The following concepts are mostly about OpenGL, since the core of WebGL is still based on OpenGL, it is also helpful to understand.
state machine
state machine (FSM) is a computational mathematical model, an abstract machine that can be in a finite state at any given time. FSM can change from one state to another based on some inputs.
OpenGL itself is a huge state machine: a series of variables describe how OpenGL should behave at the moment. Many global variables can be seen in OpenGL related programs, some of which are output variables and some are input variables.
Graphics rendering pipeline
In OpenGL, everything is in 3D space, while screens and windows are 2D pixels. This causes most of OpenGL's work to be about converting 3D coordinates into 2D pixels that fit the screen. The process of converting 3D coordinates to 2D coordinates is managed by OpenGL's graphics rendering pipeline (Graphics Pipeline).
The graphics rendering pipeline can be divided into several stages, and each stage will take the output of the previous stage as input. All these stages are highly specialized and can be easily executed in parallel. It is precisely because of their parallel execution characteristics that most graphics cards today have thousands of small processing cores. They run their own small programs for each (rendering pipeline) stage on the GPU, thereby quickly moving in the graphics rendering pipeline. Data processing. These small programs are called shader (Shader).
Below is an abstract display of each stage of a graphics rendering pipeline. Note blue part representatives inject custom shaders, which is programmable.
The data input as the graphics rendering pipeline is called vertex data (Vertex Data). Vertex data is a collection of a series of vertices. A vertex is a collection of 3D coordinate data. The vertex data is represented by Vertex Attribute, which can contain any data we want.
The input data will enter the first processing stage of the graphics rendering pipeline: the vertex shader.
Vertex shader
vertex shader (Vertex Shader) is programmable, and its main purpose is to convert 3D coordinates into standardized device coordinates. It also creates memory on the GPU to store vertex data, and configures how OpenGL interprets these memory and specifies how to send it to the graphics card. The vertex shader allows us to perform some basic processing of vertex attributes.
Vertex-related information is stored in the vertex buffer object (Vertex Buffer Objects, VBO), which stores a large number of vertices in GPU memory (usually called video memory). The advantage of using these buffer objects is that a large amount of data can be sent to the graphics card at one time, rather than once per vertex. When the data is sent to the memory of the graphics card, the vertex shader can access the vertices almost immediately, which is a very fast process.
Then enter the primitive assembly stage.
Primitive assembly
primitive assembly (Primitive Assembly) takes all the vertices output by the vertex shader as input, and all the points will be assembled into the shape of the specified primitive. The basic shapes of primitives are:
- point
- String
- triangle
The output of the primitive assembly stage is passed to the geometry shader stage.
Geometry shader
geometry shader (Geometry Shader) is programmable. It takes a set of vertices in the form of primitives as input. It can construct new (or other) primitives by generating new vertices to generate other shapes.
The output of the geometry shader will be passed to the rasterization stage.
Rasterization
rasterization (Rasterization) will map primitives to corresponding pixels on the final screen, generating fragments (Fragment) for use by the fragment shader. Before running the fragment shader performs cutting (Clipping). Cropping discards all pixels beyond the view to improve execution efficiency.
Fragment shader
(Fragment Shader) is programmable, the main purpose is to calculate the final color of a pixel, which is where all OpenGL advanced effects are generated. Usually, the fragment shader contains 3D scene data (such as lighting, shadows, light color, etc.), these data can be used to calculate the color of the final pixel.
After all the corresponding color values are determined, the final object will be passed to the final stage: test mixing.
Test mix
test mixing (Tests And Blending) stage detects the corresponding depth (and template (Stencil)) value of the fragment, and uses them to determine whether this pixel is in front of or behind other objects, and decides whether it should be discarded. This stage also checks the alpha value (the alpha value defines the transparency of an object) and blends the object. Therefore, even if the output color of a pixel is calculated in the fragment shader, the final rendered pixel color may be completely different.
Shaders in WebGL
The main shaders written in WebGL are vertex shaders and fragment shaders. For specific implementation, see JavaScript WebGL to draw a straight line .
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。