无法通过旋转使模型矩阵在屏幕上居中

Question

我在尝试旋转位于 0,0,0 位置的模型时遇到困难。

这是设置此功能的模型类：

import { mat4, vec3 } from "gl-matrix";

export class Model {
  constructor(position) {
    this.mat = mat4.create();
    this.position = position;

    this.#create();
  }

  #create() {
    mat4.identity(this.mat);
    mat4.rotateY(this.mat, this.mat, 0.2);
    mat4.translate(this.mat, this.mat, this.position);
  }
}

查看：

import { mat4, vec3 } from "gl-matrix";

export class View {
  constructor(cameraPos, targetPos) {
    this.cameraPos = cameraPos;
    this.targetPos = targetPos;

    this.mat = mat4.create();

    this.Update();
  }

  Update() {
    mat4.lookAt(this.mat, this.cameraPos, this.targetPos, vec3.fromValues(0,1,0));
  }
}

投影：

import { mat4 } from "gl-matrix";

export class Projection {
  constructor(screenWidth, screenHeight, fov) {
    this.aspect = screenWidth / screenHeight;
    this.fov = fov * (Math.PI / 180);  // Convert FOV from degrees to radians
    this.near = 0.1;
    this.far = 1000.0;
    this.mat = mat4.create();

    this.#create();
  }

  #create() {
    this.mat = mat4.perspective(mat4.create(), this.fov, this.aspect, this.near, this.far);
  }
}

着色器：

  const vertexShader = `
    struct Uniforms {
      projectionMatrix: mat4x4<f32>,
      viewMatrix: mat4x4<f32>,
      modelMatrix: mat4x4<f32>,
    };

    @group(0) @binding(0) var<uniform> uniforms: Uniforms;

    struct VertexOutput {
      @builtin(position) position: vec4<f32>,
      @location(0) color: vec3<f32>,
    };

    @vertex
    fn vertex_main(@location(0) position: vec3<f32>, @location(1) color: vec3<f32>) -> VertexOutput {
      var output: VertexOutput;
      output.position = uniforms.projectionMatrix * uniforms.viewMatrix * uniforms.modelMatrix * vec4<f32>(position, 1.0); // Apply model, view, and projection matrices
      output.color = color; // Pass the color to the fragment shader
      return output;
    }
  `;

  const fragmentShader = `
    @fragment
    fn fragment_main(@location(0) color: vec3<f32>) -> @location(0) vec4<f32> {
      return vec4<f32>(color, 1.0); // Output the color passed from the vertex shader
    }
  `;

我不确定我错过了什么，因为矩阵计算的运算顺序似乎是正确的。我希望帮助确定我是否遗漏了某些内容。谢谢。

这就是顶点的生成方式：

export class Plane {
  constructor(rows, columns) {
    this.rows = rows;
    this.columns = columns;
    this.vertices = [];
    this.indices = [];
  }

  Generate() {
    this.#generateVertices();
    this.#generateIndices();
  }

  #generateVertices() {
    const stepX = 1 / (this.columns - 1); // Step size for columns
    const stepY = 1 / (this.rows - 1); // Step size for rows

    for (let y = 0; y < this.rows; y++) {
      for (let x = 0; x < this.columns; x++) {
        // Random color for each vertex
        const r = Math.random();
        const g = Math.random();
        const b = Math.random();

        // Set Z position to -5.0 to be in front of the camera
        const zPos = -5.0;

        // Add each vertex position and color
        this.vertices.push((x * stepX - 0.5) * 2, (y * stepY - 0.5) * 2, zPos, r, g, b);
      }
    }
  }

  #generateIndices() {
    for (let y = 0; y < this.rows - 1; y++) {
      for (let x = 0; x < this.columns - 1; x++) {
        const topLeft = y * this.columns + x;
        const topRight = topLeft + 1;
        const bottomLeft = topLeft + this.columns;
        const bottomRight = bottomLeft + 1;

        // First triangle (top-left, bottom-left, top-right)
        this.indices.push(topLeft, bottomLeft, topRight);
        // Second triangle (top-right, bottom-left, bottom-right)
        this.indices.push(topRight, bottomLeft, bottomRight);
      }
    }
  }
}

Answer 1

回答 Plane 类中的

const zPos = -5.0;

导致矩阵计算出现问题。