图形API学习工程（30）：尝试使用panorama来代替Cubemap作为全景图

工程GIT地址：https://gitee.com/yaksue/yaksue-graphics

前言

为了能得到全方位的光照数据，我之前学习了使用CubeMap作为全景图。CubeMap包含六张贴图对应了上下左右前后六个方向的数据。但是最近在下载全景图的资源时，看到很多并非是CubeMap的格式，而是Panorama的格式，就像从这里下载的数据。Panorama是一个单张的贴图。所以为了能使用这些数据，我想我也应该实现对这种格式的采样。

目标

学习 CubeMap 和 panorama 这两种全景图格式。
在工程中实现 panorama 的采样来代替CubeMap。

CubeMap 和 Panorama

CubeMap是六张贴图，对应了上下左右前后六个方向的数据。
Panorama是一个单张的贴图，但是也包含了所有的方向。

二者可以相互转换：（不过从理论上讲，这种转换应该不是无损的）

Panorama转CubeMap：https://jaxry.github.io/panorama-to-cubemap/

CubeMap转Panorama：https://danilw.github.io/GLSL-howto/cubemap_to_panorama_js/cubemap_to_panorama.html

接下来，我就用上面CubeMap转Panorama的工具，生成当前工程里所用的天空盒的Panorama版本（各个面的对应关系需要注意，详见附录）。然后对其采样，理论上效果应和CubeMap版本一致。

采样Panorama贴图

我本想在网上找一个比较权威的采样方式，但可惜没找到。后来意识到，大概是因为本身比较简单，毕竟采用极坐标的方式采样是很自然的想法。

我这里就尝试用极坐标的方式，具体的对应关系如下：

在shader中，将一个三维方向转换成一个极坐标最后转换为采样贴图UV的代码如下：（这里以Y轴正方向为向上方向，以Z轴正方向为方位角0度的方向）

//将一个三维方向转换为采样Panorama贴图的UV
float2 PanoramaUV(float3 direction)
{
	//用极坐标作为采样Panorama贴图的UV

	//首先，以下面的对应关系来构建一个极坐标系：
	//Y轴正方向 = 极轴的正方向（“向上”的方向）
	//Z轴正方向 = 方位角为0度的方向

	//使用正弦来计算极角
	//极角，弧度制，范围[-pi/2,pi/2]：
	float polar = asin(direction.y / length(direction));

	//先算出与Z轴正方向的夹角：
	float angle_between_Z = acos(direction.z / length(direction.xz));
	//由于Z轴正方向两边的角度是镜像的，所以需要再乘算上X方向的正负性来做区分才能算出方位角
	//方位角，弧度制，范围[-pi,pi]：
	float azimuth = angle_between_Z * (direction.x / abs(direction.x));

	//将极坐标转换为采样2D贴图的坐标：
	float2 result;
	result.x = azimuth / PI / 2 + 0.5;  //将方位角范围映射到[0,1]
	result.y = 1.0 - (polar / PI + 0.5);//先将极角范围映射到[0,1]，然后再翻转，因为V的正方向朝下

	return result;
}

效果

和预期一样，和CubeMap的效果一致。

也测试下在这里下载的数据：

问题

对于当前工程里的D3D12版本来说，有条1像素宽的忽隐忽现的黑线：

对于当前工程里的D3D11版本来说，有条2像素宽的忽隐忽现的黑线，在极轴的两端还有黑点。

初步怀疑和纹理在边界的采样设置有关，具体待后续研究。

附录：用链接里的工具转换时，CubeMap各个面对应关系

上下保持不变，其他四个方向对应如下：

结果如下：