使用Cesium框架实现全景图

最近几日由于工作中需要把全景图加载到三维场景中，之前网上搜索过，做过的都是结合其他框架来实现，如PhotoSphereViewer。但是当我们需要在Cesium做的项目中，来做数据显示增强的时候（如：点云和全景图叠合）就显得力不从心了，毕竟PhotoSphereViewer是基于threejs来实现的，需要一起来显示的时候就需要控制Cesium的相机和threejs的相机。因此为了更加有效的实现Cesium中场景与全景图完美叠合，就需要Cesium加载全景图。可能我说的叠合有点抽象，那么我用一张图来解释一下。

点云叠合全景，增强显示

和点云数据叠合有个好处就是点云数据拉近看的时候，点云比较稀疏看不清形状，这个时候结合全景图，就能更加清晰的呈现出模型本身。

那么如何实现cesium中加载全景图呢？其实很简单，总结为如下几步：

1、使用EllipsoidGeometry绘制一个球

2、给这个球贴上纹理，由于我们贴的时候一般都贴到球的表面，但是我们看的时候视角是从球里面往外面看的，所以需要对纹理做一个反转

3、固定相机位置为球的中心点，这样就可以绕着这个点往四周看了

我这里把使用的贴纹理的shader贴出来供大家参考：

function getVS() {
return "attribute vec3 position3DHigh;\
                attribute vec3 position3DLow;\
                attribute vec2 st;\
                attribute float batchId;\
                varying vec2 v_st;\
                void main()\
                {\
                    vec4 p = czm_computePosition();\
                    v_st=st;\
                    p = czm_modelViewProjectionRelativeToEye * p;\
                    gl_Position = vec4(p.x,p.y,p.z,p.w);\
                }\ ";
}

function getFS() {
return "varying vec2 v_st;\
                void main()\
                {\
                    czm_materialInput materialInput;\
                    czm_material material=czm_getMaterial(materialInput,v_st);\
                    vec4 color=vec4(material.diffuse + material.emission,material.alpha);\
                    if(color.x==1.0&&color.y==1.0&&color.z==1.0&&color.w==1.0) color=vec4(vec3(0.0,0.0,0.0),0.0);\
                    gl_FragColor =color;\
                }\ ";
}

function getMS() {
return "czm_material czm_getMaterial(czm_materialInput materialInput,vec2 v_st)\
                {\
                  vec2 cood = vec2(1.0 - v_st.x, v_st.y);\
                  vec4 color = texture2D(image, cood);\
                  czm_material material = czm_getDefaultMaterial(materialInput);\
                  material.diffuse= color.rgb;\
                  material.alpha=color.a;\
                  return material;\
                }\";
}

最后附一张叠合的效果图：

点云+全景图