Dear developers, kylin is here. Today, I would like to introduce a developer and the project “Cocosmos” created by him to you. I hope this can showcase the potential of using Cocos Creator for developing non-game 3D projects.
Showcase Link：https://cocosmos.online/
The following is the main content：
Hello everyone, I’m Shengzi, a programmer from a large internet company in China. I have been working on game and front-end interactive development projects for many years, and I also consider myself a part-time astronomy enthusiast. I have extensive experience using the Cocos engine for many years as well.
By chance, I decided to create a web application for showcasing the solar system in my spare time as a technical share within the community.
I chose the web application because it requires no downloads—just click to view. It allows for quick sharing with a broader audience.
Now, without further ado, let me show you some features and technical points in this project.
Hierarchical Display
The Sun is just one of the approximately 200 billion stars in the Galaxy, and the Galaxy itself is just one of around 2 trillion galaxies in the universe.
There are so many celestial bodies in the universe that it’s challenging to describe them in language. Therefore, dividing the vast universe into scale models and rendering it in layers helps Cocosmos present content logically and facilitates resource management.
Cocosmos divides the universe into ten scales, with each scale’s diameter being 3-4 orders of magnitude larger than the previous one (1000~10000 times).
Continuous Zooming
Cocosmos allows for seamless transitions from a kilometer-scale perspective to the entire observable universe with a simple drag. Throughout this process, continuous zooming enables us to focus on an individual planet, observe an entire planetary system, examine the movements of all celestial bodies within the solar system, and explore constellations among the stars.
Potential Visible Set
We utilize an effective scene hierarchy division, dynamically predicting and loading scene objects that are about to be rendered, and sensibly destroying objects and releasing resources that are far from the current scale.
Coordinate System
In addition to the commonly used Cartesian Coordinate System, the Spherical Polar Coordinate System is also frequently employed.
For example, the description of the position of a spherical camera involves azimuth angle, elevation angle, and polar radius.
Furthermore, almost all stellar data we can obtain is represented through right ascension, declination, and light-year distance.
Surface Rendering
Even with just the eight major planets, differences in composition and volume mass can lead to variations in rendering. For instance, Mercury, Venus, Earth, and Mars belong to the category of Terrestrial planets, characterized by a solid rock crust that requires rendering mountain ranges.
Among them, aside from Mercury, the other three have rich atmospheric systems, necessitating the inclusion of cloud layers. Earth also presents differences in reflection between land and water bodies, as well as self-illumination on the night side, stemming from sources like city lights.
Texture Channel Separation
Rendering based on real data inevitably involves the use of a large number of textures, leading to constraints on both graphics memory and performance. This becomes particularly evident in crashes on platforms such as mini-games and low-end devices.
In addition to reasonable resource release, texture atlasing, and the use of GPU-compressed textures to reduce rendering pressure, another common approach is the judicious use of individual channels when only grayscale values are needed.
For example, common PBR textures utilize the RGB channels to represent Ambient Occlusion, Roughness, and Metallic properties respectively.
Here’s a practical example: Constellation images need to dynamically change based on the positions of their main stars’ connecting lines (individual objects) and cannot be simply replaced by a skybox altogether.
For a single 512x512 texture, displaying all constellations simultaneously would require an 88-fold expense, which would be impractical. Kylin, based on their projected area size on the celestial sphere, dynamically allocates UVs as needed, then disperses them into two 1024x1024 atlases within a shader, distributing across three channels.
With this simple optimization alone, it is possible to reduce memory usage by 11 times and draw calls by 88 times.
Drawing Indicators
A picture is worth a thousand words, especially in scenes with educational properties.
In Cocosmos, there is a lot of geometric drawing used to assist in understanding concepts related to astrophysics, astronomy, and mathematics.
Astrophysics
Once the coordinate system is established, Cocosmos aims to achieve accuracy in observing celestial bodies at any time and location.
Therefore, the revolution of celestial bodies involves more than just a simple circular motion based on the orbital period.
Closing Thoughts
Why do I use Cocos Creator?
Cocos is an efficient, lightweight, and free open-source domestic game engine that supports multi-platform deployment with a decent market share in mini-games, web, and native mobile gaming(including iOS, Android, HarmonyOS, etc).
Since version 3.0 of Cocos Creator, Cocos has significantly enhanced its support for 3D game development. With its powerful toolchain, you can quickly bring 3D content to life.
Thank you for reading, hope the content above has been helpful to you.
Finally, the Chinese Lunar New Year is approaching, and here I wish everyone health, filled with joy, and well-being in the coming year!