【Web Graphics 】 Introduction to Web graphics system

preface

As a student, I learned front-end development, and later I was mainly engaged in H5 game development, and gradually became interested in graphics. Therefore, I made some notes and accumulated on Web graphics based on my current skills, and also shared them for everyone’s reference and learning. This first article is an introduction to graphical rendering used in Web development.

Render graphics in the browser

On the Web, graphics are usually drawn in a browser. Modern browsers are complex systems in which the part responsible for drawing graphics is the rendering engine. The rendering engine draws graphics in the following four ways.

HTML + CSS

Web development mainly uses HTML to describe structure, CSS to describe presentation, and JavaScript to describe behavior.

HTML and CSS are used relatively infrequently and in different ways for graphic rendering. Therefore, some people believe that graphic rendering can only use SVG and Canvas, instead of HTML and CSS.

This idea is wrong, in fact, the modern browser HTML, CSS performance is very powerful, can achieve the normal chart display, for example, we common bar chart, pie chart and line chart, of course, can also be used to make games.

Circular pie chart drawn using HTML + CSS

The author student times use HTML + CSS to do 2048 small games

Using HTML + CSS to render graphics has the following advantages:

Represented in the DOM, the event binding is distributed directly by the browser to the corresponding node
It is helpful to understand the graphics ideas of CSS, for example, much of the theory of CSS is visually related.
Some simple ICONS, CSS to achieve very good, both can simplify the development, there is no need to introduce additional libraries, save resources, improve the speed of web pages.

Of course, HTML + CSS is not used as the main rendering graphics technology, which has the following disadvantages:

Drawing is not simple, from the CSS code, it is difficult to see the corresponding relationship between data and graphics, a lot of conversion needs to develop to do.
When the graph changes, we are likely to have to redo the entire work, and the performance overhead is huge.

Web development focuses on processing ordinary text and multimedia information, rendering ordinary, easy-to-read text and multimedia content, while graphics development focuses on processing structured data, rendering various relatively complex charts, graphic elements, animation and so on.

SVG

Scalable Vector Graphics (SVG), SVG is an image format based on XML syntax that can be loaded with the SRC attribute of a picture (the IMG element).

According to the W3C, SVG is an image format based on XML syntax that describes drawings through XML documents. What do you mean? In plain English, SVG uses the label element DOM to draw graphics, and uses the DOM API to manipulate SVG elements just like normal HTML elements. Even CSS can work with embedded SVG elements.

Compared with Canvas, SVG is an old ancestor. It was already a W3C standard in 2003. However, due to its complex appearance and a little unambitious, it has been developing very slowly for more than ten years.

Draw circles in SVG

I found it online.SVG animationI had no idea SVG could make such cool animations

SVG draws diagrams in much the same way that HTML and CSS draw, except that HTML tags are replaced with SVG tags, using some of the special attributes supported by SVG, which is an enhanced version of HTML.

SVG is a lossless format. This means that it does not lose any data when compressed and takes on a different color. Most commonly used for graphics and logos on the Web and items that will be viewed on a retina or other high-resolution screen.

So SVG has the following advantages:

Support event handlers.
Resolution independent, the vector format can render any size without compromising its quality.
SVG is a lossless format. This means that it does not lose any data when compressed and takes on a different color. Most commonly used for graphics and logos on the Web and items that will be viewed on a retina or other high-resolution screen.

Similarly, SVG has similar disadvantages to HTML:

SVG elements, like HTML elements, need to be parsed, layout computed, and rendered tree generated before output graphics.
High complexity can slow down rendering (any application that overuses the DOM is not fast).

A large number of SVG elements not only take up a lot of memory, but also increase the overhead of the engine, layout calculations, and rendering tree generation, reducing performance and rendering speed. This makes SVG suitable only for simple visualizations with fewer elements.

SVG is powerful and flexible, and some effects are simple to implement (such as the effect of text clinging to bezier curves). But each SVG is a DOM element, and after a certain point there will inevitably be a noticeable lag, because interactions that cause elements to change (position, style, add, delete, edit, etc.) trigger reflow, which triggers repaint, Reflow of a node is likely to result in reflow of a child node or even a parent node or sibling node, and reflow has a high performance cost.

SVG is already struggling to deal with thousands of levels.

Canvas2D

One of the contexts in the browser-provided Canvas API that makes it very easy to draw basic 2D geometry.

Canvas is a new label provided by HTML5 and just started to be supported by IE9. Canvas is a rectangular Canvas, and you can use JS to control every pixel to draw on it. Canvas tag uses JavaScript to draw images on web pages and does not have the drawing function itself. It provides Canvas 2D and WebGL contexts to draw graphics respectively.

What are the recommended open source JavaScript Canvas libraries, and what are their advantages and disadvantages?

WebGL

Another context in the Browser-provided Canvas API, which is the Web side implementation of the OpenGL ES specification (OpenGL is the most commonly used cross-platform graphics library), is relatively low-level.

WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas, which makes use of the parallel processing feature of GPU, which makes its performance much better than the first three drawing methods when processing a large amount of data presentation.

In general, Canvas2D is good enough to draw graphics, but there are three cases where it is necessary to directly manipulate a more powerful GPU for drawing

The number of shapes to draw is very large, such as tens of thousands of geometric shapes to draw, and their positions and directions are constantly changing
Pixelated details of larger images, such as light and shadow effects on objects, fluid effects and some complex pixel filters
Draw 3D objects. Since WebGL has built-in features such as projection and depth detection of 3D objects, rendering 3D objects with it does not require us to do our own low-level coordinate processing.

Canvas2D still suffers from performance bottlenecks when there are too many graphics to draw or when dealing with a large number of pixel calculations.

