WebGl基础用法

       WebGL（Web Graphics Library）是一种JavaScript API，用于在Web浏览器中呈现交互式的3D和2D图形，而无需使用插件。它基于OpenGL ES 2.0，并且被设计成与HTML5的<canvas>元素集成，使开发者可以使用GPU加速来渲染图形。

       1、初始化WebGL上下文：首先，你需要获取一个WebGL上下文。你可以通过获取一个<canvas>元素的上下文来实现，如下所示：

var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');
if (!gl) {
    console.log('WebGL not supported, falling back on experimental-webgl');
    gl = canvas.getContext('experimental-webgl');
}
if (!gl) {
    alert('Your browser does not support WebGL');
}

     2、清除画布：在绘制新的图形之前，你可能需要清除画布，可以使用以下代码：

gl.clearColor(0.0, 0.0, 0.0, 1.0); // 设置清除颜色为黑色
gl.clear(gl.COLOR_BUFFER_BIT); // 清除颜色缓冲区

      3、着色器编写：WebGL中的图形渲染是通过着色器完成的。着色器是一种用于控制渲染流程的小型程序。你至少需要一个顶点着色器和一个片元着色器。顶点着色器负责转换顶点坐标，片元着色器负责计算像素的颜色。示例：

// 顶点着色器
attribute vec3 aPosition;
void main() {
    gl_Position = vec4(aPosition, 1.0);
}

// 片元着色器
precision mediump float;
void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置像素颜色为红色
}

    4、创建缓冲区：在WebGL中，你需要创建缓冲区来存储顶点数据、颜色数据等。示例：

var vertices = [...]; // 顶点坐标数组
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

    5、绘制图形：在WebGL中，你可以绘制各种类型的图形，如点、线、三角形等。示例：

gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 3); // 绘制三角形

    6、更新着色器中的变量：你可以通过获取着色器中的变量位置，然后将值传递给它们来更新着色器中的变量。示例：

var uColorLocation = gl.getUniformLocation(shaderProgram, 'uColor');
gl.uniform4fv(uColorLocation, [1.0, 0.0, 0.0, 1.0]); // 设置颜色为红色