Cocosmos 序章 | 掌中宇宙，浩瀚星海，一眼万年

儿时，您是否也曾抬头，仰望星空……被眼前那无边浩渺、广袤深邃、美轮美奂的景象而深深震撼……

作者和项目介绍

大家好，我是圣子，一名大厂码农，从事游戏和前端互动相关的开发工作多年，平时也算半个的天文爱好者。在日常工作中有将近3年的Cocos引擎的使用经验。一次偶然的机会，打算用个人业余时间写一个演示太阳系的页端demo，无需下载，即点即看，作为社区技术分享。

由于源自个人爱好，不受内容边界的约束，想到哪写到哪。随着开发过程深入，此工程已逐渐发展成为一个实时的、精确的，覆盖整个宇宙尺度的可交互3D模型，并暂时取名为Cocosmos（使用Cocos引擎开发的cosmos宇宙）。

圣子打算在未来将此过程中涉及到的部分游戏开发技术和经验分享给大家。

序章和规划概述

本章将作为这一些列技术分享的先导章节，只涉及内容的介绍和部分重要技术点的概述，并不会展示代码和过多纠缠于实现细节。

圣子可能会在未来章节中详细的分享各处的内容，以下是初步规划的章节标题（但这并不代表最终的章节，随后续地开发，圣子亦会同步增删和修改其中的内容）：

00. 序章（本篇）

01. 从咫尺蓝星到亿万光年

02. 从恒星一点到熠熠光辉

03. 从脚下地球到八大行星

04. 从坐标系统到轨迹方程

05. 从赫罗星谱到银河璀璨

06. 从近日星海到全天星座

07. 从流星一瞬到时光万年

08. 从层次细节到网格绘制

09. 从渲染排序到优化剔除

10. 从光线追踪到引力透镜

11. 规划中……

如果您也是个游戏行业从业者、天文爱好者、程序员或技术达人或任何对此篇内容感兴趣的朋友，请赶紧关注我吧，您的支持会是我莫大的动力。

也欢迎您为这个项目提出宝贵的建议或为我指正其中包含的错误。

Cocosmos

无缝大宇宙

层次模型

Cocosmos

谈及宇宙，大家都知道我们居住的地球属于太阳系，太阳系属于银河系。而太阳系内除了八大行星外还有什么？银河之上、银河之下又有什么？大多人就不甚了解了。

事实上我们的母恒星太阳只是银河系内约2千亿颗恒星中普通的一员，而银河系又只是宇宙中约2万亿个星系中普通的一员。如此庞大的天文数字是很难用语言形容的，因此将广袤的宇宙按照尺度模型划分并分层渲染，有助于Cocosmos在内容上的的科学严谨性和场景资源的有效管控。

宇宙层次模型，点击查看大图

TIPS

    圣子将Cocosmos分为十个尺度，每个尺度的直径都是前者的3-4个数量级（1000~10000倍）。

Cocosmos实机截图：基于幂指数计算

注意上图中最右侧的标尺，随相机视野广度的变化。刻度单位从上到下逐渐增大：

km=公里、c=光秒（即真空光速）、AU=天文单位、LY=光年、kpc=千秒差距、mpc=百万秒差距、H₀=哈勃直径。

TIPS

    圣子使用了两套数值系统：一套正常的科学计数用于实际显示和计算；另一套则只使用10的幂指数，用于无论多大的尺度下用户交互、镜头缩放等都能线性平滑地过渡。

无缝推拉

Cocosmos

Cocosmos可以从千米级别的视角，直接拖拽到整个可观测宇宙，这个过程是无缝衔接的。随视野的缩放，我们可以：聚焦于一颗具体的星球上，观察整个行星系统，查看太阳系下所有天体的运行，群星与星座，银河系的浩瀚的星海，密密麻麻的星系组成的群落，黑洞、超新星、超星系团以及如宇宙长城般庞然大物……

Cocosmos实机截图：土星和它的行星系统

Cocosmos实机截图：太阳和它的恒星系统

Cocosmos实机截图：银河系和它的棒旋结构

TIPS

潜在可见集（Potential Visible Set）思想是一种有效的场景优化手段：我们利用有效的场景层次划分，动态地预测和加载即将被渲染的场景物体，合理地释放和销毁远离当前尺度下的场景资源。

