在WebGL中,可以使用矩阵在屏幕空间中绘制对象偏移吗?

问题描述

我有一个简单的对象,它在0、0、0处绘制3d小控件。如果相机位于0、0、0的中心,则它将小控件绘制在屏幕中心。

enter image description here

我想“提起”这个Gizmo,并在屏幕坐标的屏幕右下角渲染它,而不旋转它。基本上,我希望Gizmo显示屏幕中心的旋转而不会阻塞视图,而不必专注于特定点。所以我想消除模型矩阵之类的东西。

通过转换投影矩阵,我可以进行以下工作:

enter image description here

this.gl.uniformMatrix4fv(this.modelMatrixUniform,false,modelMatrix);
this.gl.uniformMatrix4fv(this.viewMatrixUniform,viewMatrix);

const bottomRightMat = mat4.create();
mat4.translate(bottomRightMat,projectionMatrix,[5,-3,0]);
this.gl.uniformMatrix4fv(this.projectionMatrixUniform,bottomRightMat);
this.gl.drawElements(this.gl.LINES,this.indexBuffer.getLength(),this.gl.UNSIGNED_SHORT,0);

但是小控件已被旋转到新位置。红线仍应指向下方和左侧,因为那是屏幕中心的X轴正方向。另外,数字5和3是任意的,我认为它们不能在不同的变焦或相机位置使用。

有没有一种方法可以指定一个以屏幕中心为中心并在屏幕空间中进行转换的矩阵变换?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)