换个漂亮的天空盒子

一：技术原理

天空盒子指的是在三维场景中，利用贴图的方式模拟现实中的天空，以达到场景更加真实的效果。

而每个天空盒子则由6个面构成（即四面体），因此需要6张不一样的贴图来表示各个方向的天空。

在三维场景中，我们还可以创建不同区域来显示不同图形，这个区域即视口。

视口（Viewport）是指窗口中的绘制输出区域。我们可以通过同一个场景建设多个视口，然后在每一个观察口都从不同的方向去观察模型，从而很方便地去获取模型当前的状态。

CityMaker的场景中共有5个视口，为序号0-4，分别表示第一个到第四个视图、PIP画中画视图。

CityMaker支持16种视口模式，请参考本章第三节。

主要接口：

ISkyBox::SetImagePath  ( gviSkyboxImageIndex  ImageIndex,  BSTR ImagePath  ) 
参数详解：
    ImageIndex：指天空盒四方体中的面类型。
    ImagePath：指向图片所在的文件路径，支持HTTP网络路径。

天空盒四面体的面类型为枚举型，如下：
gviSkyboxImageFront  北向 
gviSkyboxImageBack  南向
gviSkyboxImageLeft  东向 
gviSkyboxImageRight  西向 
gviSkyboxImageTop  顶部，注意图片的上方靠南 
gviSkyboxImageBottom  底部，注意图片的上方靠北

详情请参考SDKHelp中的ISkyBox接口。

二：设置（或更换）天空盒子

1. .Net步骤

多个视口的不同的天空盒子效果如下：设置多个视口的天空盒子
在这里插入图片描述
（1）设置天空盒子

     string[] pngNames = new string[] { "1_BK.jpg", "1_DN.jpg", "1_FR.jpg", "1_FR.jpg", "1_RT.jpg", "1_UP.jpg" };
    private void SetSkyBox(string[] pngNames, int portIndex)
    {
        string tmpSkyboxPath = @"D:\citymakerbookdata\skybox";
        ISkyBox skybox = rendercontrol.ObjectManager.GetSkyBox(portIndex);    //获取对应视口的天空盒子
        skybox.SetImagePath(gviSkyboxImageIndex.gviSkyboxImageBack, tmpSkyboxPath + "\\" + pngNames[0]);
        skybox.SetImagePath(gviSkyboxImageIndex.gviSkyboxImageBottom, tmpSkyboxPath + "\\" + pngNames[1]);
        skybox.SetImagePath(gviSkyboxImageIndex.gviSkyboxImageFront, tmpSkyboxPath + "\\" + pngNames[2]);
        skybox.SetImagePath(gviSkyboxImageIndex.gviSkyboxImageLeft, tmpSkyboxPath + "\\" + pngNames[3]);
        skybox.SetImagePath(gviSkyboxImageIndex.gviSkyboxImageRight, tmpSkyboxPath + "\\" + pngNames[4]);
        skybox.SetImagePath(gviSkyboxImageIndex.gviSkyboxImageTop, tmpSkyboxPath + "\\" + pngNames[5]);
    }

（2）为多个视口设置不同的天空盒子

private void setMultiSkyBox(){
    //设置视口模式为上下各两个
    this.axRenderControl1.Viewport.ViewportMode = gviViewportMode.gviViewportQuad;
    string[] pngNames = new string[] { "1_BK.jpg", "1_DN.jpg", "1_FR.jpg", "1_FR.jpg","1_RT.jpg", "1_UP.jpg" };
    string[] pngNames1 = new string[] { "2_BK.jpg", "2_DN.jpg", "2_FR.jpg", "2_FR.jpg", "2_RT.jpg", "2_UP.jpg" };
    string[] pngNames2 = new string[] { "04_BK.jpg", "04_DN.jpg", "04_FR.jpg", "04_FR.jpg", "04_RT.jpg", "04_UP.jpg" };
    string[] pngNames3 = new string[] { "9_BK.jpg", "9_DN.jpg", "9_FR.jpg", "9_FR.jpg", "9_RT.jpg", "9_UP.jpg" };
    SetSkyBox(pngNames, 0);        // 设置第一屏视口天空盒
    SetSkyBox(pngNames1, 1);    // 设置第二屏视口天空盒
    SetSkyBox(pngNames2, 2);    // 设置第三屏视口天空盒
    SetSkyBox(pngNames3, 3);     // 设置第四屏视口天空盒 
}

