This is the second day of my participation in the August More Text Challenge. For details, see: [August More Text Challenge]

preface

Because my fans have been asking me to write a how-to guide to visualization, and today he’s here. In fact, when it comes to front end visualization, all you can think of is all kinds of charts, big screen. This kind of look is cool, and I have been working on 3D front-end development work, slowly have an interest in graphics. But I’ve always done three-dimensional stuff, I’ve never done two-dimensional stuff. I started to learn some things about 2D about 2 months ago, and then I wrote some articles, the effect is good. So I write some experience, big guy do not spray. So I’m going to talk about four things about how I learn, right

  1. Visualization has to master the mathematical foundation
  2. Learning about SVG
  3. Learning about Canvas
  4. Visualization has to master the graphics algorithm

After reading this article, you can have a general idea of how I should learn and what I need to learn. And I recommend some learning materials and learning resources!

Math paper

Math is a pain in the neck for programmers, and I have to learn some awful math to write code, but LET me be clear — it’s important, if you want to learn visualability, the math is important, and the geometry behind it is even more important. Readers at the beginning of the understanding is not deep, resulting in a lot of things can not understand, eat very thanks to wow!

vector

In two dimensions or in three dimensions, is there a notion of both, except one is two dimensions and one is three dimensions, let’s say, now I have a vector v in this plane cartesian coordinate system. The vector V has two meanings: one is that it can represent a point at (x, y) in this coordinate system; The other is to represent a line segment from the origin (0,0) to the coordinates (x,y).

That’s how I like to use a Point2d class when I’m writing canvas, the canvas itself is the coordinate system. Any point on the canvas can be represented as a vector, with the origin at the top left.

Vector addition and subtraction

A vector can be represented by two other vectors, or two vectors can be subtracted, and I’ll give you an example that’s often used in practical work: how much do you extend a point in a certain direction?

So this is just adding vectors, first of all this direction is definitely a unit vector, why is it a unit vector? Because a vector has a magnitude and a direction, and a unit vector only has a direction, length 1, and then we just add the starting point plus the direction vector ✖️ length. And you get it. Behind it is the use of vector addition. So let me draw a picture to show you.

I’m going to go from point A to point B and then you can multiply it by any length to get the od and add it up and you get to point B. A picture is worth a thousand words! You can think about subtraction for yourself. Same thing

The cross product and the dot product

There are many practices, but let me just give you an example to show you the dot product. There’s actually a projection

The dot product of vectors can be used to determine whether or not the vectors are going in the same direction, but I’ll just draw a picture to show you, not too much theory, but it’s often used in practice.

The Angle between A and B is acute so it’s in the same direction, and the Angle between B and C is obtuse so it’s in the opposite direction, because the mathematical formula for the dot product is the length of the two vectors times cosine theta.

cross-product

The geometric meaning of the cross product is also very important, to figure out the area of the polygon, to figure out another vector that is perpendicular to these two vectors. Or start drawing:

You take the cross product of the X and Y vectors and you get a vector Z that is normal to the xy plane.

Calculate the area:

The length of the vector A × the length of the vector B × sinθ is not the height H of the parallelogram, so it can be used to calculate the area.

The cross product can also be used to determine the direction of three points

The geometric cross product of Corss gives you a number, and you just have to figure out whether the current number is greater than or less than 0, and you just have to figure out whether the three points are going counterclockwise or clockwise.

It can be seen from the figure that the directions of OAB and OA1B are different. The value of OA vector ✖️OB is opposite to the value calculated by OA1 ✖️OB. Let me enumerate the formula for you:

a.x * b.y – a.y * b.x

The dot and cross products of vectors are very important, and you have to understand that, because a lot of the algorithms that follow are based on that.

matrix

Most of the changes of graphs in space can be represented by matrices, which can be roughly classified into the following types:

  1. Translation matrix
  2. Rotation matrix
  3. Scaling matrix
  4. Image matrix
  5. Fault cut matrix
  6. Projection matrix

Here I recommend to you the learning resources are B station:

www.bilibili.com/video/BV1ib…

The nature of linear algebra, once you see it, will be clear, including the changes between the vectors up here.

The mirror image matrix, which I recommend to you in this article, I differentiated the mirror image matrix of any plane in three dimensions,

Find the mirror image matrix of any plane in space

I’m just going to show you the simplest change, the translation matrix

Take a look at the picture:

So if I move from point A to point B in 3d coordinates like this x changes by 2, y changes by 0, z changes by 2, and what’s the way to write the corresponding matrix:

In fact, every row of the matrix has a corresponding matrix, the translation matrix usually changes the first three numbers of the fourth column

curve

Both 2D and 3D need curve expression, the simplest arc, elliptic arc, and continuous curve can be expressed by Bessel curve, b-spline curve, NURBS curve. Mastering curves comes down to math.

The equation of a circle is x ^2 + y ^2 = r ^2

The equation of an ellipse: x ^ 2 / a ^ 2 + y ^ 2 / b ^ 2 = 1

