如何在webgl中的模型视图矩阵中设置旋转轴

Question

我从 webgl 基础学习这个旋转代码，它围绕 0 0 原点旋转对象。 https://jsfiddle.net/eguneys/5s7n82pt/6/。我自己写了完全相同的代码，当我旋转时，它围绕中间点（宽度/2，高度/2）旋转并且旋转不正确，它倾斜并且不起作用。

所以我的问题是为什么会发生这种情况，以及如何围绕中间点旋转此示例代码。

in vec2 a_position;

// Used to pass in the resolution of the canvas
uniform vec2 u_resolution;

// A matrix to transform the positions by
uniform mat3 u_matrix;

// all shaders have a main function
void main() {
  // Multiply the position by the matrix.
  vec2 position = (u_matrix * vec3(a_position, 1)).xy;

  // convert the position from pixels to 0.0 to 1.0
  vec2 zeroToOne = position / u_resolution;

  // convert from 0->1 to 0->2
  vec2 zeroToTwo = zeroToOne * 2.0;

  // convert from 0->2 to -1->+1 (clipspace)
  vec2 clipSpace = zeroToTwo - 1.0;

  gl_Position = vec4(clipSpace, 0, 1);
}

Answer 1

你从这篇文章中清楚地看到了那个着色器this article

你显然没有读完这篇文章，因为那个着色器来自文章的顶部，而这篇文章的重点是那个着色器可以减少到

#version 300 es

in vec2 a_position;

uniform mat3 u_matrix;

void main() {
  gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
}

它指出了为什么这样更好，原因之一是您可以在不更改着色器的情况下移动轴心点。它给出了一个示例，其中它更改了示例模型的枢轴

它从这样的代码开始，其中模型围绕其本地原点旋转，该原点是模型的左上角

var translationMatrix = m3.translation(translation[0], translation[1]);
var rotationMatrix = m3.rotation(rotationInRadians);
var scaleMatrix = m3.scaling(scale[0], scale[1]);

// Multiply the matrices.
var matrix = m3.multiply(translationMatrix, rotationMatrix);
matrix = m3.multiply(matrix, scaleMatrix);

然后将枢轴移动到模型的中心，模型宽 100 个单位，高 150 个单位，像这样。

var translationMatrix = m3.translation(translation[0], translation[1]);
var rotationMatrix = m3.rotation(rotationInRadians);
var scaleMatrix = m3.scaling(scale[0], scale[1]);

// make a matrix that will move the origin of the 'F' to its center.
var moveOriginMatrix = m3.translation(-50, -75);
...

// Multiply the matrices.
var matrix = m3.multiply(translationMatrix, rotationMatrix);
matrix = m3.multiply(matrix, scaleMatrix);
matrix = m3.multiply(matrix, moveOriginMatrix);

进一步简化了这些功能，因此您可以执行此操作

// Multiply the matrices.
var matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);
matrix = m3.translate(matrix, x, y);
matrix = m3.rotate(matrix, angle);
matrix = m3.scale(matrix, sx, sy);
matrix = m3.translate(matrix, centerOffsetX, centerOffsetY);

该系列还跟进了大多数 3D 引擎使用的 matrix stacks basically reproducing the canvas 2d matrix system and also scene graphs。 SVG 等结构化绘图系统和 Illustrator 等应用程序也使用场景图。矩阵堆栈和场景图也可以轻松更改旋转轴心点。

如何在webgl中的模型视图矩阵中设置旋转轴

How to set the pivot for rotation in model view matrix in webgl

javascript

webgl