webgl绘制多边形

WebGL是一种用于在Web浏览器中绘制3D图形的技术。要绘制多边形，你需要定义顶点数据，并使用WebGL的绘制函数将其绘制到画布上。

以下是一个使用WebGL绘制三角形的示例：

// 获取画布元素
var canvas = document.getElementById("myCanvas");

// 获取WebGL上下文
var gl = canvas.getContext("webgl");

// 定义顶点数据
var vertices = [
  -0.5, -0.5, 0.0,  // 第一个顶点的坐标
  0.5, -0.5, 0.0,   // 第二个顶点的坐标
  0.0, 0.5, 0.0     // 第三个顶点的坐标
];

// 创建缓冲区对象
var vertexBuffer = gl.createBuffer();

// 绑定缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// 将顶点数据写入缓冲区对象
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 获取顶点着色器代码
var vertexShaderSource = `
  attribute vec3 aPosition;
  void main() {
    gl_Position = vec4(aPosition, 1.0);
  }
`;

// 创建顶点着色器对象
var vertexShader = gl.createShader(gl.VERTEX_SHADER);

// 编译顶点着色器代码
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// 获取片元着色器代码
var fragmentShaderSource = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

// 创建片元着色器对象
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

// 编译片元着色器代码
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建着色器程序对象
var program = gl.createProgram();

// 将顶点着色器和片元着色器附加到着色器程序对象上
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// 链接着色器程序对象
gl.linkProgram(program);

// 使用着色器程序对象
gl.useProgram(program);

// 获取顶点位置属性的位置
var aPosition = gl.getAttribLocation(program, "aPosition");

// 启用顶点属性数组
gl.enableVertexAttribArray(aPosition);

// 指定顶点属性数组的数据格式和位置
gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);

// 清空画布
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

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

// 刷新画面
gl.flush();

这段代码首先获取了画布元素和WebGL上下文，然后定义了三个顶点的坐标数据。接下来，创建了顶点着色器和片元着色器，并编译它们的代码。然后，创建了着色器程序对象，并将顶点着色器和片元着色器附加到着色器程序对象上。之后，启用顶点属性数组，并指定顶点属性数组的数据格式和位置。最后，清空画布，绘制三角形，并刷新画面。