WebGL Lesson 2: Write a CircleCopy the code

At the end of last class, an avid reader asked me a question: Draw a circle with radius 1 in the middle of the screen. With that in mind, we’re going to do a little bit of that in this lesson. If I were given a real pen, I could accomplish this little goal in an instant. It’s so easy. Because we humans understand this goal: middle of the screen, radius 1, circle. But the WebGL guy doesn’t understand that description, so let’s be a little more mathematical. WebGL really just wants to know one thing: what pixel (x y) to draw and what color (r g b) to draw. Well, we tried to describe this goal in mathematical terms:

It's a little hard, because a circle can contain more than one pixel... Something tells us that if we need to draw a circle on the screen, we must draw a bunch of dots that look like a circle from a distanceCopy the code

Something like this:

Obviously, the more dots we draw on the screen, the more perfect the circle will be. Ok, let’s forget about the perfection, let’s describe our circle:

Let's say that our pen is black, that is, at these points, our color is RGB(0, 0, 0). And then, we just have to list the coordinates of all of these points. Let's write it like this: Y (1, 0) - > RGB (0, 0), y (0, 1) - > RGB (0, 0), y (1, 0) - > RGB (0, 0), y (0, 1) -- - > RGB (0, 0), y (0.5, 0.866) -- - > RGB (0, 0)... . . I've just written down five coordinates, and I've indicated that these coordinates are RGB(0,0,0) black. In this way, you can pass the above data to WebGL and get the corresponding picture. You pass some coordinates to WebGL and WebGL will draw some points. The more you pass, the more perfect it will be. It's that simple.Copy the code

Of course, WebGL is just a pen, so let’s talk about our paper, which is the screen, or more precisely, a WebGL Canvas.

You have a pen and you have two pieces of paper on your desk. On which paper do you draw? It’s up to you. WebGL is the same way. You can have many canvas(paper) on a single page. You can draw where you want.

Xy (0.5,0.866) –> RGB(0,0,0) That’s weird, because the pixels on the screen are integers, and the coordinates are supposed to be (300,200), and there are decimals. Let’s describe exactly the axes of a Canvas:

From left to right x goes from negative 1 to 1. From bottom to top, y goes from negative 1 to 1. No matter how many pixels your screen has, use this to relativistically represent the coordinates, rather than the actual pixel coordinates. Like these two pictures:Copy the code

(Figure 2.2) On the 200 * 200 canvas, a circle with a radius of 1 and a color of black is simulated with 38 points

(Figure 2.3) On the 600 * 300 canvas, the circle with radius 1 and color black is simulated with 38 points

As you may have noticed, we can give the same data to the same WebGL, but if the canvas size is different, the drawing will look different. Obviously, the 600 by 300 canvas has become an ellipse. That’s because the coordinates we’re giving are not pixels, but relative positions.

To reinforce this point, let’s try drawing some coordinates on the 600 * 300 canvas:

// Where will the following coordinates appear on the 600 * 300 canvas? 1. (0.5, 0.5) -- - > RGB (1, 0, 0) / / red (2) (1, 1) -- - > RGB (0, 1, 0) / / green (3) (0.9, 0.5) -- - > RGB (0, 0, 1) / / blue ok. The figure below is the answer (the dots around it are the same circle of radius 1, in black) : For clarity, draw the three dots largerCopy the code

(Figure 2.4) On the 600 * 300 Canvas, a 38-point black circle with three additional points

In the image above, the green dot in the bottom left corner is almost invisible because it is right at the very edge(1, 1).

It’s important to think carefully about why these points are there, and that’s what WebGL is all about,At what coordinates and in what color.

This is the end of this articleCopy the code
The e little guagua asked: I still can’t, because you didn’t give me a running program.
  • A: The way to learn is to take it easy and clarify all the key points step by step.
Xiao Yaya asks: Are the pictures in this course dots drawn by WebGL? It’s always a little unclear what the smallest unit we can draw is, and why we can control the size of the dots?
  • A: That’s a good question, and the next few diagrams in this article are actually drawn from WebGL code. The smallest unit you can control is notpixel, butcoordinates, acoordinatesHow much does it correspond topixelMost of the time we don’t. WebGL does control the size of points. But in fact, all the points in this diagram are actually reduced from the polygons shown in the following figure:

(Figure 2.5) Polygons used to simulate points

In other words, the graph in this paper is not drawn points, but polygons.

Yaya asks: Why use this polygon instead of using WebGL to draw dots directly?
  • A: This is just the principle, we’ll use WebGL directly to draw points later.
Yaya: Can WebGL draw polygons? How do we do itThe mathematical wayTo tell WebGL to draw polygons?
  • A: WebGL can draw three basic graphicspoint 和 line 和 triangle. The polygons in the figure above are actually made up of smaller triangles. taketriangleFor example: the core data of a triangle is three points, right, so first you have to putThe coordinates of three pointsIt goes into WebGL, and then you just tell WebGLConnect these three dotsWill do.
Can I just connect it? What color will I use? Do I color in or not color in the middle? If the painting is colored, can I control the color of each coordinate one by one? Or do I fill the middle area with my own images? How do I tell WebGL about this stuff?
  • Answer: dangdang, the class does not allow to be late!! Class dismissed!!