WebGL, let's start with a doughnut.

Write the front

WebGL is a real hassle. It's a lot more painful than a normal 2d drawing.

If you feel that Canvas2d native API is enough for you to toss, then WebGL will make you more helpless.

Difficult to draw in the WEBGL process because it only provides the interface to operate the graphics card

WebGL is like the sister of OpenGL. Sister is a process-oriented so sister is the same!

(I am my sister)

For this, a whole bunch of processes have been lost to us ... No encapsulation, direct use, it's really troublesome to explode.

So after the native API play 6 will certainly be encapsulated in order to use the

--------------------------------------------------------------------This is the first of WebGL. What should I put on the demo?

Because every time I get to the second half of the subway belly will and hungry will want to eat something into the subway where there is a bakery popular is very good but I eat to eat the two.

One is a sandwich-like bread (triangular prism) and a donut (torus) a few days ago I chose the two most of these demos.

The triangular prism is a little so easy, so I chose to draw the donut as the first WebGL thing.

GIF as follows

You can also poke this demo, please open it with chrome.

So how to represent the coordinates of the torus?

We can first represent a two-dimensional circle in a plane and then go around one axis for a week.

Now the XY plane takes a circle and rotates around the y axis by R for a week.

This will show the vertex coordinate equation of the sweet circle.

And then we need to know the normal vector, you see the light effect in the demo.

The normal vector is actually the vector coordinates of each point on the cross-section circle minus the vector of its center.

As the normal vector of one of the points in this plane circle

Part of the Code

Const SWEETRING =function(prop) {var[position,normal,color]=[[],[],[]]; varLen; const [Pi2,sin,cos]= [math.pi*2, Math.sin,math.cos]; const [R,G,B]= [247/255,182/255,99/255]; const {R1,r2,the_num,phe_num} =prop; Const POSF= (i,j) = ={const [N1,N2]= [i/phe_num*pi2,j/the_num*PI2]; Const XX= cos (n2) *r2+R1; Const y= Sin (n2) *R2; const [X,Z]= [cos (n1) *xx,sin (N1) *XX]; const [NX,NY,NZ]=[x-cos (N1) *r1,y, Z-sin (N1) *R1];        Position.push (x, y, z);        Color.push (R,G,B);      Normal.push (NX,NY,NZ);      };  for(Let i = 0;i<=phe_num;++i) {         for(Let J = 0;j<=the_num;++j) {POSF (i,j), POSF (i+1,J), POSF (i,j+1), POSF (i+1,j+1), POSF (I+1,j), POSF (i,j+1); }} Len= POSITION.LENGTH/3;return{Position,normal,color,len}} ({r1:2,R2:.8,THE_NUM:36,PHE_NUM:36});

R1 R2 is a two radius the_num Phe_num control the number of traversed vertices

Position is the coordinate vertex

Color is a vertex, and each vertex has the same RGB component.

Normal is a normal vector

You can see what the 4 POSF functions do in a single inner loop.

Because our primitives are triangles that ultimately represent the donut.

These 4 POSF represent 2 triangles their coordinate relationship is (I,J) (i+1,j) (i,j+1) (i+1,j+1) (I+1,J)

Next is the code for the shader section below

Gl.shadersource (vs, ' attribute vec3 pos;      attribute VEC3 normal;            attribute VEC3 color;      Uniform MAT4 Pro;      Uniform MAT4 mov;      Uniform mat4 rot;      Uniform mat4 Rot2;      Uniform VEC3 light1;      Uniform VEC3 light2;      Varying VEC3 Co; voidMain () {gl_position= PRO*MOV*ROT*ROT2*VEC4 (POS, 1); VEC3 N= (MOV*ROT*ROT2*VEC4 (normalize (normal), 0.0). xyz; floatnn = max (dot (n,normalize (VEC3 (0,.3,1))), 0.0); Co= nn*light1*color+light2;    }    `); Gl.shadersource (FS, ' Precision HIGHPfloat;      Varying LOWP VEC3 Co; voidMain () {Gl_fragcolor= VEC4 (CO, 1); }    `);

Let's see the light part.

Two types of light are applied here, namely ambient light (light2) and parallel Light (LIGHT1) (the rest of the light is discussed later)

Talk about the parallel light first.

The parallel light solves the relationship between the light vector and the object's normal vector to get the intensity of the light on that surface.

float nn = max (dot (n,normalize (VEC3 (0,.3,1))), 0.0);

The above line calculates the point multiplication of the normal and Ray vectors (0,.3,1).

Remember to normalization of the normal or you will be prompted to warn ' Index of range ' (I was wondering ...) ）

The result of the dot multiplication (nn) is mixed with the parallel light color and vertex color, respectively.

And finally, with the ambient light, it's all done.

CO = nn*light1*color+light2;

WebGL, let's start with a doughnut.