Canvas2D and WebGL are both contexts provided by the Canvas tag, so they share the same advantages and disadvantages:

Page rendering performance is less affected by graph complexity.
Canvas provides more primitive functions, suitable for pixel processing, dynamic rendering and large amount of data drawing.
Canvas has no reflow concept, only repaint concept, so performance is much better than SVG and HTML/CSS.

Relative to the above two rendering, there are the following disadvantages:

Weak text rendering capability.
Depending on the resolution, not efficient fidelity, performance is poor when the canvas is large.
There is no API to implement animations, you have to rely on timers and other events to update the Canvas
Event handlers are not supported. Event distribution is handled by canvas, and events of drawn content need to be handled by itself.

Directive programming VS declarative programming

As for the use of drawing rendering in the above 4, in a nutshell, we can write code in two ways: Declarative and Imperative.

There is also a kind of Functional programming that is not covered in this sharing.Declarative and imperative programming in Web development

In fact, it is not difficult to understand, in the process of front-end development, in the use of HTML, CSS, JS can experience the difference of different programming paradigms.

Programming paradigm	define	example	The drawing mode
Declarative programming	Tell the machine what you want, and let the machine calculate how to do it	SQL, declarative UI	HTML + CSS 、SVG
Imperative programming	Tell the machine what to do and get what it wants	General programming, C++	Canvas2D, WebGL

Drawing using a WEB graphics system

With the understanding of programming paradigms above, let’s actually experience different programming paradigms and graphical system drawing.

Draw a triangle using the above four drawing methods

HTML + CSS

<div class="box">
    <div id="htmlDemo"></div>
</div>
Copy the code

#htmlDemo {
    width: 0;
    height: 0;
    border-bottom: 200px solid yellow;
    border-top: 0px solid transparent;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
}
Copy the code

SVG

<div class="box">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <! -- Polygon -->
        <polygon points="0,200 100,0 200,200" style="fill: blue" />
    </svg>
</div>
Copy the code

Canvas2D

<div class="box">
    <canvas id="canvas" width="200" height="200"></canvas>
</div>
Copy the code

// Step 1: Get the canvas context
const canvas = document.querySelector('#canvas') as HTMLCanvasElement;
const context = canvas.getContext('2d');

// Step 2: Use the Canvas context to draw the graph.
context.save();
context.fillStyle = 'green';
context.beginPath();
context.moveTo(canvas.width / 2.0);
context.lineTo(0, canvas.height);
context.lineTo(canvas.width, canvas.height);
context.fill();
context.restore();
Copy the code

WebGL

// Step 1: Create a WebGL context
const canvas = document.querySelector('#webgl') as HTMLCanvasElement;
const gl = canvas.getContext('webgl');

// Step 2: Create webGL program
// Vertex shader
const vertex = ` attribute vec2 position; Void main() {gl_PointSize = 1.0; Gl_Position = vec4(position, 1.0, 1.0); } `;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.compileShader(vertexShader);

// Chip shader
const fragment = ` precision mediump float; Void main() {gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(fragmentShader);

// Create a webGL program
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// Step 3: Store the data in the buffer
const points = new Float32Array([-1, -1.0.1.1, -1]);
const bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

// Step 4: Read the buffer data to the GPU
const vPosition = gl.getAttribLocation(program, 'position'); // Get the address of the position variable in the vertex shader;
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false.0.0); // Set the length and type of the variable;
gl.enableVertexAttribArray(vPosition); // Activate this variable;

// Step 5: Execute the shader program to complete the drawing
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);
Copy the code

It can be found that to achieve the same triangle, HTML + CSS and SVG only need a few lines of code, while Canvas2D and WebGL, especially WebGL, need to call corresponding instructions to tell the computer how to render a triangle.

conclusion

HTML+CSS has the advantage of being convenient, requiring no third party dependencies or even JavaScript code. If we want to draw a small number of common diagrams, we can go straight to HTML and CSS. Its disadvantage is that CSS attributes can not directly reflect the data, drawing is relatively troublesome, complex graphics will lead to HTML elements, and consumption of performance.
SVG is an enhancement to HTML/CSS that compensates for HTML’s ability to draw irregular shapes. It is very convenient to use because it can intuitively reflect data by setting graphics of properties. However, SVG suffers from the same problems as HTML/CSS, requiring too many SVG elements for complex graphics, which can be very performance draining.
Canvas2D is a simple and quick instruction graphics system provided by the browser. It can quickly draw complex graphics through some simple instructions. Because it manipulates the drawing context directly, HTML/CSS and SVG drawings do not suffer from the performance-consuming problem of having too many elements, and performance is much faster than the first two. But Canvas2D can still run into performance bottlenecks when there are too many graphics to draw, or when dealing with a large number of pixel calculations.
WebGL is a powerful drawing system provided by the browser. It is complex to use but powerful. It can make full use of the GPU parallel computing capability to quickly and accurately manipulate the pixels of images and complete hundreds of thousands or millions of calculations at the same time. In addition, it has built-in processing such as projection of 3D objects and depth detection, which makes it more suitable for drawing 3D scenes.

reference

Follow the shadow visualization 01 | browser are visualized in four ways
Declarative and imperative programming in Web development

【Web Graphics 】 Introduction to Web graphics system

preface

Render graphics in the browser

HTML + CSS

SVG

Canvas2D

WebGL

Directive programming VS declarative programming

Drawing using a WEB graphics system

HTML + CSS

SVG

Canvas2D

WebGL

conclusion

reference

Related Posts

CSS optimization causes and methods to improve performance

Common regular check

Front-end doesn’t understand process communication? You’ll get it after reading this