Cosmos Journeyer - The infinite procedural universe on a web page

Hello everyone!

I am super excited to present you my biggest project ever! I have been working on it for 3 years in my free time and I feel like I can share some of my progress!

This is Cosmos Journeyer:

Cosmos Journeyer is a procedurally generated universe with a virtually infinite number of star systems. Each system has a set of planets that can entirely be explored on foot (except for the gas planets of course).

Transitions between space and planets are seamless without loading screen and you can pilot a spaceship to go from one world to the next.

The project features volumetric atmospheres, planetary rings, dynamic clouds, planetary shadows for eclipses and asset scattering on the planet’s surface.

Moreover, star colors are based on their surface temperature just like in real life, and star distribution in the universe also follows the distribution of our own universe.

Beyond stars and planets, I also have neutron stars and blackholes! (the lensing effect has some bugs but I am working on it haha)

All of this using the power of BabylonJS!!! And the power of its awesome community, I wouldn’t have come this far without the help of the forum x)

It still has some rough edges as it’s pretty much a very early alpha, so any feedback is welcome!

You can try it at https://cosmosjourneyer.com

Here is the source code:

30 Likes

Very impressive!

1 Like

This is great !!!

1 Like

I have been working on asteroid fields lately:

I still have to fiddle around with physics a little bit, but that’s progress nonetheless!

2 Likes

I improved the visuals of the asteroids and I solved my physics issues:

At first, I wanted to use thin instances as I exposed here: Havok disablePreStep issue with instances

Now, I use regular instances for rendering as this allows for individual control of the instances, which is important for individual rotation and applying floating origin.

Instances are spawned into chunks around the camera in a progressive way in order to avoid stuttering.

The physics bodies are only created for instances close to the camera, saving a lot of performance (though creating physics bodies can still create some stutters due to the JS / WASM boundary I think).

In order to have rotating asteroid across physics and non-physics, I also store 2 arrays: rotation axes and speeds. Non physics asteroids rotate using the rotate method in world space, and physics asteroid are given an angular velocity equal to axis * speed. This creates a seamless transition between the physics and non-physics world.

4 Likes

I found an optimization for asteroid fields that can be applied to any instancing system using Havok.

Basically the stuttering is caused by creating a new shape for each instance, thus transfering the vertex data through the WASM / JS language boundary, which takes too much time.

Instead I can create the physics shape once for the asteroid model at startup and reuse it for the new instances: we no longer need to cross the boundary.

This is not perfect because physics shape do not support scaling! This means that in order to reuse the shapes, I lose freedom in scaling.

That does not mean that all asteroids must have the same size: for each asteroid model, it is possible to clone it and scale it at startup in order to create 10 different scaling variants.

Instead of using per-instance scaling, I use an array of indices to know the base asteroid model variant for each asteroid instance.

This still solves the stuttering issue as everything is precomputed at startup, and at the same time we still retain some scaling variations.

3 Likes

I have made some progress on procedural space stations so here are some screens:

3 Likes

love it! could you share a video that uses your physics optimization?

1 Like

Sure! I will see what I can do tomorrow ^^

Here is an illustration of the technique:

The video quality is not the best, because I recorded on my laptop but it runs at 60fps with no issue when OBS is not recording ^^

I simplified the setting so that it is easier to see what is happening (no rotation and such). Chunks are loaded and unloaded depending on the distance to the camera. The different chunks are visible with the wireframe boxes I added.

Inside those chunks, asteroids are instanced from 2 models. To achieve different scales, I created copies of the original models at different scales so that I can precompute their PhysicsShape before starting rendering the scene.

Physics bodies are only created for asteroid close to the camera, which does not have any significant performance impact thanks to shape reuse. Asteroids with physics are highlighted in white using the PhysicsViewer .

The source code is available in this commit: Update playground.ts · BarthPaleologue/CosmosJourneyer@79e7b6a · GitHub in the src/ts/playground.ts file

Possible performance improvements include using another data structure to avoid looping over all asteroids when determining if a physics body should be created or destroyed.

4 Likes

I reworked the targeting UI layer to make it easier to read! And also added some UI to the landing pads:

Sadly, I had to gave up the BJS GUI that I was using before. It was much easier to develop in HTLM/CSS and get some quick animations working ^^

Making this XR compatible would require the HTML mesh, so it is not impossible I think.

1 Like

Amazing stuff! You’re maybe the only one who pays attention to the UI too. … and doesn’t use Times New Roman as the UI font. :smiley:

Did you update the app here https://cosmosjourneyer.com/ as well?

2 Likes

Thanks :wink: UI is a really important part of the experience, but it is never the funniest part to develop haha

And yeah Times New Roman did not fit the Sci-Fi setting very well :laughing: , Nasalization ftw

The website is still using an older checkpoint of the 1.9 version because I want to release and polish space stations alongside exploration and trading gameplay all at once (maybe at the end of august / early september). But everything is on the main branch of the repo if anyone is curious

Yummy

I was reading too fast and I’ve read “to release a polish space station”… My first thought was WTF?! What else have I missed not watching the TV nor reading the news for a while?! Poland has a space station. Fuck me dead! :smiley: Ok, so polish … :wink:

Yep, thanks!

1 Like

Who knows what Poland is up too with their secret space program :eyes: But who knows if I add voice lines to station operators, some could definitely be polish!

Yeeees please!! :joy:

And name him:

1 Like

I will save this one for later, definitely some easter egg potential :joy:

1 Like

;-(

1 Like

use pnpm :wink: I stopped using npm after too many dependency headaches lol

npm i -g pnpm
1 Like