I want to discuss Canvas2D and WebGL with you

background

This article is included in "Data Visualization and Graphics" column

The above talked about forging ahead in entanglement, and wrote the first column article on the cognition of graphics and visualization to realize a simple program. I originally planned to focus on the algorithm and rendering direction of the follow-up sequence. However, the follow-up article is more oriented to the conclusion (effects of the subsections) to carry out the study based on the feedback of the obscure problems from the students in the WeChat/QQ circle.

This article will not discuss the difference between canvas and webGL, I believe everyone understands...

Outline of this article

1. Introduction to Canvas and WebGL
2. Can canvas not WebGL? How do the two start
3. How the canvas API is implemented with WebGL (compared to the difference)
4. Dao Zhiyuan, concentrate on practicing (follow-up outline)

1. Introduction to Canvas 2D and WebGL

Canvas 2D

Basic concept:

The Canvas API provides a way to draw graphics through the <canvas> element of JavaScript and HTML. It can be used for animation, game graphics, data visualization, picture editing, and real-time video processing.

rendering (principle) process:

WebKit as an example

1. Browser (JavaScript) canvas API
2. Skia, the underlying graphics library (supports CPU/GPU drawing)
3. Select the drawing method according to whether the platform supports (strategy).

You can refer to the classes used to support Canvas in WebKit (this article will not expand)

WebGL

Basic concept:
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 use the hardware graphics acceleration provided by the user device (different from canvas 2D).

rendering (principle) process:

WebKit as an example

1. Shader/ res/texture/WebGL API
2. drawingBuffer (drawing buffer)
3. GL library/GPU drawing

You can refer to the classes used to support the Web in WebKit (this article will not expand)

2. Can canvas not WebGL? How do the two start

Answering questions oriented:

• Canvas 2D API is simple and WebGL API does not understand why
• Don't know how to start learning? (API engineer? Gnaw books? Source code?)
• ...

A simple answer based on this:

1. First of all, understand that the simpler the API, the higher the upper level (the upper level is straightforwardly speaking, the space is small and the limitations are large). Why is the canvas 2D API simple? The encapsulation is perfect and most of the work is hidden in the implementation of the kernel. WebGL needs to consider shader, buffer, texture, program (program), link (this one seems to be transparent)... In short, it is difficult. Just take a look.
2. Too many people have asked me about this topic. For example, I have to look at the document coding. If it goes in depth, I have to learn some other people's output. (Looking directly at the literature is also looking at the output of others, nothing is more true) There is no way. If that path is simpler, look at other people's sharing (it needs to be a systematic sharing of fragmented knowledge that is not very helpful for the path of learning). Depending on the source code of the framework (library), that is only the encapsulation of the API. Instead, I suspect that life involves some other knowledge, overall architecture design, data model, rendering, events, etc...
3. ...Leave a comment and discuss it, you can add WeChat

3. How Canvas 2D's API is implemented with WebGL (compared to the difference)

Have a simple learning, draw a rectangle:

canvas

// html
<!-- 画布 -->
<canvas id="myDiagram" width="200" height="200"></canvas>

//js
// 获取canvas元素
var canvas = document.getElementById("canvas");
// 获取渲染上下文
var ctx = canvas.getContext("2d");
// 绘制样式  红色
ctx.fillStyle = "red";
// API 绘制rect
ctx.fillRect(10,10,100,100);
    

WebGL

// html
<!-- 画布 -->
<canvas id="myDiagram" width="200" height="200"></canvas>

<!-- webgl utils -->

<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>



// js
// 获取渲染上下文
const gl = document.querySelector('#myDiagram').getContext('webgl');

// 顶点 vertex shader
const vs = `
// vertex shader
void main() {
  gl_Position = vec4(0, 0, 0, 1);  // 坐标  gl_开头都为webgl内置变量
  gl_PointSize = 100.0;      // 大小
} 
`;
//片元 fragment shader
const fs = `
// fragment shader
void main() {
  gl_FragColor = vec4(0, 0, 0, 1);  // 颜色 红色
}
`;

//  shader程序
const program = webglUtils.createProgramFromSources(gl, [vs, fs]);
// 使用 shader程序
gl.useProgram(program);

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

4. Dao Zhiyuan, devote yourself to practice (follow-up outline)

This should be a fill-in-the-blank question (it's difficult to give some advice), let's briefly talk about my thoughts and the order is to be determined...

1. WebGL rendering 2D articles
2. WebGL rendering 3D
3. Rendering optimization means quadTree (2d rendering) 3d rendering...
4. Light and shadow RayCasting / RayTracing...
5. Other (algorithm, frame interpretation...)

At last

If you need to add a WeChat group, please leave a message... I will reply to some of the links above if I see it.

1. Canvas 2D Tutorial
2. WebGL tutorial
3. WebKit's WebGL principle ==== written very detailed