background

This article is included in the column Data Visualization and Graphics

I wrote my first column about how to move forward in the struggle and implemented a simple program for the cognitive section of graphics and visualization. It was intended that subsequent sequences had been algorithmic and render oriented. However, based on the feedback of obscure problems from classmates in WeChat /QQ circle, the following articles are more oriented to the conclusion (section produces effect).

We won’t discuss the differences between Canvas and WebGL in this post.

This outline

  1. Introduction to Canvas and WebGL
  2. Canvas or WebGL? How do you do it
  3. How to implement Canvas API with WebGL
  4. Great roads are far away, devoting oneself 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 using the < Canvas > element of JavaScript and HTML. It can be used for animation, game graphics, data visualization, image editing, and real-time video processing.

Render (principle) process:

Its for example

  1. Browser (JavaScript) Canvas API
  2. The underlying graphics library SKIA (supports CPU/GPU rendering)
  3. Select how to draw based on whether the platform supports (policy).

Refer to WebKit classes that support Canvas (we won’t expand them in this article).

WebGL

Basic concept: WebGL (Web Graphics Library) is a JavaScript API that renders high-performance interactive 3D and 2D graphics in any compatible Web browser without the need for plug-ins. WebGL does this by introducing an API that is very much in line with OpenGL ES 2.0, which can be used within the HTML5 < Canvas > element. This consistency enables the API to take advantage of the hardware graphics acceleration provided by the user’s device (unlike Canvas 2D).

Render (principle) process:

Its for example

  1. Shader/ res/texture/WebGL API
  2. DrawingBuffer (draw buffer)
  3. GL library /GPU rendering

Take a look at the Web-enabled classes in WebKit (we won’t expand them in this article)

2. Canvas or WebGL? How do you do it

Answer-oriented:

  • Canvas 2D API is not easy to understand WebGL API
  • Don’t know how to start learning? (API engineer? Test? The source code?
  • .

Here’s a simple answer:

  1. First of all, I need to understand that the simpler the API is, the higher the level will be (the upper level has small space and big limitations to be frank). Why is the API of Canvas 2D simple? Encapsulation is good and most of the work is hidden in the kernel implementation. WebGL need to consider the shader, buffer, texture, the program (program), the link (this seems to be transparent)… It’s hard. Just look around more.
  2. Learning this topic too many people ask, take me for example also have to see the document coding in-depth words also have to learn some other people’s output. (directly read the literature is also to see the output of others, nothing serious) have no way. If the path is easier, look to others to share (the need to share fragmented knowledge in a systematic way is not very helpful for the path of learning). Look at the framework (library) source code implementation of what, that is only API encapsulation. But I doubt life because it involves some other knowledge, the overall architecture design, data model, rendering, events and so on…
  3. . Leave a comment and discuss if you need to add WeChat

3. How to implement Canvas 2D API with WebGL

To learn a simple lesson, draw a rectangle:

canvas 

// html <! Var canvas = <canvas id="myDiagram" width="200" height="200"></canvas> //js // document.getElementById("canvas"); Var CTX = Canvas. GetContext (" 2D "); var CTX = Canvas. // FillStyle = red ctx.fillStyle = "red"; // API draws rect ctx.fillRect(10,10,100,100);

WebGL 

// html <! Width ="200" height="200"></canvas>

<! — webgl utils –>

< script SRC = "https://webglfundamentals.org/webgl/resources/webgl-utils.js" > < / script > / / js / / = const gl rendering context document.querySelector('#myDiagram').getContext('webgl'); Vertex shader const vs = '// vertex shader void main() {gl_Position = vec4(0, 0, 0, 1); // 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, the fs); // Use the shader program gl.useProgram(program); // offset offset const offset = 0; // count number const count = 1; // DraWarRays sl.DraWarRays (gl.POINTS, offset, count);

4. Adequate road, concentrate on cultivation (follow-up outline)

Should be fill in the blank here (give a point of opinion good difficult ~), say my idea below simply order to be determined….

  1. WebGL renders 2D pieces
  2. WebGL renders 3D posts
  3. Quadtree (2D rendering) 3D rendering…
  4. Raycasting/Raytracing…
  5. Others (algorithm class, framework reading class…)

The last

If you need to add WeChat group, please leave a message… I’ll post some of the links above as soon as I see them.

  1. Canvas 2 d tutorial
  2. WebGL tutorial
  3. WebKit of WebGL principle ==== write pretty fine