N order Bessel curve equation: 𝐵 (𝑡) = ∑ 𝑖 = 0 𝑛 𝑃 𝑖 (1 – 𝑡) 𝑛 – 𝑖 𝑡 𝑖, 𝑡 𝜖 [0, 1]

I haven’t touched b-spline curve and NURBS curve yet, but my friends in our group are working on free-form surface, which may be involved. Here I just said the linear equations, the equation you can go to your high simulation, such as when I was doing 3 d text, we have not support the underlying algorithms library Bessel, but it doesn’t matter, we do not have equation can be achieved by equation Bessel curve discrete into multiple points, then use straight lines to express. Because our eyes look at things on the screen, if they are too far apart, they are completely invisible to the naked eye. Let me show you a picture here:

圗 part of the arc I use my Bezier curve discrete into straight lines to express, and the point in the middle of the country is actually bezier curve discrete into straight lines to do. It can be approximated visually. More techniques in 3D text, I will write a special article later to describe in detail, by the way to comb myself. If you’re interested, then you have to follow me, or you won’t find me.

Transformation of coordinate system

Why do we have this? Canvas and SVG have the top left and the origin. Don’t you think it’s a little anti-human? Well, I saw that when I drew the graph, that the axes are decreasing as you go up from the origin. So the solution to this problem, in fact, is very simple: we transform the frame, I change the origin of the original canvas, by changing it to the lower left corner, so that when we calculate the coordinates of the points, we have no mental burden, it is what it is. Let’s take three.js for example. We have a local coordinate system, a view coordinate system (camera), a world coordinate system, a clipping coordinate system, a screen coordinate system.

It’s a series of actions that go from an object in space to the final screen.

  1. First of all, the object itself has a coordinate system called the local coordinate system, it also has an origin, but it also has a corresponding position in the world coordinate system, so there is a matrix change between them — the model matrix

  2. The world coordinate system – the observation coordinate system also has the matrix change, this is called the view matrix

  3. The observation space — the clipping space is called the projection matrix because the things in three dimensions we use the camera to simulate the human eye, the things in the visual vertebra are seen. All have the projection matrix, a perspective projection and orthogonal projection, a small, nearly depending a distance is the same

  4. Standard equipment coordinates – Screen coordinates. This is where the origin of the frame is concerned.

The normalized coordinates are relative to the center of the canvas, but the canvas’s default coordinate system is the upper-left corner. Let’s look at the change in coordinate system, first of all, the Y axis is reversed so the first change is the same X, and then the Y is both ✖️ minus 1 so we’re going in the right direction, the difference is the offset. The offset between the x and Y axes is half the width and height of the canvas. So there we have the conversion to the screen coordinates.

SVG and CANVAS

For SVG and Canvas, I still recommend Mdn, you should go through it carefully, then talk about the progression, then how to optimize, you are not even familiar with the basic API and talk about the progression, right?

  1. SVG tutorial developer.mozilla.org/zh-CN/docs/…

  2. Canvas tutorial developer.mozilla.org/zh-CN/docs/…

    Follow the back to learn again, hand knock again, naturally understand the mystery. Here at 👇 are some tips and tips I’ve been using for so long

  3. The difference between uppercase and lowercase letters in PATHS in SVG is mainly the relative and absolute positioning relationship.

  4. The DEFS tag for SVG does not appear on the canvas and is used for the following combination

  5. Both G and SYMBOLS in SVG can be combined, but the symbols have the concept of a viewbox

  6. Use The reuse tag corresponds to the ID defined above

  7. Canvas clearRect () Clears the canvas because each frame of the canvas has to be redrawn

  8. Restore () save() Saves the state of the current canvas to ensure that other drawing elements are not affected

  9. IsPointinPath () can be used to determine whether the point is in the last drawn path (with a pit), and to determine whether the point is inside the graph and is finally solved by the algorithm.

  10. Use of beginPath() and closePath()

  11. Pixel level processing of the use of imageData

When you are familiar with these and can move on, it is recommended to study

Advanced learning

Deeper understanding of Canvas

Joshondesign.com/p/books/can…

Canvas Best Practices (Performance tuning)

www.cnblogs.com/mopagunda/p…

Canvas is rendered off-screen

Devnook. Making. IO/OffscreenCa…

Canvas Video Learning

www.bilibili.com/video/av261…

Recommended books

HTML5 Canvas Core Technologies: Graphics, Animation and Game Development

Core Techniques for HTML5 2D Game Programming

WEBGL

1. Learn graphics fundamentals

Definitely, definitely, definitely check out Yan Lingqi’s GAMES101 Modern Computer Graphics. Recommended 1.5 times speed, can be mastered in about a month. Follow the course and do all the raster renderer and raytrace assignments. After this course, you’ll have a solid graphics foundation. Have a basic understanding of graphics, games, 3D engine, OpenGL, Unity and UE. I haven’t read it myself. I’m still learning.

