前言

大家可能都了解了引擎自带的天空盒子，菜鸟也用过，感觉很棒。但是菜鸟在使用的过程中感觉天空盒子太大了，而场景比较小，所以想缩放一下天空盒子，奈何没找见，所以私下自己使用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每个面切图实际的显示效果，想要达到预期的效果部分面需要进行特殊的处理

地址

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

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

Cesium与STK中的天空盒子(skybox)
天空盒子是计算机图形学中的概念,用于在3D展示中,显示观测者上下左右前后的全景图像. 星空图介绍在STK和Cesium中,常常以地球为中心天体,背景就是宇宙星空,观测者超哪个方向看,就可以看到对应方 ...
UnityShader_天空盒子中的反射、折射、聂菲尔效应
反射反射的原理在之前的文章中已有,在此不再赘述,这里主要讲一下天空盒子纹理的采集主要看代码中有注释的部分,其中在 texCUBE 中没有对i.worldRefl进行归一化,是因为仅仅是传递方向变量 ...
OpenGL应用：天空盒子(SkyBox)
天空盒子(skyBox) SkyBox 制作3D游戏的一个经典技术应用. 原理 SkyBox 是基于正方体模型的渲染技术.将6个方向拍下来的天空图片分别贴在正方体的对应面上,从内部观察正方体就可以得到 ...
Cesium近景蓝色晴空万里天空盒子替换方法源码及图片资源-实测可用
最近看着Cesium默认的近景天空就觉得心情有点灰暗和压抑,看到有的平台的天空是蓝天白云非常的养眼,就尝试这更改下,原来Cesium提供的天空盒子是远景的,近景的话,就是蓝白色的天空测试的版本:Ce ...
Unity代码设置天空盒子skybox 及定时切换
目录: 一.代码二.解析三.核心前言:并非自创,看的是同行的博文--在此向前人致谢一.代码 using System.Collections; using System.Collections ...
【一步步学OpenGL 25】-《Skybox天空盒子》
教程 25 Skybox天空盒子原文: http://ogldev.atspace.co.uk/www/tutorial25/tutorial25.html CSDN完整版专栏: http://bl ...
使用opengl绘制立方体_一步步学OpenGL(25) -《Skybox天空盒子》
教程 25 Skybox天空盒子原文: http://ogldev.atspace.co.uk/www/tutorial25/tutorial25.html CSDN完整版专栏: https://b ...
Opengl-立方体贴图(天空盒子)
立方体贴图就是一个包含了6个2D纹理的纹理,每个2D纹理都组成了立方体的一个面:一个有纹理的立方体.你可能会奇怪,这样一个立方体有什么用途呢?为什么要把6张纹理合并到一张纹理中,而不是直接使用6个单独 ...
Unity 360全景图转换为天空盒子
第一种方式把你的全景图拖入到unity里面,然后新建材质球,选择shader/skybox/panoramic,更换全景贴图 ok 把天空盒换成你的材质球结束 (这个目前有一个问题,有一条缝,地面会 ...

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

前言