Cocosmos实机截图：超星系团和星际长城

Cocosmos实机截图：哈勃直径与宇宙极限

TIPS

视锥体裁剪（View Frustum Culling）是一个常见的预剔除手段，有趣的在我们的场景下这将十分高效。试想我们的多层相机规划（下文会提及，这将忽视相机剪裁面的设置影响），超大的场景使得星体只是一个点（无需考虑包围盒），这样一来裁剪算法只需要在投影坐标系下与用两次点乘即可实现。

相对变换

Cocosmos

无缝视野缩放，意味着我们需要从最小的单个天体到哈勃直径（约为940亿光年或88,931,000,000,000,000,000,000公里），这将时跨越足足20多个数量级进行渲染。单纯将这些内容统一到世界坐标系下，浮点数的精读表示是不可接受的。对此，我们将使用相对相机的渲染方式。

此方式是在CPU侧算出观察矩阵，再传递到GPU侧替代原世界矩阵参与计算，最后在相机空间下做投影变换。有些引擎已经内置了这种渲染管线，而我们也可以结合需求自行实现：圣子在为了权衡相机动画，最终决定世界空间只参与相对缩放和平移变换，主相机则在单位球上完成球面旋转变换。

Cocosmos中的相对变换图示

虽然我们能通过相对变换去往宇宙的任何地点，但是用户可自由地第一人称漫游并不合理，其原因还是因为宇宙太广袤太空旷。

举例，即使镜头能以光速移动，用户从地球达到海王星还是需要拖拽屏幕足足242分钟！（事实是他大概率会迷失在深空中）

TIPS

除了通常使用的笛卡尔坐标系（Cartesian Coordinate System）外，球面极坐标系（Polar Coordinate Systems）也会经常被使用到。

比如，球面相机的位置描述：方位角+高度角+极半径；其次，我们几乎能获得的所有恒星数据都是通过赤经+赤纬+光年距来表示。

最后，直线而快速地抵达目标非常生硬且容易穿模。因此，在切换不同尺度目标的同时，辅予镜头轨迹变换动画是很有必要的。

例如，圣子在从行星A到行星B的视角切换过程中，相机会自动先拉起到一个合适地太阳系“全景鸟瞰”位置上，再变速抵达目标位置。

Cocosmos实机截图：平滑地目标切换

Cocosmos中的镜头设置功能

TIPS

向量（Vector）、矩阵（Matrix）、欧拉角（Euler Angle）和四元数（Quaternion）是我们做空间计算的基础。不过对数学比较头痛的小伙伴们无需担心，几乎所有引擎和工具都会为我们提供丰富现成的数学库（比如Cocos Creator中已封装的Vec3、Vec4、Mat4和Quat类），只需要我们调用即可。

分层相机

Cocosmos

通常一个3D项目需要前景UI（2D）、背景UI（2D）和主场景（3D）三个相机来分层渲染。部分情况下，Cocosmos还需要前景特效（涉及屏幕后效）和场景Gizimo相机层，如果它们和场景物体有深度排序则要放在主相机下一同渲染。

另外，星空在大尺度的情景下并非处于无限远（所以不能简单的用天空盒或全景图来代替），但是在小尺度下又动辄上亿光年。因此，圣子使用了近景主相机加远景深空相机的方式来渲染主场景部分。这么做保证了相机在深度计算时精度够用，同时无论在那个视角下所有恒星在天球经纬坐标不会有数值误差（否则连接后的星座连线就不对啦）。

TIPS

深空相机使用较大剪裁面值观察星空背景，相对相机使用较小剪裁面值聚焦近物细节。星空不会使用实际距离渲染在亿万光年外，而是远离并止步于1000单位的天球面上。

Cocosmos中的主相机示意图

TIPS

深空相机初始在世界坐标原点并先渲染，相对相机保持在单位球面上并后渲染。前者始终保持与后者的世界方向角一致，在视角变大到一定尺度后逐渐与后者位置重叠。

Cocosmos

纹理与渲染

大气模拟

Cocosmos

行星的大气是一个比较复杂的系统：它们会受到构成物质和自身厚度的影响，且向阳一侧会被照亮，当逆光看去时又因为阳光穿透了大气则散射明显（地表也会与背光面产生更强烈的菲涅尔反射差异对比）。