www.bilibili.com/video/BV1X7…

2. Webgl Learning, which I find to be a very good quality learning site with a bit of depth

Webglfundamentals.org/webgl/lesso…

  1. Shaders and GLSL
  2. Light and color
  3. How do I load the external model
  4. How can points, lines and planes be triangulated
  5. map

Book Recommendations:

Webgl Programming Guide

Mathematical methods in 3D games and computer graphics

Fundamentals of Computer Graphics (4th Edition)

Directx 9.0 3d game development programming basics is a highly recommended book written in c++, but it explains the entire rendering process very clearly, and I gained a lot from reading it. This is also a book recommended by our boss.

The framework level

THREE.JS

Three. Js is one of the most acclaimed WebGL projects, with more than 1313 Contributions, and of the same order of magnitude as React. Although it is positioned as a rendering engine, the community has added many game engine features, such as physics engine, decals, animation, etc. There are plenty of examples in the source code to learn from, but many important features, such as the GLTF loader, are in the Examples directory, which feels rather informal.

Due to its high popularity, the biggest advantage of Three.js is its strong community. Many answers can be found when searching questions, and it is also used by many open source and commercial projects

However, three. js is very unprofessional in version management. Until now, it has not adopted semver version naming convention, and every release is a version named rXXX. I have seen many projects based on three. js are fixed in a certain version and dare not upgrade

BABYLONJS

Finishing off the list is Babylon, Sugar’s ultimate WebGL engine, which is not only powerful, but also has high code quality, TypeScript type-perfect, and almost every function is annotated.

Babylon is rich in materials, offering in addition to the basic PBR, sub-surface rendering SubSurface tests for skin, ClearCoat for car paint, Sheen for cloth, Anisotropy for things like CDS, and more.

The last bright spot of Babylon is that it is developing a WebGPU version, while no other engines are working on it, so when the WebGPU is released, Babylon should be one of the first to support it, and it will get more attention.

ANTV

In AntV, there are several different visualization engines that are, in fact, isolated and independent of each other. When studying, you need to study alone. Rubik’s Cube supports online chart generation. Maps are visualized using L7 geospatial data.

ECHARTS

ECharts, originally short for “Enterprise Charts” from baidu’s EFE data visualization team, is an open source visualization library implemented in JavaScript. ECharts has very powerful functions. It has been carefully optimized for the mobile terminal, adapted to wechat small programs, supported a variety of rendering methods and front-end display of tens of millions of data, and even realized barrier-free access. The bottom layer is encapsulated using the z-Render library. It’s also worth learning about the concept of a component that can be configured to display diagrams.

D3

D3 is data-driven Documents. D3.js is a JavaScript library that uses data to manipulate documents. D3 can use HTML, SVG and CSS to bring data to life. D3 is a strict adherence to Web standards that makes it easy for your applications to be compatible with modern mainstream browsers and avoid dependency on specific frameworks. At the same time, it provides powerful visual components that allow users to manipulate the DOM in a data-driven manner. Called the visual version of jquery.

Graphics algorithm

Finally, I’m going to talk about the graphics algorithms that I have to master, like the very simple answer example. To see if the point is inside any polygon, right? That’s the algorithm involved.

Let me outline it

  1. Determine if the point is in any closed polygon using ray detection, there are points inside, like any direction emitting rays for a day calculate the number of intersections, odd is internal and even is external
  2. The norAML (careful) for determining whether the direction of a continuous polygon is clockwise or counterclockwise is incorrect for concave polygons
  3. Under 2d graphics, the intersection of arbitrary graphics is recommended for two libraries, Clipper and the concept of Turf holes and contours, which can be understood by baidu
  4. Determine which side of a vector a point is on and find the direction of the three points counterclockwise or clockwise
  5. Line segment to find the equation of intersecting lines to find the focus
  6. Find the internal and external intersection of the inclusion relation of any two regions
  7. The collision detection boundingbox finds the intersection

Here I outline some of the algorithms THAT I use in my work.

Some recommended articles:

On several algorithms of “line segment intersection” (JS implementation, complete version)

www.cnblogs.com/i-gps/archi…

Several common algorithms related to computational geometry and graphics

Blog.csdn.net/wilson1068/…

Point in polygon algorithm – to determine whether a point is inside a complex polygon

Blog.csdn.net/hjh2005/art…

Achieve the intersection and difference of polygons and offset

turfjs.org/

Clipper library Chinese document detailed explanation

www.cnblogs.com/zhigu/p/119…

conclusion

This article is probably my personal understanding ha, the level is limited, can express so much. If there is a better welcome to supplement learning and communication, the article has a wrong welcome correction. Finally, I give you a mind map to study. I’m Fly, who loves graphics. See you next time at 👋. Finally, if you think the article is helpful to you, click 👍 and follow it, I will continue to share high-quality articles.

Resources for

If it is helpful to you, you can follow the public number [front-end graphics], reply “mind map” two words can get hd mind map for free.