前言
大家可能都了解了引擎自带的天空盒子，菜鸟也用过，感觉很棒。但是菜鸟在使用的过程中感觉天空盒子太大了，而场景比较小，所以想缩放一下天空盒子，奈何没找见，所以私下自己使用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每个面切图实际的显示效果，想要达到预期的效果部分面需要进行特殊的处理
地址
- 微信公众号：搬砖小菜鸟
- 扫码关注公众号，发送"天空盒子"可获取源码
