工程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各个面对应关系
上下保持不变,其他四个方向对应如下:
结果如下: