当前位置：网站首页>Getting started with webgl (1)

Getting started with webgl (1)

2022-07-07 15:38:00 【Vegetable chicken on the road】

1. What is? webGL?

webgl Is to draw and render graphics on Web pages (3D graphics ), And allow users to interact with it ;

2. Why do I learn webGL?

Optimize performance in game development , It's in web You can develop and directly view the effect , Easy to translate into game development to understand .

3. The simplest webGL Program ( Clear plot area )

<!DOCTYPE html>
<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>03  Draw and transform </title>
</head>
<body onload="main()">
    <canvas id = "webgl",width = "400" , height="400"></canvas>
    <script src="libs/webgl-utils.js"></script>
    <script src="libs/webgl-debug.js"></script>
    <script src="libs/cuon-utils.js"></script>
    <script src = "RotateTriangle.js"></script> 
</body>
</html>

<RotateTriangle.js>

function main() {
    //  obtain  <canvas>  Elements 
    var canvas = document.getElementById('webgl');

    //  obtain WebGL Rendering context 
    var gl = getWebGLContext(canvas);
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    //  Specify empty <canvas> The color of the 
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    //  Empty <canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);
}

Library address referenced above :https://gitee.com/JingEra/web-gl-common-library, Please download by yourself .
Of course, if you don't want to use the encapsulated library, you can write it yourself , Let me also put a reference project below . Address :https://gitee.com/JingEra/web-gl-common-library/tree/master/03
I am because some method calls of the encapsulated library are more convenient in the process of reading and learning .