资讯 社区 文档
技术能力
语音技术
文字识别
人脸与人体
图像技术
语言与知识
视频技术

天空盒:顶

天空盒/顶

目前百度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语音交互