Introduction to webgl (native) Foundation


The students who came to see this article must have been shocked by the recent 3D scene effects, holding “how to do this TM!” Let’s learn from webgl.
OK, you already have experience with threejs or other 3D scene development frameworks, but you don’t know how to write webgl native. This series will start with the simplest and most basic native API to teach you how to write webgl

Prepare webgl context

Just like the two-dimensional scene, we need a canvas to draw and create a canvas element in HTML. The code is as follows:

// index.html
<!DOCTYPE html>
<html lang="en">
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Webgl  Hello world!</title>
<body onload="start()">
  <canvas id='main' width=500 height=400></canvas>

The start() function will be called after the document is loaded. Its task is to set up the webgl context and start rendering the content.

// index.js
function start() {
  var canvas = document.getElementById("main");
  //Initialize webgl context
  var gl = initWebGL(canvas);
  //Start rendering
function initWebGL(canvas) {
  //Create global variables
  var gl = null;
  try {
    //Try to get the standard context, and if it fails, go back to the experimental context
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  catch(e) {}
  //If there is no GL context, give up immediately
  if (!gl) {
    Alert ("webgl initialization failed, probably because your browser does not support it. ");
    gl = null;
  return gl;

Getcontext ('context parameter ')Returns the context supported by the parameter, or if the parameter is invalidnull. We only use it when we draw 2D canvas.getContext('2d')To return the canvasrenderingcontext2d object; 3D is not ‘3D’ but ‘3D’canvas.getContext("webgl")perhapscanvas.getContext("experimental-webgl")To return a webglrenderingcontext object. Different browser cores support different parameters, as follows:
Introduction to webgl (native) Foundation


Anyone who has painted canvas should use a color fill to clean up the frame. Webgl agrees that such a cleanup function is needed when drawing the next picture. Webgl uses RGBA’s four-color system to define colors. Different from our usual color system, the four components of RGBA are represented by values between 0.0 and 0.1. The first three components represent the saturation of the three primary colors, and the last one represents the opacity.

It is worth mentioning that only floating-point calculation is used in webgl calculation, so the value 1 is usually written as1.0The value 0 is written as0.0

Here we need to do four initialization steps

  1. Set clear color (blue, opaque)

    gl.clearColor(0.0, 1.0, 1.0, 1.0);

  2. Deep cleaning


  3. Turn on “depth test”, z-cache


  4. Set the depth test, the near objects block the far objects


Called when cleaning the canvasgl.clear(gl.COLOR_BUFFER_BIT);To clean up the canvas.
In this way, we will have a web GL canvas ready for drawing.
Demo address:…