如何在WebGL中绘制矩形

2023-09-03 17:42:49

简介

WebGL是一个跨平台的3D图形API，允许您在浏览器中创建交互式3D图形。WebGL基于OpenGL ES 2.0，它是一个专为嵌入式系统设计的OpenGL版本。WebGL由Khronos Group开发，并得到所有主要浏览器供应商的支持。

着色器

着色器是一种运行在GPU上的小程序，负责图形渲染管线的特定环节。着色器本质上是一种输入输出程序。顶点着色器从顶点数据中接受输入，通过预定义变量gl_Position指定输出数据；片段着色器从顶点着色器输出的数据中接受输入，并计算最终的颜色值。

缓冲对象

缓冲对象是GPU内存中的一块区域，用于存储顶点数据、索引数据或其他类型的图形数据。缓冲对象可以是静态的或动态的。静态缓冲对象只能被写入一次，而动态缓冲对象可以被多次写入。

索引缓冲对象

索引缓冲对象是GPU内存中的一块区域，用于存储顶点索引。索引缓冲对象允许您使用较少的顶点数据来绘制复杂的几何图形。

绘制矩形

要绘制矩形，我们需要执行以下步骤：

创建两个三角形，每个三角形由两个顶点组成。
将顶点数据存储在一个缓冲对象中。
创建一个索引缓冲对象，并将其填充索引数据。
创建一个顶点着色器和一个片段着色器。
将顶点着色器和片段着色器链接到一个着色器程序。
将缓冲对象和索引缓冲对象绑定到着色器程序。
调用WebGL API来绘制矩形。

完整代码

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">

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

//片段着色器
var fragmentShaderSource = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

function main() {
  //获取canvas元素
  var canvas = document.getElementById("canvas");

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

  //编译顶点着色器
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, vertexShaderSource);
  gl.compileShader(vertexShader);

  //编译片段着色器
  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);

  //获取顶点着色器中的位置属性的位置
  var positionAttributeLocation = gl.getAttribLocation(program, "a_position");

  //创建缓冲对象
  var positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  //设置缓冲对象的数据
  var positions = [
    -1.0, -1.0,
     1.0, -1.0,
     1.0,  1.0,
    -1.0,  1.0,
  ];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

  //创建索引缓冲对象
  var indexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

  //设置索引缓冲对象的数据
  var indices = [
    0, 1, 2,
    2, 3, 0,
  ];
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

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

  //启用位置属性
  gl.enableVertexAttribArray(positionAttributeLocation);

  //绑定位置属性到缓冲对象
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

  //设置视口
  gl.viewport(0, 0, canvas.width, canvas.height);

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

  //绘制矩形
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
}

</script>
</head>
<body onload="main();">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>