天空盒:顶
所有文档

          AR开放平台

          天空盒:顶

          目前百度AR可实现的天空盒制作方式有两种,呈现360°全景观看,天空顶的制作方式一种,仅呈现上空效果显示。

          天空盒

          实现

          • 立方体天空盒:通过百度AR提供的天空盒图片切割工具,可将一张全景图片切割为前后左右上下六张图片,实现天空盒效果(常用于直接切入天空盒内部的需求场景)。
          • 模型天空盒 非SLAM类型效果不佳:给一个模型内部贴上贴图,外面套一个透明且相同的模型,通过进入非透明模型内部体验天空盒效果(常用于传送门等需要用户有进入感的需求场景)。

          工具及模型下载

          六面体天空盒切割工具密码:8mgm

          适用于模型天空盒素材

          立方体天空盒 实现

          天空盒通常仅需显示即可,通过在scene中设置天空盒节点,并对该节点操作显示或隐藏即可。除了节点的设置,天空盒的shader也是不能少的,需通过GitHub获取最新的skybox shader。 <立方体天空盒 sample>

          • 首先应该配置skybox类的节点,通过设置visible来控制天空盒项目任意交互中的显示需求。天空盒内部如果要显示其他类型的素材,需要将天空盒调大点,视觉效果上的大取决于天空盒图片,实际的大可以避免手势交互的过程中出现穿透问题。
          代码参考如下:
              {
                "name": "skybox",
                "type": "skybox",
                "touchable": 0,
                "visible": 1,
                "position": "0,0,0",
                "scale": "512, 512, 512",
                "rotation": "0,90,0",
                "material": {
                  "common": {
                    "defaultShaderName": "skyboxShader",
                    "textureList": [
                      {
                        "textureShaderName": "tCube",
                        "textureName": "res/texture/park.jpg",
                        "textureType": "cubeMap"
                      }
                    ]
                  }
                }
              },
          • 其次应该配置相机的默认朝向及位置,保证相机处于天空盒内部,从而实现天空盒效果。(注意:如果不配置该节点,在camera节点参数未更改,且天空盒position为0,0,0 的情况下,天空盒会以立方体形态显示在屏幕中,如果开启手势,可交互。)
          代码参考如下 :
            "cameraDefaultLookAt": {
              "eyePos": "0,0,0",
              "centerPos": "0,-1,0",
              "upDirection": "0,0,-1"
            },

          模型天空盒 实现

          模型天空盒本质是在pod模型内部显示贴图,开启SLAM后该球体模型会固定在初始位置,通过移动手机可以实现近大远小的效果。所以模型天空盒不需要特定的skybox shader,用pod shader即可。

          • 本质:将贴图显示在模型内部,通过更改贴图改变内置场景,其它与普通pod没什么区别,按照正常pod的实现方式实现即可。
          • 直接给模型附加贴图,渲染出来外层也同样显示,根据项目需求,类似传送门如果外层依旧显示是无法满足需求的,那么需要我们在原有的模型基础上,套上一个完全相同且大一点的透明模型(通过指定透明贴图实现),且scene中透明的模型需要先于具体模型渲染。
          json 代码参考如下:
              {
                  "name": "door_alpha",
                  "type": "pod",
                  "visible": 1,
                  "touchable": 1,
                  "meshFileName": "res/model/Door_alpha.pod",
                  "material": {
                      "common": {
                          "texturePath": "res/texture/",
                          "disableLightEffect": 1
                      }
                  },
                  "position": "0,0,0",
                  "scale": "5.1,5.1,5.1",
                  "rotation": "90,180,0",
                  "chirlden": []
              },
              {
                  "name": "door",
                  "type": "pod",
                  "visible": 1,
                  "touchable": 1,
                  "meshFileName": "res/model/Door.pod",
                  "material": {
                      "common": {
                          "texturePath": "res/texture/",
                          "disableLightEffect": 1
                      }
                  },
                  "position": "0,0,0",
                  "scale": "5,5,5",
                  "rotation": "90,180,0",
                  "chirlden": []
              }

          天空顶

          天空顶的实现原理

          • 本质: 在球体模型内部上方显示贴图
          • 贴图要求: 贴图大小占球体模型的10%,且需要有从圆心到圆边渐变淡化的效果。
          • 实现方式: 类似于球形天空盒,区别在于从场景开始时camera就处于天空顶效果下方,或者在需要的情景下让天空顶出现在camera上方。
          • 适用于天空顶球体模型素材

          顶部贴图注意

          不符合贴图要求示例

          符合贴图要求规范示例

          天空顶 code

          天空顶类似于模型天空盒,将camera至于模型内部,模型内顶部贴一张贴图,从而实现天空顶的效果。因此天空顶也不需要特定的shader,用pod shader即可实现<天空顶 sample>。

          代码参考如下:
          	         {
          	             "name": "sky",
          	             "type": "pod",
          	             "visible": 1,
          	             "touchable": 0,
          	             "meshFileName": "res/model/Qiu.pod",
          	             "material": {
          	             "common": {
          	                 "texturePath": "res/texture/",
          	                 "disableLightEffect": 1
          	                 }
          	             },
          	             "position": "0,0,7000",
          	             "scale": "3000, 3000, 3000",
          	             "rotation": "90,0,0",
          	             "chirlden": []
          	         },
          上一篇
          手势交互
          下一篇
          AR语音交互