Cube实现天空盒子，看了你自己也能做

前言

大家可能都了解了引擎自带的天空盒子，菜鸟也用过，感觉很棒。但是菜鸟在使用的过程中感觉天空盒子太大了，而场景比较小，所以想缩放一下天空盒子，奈何没找见，所以私下自己使用Cube实现了一下，分享给大家

效果展示

正文

1.坐标空间

在实现效果之前，菜鸟先对之前没有说到的知识点进行一下补充，先说下一坐标空间，也就是模型渲染到屏幕可预览的过程中经过的坐标转换过程

模型空间

• 首先大家要知道模型或者物体都有各自独立的坐标空间，而模型的顶点坐标是根据模型空间的原点定义的，原点和坐标通常都是由美术在建模中设置的
• 通常模型空间也被称为"对象空间"或者"局部空间"

世界空间

• 也可以说是游戏空间，是最外层的空间，可以被用于描述绝对位置。打个比方，选中场景中的一个模型节点，其中Node属性下的Position就是表示模型原点在世界空间下的绝对位置坐标
  
• 在渲染中，顶点变换的第一步就是把顶点从模型空间转换到世界空间

观察空间

• 也可以称之为：摄像机空间，指的就是摄像机的观察空间
• 在渲染流程中，顶点变换的第二步就是把顶点从世界空间变换到观察空间中，这个变换叫做观察变换（view transform）。

裁剪空间

• 也称之为：齐次裁剪空间。把顶点从观察空间转换到裁剪空间中的矩阵叫做裁剪矩阵，也被称作投影矩阵。

屏幕空间

• 就是屏幕的二维空间，将裁齐空间转化到归一化的设备坐标，然后通关屏幕的宽高像素进行映射，将坐标与屏幕像素坐标对应起来

2.Cube

• 熟悉了坐标空间，咱们来认识一下Cube
• 在模型空间中，+x轴，+y轴，+z轴分别对应的是模型的右，上和前向。如上图
  
  首先咱们做个测试，菜鸟做了一张图来认识一下前，后，左，右，上，下六个面的贴图效果：
• 贴图：
  
• 上
  
• 下
  
• 左
  
• 右
  
• 前
  
• 后
  

通过上面六个面的贴图可以发现，有三个面：front(前)，bottom(下),top（上）这三面的贴图效果和咱们提供的贴图比较被旋转了180度。

3.天空盒子

其实用Cube实现天空盒子和引擎自带的天空盒子差不多一样，同样是使用6个不同方向的贴图，围成一个封闭的天空效果。

4.代码

这里贴出给cube六个面设置不同材质贴图的代码，

vec4 frag () {
  vec4 col = mainColor * texture(top, v_uv);
  if(normal.x==1.0){
    col = mainColor * texture(right, v_uv);
  }else if(normal.x== -1.0){
    col = mainColor * texture(left, v_uv);
  }else if(normal.y==1.0){
    vec2 uv=v_uv;
    uv.y=1.0-uv.y;
    uv.x=1.0-uv.x;
    col = mainColor * texture(top, uv);
  }else if(normal.y== -1.0){
     vec2 uv=v_uv;
    uv.y=1.0-uv.y;
    uv.x=1.0-uv.x;
    col = mainColor * texture(bottom, uv);
  }else if(normal.z==1.0){
    vec2 uv=v_uv;
    uv.y=1.0-uv.y;
    uv.x=1.0-uv.x;
    col = mainColor * texture(front,uv);
  }else if(normal.z== -1.0){
    col = mainColor * texture(back, v_uv);
  }
  col = CC_APPLY_FOG(col, factor_fog);
  return CCFragOutput(col);
}

• 在前面我们了解了Cube每个面切图实际的显示效果，想要达到预期的效果部分面需要进行特殊的处理

地址

• 微信公众号：搬砖小菜鸟
  
• 扫码关注公众号，发送"天空盒子"可获取源码