What is WebGL?

WebGL is a technology that renders 3D/2D graphics in a browser. It provides a set of JavaScript apis that are used on the Canvas element, allowing Web developers to draw 3D graphics in the browser without plug-ins.

Although JavaScript interface is used in the development, the interface related to the OpenGL library at the bottom of the hardware device is finally called, and hardware acceleration is provided, so WebGL rendering has much higher performance than the general Canvas 2D rendering.

WebGL and OpenGL, OpenGL ES?

So let’s take a look at OpenGL. According to MDN, OpenGL (Open Graphics Library) is a set of cross-language, cross-platform application programming interfaces (apis) for rendering 2D and 3D vector Graphics. In fact, OpenGL is a set of specifications rather than interfaces, and the realization of interfaces depends on hardware manufacturers. Hardware manufacturers here mainly refer to GPU manufacturers, because OpenGL library instructions run on GPU. If GPU manufacturers want to support OpenGL, You need to implement your own OpenGL library according to the specification. OpenGL libraries of various manufacturers are actually realized by integrating their graphics knowledge and GPU hardware instructions. These implementations are usually called “drivers”, which are responsible for translating API commands defined by OpenGL into GPU operation instructions, so they only need to install graphics card drivers when used.

WebGL is rooted in OpenGL, but there is an OpenGL ES between them. OpenGL ES is a subset of OpenGL, specially designed for mobile phones/PDAs/game consoles and other embedded devices. OpenGL ES mainly provides THE API of C language. Other platforms can add a layer of packaging according to custom. For example, Android provides Java packaging and IOS provides Objective-C packaging. WebGL is a JavaScript API based on OpenGL ES 2.0. It can also be said that OpenGL ES implements WebGL by adding a JavaScript binding.

What do I need to learn about WebGL?

Drawing with WebGL mainly uses WebGL API and Canvas element. WebGL API is JavaScript language, which is not a problem for the front end. As mentioned above, OpenGL runs on the GPU, but not all programming languages can run on the GPU, which requires the use of a special programming language, namely shader language. Shader language is used for computer graphics programming, running on the GPU, and most of the programs written by the usual language are running on the CPU. With OpenGL API is compatible with the shader language GLSL, with OpenGL ES API, WebGL API is compatible with the shader language GLSL ES. So we also need to learn GLSL ES.

Some people may ask, how can we learn a new programming language when we promised to use JavaScript development? Will GLSL ES also run in the browser? GLSL ES can not run in the browser environment, but we will use WebGL API to write GLSL ES programs into the underlying device to run, and finally use the system graphics card to show the graphics scene in the browser more smoothly, so as to achieve high performance, and do not need the support of browser plug-ins.

With Three WebGL. Js?

Many people have heard of Three.js, which is used to make 3D graphics. In fact, Three.js is a 3D engine packaged based on native WebGl API and shader, which is a JavaScript library. It will be troublesome to write directly through native WebGL, and also need to write GLSL ES programs, so development projects generally use the three.js engine directly. However, if you want to go deeper into Web3D application development, it is necessary to learn the knowledge of low-level WebGL and shader GLSL.

A profound

The author has just learned about WebGL, and this practice code has been annotated by referring to online materials. Directly copy this HTML code in the browser can be executed, you can modify the relevant parameters, view the display effect, specific knowledge points to be left to the subsequent article records.

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>WebGL draws a point</title>
</head>

<body>
    <canvas id="canvas" width="500" height="500"></canvas>

    <script>
        // Get the canvas
        const canvas = document.getElementById('canvas');

        // Get the WebGL context
        const gl = canvas.getContext('webgl');


        /* The following two shader sources are stored as strings for the WebGL API to call */

        // Vertex shader source code
        const vertexShaderSource = ' ' +
            'void main(){' +
            // Assign the pixel size to the built-in variable gl_PointSize
            '   gl_PointSize=20.0;' +
            // Vertex position at the origin of coordinates
            'gl_Position = vec4 (0.0, 0.0, 0.0, 1.0); ' +
            '} ';

        // Chip shader source code
        const fragShaderSource = ' ' +
            'void main(){' +
            // Define the pixel color
            'gl_FragColor = vec4 (1.0, 0.0, 0.0, 1.0); ' +
            '} ';


        // Initialize the shader
        const program = initShader(gl, vertexShaderSource, fragShaderSource);
        
        // Specify the color to use to empty the drawing area
        gl.clearColor(0.1.0.0.5);

        // Empty the drawing area using the specified color
        gl.clear(gl.COLOR_BUFFER_BIT);

        // Start drawing and display the result
        gl.drawArrays(gl.POINTS, 0.1);

        // Declare the initialization shader function
        function initShader(gl, vertexShaderSource, fragmentShaderSource) {
            // Create a vertex shader object
            const vertexShader = gl.createShader(gl.VERTEX_SHADER);
            // Create a slice shader object
            const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            // Introduce vertex, slice shader source code
            gl.shaderSource(vertexShader, vertexShaderSource);
            gl.shaderSource(fragmentShader, fragmentShaderSource);
            // Build vertex and slice shaders
            gl.compileShader(vertexShader);
            gl.compileShader(fragmentShader);

            // Create program object program
            const program = gl.createProgram();
            // Attach vertex shaders and slice shaders to program
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            / / link to the program
            gl.linkProgram(program);
            / / using the program
            gl.useProgram(program);
            // Return program object
            return program;
        }
    </script>
</body>

</html>
Copy the code

At the end

I am still interested in WebGL, and I hope I can write more notes in the future.

The above records about WebGL are all summarized by the author from numerous materials on the Internet. Please point out any mistakes.