实战篇：（三）项目实战Vue 3 + WebGL 创建一个简单的 3D 渲染应用

news2024/11/29 11:46:43

Vue 3 + WebGL 创建一个简单的 3D 渲染应用

我们将使用 Vue 3 和 WebGL 创建一个简单的 3D 渲染应用。项目将展示如何在 Vue 组件中集成 WebGL，并渲染一个旋转的立方体。

在这里插入图片描述

1. 项目准备

首先，确保你已经安装了 Node.js 和 Vue CLI。如果还没有安装，可以通过以下命令安装：

npm install -g @vue/cli

然后，创建一个新的 Vue 3 项目：

vue create vue-webgl-demo
cd vue-webgl-demo

选择 Vue 3 配置并安装项目依赖。

2. 安装依赖

为了方便 WebGL 的开发，我们可以安装 gl-matrix 库来进行矩阵和向量的数学运算：

npm install gl-matrix

3. 创建 WebGL 组件

在 src/components 目录下创建一个名为 WebGLCanvas.vue 的组件。代码如下：

<template>
  <canvas ref="canvas" class="webgl-canvas"></canvas>
</template>

<script>
// 导入 gl-matrix 库中的 mat4 模块，用于矩阵运算
import { mat4 } from 'gl-matrix';

export default {
  name: 'WebGLCanvas',
  mounted() {
    // 组件挂载后，初始化 WebGL
    this.initWebGL();
  },
  methods: {
    initWebGL() {
      // 获取 canvas 元素并初始化 WebGL 上下文
      const canvas = this.$refs.canvas;
      const gl = canvas.getContext('webgl');

      // 检查 WebGL 是否初始化成功
      if (!gl) {
        console.error('无法初始化 WebGL。');
        return;
      }

      // 设置 canvas 的宽高为窗口的宽高
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // 设置视口，绘制区域与 canvas 相同
      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.DEPTH_BUFFER_BIT);

      // 立方体的顶点数据
      const vertices = new Float32Array([
        // 前面
        -0.5, -0.5,  0.5, // A
         0.5, -0.5,  0.5, // B
         0.5,  0.5,  0.5, // C
        -0.5,  0.5,  0.5, // D
        // 后面
        -0.5, -0.5, -0.5, // E
         0.5, -0.5, -0.5, // F
         0.5,  0.5, -0.5, // G
        -0.5,  0.5, -0.5, // H
      ]);

      // 立方体的索引数据，用于绘制面
      const indices = new Uint16Array([
        0, 1, 2, 0, 2, 3, // 前面
        4, 5, 6, 4, 6, 7, // 后面
        0, 1, 5, 0, 5, 4, // 左面
        2, 3, 7, 2, 7, 6, // 右面
        0, 3, 7, 0, 7, 4, // 上面
        1, 2, 6, 1, 6, 5, // 下面
      ]);

      // 创建并绑定顶点缓冲区
      const vertexBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
      // 将顶点数据写入缓冲区
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

      // 创建并绑定索引缓冲区
      const indexBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
      // 将索引数据写入缓冲区
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

      // 定义顶点着色器
      const vertexShaderSource = `
        attribute vec4 a_Position; // 顶点位置属性
        uniform mat4 u_ModelViewMatrix; // 模型视图矩阵
        uniform mat4 u_ProjectionMatrix; // 投影矩阵
        void main() {
          // 将顶点位置转换到裁剪坐标系
          gl_Position = u_ProjectionMatrix * u_ModelViewMatrix * a_Position;
        }
      `;

      // 定义片段着色器
      const fragmentShaderSource = `
        precision mediump float; // 片段着色器精度
        void main() {
          gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置片段颜色为红色
        }
      `;

      // 创建并编译着色器
      const vertexShader = this.createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
      const fragmentShader = this.createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);

      // 创建着色器程序并链接着色器
      const program = gl.createProgram();
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);
      gl.useProgram(program); // 使用该着色器程序

      // 绑定顶点缓冲区
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
      // 获取顶点属性位置
      const a_Position = gl.getAttribLocation(program, 'a_Position');
      // 指定如何从缓冲区获取顶点数据
      gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(a_Position); // 使能顶点属性

      // 设置投影矩阵和模型视图矩阵
      const projectionMatrix = mat4.create();
      const modelViewMatrix = mat4.create();
      // 定义透视投影
      mat4.perspective(projectionMatrix, Math.PI / 4, canvas.width / canvas.height, 0.1, 100);
      // 将模型沿 Z 轴平移
      mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -3]);

      // 获取 uniform 变量位置
      const u_ProjectionMatrix = gl.getUniformLocation(program, 'u_ProjectionMatrix');
      const u_ModelViewMatrix = gl.getUniformLocation(program, 'u_ModelViewMatrix');
      // 将矩阵传入着色器
      gl.uniformMatrix4fv(u_ProjectionMatrix, false, projectionMatrix);
      gl.uniformMatrix4fv(u_ModelViewMatrix, false, modelViewMatrix);

      // 开始绘制
      this.draw(gl, program, indices.length);
    },
    createShader(gl, source, type) {
      // 创建着色器并编译
      const shader = gl.createShader(type);
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      // 检查着色器编译是否成功
      if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        return shader;
      } else {
        console.error(gl.getShaderInfoLog(shader)); // 输出编译错误信息
        gl.deleteShader(shader); // 删除着色器
      }
    },
    draw(gl, program, numIndices) {
      let angle = 0; // 用于控制立方体旋转的角度

      const render = () => {
        // 清除颜色和深度缓冲
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        const modelViewMatrix = mat4.create();
        mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -3]); // 将模型沿 Z 轴平移
        mat4.rotateY(modelViewMatrix, modelViewMatrix, angle); // 绕 Y 轴旋转

        // 将更新后的模型视图矩阵传入着色器
        const u_ModelViewMatrix = gl.getUniformLocation(program, 'u_ModelViewMatrix');
        gl.uniformMatrix4fv(u_ModelViewMatrix, false, modelViewMatrix);

        // 绘制立方体
        gl.drawElements(gl.TRIANGLES, numIndices, gl.UNSIGNED_SHORT, 0);
        
        angle += 0.01; // 增加角度，实现旋转
        requestAnimationFrame(render); // 请求下一帧
      };

      render(); // 启动渲染循环
    },
  },
};
</script>

<style scoped>
.webgl-canvas {
  width: 100%; /* canvas 占满父元素 */
  height: 100%; /* canvas 占满父元素 */
}
</style>

4. 使用组件

在 src/App.vue 中使用 WebGLCanvas 组件：

<template>
  <div id="app">
    <WebGLCanvas />
  </div>
</template>

<script>
import WebGLCanvas from './components/WebGLCanvas.vue';

export default {
  name: 'App',
  components: {
    WebGLCanvas,
  },
};
</script>

<style>
#app {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>