第二篇：WebGL 的第一步 - 搭建你的开发环境和创建第一个 3D 对象

欢迎进入 WebGL 的世界！

在上一篇《第一篇：WebGL 简介 - 让你的浏览器闪耀起来》，我们介绍了 WebGL 和它的一些基本概念。今天，我们将带你进入更实践的领域：设置你的 WebGL 开发环境并创建你的第一个 3D 对象。

设置开发环境

1. 选择合适的浏览器：

   • 确保你使用的是支持 WebGL 的最新版本的浏览器。Chrome, Firefox, Safari, 和 Edge 都是不错的选择。

2. 调试工具：

   chrome

   • WebGL Inspector
   • Spector.js
   • insight

   npm 包

   • stats.js：一个简单的信息框，展示性能信息

创建你的第一个 WebGL 应用--绘制三角形

1. 编写 WebGL 初始化代码：

   • 在 HTML 文件中，添加一个 <canvas> 元素。这是 WebGL 渲染的地方。
   • 接着，编写 JavaScript 代码来初始化 WebGL 上下文。

   <script setup lang="ts">
     import { ref, onMounted } from "vue";
     const canvas = ref<HTMLCanvasElement | null>(null);
     let gl = ref<WebGLRenderingContext | null>(null);
   
     onMounted(() => {
       if (!canvas.value) return
       //  WebGL 上下文
       gl.value = canvas.value.getContext('webgl')
       if (!gl.value) return
       ...创建webgl主要代码逻辑
     })
   </script>
   
   <template>
     <canvas ref="canvas"> </canvas>
   </template>
   

2. 创建着色器

   着色器是 WebGL 中用来定义物体表面特征（如颜色、亮度等）的小程序。我们将创建一个简单的顶点着色器和片元着色器。

   onMounted(() => {
        ...
       // 1. 顶点着色器
       // 顶点着色器，它接收一个二维向量作为顶点的位置，并将其转换为四维向量，以便在 WebGL 中使用。
       const vertex = `
           attribute vec2 position;
           void main() {
             gl_Position = vec4(position * 1.0, 0.0, 1.0);
           }
       `
       // 创建一个新的顶点着色器对象
       const vertexShader = gl.value.createShader(gl.value.VERTEX_SHADER)
       // 将源代码附加到顶点着色器对象上
       gl.value.shaderSource(vertexShader, vertex)
       // 编译顶点着色器程序
       gl.value.compileShader(vertexShader)
   
   
       // 2. 片段着色器
       // 片段着色器，它接收一个四维向量作为颜色，并将其转换为四维向量，以便在 WebGL 中使用。
       const fragment = `
           precision mediump float;
           void main() {
             gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
           }
       `
       // 创建一个新的片段着色器对象
       const fragmentShader = gl.value.createShader(gl.value.FRAGMENT_SHADER)
       // 将源代码附加到片段着色器对象上
       gl.value.shaderSource(fragmentShader, fragment)
       // 编译片段着色器程序
       gl.value.compileShader(fragmentShader)
   
       // 3. 创建 WebGL 程序对象
       // 创建一个新的 WebGL 程序对象
       const program = gl.value.createProgram()
       // 将顶点着色器对象附加到 WebGL 程序对象上
       gl.value.attachShader(program, vertexShader)
       // 将片段着色器对象附加到 WebGL 程序对象上
       gl.value.attachShader(program, fragmentShader)
       // 链接 WebGL 程序对象
       gl.value.linkProgram(program)
       // 使用 WebGL 程序对象
       gl.value.useProgram(program)
   })
   

3. 定义顶点数据

   我们将定义三个顶点来创建一个三角形。

   onMounted(() => {
        ...
       // 4. 将数据写入缓冲区对象
       // 顶点着色器中的顶点位置变量
       const points = new Float32Array([
           -1, -1,
           0, 1,
           1, -1
       ])
   
       // 创建一个新的缓冲区对象
       const bufferId = gl.value.createBuffer()
       // 将缓冲区对象绑定到目标
       gl.value.bindBuffer(gl.value.ARRAY_BUFFER, bufferId)
       // 向缓冲区对象中写入数据
       gl.value.bufferData(gl.value.ARRAY_BUFFER, points, gl.value.STATIC_DRAW)
   
        // 5. 将缓冲区对象中的数据分配给顶点着色器中的变量
       // 获取顶点着色器中的顶点位置变量
       const aPosition = gl.value.getAttribLocation(program, 'position')
       // 将缓冲区对象分配给 a_Position 变量
       gl.value.vertexAttribPointer(aPosition, 2, gl.value.FLOAT, false, 0, 0)
       // 连接 a_Position 变量与分配给它的缓冲区对象
       gl.value.enableVertexAttribArray(aPosition)
   )}
   

4. 渲染

   onMounted(() => {
        ...
       gl.value.clear(gl.value.COLOR_BUFFER_BIT)
       gl.value.drawArrays(gl.value.TRIANGLES, 0, points.length / 2)
   )}
   

恭喜你，当你把这些代码片段组合到一起并运行时，你应该会在浏览器中看到一个红色的三角形。

在接下来,我们将进一步探讨如何使用更复杂的几何形状、添加光照效果、以及如何应用纹理映射，让你的 3D 场景更加生动。