Question

您可以通过以下方式帮助我。

我需要在WebGL场景中进行世界屏幕转换。

保持真的很简单，我正在渲染一条从原点（0,0,0）到点（1,0,0）的线，我想找到屏幕（x，y）位置的结尾line（1,0,0）并在其中放置一个显示字母x的画布元素。

如何将该点转换为屏幕坐标？

我差不多完成了它，但是存在某种缩放问题。

我正在使用glMatrix，在我的渲染代码中我有：

mat4.perspective(45, this.m_WebGLContext.viewportWidth / this.m_WebGLContext.viewportHeight, 0.1, 100.0, this.m_projectionMatrix);
this.m_modelViewMatrix = mat4.lookAt(this.m_eye, this.m_centre, this.m_up);

所以我有一个视图矩阵和一个投影矩阵。我的转换功能如下：

FieldViewer.prototype.Project = function(xzyArray, viewMatrix, projectionMatrix, nViewportWidth, nViewportHeight)
{
    var viewProjectionMatrix = mat4.create();
    mat4.multiply(projectionMatrix, viewMatrix, viewProjectionMatrix);

    var point3D = [0,0,0];
    mat4.multiplyVec3(viewProjectionMatrix, xzyArray, point3D);

    var nWinX = Math.round(((point3D[0] + 1) / 2.0) * nViewportWidth);
    var nWinY = Math.round(((1 - point3D[1]) / 2.0) * nViewportHeight);

    return [nWinX, nWinY];
}

它的工作原理但并不完全。如果我用点[1,0,0]调用它，屏幕x，返回的y与绘制线的末尾不一致，但是它总是位于线上（在它结束之前）。

这里的一个线索必须是这样的事实：当我改变眼睛位置来旋转场景时，计算出的屏幕点（就像我说的那样）在线上（但不与它重合，结束时为1.0.0）但是当我使用鼠标滚轮将相机移开或朝向原点缩放，场景正确地放大，但上述功能只是一直返回相同的值。我的缩放功能只是修改m_eye以使其朝向或远离原点移动。我看到线越来越小但是'x'根本没有移动。然而，如果我围绕原点旋转眼睛位置，它会正确移动。

WebGL“项目”功能

0 个答案: