WebGL坐标系探索：从右手定则到左手定则

2023-10-26 21:27:52

WebGL的世界坐标系是三维的，坐标轴的方向和关系遵循右手定则。右手定则 是指右手大拇指指向x轴正方向、食指指向y轴正方向、中指指向z轴正方向。这三根手指相互垂直， образуют пространственную прямоугольную систему координат.

在右手坐标系中，z轴指向观察者，x轴向右，y轴向上。原点通常位于画布的中心。这种坐标系符合我们日常的直观感受，物体的大小和位置也更符合我们的视觉习惯。

WebGL还支持左手坐标系，与右手坐标系镜像对称。左手定则 是指左手大拇指指向x轴正方向、食指指向y轴负方向、中指指向z轴负方向。

转换到左手坐标系时，可以通过对y轴和z轴取反来实现。这种坐标系在一些特定的应用场景中使用，例如计算机视觉和图像处理。

坐标变换

在WebGL中，可以通过以下变换操作来操纵坐标系：

平移： 将坐标系沿x、y或z轴移动。
旋转： 将坐标系绕x、y或z轴旋转。
缩放： 放大或缩小坐标系中的对象。

这些变换可以通过使用WebGL提供的矩阵进行实现。

实例

为了更好地理解坐标系，我们来看一个简单的WebGL示例：

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');

// 设置顶点着色器
const vertexShader = `
attribute vec3 position;
void main() {
  gl_Position = vec4(position, 1.0);
}
`;

// 设置片段着色器
const fragmentShader = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

// 编译着色器
const vertexShaderCompiled = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShaderCompiled, vertexShader);
gl.compileShader(vertexShaderCompiled);

const fragmentShaderCompiled = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShaderCompiled, fragmentShader);
gl.compileShader(fragmentShaderCompiled);

// 创建程序对象
const program = gl.createProgram();
gl.attachShader(program, vertexShaderCompiled);
gl.attachShader(program, fragmentShaderCompiled);
gl.linkProgram(program);

// 创建缓冲区对象
const positionBuffer = gl.createBuffer();

// 绑定缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// 设置顶点数据
const positions = [
  -0.5, -0.5, 0.0,
  0.5, -0.5, 0.0,
  0.0, 0.5, 0.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// 设置attribute属性
const positionAttributeLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 清除画布
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 使用程序对象
gl.useProgram(program);

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