将一个视图中的可见像素投射到另一视图上

时间:2018-07-03 21:50:36

标签: javascript math 3d webgl projection-matrix

在WebGL或纯矩阵数学中,我想将一个视图中的像素与另一视图匹配。也就是说,假设我采用x,y = 0,0的像素。该像素位于我的世界中3d对象的表面上。然后我绕着物体微微绕轨道旋转。现在,在我的新视图中位于0,0的那个像素在哪里?

如何计算第一个视图中的每个像素与第二个视图中的每个像素之间的对应关系?

所有这些操作的目标是运行一种遗传算法,以生成从多个方向破坏形状的迷彩图案。

所以我想知道从多个角度在对象上添加纹理的效果。我想要像素对应性,因为所有时间渲染太慢。

1 个答案:

答案 0 :(得分:1)

要将点从世界坐标转换为屏幕坐标,请将其乘以视图和投影矩阵。因此,如果屏幕上有一个像素,则可以通过逆变换将其坐标(对于所有三个轴,范围都在-1..1范围内)相乘,以找到世界空间中的相应点,然后将其与新的视图/投影矩阵相乘下一个帧。

要注意的是,如果要查找网格点的运动,则需要正确的深度(Z坐标)。为此,您既可以通过该像素跟踪光线并以困难的方式找到其与网格的交点,也可以通过首先将其渲染为纹理来简单地读取Z缓冲区的内容。

类似的技术用于运动模糊,其中在片段着色器中计算每个像素的速度。可以在GPU Gems 3 ch27中找到详细的说明。

我用这种技术制作了一个jsfiddle:http://jsfiddle.net/Rivvy/f9kpxeaw/126/

这是相关的片段代码:

// reconstruct normalized device coordinates
ivec2 coord = ivec2(gl_FragCoord.xy);
vec4 pos = vec4(v_Position, texelFetch(u_Depth, coord, 0).x * 2.0 - 1.0, 1.0);
// convert to previous frame
pos = u_ToPrevFrame * pos;
vec2 prevCoord = pos.xy / pos.w;
// calculate velocity
vec2 velocity = -(v_Position - prevCoord) / 8.0;