圣子从效果上总结后，使用了引擎自带的PBR着色器加以简单的修改实现，规避真实而复杂的光照运算带来的性能开销。

Cocosmos实机截图：金星与火星的大气和反射

TIPS

表面着色器（Surface Shader）是Cocos引擎3.4以后提出来的新的着色器编写方案，可以在复用引擎自带的渲染管线和既有算法的情况下，方便快捷地自定义扩展。

这里，圣子既使用了其内置的PBR（基于物理渲染，Physically Based Rendering）管线，通过自定义扩展来满足星表LOD0层级的渲染。

星表渲染

Cocosmos

即便只是八大行星，由于其组成物质和体积质量的差异，也会造成渲染上的不同。比如，水星、金星、地球、火星同属于类地（Terrestrial）行星，它们的地壳为固态的岩石，需要渲染山脉走向。其中，除了水星其他三者还有丰富的大气系统，需要云层。地球还有陆地和水体的反射差异、夜晚面的自放光（源于城市灯光）等。

Cocosmos实机截图：行星星环（左）与海陆反射差异（右）

Cocosmos实机截图：地球背阳面灯光（左）与向阳面云海（右）

木星和土星属于类木（Jovian）行星，是气态巨行星。它们没有明显的地表和大气层的分界线，其中木星表面还有随维度变化的强烈风圈，土星则有最明显的星环。

天王星和海王星则属于类海（Neptunian）行星，是液态冰巨行星。它们远离太阳、反照率低、表面极寒，大气中的甲烷使其在夜空中反射蓝色光芒。

Cocosmos实机截图：木星风圈（左）与地球自转（右）

Cocosmos中编写的行星星表LOD0材质

TIPS

将着色器的可调节参数暴露给材质，使其可视化调节是一个好习惯。这样我们不光可以读取配置文件写实地还原各类天体，还可以为后期组件化调用，随机化、艺术化渲染留下容易扩展的接口。

纹理合图

Cocosmos

在使用多层次细节（Levels of Detail）时，不光模型的面数需要合理降低，我们还应该用更简单的渲染算法和更小的纹理贴图甚至是一些技巧（见下方TIPS）来减轻GPU侧的压力。

比如，在行星系视角下，母行星很大而各卫星都很小；在恒星系视角下，太阳很大而各行星又很小。这里我们可以看出，将合适的一组贴图合并并辅之于实例化UV，可以在1个drawcall下高效绘制一整套较低级别LOD的场景物体。

Cocosmos中部分矮行星和卫星的漫射和法线纹理合图

Cocosmos中梅西耶深空天体纹理合图

Cocosmos中八大行星的LOD2和LOD3级纹理合图

TIPS

不知道细心的小伙伴们是否发现，上图示例中，除了未使用法线纹理，还有两处差别：

1、LOD2中的地球含有云层：这是因为较远出我们不再单独渲染大气层，直接将地表和云层合并在低精度的贴图上。

2、LOD3中的纹理有一半黑色：这是因为更远处我们直接采用无光照渲染，将节点含有纹理偏亮的一侧直接朝向太阳，模拟光照即可。

通道拆分

Cocosmos

基于真实数据的渲染不可避免地会使用到大量的纹理，带来显存和性能吃紧，这一点在小游戏平台和低端机上的崩溃更加明显。除了合理释放资源、纹理合图、使用GPU压缩纹理等方式来降低渲染压力外，只需要灰度值时合理运用各通道也是常见手段。

比如，常见的PBR贴图就分别使用了RGB通道分别表示了环境光遮蔽（Ambient Occlusion）、粗糙度（Roughness）和金属度（Metallic）。

Cocosmos实机截图：现代八十八星座形象

这里举个实际应用案例：星座形象需要根据其主恒星连线位置动态变化（单独物体），不能简单用一个天空盒来全部代替。对于单张512x512的纹理，用户同时显示全天星座就需要88倍的开销，这将难以接受。圣子则根据他们在天球上的投影面积大小，按需分配UV，再分散到一个shader的两张1024x1024图集中，瓜分满三个通道。单此一项简单的优化就可以降低11倍的显存占用和88倍的drawcall。

Cocosmos中星座形象通道拆分

TIPS

拆分通道后的纹理应当尽量避免有损压缩，会造成还原渲染时质量降低。