2. JS步骤

（1）设置天空盒子

  /*设置天空盒子*/
function setSkyBox(pngNames, portIndex){
    var tmpSkyboxPath="D:\\citymakerbookdata\\skybox";
    var skybox = __g.objectManager.getSkyBox(portIndex);    //获取对应视口的天空盒子
    skybox.setImagePath(1, tmpSkyboxPath + "\\" + pngNames[0]);     // 1:ImageBack
    skybox.setImagePath(5, tmpSkyboxPath + "\\" + pngNames[1]);        // 5:ImageBottom
    skybox.setImagePath(0, tmpSkyboxPath + "\\" + pngNames[2]);        // 0:ImageFront
    skybox.setImagePath(2, tmpSkyboxPath + "\\" + pngNames[3]);        // 2:ImageLeft
    skybox.setImagePath(3, tmpSkyboxPath + "\\" + pngNames[4]);        // 3:ImageRight
    skybox.setImagePath(4, tmpSkyboxPath + "\\" + pngNames[5]);        // 4:ImageTop
}

（2）为多个视口设置不同的天空盒子

  /*设置四个视口，且四个视口的天空盒子各不一样*/
function setMultiSkyBox(){
    //设置视口模式为上下各两个
    __g.viewport.viewportMode = 11;        //gviViewportMode.gviViewportQuad 四视口模式
    var pngNames = [ "1_BK.jpg", "1_DN.jpg", "1_FR.jpg", "1_FR.jpg","1_RT.jpg", "1_UP.jpg" ];
    var pngNames1 =[ "2_BK.jpg", "2_DN.jpg", "2_FR.jpg", "2_FR.jpg", "2_RT.jpg", "2_UP.jpg"];
    var pngNames2 = ["04_BK.jpg", "04_DN.jpg", "04_FR.jpg", "04_FR.jpg", "04_RT.jpg", "04_UP.jpg" ];
    var pngNames3 = ["9_BK.jpg", "9_DN.jpg", "9_FR.jpg", "9_FR.jpg", "9_RT.jpg", "9_UP.jpg" ];

    setSkyBox(pngNames, 0);// 设置第一屏视口天空盒
    setSkyBox(pngNames1, 1);// 设置第二屏视口天空盒
    setSkyBox(pngNames2, 2);// 设置第三屏视口天空盒
    setSkyBox(pngNames3, 3); // 设置第四屏视口天空盒 
}

三：注意事项

1.视口模式如下：

（1）gviViewportSinglePerspective  (默认)单视口透视投影。 
（2）gviViewportStereoAnaglyph  单一视图红蓝立体。设置后立即生效。 
（3）gviViewportStereoQuadbuffer  单一视图四缓冲立体；需要显卡支持才有效；必须初始化时设置使用四缓冲立体后才能生效。（需要“高级立体”授权模块支持）。
（4）gviViewportL1R1 左一右一，共两个视口。 
（5）gviViewportT1B1  上一下一，共两个视口。
（6）gviViewportL1M1R1  左一中一右一，共三个视口。 
（7）gviViewportT1M1B1  上一中一下一，共三个视口。
（8）gviViewportL2R1  左边两个视口，右边一个，共三个视口。
（9）gviViewportL1R2  左一右二，共三个视口。
（10）gviViewportQuad  上下各两个，共四视口。 
（11）gviViewportPIP  大小两视图（画中画）。
（12）gviViewportQuadH  水平四视口。
（13）gviViewportStereoDualView 水平两视口立体。单两个视口图像被压扁，实现在电视机上显示的立体效果。（需要“高级立体”授权模块支持，如果无授权，将会出水印）
（14）gviViewportL1R1SingleFrustum  左右分图。同一个场景显示在两个视口中，图像在两个视口是连续的，但是场景可能不同。
（15）gviViewportT1B1SingleFrustum  上下分图。同一个场景显示在两个视口中，图像在两个视口是连续的，但是场景可能不同。
（16）gviViewportStereoHtcVive  头盔（VR）模式时的左一右一立体。（需要“高级立体”授权模块支持，如果无授权，视口模式切换不生效。 ）

2.可能出现的问题
在设置不同视口模式时，若出现水印，则需要RunTime的“高级立体”授权模块的支持。
若出现视口加载不上，则可能为显卡不支持，请检查显卡性能。

【二次开发】CityMaker更换天空盒