揭秘WebGL直角坐标系中向量妙用-探索位置和位移的奥秘

前端

2023-12-14 15:27:26

众所周知，向量在直角坐标系中可以表示一个点或一个矢量箭头，视乎如何使用。在WebGL中，也是如此。

位置

在WebGL中，向量可以被用作点的位置坐标。例如，我们可以使用向量(1, 2, 3)来表示一个点在三维空间中的位置。在顶点着色器中，我们可以访问顶点的属性，包括位置坐标，并将这些坐标作为参数传递给片元着色器。

位移

向量也可以被用作物体的位移量。例如，我们可以使用向量(1, 0, 0)来表示物体在x轴上向右移动1个单位。位移量可以被添加到物体的当前位置，以获得物体的新的位置。

除了作为位置和位移，向量在WebGL中还有许多其他的应用。例如，向量可以被用作法向量、纹理坐标、颜色等。

在使用向量时，我们需要特别注意向量的长度和方向。向量的长度是正实数，表示向量的强度。向量的方向由向量的终点相对于起点的位置确定。

为了更清晰地展现向量在WebGL中的实际应用，我们举一个具体的例子。假设我们有一个简单的WebGL程序，它在屏幕上显示一个立方体。我们可以使用向量来定义立方体的顶点位置、法向量和颜色。

// 定义立方体的顶点位置
const vertices = [
  -1, -1, -1,
   1, -1, -1,
   1,  1, -1,
  -1,  1, -1,
  -1, -1,  1,
   1, -1,  1,
   1,  1,  1,
  -1,  1,  1,
];

// 定义立方体的法向量
const normals = [
   0, -1,  0,
   0,  1,  0,
   0,  0,  1,
   0,  0, -1,
  -1,  0,  0,
   1,  0,  0,
  0,  0,  1,
  0,  0, -1,
];

// 定义立方体的颜色
const colors = [
  1, 0, 0,
  0, 1, 0,
  0, 0, 1,
  1, 1, 0,
  0, 1, 1,
  1, 0, 1,
  1, 1, 1,
  0, 0, 0,
];

// 创建一个WebGL程序
const program = createWebGLProgram();

// 将顶点位置、法向量和颜色数据传递给WebGL程序
bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(0);

bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(1);

bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(2);

// 将模型-视图矩阵和投影矩阵传递给WebGL程序
const modelViewMatrix = mat4.create();
mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -5]);
mat4.rotateX(modelViewMatrix, modelViewMatrix, degToRad(30));
mat4.rotateY(modelViewMatrix, modelViewMatrix, degToRad(45));

const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, degToRad(60), gl.canvas.width / gl.canvas.height, 0.1, 100);

gl.uniformMatrix4fv(gl.getUniformLocation(program, "modelViewMatrix"), false, modelViewMatrix);
gl.uniformMatrix4fv(gl.getUniformLocation(program, "projectionMatrix"), false, projectionMatrix);

// 绘制立方体
gl.drawArrays(gl.TRIANGLES, 0, 36);