What makes WebGL better than Canvas2D graphics is performance, performance, performance! After a brief comparison, performance is not of the same order of magnitude.

The introductory function gl.drawarrays

The easiest and most interesting way to learn is to start with the gl.drawArrays function. Gl. drawArrays this function is the core WebGL function that is ultimately responsible for rendering, and its parameters are defined as:

gl.drawArrays(mode: gl.mode, start:number, count:number)
Copy the code

Go straight to the simplest code and learn the ropes

  var gl = getWebglContext(canvas); // : WebGLRenderingContext
  // extern method, bind gl with Shaders..
  if(! initShaders(gl, vshader, fshader)) { console.log("failed to init shaders..");
    return; } var a_Position = gl.getattribLocation (gl.program,"a_Position");
  var u_FragColor = gl.getUniformLocation(gl.program, "u_FragColor");
  if (a_Position < 0 || u_FragColor < 0) {
    console.log("failed to get the storage location of a_Position");
    return;
  }

  var positions = [];
  var num = 10000;
  for (var j = 0; j < num; j +=1) {
    // 1w points
    positions.push([Math.random() * 2 - 1, Math.random() * 2 - 1]);
  }

  gl.clearColor(0.1, 0.1, 0.1, 1);

  // use previous clearColor to clear canvas ! if no clearColor, default.
  gl.clear(gl.COLOR_BUFFER_BIT);

  for(var ii = 0; ii < positions.length; Ii++) {// pass the vertex renderer the point coordinates, 2f represents two floating point values as a vertex x, y coordinates.. gl.vertexAttrib2f(a_Position, positions[ii][0], positions[ii][1]);if (positions[ii] instanceof Array && positions[ii].length > 1) {
        if (positions[ii][0] > positions[ii][1]) {
            // uniform4f , pass vec4 to u_FragColor in//// Uniform4f transfers color values to the chip shader. 0 to 1 corresponds to four bands 0 to 255 RGBA. Gl. Uniform4f (u_FragColor, 0.9, 0.6, 0.3, 1); }elseGl. Uniform4f (u_FragColor, 0.6, 0.8, 0.9, 1); }} // Render one point at a time, look at the original function definition, the second parameter indicates which value to start drawing, the third parameter indicates how many points to draw. gl.drawArrays(gl.POINTS, 0, 1); }Copy the code

With a little explanation

After each pass through gl.verTextattrib2f, gl vertices have only vertices in memory. Gl.drawarrays (gl.POINTS, 0, 1), the second argument indicates which vertex to draw from, and the third argument indicates how many POINTS to draw. !). . For the gl.POINTS pattern, only one vertex is required to draw a point. So pass in 0,1. The effect is as follows:

Online experience

As you can see, with 10,000 vertices rendered, you can run up to 30Fps animation frame rate without using glBuffer, which is not bad. Using glBuffer can get the * frame rate up to 60Fps, whereas drawing 10,000 vertices with Canvas2D would only get around 20Fps. So still web GL cool!!

So, say, Using Gl.Triangles and Gl.line_loop, let’s continue this with something interesting next time.

reference

WebGL Programming Guide