Cocosmos

数据与展示

各类天体

Cocosmos

在太阳系内，除了八大行星外，Cocosmos还会展示被国际公认的五颗矮行星、数量众多的知名小行星、彗星、以及陨星、冰晶构成的主小行星带和柯伊伯带。

Cocosmos实机截图：冥王星与冥卫一卡戎

Cocosmos实机截图：哈雷彗星

TIPS

使用Cocos的3D粒子系统并调节恰当参数，能给我们的场景大幅增添。

Cocosmos实机截图：主小行星带

TIPS

使用Instancing合批绘制大量网格和材质相同而位置和缩放不同的类似物体。

数据展示

Cocosmos

Cocosmos将会以双语为每个天体添加详细的数据说明，并持续的迭代与丰富，它们包括且不局限于：

1、天文信息：公转与自转、轨道与周期、逃逸速度、绝对星等…

2、物理信息：质量、密度、面积、表面重力…

3、环境信息：大气、地质构成、冰川和山脉…

4、人文信息和介绍：占星、神话、东西方文化中的差异…

Cocosmos实机截图：月球的转轴和直径展示

Cocosmos实机截图：谷神星的双语数据面板

TIPS

维基百科、NASA（美国航空航天局）公布的数据库、国内外众多天文爱好者论坛都可以为我们提供丰富的天文数据来源。

指示绘制

Cocosmos

一图胜千言，尤其是在具有科普性质的场景下。Cocosmos中涉及很多几何绘制，用于辅助理解天体物理、天文学和数学方面的概念。

Cocosmos实机截图：
黄道面（地球公转平面）和白道面（月球公转平面）

Cocosmos实机截图：强大的木星磁辐射范围

Cocosmos实机截图：网格标尺、星轨、光年圈

Cocosmos实机截图：太阳系绕银心运动方向

Cocosmos实机截图：银河系与仙女座大星系各自的卫星星系群

TIPS

Gizmos或几何绘制可以用到多种方法，比如：Cocos为我们提供了GeometryRenderer（几何渲染器在CPU侧进行顶点计算不适合大量使用）、制作合适的模型并选择图元装配的线模式绘制、在顶点或片段着色器中通过编写着色器代码实现等。

扩展文本

Cocosmos

Cocosmos不光在3D场景中会用到大量的文字标注，在UI中同样会涉及。

3D中的文字标注通常会跟随3D物体，同时还需要一些基本功能，如：是否保持画布内、是否透视缩放、显示在物体身上的3D坐标偏移等。

UI中的文字则通常会与其他图集层相互穿插（试想带有很多Icon的面板上，每张图片下有自身的说明文字），我们可以在绘制前对UI节点重新做渲染排序，以做到UI制作时的无感知和渲染的高性能（降低dc）。

Cocosmos中文本挂载的扩展组件

此外，文字节点还需要有个性化字体、随视野距离变化颜色和透明度、全局多语言切换等功能。圣子将这些功能组件化封装，以便在实现功能时更加便捷地调用。

TIPS

Cocosmos使用Bitmap文字图集，使用Label组件的CHAR模式，并为图集纹理中添加文字描边和阴影。

Cocosmos

恒星与光照

恒星结构

Cocosmos

太阳是我们恒星系的中心，也是唯一只需要使用无光照方式渲染的物体（因为它本就是光！） 。太阳的基本结构可分为光球层、色球层、日冕层和日珥。

Cocosmos实机截图：近距离观测太阳

TIPS

在编写shader中的动态效果时，纹理的采样偏移和缩放，使用噪音图来扰动UV坐标都是简单且常用的手段。

TIPS

很多时候简单体（比如四个顶点构成的Quad）可以便捷的模拟效果，它与相机的距离和视线夹角（指其面法线）常作为计算的依据

恒星光晕

Cocosmos

不同距离下观察太阳，它的颜色和亮度、光耀大小、镜头光晕都会有所不同。这是因为无论在地球上何地观察，我们到太阳的距离几乎相等，但是到了宇宙尺度上的距离变化带来的影响就不能忽视了。

Cocosmos实机截图：

从最近的水星和最远的海王星遥望太阳

TIPS

