three.js NDC空间转视图空间(getViewPosition)

力博荣三维可视化

已于 2024-07-17 17:47:29 修改

阅读量801

点赞数 10

分类专栏：计算机图形学文章标签： javascript 开发语言 ecmascript

于 2024-07-17 17:43:52 首次发布

本文链接：https://blog.csdn.net/qq_21476953/article/details/140500996

版权

计算机图形学专栏收录该内容

17 篇文章 0 订阅

订阅专栏

three.js NDC空间转视图空间

请添加图片描述

NDC空间转视图空间, 比较常用。很多效果依赖于此。
包括:

GTAOShader
ReflectorForSSRPass
SSRShader

下面看一下它的庐山真面目。

1、计算clipW

视图空间(view) 应用投影矩阵后转换到 剪裁空间(clip)。
$\left[ \begin{matrix} A & 0 & B & 0 \\ 0 & C & D & 0 \\ 0 & 0 & E & F \\ 0 & 0 & -1 & 0 \end{matrix} \right] \left[ \begin{matrix} view_{x} \\ view_{y} \\ view_{z} \\ 1 \\ \end{matrix} \right] = \left[ \begin{matrix} clip_{x} \\ clip_{y} \\ clip_{z} \\ clip_{w} \\ \end{matrix} \right]$

投影矩阵按列存储在glsl中。那么就会存储为:
$\left[ \begin{matrix} A & 0 & 0 & 0 \\ 0 & C & 0 & 0 \\ B & D & E & -1 \\ 0 & 0 & F & 0 \end{matrix} \right]$

于是:

// clipZ = E * viewZ + F
clipZ = (viewZ * cameraProjectionMatrix[2][2]) + cameraProjectionMatrix[2][3]

// clipW = -1 * viewZ + 0
clipW = (viewZ * cameraProjectionMatrix[3][2]) + cameraProjectionMatrix[3][3] = -viewZ

2、计算viewZ

原理见: three.js 中的 perspectiveDepthToViewZ

float getDepth( const in vec2 uv ) {
  return texture2D( tDepth, uv ).x;
}

float getViewZ( const in float depth ) {
  return perspectiveDepthToViewZ( depth, cameraNear, cameraFar );
}

float depth = getDepth( vUv );
float viewZ = getViewZ( depth );

3、计算 viewPos

vec3 getViewPosition(
  const in vec2 uv,
  const in float depth,
  const in float clipW
) {
  // ndc
  vec4 clipPosition = vec4( ( vec3(uv, depth) - 0.5 ) * 2.0, 1.0 );

  // clip
  clipPosition *= clipW;

  // view
  return ( cameraInverseProjectionMatrix * clipPosition ).xyz;
}

vec3 viewPosition = getViewPosition( vUv, depth, clipW );