I want to discuss canvas 2D and webgl with you

Time:2021-10-22

background

This article is included inData visualization and graphicsspecial column

As mentioned above, I wrote my first column and realized a simple program for the cognition of graphics and visualization. It was originally intended that the follow-up sequence has focused on the algorithm and rendering direction. However, based on the students’ feedback on obscure problems in the wechat / QQ circle, more follow-up articles have been guided by the conclusion (the section produces results).

This article will not discuss the difference between canvas and webgl. I believe everyone knows

Outline of this chapter

  1. Introduction to canvas and webgl
  2. Can canvas webgl? How do they do it
  3. How to implement canvas API with webgl (compare differences)
  4. Da Dao Zhiyuan, devote yourself to practice (follow-up outline)

1. Introduction to canvas 2D and webgl

Canvas 2D

Basic concepts:

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

Rendering (principle) process:

I want to discuss canvas 2D and webgl with you

WebKit as an example

  1. Browser (JavaScript) canvas API
  2. Underlying graphics library skia (supporting CPU / GPU drawing)
  3. Select the drawing method according to whether the platform supports (Policy).

You can refer to the classes used to support canvas in WebKit (this article will not expand)
I want to discuss canvas 2D and webgl with you

WebGL

Basic concepts:
Webgl (Web Graphics Library) is a JavaScript API that can render high-performance interactive 3D and 2D graphics in any compatible web browser without using plug-ins. Webgl does this by introducing an API that is very consistent with OpenGL es 2.0, which can be used in HTML5 < canvas > elements. This consistency allows the API to take advantage of the information provided by the user deviceHardware graphics acceleration(different from canvas 2D).

Rendering (principle) process:

I want to discuss canvas 2D and webgl with you

WebKit as an example

  1. Shader/ res/texture/WebGL API
  2. Drawingbuffer
  3. GL library / GPU drawing

You can refer to the classes used to support the web in WebKit (this article will not expand)
I want to discuss canvas 2D and webgl with you

2. Can canvas webgl? How do they do it

Answer questions oriented:

  • Canvas 2D API is simple. Webgl API doesn’t understand why
  • Learning does not know how to start? (API Engineer? Gnawing books? Source code?)

Simple answer:

  1. First of all, understand that the simpler the API is, the more the upper layer must be (in terms of the upper layer, the play space is small and the limitations are large). Why is the API of canvas 2D 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, link… In short, it is difficult. Just look more.
  2. Too many people ask about learning this topic. For example, I have to look at the document. If coding is in-depth, I have to learn some other people’s outputs. (looking directly at the literature is also looking at the output of others, nothing more serious) there is no way. If the way is simpler, look at others’ sharing (it needs to be systematic sharing, and fragmented knowledge is not very helpful for the way of learning). Look at the framework (Library) implementation source code. It’s just the encapsulation of the API. Instead, I doubt life, because it involves some other knowledge, overall architecture design, data model, rendering, events and so on
  3. … leave a message for discussion. Wechat can also be added if necessary

3. How to implement canvas 2D API with webgl (compare differences)

Have a simple to learn, draw a rectangle:

I want to discuss canvas 2D and webgl with you

canvas

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

//js
//Get canvas element
var canvas = document.getElementById("canvas");
//Get rendering context
var ctx = canvas.getContext("2d");
//Draw style red
ctx.fillStyle = "red";
//API draw rect
ctx.fillRect(10,10,100,100);

WebGL

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

<!– webgl utils –>

<script></script>



// js
//Get rendering context
const gl = document.querySelector('#myDiagram').getContext('webgl');

//Vertex shader
const vs = `
// vertex shader
void main() {
  gl_ Position = vec4(0, 0, 0, 1);  //  Coordinate GL_ Start with webgl built-in variables
  gl_ PointSize = 100.0;      //  size
} 
`;
//Fragment shader
const fs = `
// fragment shader
void main() {
  gl_ FragColor = vec4(0, 0, 0, 1);  //  Color red
}
`;

//Shader program
const program = webglUtils.createProgramFromSources(gl, [vs, fs]);
//Using the shader program
gl.useProgram(program);

//Offset offset 
const offset = 0;
//Count number
const count = 1;
//Gl.points built in drawing mode 
//Draw function drawarrays 
gl.drawArrays(gl.POINTS, offset, count);

4. Da Dao Zhiyuan and devote himself to practice (follow-up outline)

Here should be a blank filling question (give some advice, it’s hard ~), simply put my ideas, and the order is to be determined

  1. Webgl rendering 2D
  2. Webgl rendering 3D
  3. Rendering optimization means quadtree (2d rendering) 3D rendering
  4. Lighting and shadows raycasting / raytracing
  5. Others (algorithm class, framework interpretation class…)

last

If you need to add wechat group, please leave a message… I will reply when I see it and post some links above.

  1. Canvas 2D tutorial
  2. Webgl tutorial
  3. Webgl principle of WebKit = = = = = it is written in detail