混合（Blending）是渲染过程中的重要一步，有时候我们收集到的图像资源不带透明通道且不便抠图，这时候开启混合并使用恰当的混合运算可以达到近似效果，且避免了透明物体的排序。

比如黑色底图叠加时关闭深度写入，并用：blend=true;blendEq=add;blendSrc=src_color; blendDst=one_minus_src_color，效果类似photoshop中的前景层使用混合模式：滤色。

恒星光源

Cocosmos

太阳作为“照亮整个恒星系的灯泡”，该使用什么光源？有人可能不假思索地回答点光源（毕竟是从中心发散），有人可能会回想起中学地理老师说过，太阳光可视为无穷远平行光（显然这有观察局限性）。

Cocosmos中的主光源示意图

按照点光源的能量辐射强度与到其距离平方成反比E=l/r²，那么水星（平均水日距≈0.4AU）将比海王星（平均海日距≈30AU）地表辐射亮5625倍。如果，水星表面使用255(0xff)的惨白那么海王星表面将比0(0x00)的死黑还要黑。

事实上天文观测上的照片，进入人眼前都是经过曝光调节和修饰的。在Cocosmos中我们将主光源放在太阳节点下，并修改光照的计算方式，使用强度不随距离衰减的点光源作为主光源。

TIPS

注意Cocos中访问着色器时会优先使用工程同路径下的同名.chunk来覆盖引擎默认.chunk。

因此基于表面着色器的扩展如果不能满足，我们也可以“取而代之”，复制原有.chunk文件并只修改其中一小部分内容来达到我们想要的渲染管线效果。

TIPS

在实际到达不同行星的辐射差异我们可以通过很多种方式来调节，比如：

1、在着色其中加入strength参数并读取天体各自配置来设置，将其与光强相乘。

2、使用mainColor的RGB值或者colorScale的大小来增加albedoMap的灰度。

3、直接使用PS等工具修改贴图资源的明亮度。

全景展示

Cocosmos

天体使用真实大小构建时，场景会十分空旷且不利于观察；天体使用夸张的大小展示时，又会失去真实的比例参考。

为此，圣子在Cocosmos的恒星系尺度下添加了自由滑动来改变各类天体的大小的功能（比如行星最高可以放大到2千倍，小行星最高可以放大到2百万倍），做到视觉上合适的“同框全家福”。

Cocosmos实机截图：修改天体比例以便于全景展示

TIPS

场景图中需要加入或者移除大量物体时，我们可以使用分帧加载和运算来减轻单帧的卡顿。每帧需要分配的数量和批次数建议配置化，设置时取决于实际机器运行性能。

Cocosmos

时空与运转

坐标系统

Cocosmos

为了承上启下并更好的展示太阳系的视角，圣子选用黄道坐标系与场景世界坐标系对齐，对于不同坐标系的数据，我们封装好数值转换函数即可。

黄道坐标系和赤道坐标系

在Cocosmos中，圣子还显示了我们在天文中经常用到的赤道坐标系、黄道坐标系、银道坐标系、时角坐标系和地平坐标系，其中后两者与各自观察者所在的地理经纬度相关。

Cocosmos实机截图：
天文坐标系统（左为赤道、中为黄道、右为银道）

TIPS

如果你使用基于赤道坐标系（第一天球坐标系）下的天空盒（比如星空背景），那么在黄道坐标系下它们将沿X轴倾斜23.5°（地轴偏角）。

一般引擎自带天空盒有水平旋转指定角度的功能（既沿纵向的Y轴），但不可沿任意轴旋转。此时我们需要用到Cocos的自定义天空盒材质，并在纹理采样上沿X轴旋转23.5°即可。

天体物理

Cocosmos

确定了坐标系，Cocosmos希望做到在任意时间、任意地点上观测星体的正确性，因此天体的公转只是单纯的按照公转周期做圆周运动肯定是不行的。

开普勒三大定律示意图

我们来复习以天体在万有引力下的运动轨迹定律，既著名的开普勒三大定律：

1、椭圆定律：所有行星绕太阳的轨道都是椭圆，太阳在椭圆的一个焦点上。

2、面积定律：行星和太阳的连线在相等的时间间隔内扫过的面积相等。

3、调和定律：所有行星绕太阳一周的恒星时间的平方与它们轨道半长轴的立方成正比。

我们将基于此绘制行星轨迹。

