WebGL-绘制三角形(1)

📌 相关文章

📜 WebGL-绘制三角形(1)

📅 最后修改于: 2023-12-03 15:05:55.225000 🧑 作者: Mango

WebGL-绘制三角形

WebGL是一种用于在Web浏览器中进行交互式2D和3D图形渲染的API。使用WebGL，开发者可以在Web浏览器中使用类似OpenGL的API进行3D图形渲染。本文将给程序员介绍如何使用WebGL来绘制一个简单的三角形。

准备工作

在开始前，需要准备以下材料：

浏览器：最好使用最新版的Google Chrome或Firefox浏览器
编辑器：用于编写HTML、JavaScript和CSS代码的文本编辑器，例如VS Code、Atom、Sublime Text等
一个本地Web服务器：可以使用Node.js的静态文件服务器，或者其他任何你熟悉的Web服务器

代码实现

步骤1：设置canvas元素

在HTML文件中添加一个canvas元素，并设置宽度和高度。

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

步骤2：获取WebGL上下文

在JavaScript文件中，获取canvas元素以及WebGL上下文，并将它们存储在变量中。

// 获取canvas元素和WebGL上下文
const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl");

步骤3：设置视口和清除背景色

设置WebGL视口以及清除背景色。

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

// 清除背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

步骤4：编写顶点着色器

编写顶点着色器代码，用于将顶点的坐标转换为屏幕上的坐标。

// 顶点着色器代码
const vertexShaderSource = `
  attribute vec2 a_position;

  void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
  }
`;

步骤5：编写片元着色器

编写片元着色器代码，用于对三角形的每个像素进行颜色计算。

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

步骤6：创建着色器程序

创建着色器程序，并将顶点着色器和片元着色器连接到一起。

// 创建顶点着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// 创建片元着色器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建着色器程序，并将顶点着色器和片元着色器连接到一起
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

步骤7：定义顶点数据和顶点属性

定义三角形的顶点数据，并将每个顶点的x和y坐标存储在一个Float32Array数组中。将这个数组绑定到WebGL缓冲区中，并定义一个顶点属性，用于读取每个顶点的坐标。

// 定义三角形的顶点数据
const vertices = new Float32Array([
  -0.5, 0.5,
  -0.5, -0.5,
  0.5, -0.5,
]);

// 将顶点数据绑定到WebGL缓冲区中
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 定义顶点属性
const positionAttributeLocation = gl.getAttribLocation(shaderProgram, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

步骤8：绘制三角形

使用gl.drawArrays方法绘制三角形。

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

完整代码

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <title>WebGL-绘制三角形</title>
    <meta charset="utf-8">
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script src="./main.js"></script>
  </body>
</html>

JavaScript代码：

// 获取canvas元素和WebGL上下文
const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl");

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

// 清除背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 顶点着色器代码
const vertexShaderSource = `
  attribute vec2 a_position;

  void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
  }
`;

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

// 创建顶点着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// 创建片元着色器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建着色器程序，并将顶点着色器和片元着色器连接到一起
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

// 定义三角形的顶点数据
const vertices = new Float32Array([
  -0.5, 0.5,
  -0.5, -0.5,
  0.5, -0.5,
]);

// 将顶点数据绑定到WebGL缓冲区中
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 定义顶点属性
const positionAttributeLocation = gl.getAttribLocation(shaderProgram, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

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

运行程序

将上述代码复制到HTML和JavaScript文件中，使用本地Web服务器运行HTML文件。在浏览器中打开该网页，就可以看到一个简单的白色三角形。