follow me ~ Let's understand together-Data Visualization/Graphics/WebGL/Shader

background

The column "Data Visualization and Graphics" has been created for a long time, and I have been thinking about how to develop this series for a long time (the output of the column is much more difficult than the fragmented output~):

1. How to streamline and condense the relevant knowledge system.
2. How to fragment the series of knowledge and articles.
3. How each chapter connects the previous and the next, and can be combined with the whole.
4. The most important point, the first one is suitable...

In short, in the entanglement, it has been difficult to write. One day, one day.... There are always more than a dozen articles in the draft box. I figured it out later. I try my best to get everyone's opinions on the way and speed up the improvement. Then start our "Data Visualization and Graphics"

Outline of this article

1. Introduction to graphics and visualization
2. How to start an engineer/front-end er
3. GPU rendering pipeline
4. webgl introduction & coding

1. What is graphics? What is data visualization?

Graphics

Graphics: Use mathematical formulas/function basic theories to express in graphical form
Briefly introduce a few points:

1. Speaking of graphics, don't just think of games, there are many applications in industry, medicine, film and television... a wide range of fields
2. Graphics not only refers to rendering, but also mathematics (calculation), art, physics... etc.
3. If you want to learn graphics well, it is not enough to know the API, but to learn (mathematics/physics)
4. Graphics talents/knowledge accumulation/documentation/advanced technology: too scarce, big guys and newbies hurry in and work together

Discussing graphics involves a little bit of image processing, so let’s just talk about it briefly. Image processing is the opposite of graphics logic inputting graphics and outputting mathematical formulas/functions.

data visualization

Data visualization: transform data into interactive graphics or images, etc. data visualization mainly aims to convey and communicate information clearly and effectively with the help of graphical sections

Before talking about visualization, it is more said that it belongs to the CG (computer graphics) category. Later, the development momentum became stronger and stronger, and it gradually got out of it. There are applications of data visualization in the fields of knowledge graph/medical and so on.

2. How to start a software engineer/front-end er

A brief answer from some practical questions:

• Part of the visualization is needed for business requirements
• Want to go deeper into graphics/visualization, but the skills are missing (language, mathematics...)
• Don't know how to start (engineer in various fields)
• ...

A simple answer based on this:

1. The business demand-led visualization framework is certainly a powerful tool, but you will be missing something to find its internal beauty. Someone will say, is it okay to read the source code? Yes. But this workload may be greater. It is not necessarily the most effective way.
2. In-depth graphics/visualization direction is confused. I'm also hitting a wall at this point, so I can only say to share the pits I have stepped on. Reading the mathematics derivation formula of philology.. This is a long process that needs to be condensed, needs to be classified (layered), and secondly packaged and pushed to the field of view of more people. (Unfortunately, there is very little relevant information, because graphics is really difficult...)
3. Engineer doesn't know how to start? First of all, under the blessing of the role of engineer. At the very least, don’t worry too much about the language. Take the front-end er as an example, of course, start with webGL (of course, I still believe that API is only API.. Using API is not the best way to use graphics) But it is feasible to drive your learning with problems.

3. GPU rendering pipeline

Make it clear that there are differences in the GPU rendering pipelines of different series

GPU encoding is different from CPU. Debug does not exist... There is no memory intersection... In short, you will like it~
Please see the picture below:

• Image source network invasion

1. Basic information of CPU computing nodes (quantity)
2. GPU Vertex Shader for vertex rendering
3. primitives Generation is responsible for structure generation (link/triangle)
4. Rasterization
5. Fragment Shader (coloring)
6. Testing Blending (Alpha Transparency)
7. final render rendering (image rendering)

Rasterization: The process of converting vertex data into fragments (a simple understanding is to find the graphics and convert the pixels covered)

The coloring process is generally linear supplement (for example, 0-1 interval will be linearly supplemented 0.1 0.2...)

Introduction to webgl coding

WebGL (Web Graphics Library) is a JavaScript API that can render high-performance interactive 3D and 2D graphics in any compatible web browser without the use of plug-ins. WebGL does this by introducing an API that is very consistent with OpenGL ES 2.0, which can be used in the HTML5 <canvas> element. This consistency allows the API to take advantage of the hardware graphics acceleration provided by the user device.

It is added that OpenGL is also a rendering API. ES means embedded (Google/baidu). The two APIs are very similar. Connect to the unified back post

coding

First of all, MDN webGL related introduction is more comprehensive and Tutorial (tutorial) is very suitable for getting started. You can go and learn. But in-depth still need to refer to some learning materials (you can do some ray tracing, refraction...graphics welcome you)

Summary of the coding process

1. init shader(vertex,fragment) compile
2. create attrbute buffer (coding no buffer)
3. draw

Come on, show that the smallest program effect is to draw a rect

html

<!-- 画布 -->
<canvas id="myDiagram" width="200" height="200"></canvas>
<!-- webgl utils -->
<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>

JavaScript

// init shader(vertex,fragment) 
const vs = `
// vertex shader
void main() {
  gl_Position = vec4(0, 0, 0, 1);  // 居中
  gl_PointSize = 120.0; //大小
} 
`;

const fs = `
// fragment shader
void main() {
  gl_FragColor = vec4(0, 0, 0, 1);  // 黑色
}
`;
// setup 
//create program & use program
const program = webglUtils.createProgramFromSources(gl, [vs, fs]);
gl.useProgram(program);

const offset = 0; 
const count = 1;
// 绘制函数 drawArrays 
// gl.POINTS 内置绘制方式 
// offset 偏移 
// count 个数
gl.drawArrays(gl.POINTS, offset, count);

So easy webgl will learn... Haha, it's not that simple. We will do it slowly

At last

The writing of the series of articles is so difficult...how can the series of videos be good! Everyone has more opinions~

The subsequent visualization direction will be a little more, the mathematics will be a little more, and the physics will be a little more... Let's go!

The mathematics (algorithm) is beautiful: quadtree , 060dd21af5cfea are all good things...I can’t wait to write it (brain cluster-kmeans....

If you need to add a WeChat group to contact me~