Cocosmos实机截图：
彗星大多有大离心率和高倾斜角

TIPS

不要被复杂的描述吓到，它们的数学表示很简洁。

椭圆定律：r=p/(1+e*cosθ)

面积定律：(T₁/T₂)²=(a₁/a₂)³

调和定律：a³/T²=GM/(4πr²)

球面几何

Cocosmos

上述还只是考虑的单个物体的公转情况，不要忘了行星绕太阳，卫星绕行星可不都在一个平面上。当“众星同框”时它们各自的公转平面倾角大小和朝向方向，处于轨道上的相对位置需要通过立体或球面几何计算。

Cocosmos实机截图：“躺平”的天王星和天卫系统

当然，这只是公转，天体需要自转，同时需要考虑它们各自在空间中的轴向。以“特立独行”的天王星为例，因为其自转轴倾角高达97.77°，它几乎带着它的“众小弟”躺在了公转平面上，从夜空中看仿佛一个“靶子”。

天文计算中常用量的示意图

TIPS

为了正确计算我们除了需要知道轨道半径和离心率（或长轴与短轴半径）、轨道周期外至少还需要收集：近日点远日点、地转轴倾角（黄赤夹角）、升交点黄经、自转轴北极赤经、北极赤纬、自转周期（或恒星周期）等数据。

时光流逝

Cocosmos

Cocosmos提供了加速时间流逝的功能，我们可以调整现实1秒钟=1秒钟（既同步）、1分钟、1小时、1天、1周、1个月、1年……，以实现“一眼万年”的效果。

这意味着在超大的时间跨度下许多方面还需要改进，比如：

1、太阳每22.亿年绕银河一周，途中会不停上下穿越银盘（这将导致银道坐标系每6000万年翻转一次）。

2、由于地球的倾角和自转，地轴会发生进动（在大约13000年后，轴将几乎指向织女星的方向，这将使织女星成为北极星）。

后续，圣子还会视情况考虑加入时间回溯、同步现实时区等功能。

Cocosmos实机截图：地点=火卫一，时间1秒=1小时

TIPS

现实世界是连续的（不考虑量子尺度时间可以无限切割）、游戏世界是离散的（由计算机一帧一帧模拟运行）。

因此，在游戏编程中我们不必死板教条的求解数学公式。应该反过来保证在时间上积分正确性，再将每一帧的变化微分到每帧的update调用中去。

Cocosmos

星海与星系

漫天星海

Cocosmos

我们肉眼可见的6000多颗亮度在六等星以上的恒星，几乎都是近日恒星。比如，离太阳最近的半人马座α（比邻星）也在4.2光年之外。

然而，和银河系的十万光年直径比起来这简直是九牛一毛。我们那些“耳熟能详”的星辰，几乎都挤在了一个支臂（猎户座悬臂或本地臂，Local Spur）附近的“狭小空间”内（古尔德带，Gould Belt）。

赫罗图与恒星光谱分类

恒星的颜色不是随机的，这与它们的大小、寿命有关。比如我们的太阳就是一颗主序星（处于主序带上的黄矮星，光谱为G2V），所以它的颜色为黄白色。

由此，我们可以看到红色、橙色、黄色、白色和蓝色的恒星，但不看到如绿色、紫色的恒星。

描述恒星这一性质（绝对星等和光度）的散步图被称为赫罗图（Hertzsprung–Russell Diagram）,我们需要依照每颗恒星的绝对星等和光谱类型来渲染其大小和颜色。

TIPS

为了精确地赋值，通过粒子来随机绘制恒星显然不能满足我们的需求。为了不增加额外的drawcall的同时使用粒子系统，我们还需要一并传入实例化参数来表达颜色等数值。

全天星座

Cocosmos

星座是由每个星区的主要恒星相互连接构成的假想体，因此我们首先需要保证恒星位置的精确性。

另一方面，除了经纬度坐标、距离外，每颗恒星也需要管理好自身的数据。它们包括光谱类型、视星等、所属星座、西方命名、中文星官命名、拜耳编号、HIP编号和HD编号等（恒星命名法，比如：Vega=织女星=天琴座α=HIP91262=HD172167）。

Cocosmos实机截图：切换恒星的命名法

TIPS

