Javascript 在屏幕坐标中平移对象

我在OpenGL（WebGL）中有一个对象，我对它的外观很满意，我想把它移到左边一点。然而，当我这样做的时候，它的视角发生了变化。我想让它保持原样，只是让它在不同的地方渲染

我想我使用的是一个相当标准的设置，带有投影和模型视图矩阵。我试着用不同的方式来改变这两种方式，但我只能让我的物体在3D空间中移动，而不能在平面屏幕或眼睛坐标中移动。有没有办法做到这一点（例如不渲染纹理）

---

一些代码摘录。这些函数做了显而易见的事情，它们取自Mozilla WebGL教程。我认为确切的定义并不重要

// set perspective matrix
var perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
loadIdentity();
// set modelview matrix
mvTranslate([0, 0, -12]);
mvRotate(rotationAngle, [0, 1, 0]);
// and then I just draw an object...

在顶点着色器中：

gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);

---

老实说，我认为具体的准则对于这个问题并不重要。请不要挂断电话。我可以使用Three.js、DirectX或手写光线跟踪器。我将重新表述这个问题：在标准形式中，屏幕坐标是通过矩阵乘法从模型坐标计算出来的：

u = Perspective * ModelView * x

我想在屏幕上移动

u

。我可以用手来做：

u.x += deltaX
u.y += deltaY

---

但是有没有一种方法可以使用透视矩阵来获得相同的效果呢？是否有在视图空间中引入转换的“标准”方法？OpenGL中是否有一个方便的函数来实现这一点？

好的，我想我已经解决了。要进行翻译，需要乘以翻译矩阵（这里的语法来自Mozilla WebGL教程，它使用sylvester.js和它自己的函数的组合，但实际上只是将其视为伪代码）

下面将一个单位转换为左侧，一个单位转换为侧面

var shift = Matrix.Translation($V([-1, -1, 0]));

如果你的对象在屏幕中间（0, 0），并且你的坐标从左下角（-1，-1）到右上角（1, 1），这将对象的中间放在左下角。

现在的关键是要记住，矩阵乘法通常是非交换的。所以你不能做

perspective x something

，它必须是

something x perspective

。这样，当您对模型向量进行操作时，将首先应用透视图，然后应用移位：

var shiftedPerspectiveMatrix = shift.x(perspectiveMatrix)

另外，以下是如何在像素坐标中执行此操作：

// for referece:
var perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
var trans = Matrix.Translation($V([-1, -1, 0]));
var scale = Matrix.Diagonal([320, 240, 1, 1]);
// move 100 pixels to the left
var viewShift = Matrix.Translation($V([-100, 0, 0]));

let transI = trans.inv();
let scaleI = scale.inv();
var newPerspectiveMatrix = transI.x(scaleI).x(viewShift).x(scale).x(trans).x(perspectiveMatrix);

要记住的是，当M是一个矩阵时，M−1 M是不可操作的。应用M后，您将生活在不同的坐标系中。因此，如果要应用的变换A是在不同的坐标系中定义的，则可以执行x'=M−1米x

对不起，我把订单弄乱了。解析几何和线性代数已经有很长一段时间了

---

现在，上面的代码所做的是，它将坐标更改为人类可理解的系统（屏幕像素，尽管原点在中心），应用我想要进行的转换，并转换回OpenGL可理解的系统。请注意，应用程序是从右向左的，我按相反的顺序撤消操作。

给我们一些相关代码。你用过glmatrix引擎吗？@NikolaLukic我不知道你想看什么代码，答案不应该取决于它。我添加了一些矩阵逻辑。但是你可以想象任何简单的OpenGL代码，比如说画一个立方体。我想把立方体放在屏幕的侧面，但我不想用立方体来显示它的侧面，也不想改变透视图。我没有使用glmatrix，但是答案应该与框架无关。我在寻找类似“用这个乘以你的透视矩阵”或“使用glShiftScreen魔法函数”的东西。我想我可以通过在着色器中添加x和y坐标来实现它，直到我满意为止，但我想知道正确的常规方法。你发布的代码不应该显示侧面。您发布的代码正在调用函数

makeOrtho

。也许您需要将代码发布到该函数中，因为正交矩阵不应显示边。@jdm lol，编辑得很好\s，这正是发布代码的必要原因。。。