使用组件来代表游戏中的实体，它们对外暴露外观和方法调用，对内管理配置数据和自身逻辑，这是面向对象编程的基本思路。合理的继承和组合结构，将有利于我们编写更庞大的游戏，扩展更复杂的功能。

璀璨银河

Cocosmos

银河系是太阳系所属的家园，很长一段时间内我们以为银河即是宇宙。它拥有数千亿颗恒星、漫布的尘埃物质、银心黑洞、棒悬结构、四条主要的悬臂和一系列支臂。

Cocosmos实机截图：从银河系外穿越银盘

TIPS

在数量巨大的情况下，GPU粒子将明显比CPU粒子呈现更佳性能。这里，我们运用到了Cocos自带的GPU粒子系统，并调节发射器形状和大小、粒子的颜色和数量来大致还原银河的主要结构。

浩瀚星系

Cocosmos

除了已知的星团、星云和星系外、能否在更大的尺度上像粒子系统渲染恒星一样随机产生海量的星系呢？

答案是肯定的，我们可以用有限的纹理图集加上各个维度的变化值来产生GPU粒子星系海。这和粒子系统使用帧动画的原理是类似的，只不过我们基于扩展的随机化需求，还要自定义编写部分着色器代码。

Cocosmos中制作随机化星团和星系的纹理集

Cocosmos实机截图：本星系群下的随机星系

TIPS

使用实例化ID作为每个GPU粒子的唯一标识，加上一些运算来产生无限多的可控变化。

比如基于该值的随机结果，选择UV坐标的tilingOffset、交换通道颜色、调整对比度和饱和度等。

Cocosmos

总结与展望

收尾概述

Cocosmos

受限于篇幅限时关系，尚有很多内容无法在序章中进行分享，比如：

• 资源的管理和优化。

• LOD的制作和使用。

• 性能优化方面。

• 编程思维和开发经验。

• 引擎使用经验和框架设计。

• ……

圣子会在后续分享中，分篇贴出核心代码和并逐步分享；此外，在时间允许的情况下圣子会把自己使用到的功能组件优化后分享在插件商店。

另外，圣子觉得该工程距离自己心中理想的状态还相去甚远，至少有以下方面值得继续探索和开发：

• 高清的行星表面和细节。

• 在各个星球表面着陆并观测星空背景。

• 还原天文现象如日食、水逆、极光…

• 银河系中其他恒星系的细节。

• 系外行星和生命探索。

• 黑洞、虫洞和超星新、宇宙大爆炸。

• ……·

未来构想

Cocosmos

圣子还未确定Cocosmos这个demo未来的发展方向，但以下几个方面值得参考：

1、工具方向，作为可实时查询和观测的天文爱好者在线工具。

2、教育方向，内置更多的互动和教学场景，让知识可视化。

3、游戏方向，作为类似戴森球或宇宙沙盘类SLG等游戏的场景背景。

如果您有新颖的点子或者合作意向欢迎给我提及，不胜感激！

引擎介绍

Cocosmos

为什么使用Cocos Creator?

Cocos是一款高效、轻量、免费开源的国产游戏引擎，可以一次编码多平台发布，在小游戏、H5和手游端都有着不错的市场占有率。

提及Cocos大多数不甚了解的从业者对他的印象还停留在2dx时代，事实上从CocosCreator3.0版本之后，引擎已经大幅度提升对3D游戏开发方向的支持力度，借助其工具链可以快速实现3D内容的创作。

推荐大家使用Creator的2.x还是3.x版本？

圣子个人的建议：除非处于以下两点考虑，1、有很大的历史遗留包袱（比如公司需要你维护2.x开发的老项目）2、你觉得自己永远只会写2D游戏。

否则还是用3.x吧，毕竟3.x可以写3D，也可以用于写2D游戏，但是反过来2.x就不行了。

写在最后

Cocosmos

现在各行各业的从业者都不容易，大家为了生活而劳碌奔波，渐渐地忘却了曾经的那些梦想和豪言壮语，渐渐地工作和技能也只是谋生的唯一手段。

兴趣爱好有时候是我们前进的最佳动力，虽然岁月总会慢慢抹去我们的棱角……最后圣子用一句话和各位同仁共勉：

愿你我历尽千帆，归来仍是少年！

公众号

大朵的爸爸和游戏开发

在线体验
https://cocosmos.online