The following webapps, simpleSolarSystem.html and space.html are old webgl projects which individually cover the scope of the space demo project… namely that there is a rendered solar system and a 3rd person view camera and controls for a space ship model, including generated geometry plasma bolts. This is an old project and therefore has a lot to be desired artistically for rendering the space demo, however for a baseline this will work.

The following elements need to be added to the script / scripts:

1. The scripts need to be combined, with the camera defaulting to the one used in space.html
2. The planets need procedural generated materials, a la node wrangler in Blender
3. There needs to be a 2nd spaceship model added with some basic AI for flying around and attacking the player
4. There needs to be hit detection cubes added for the plasma bolts fired by the player and the pirate
5. A menu system to facilitate game functionality

Since this project is starting out very basic and low poly, this will suffice for now. Consider this a TODO list.

NOTES on simpleSolarSystem.html / demo.html

1. Added prs and pos factors to global variable list. prs – planetary rotation speed factor and pos – planetary oribtal speed factor. These two variables allow one to adjust the speed of the solar system’s animations in one place. The factors were introduced < 1 to slow down all the movement and be more appropriate for a spaceship to fly around in.
2. space.html and simpleSolarSystem.html should be combined stepwise and the camera introduced as camera2. The active camera can be switched to avoid the planet survey camera sequences.

simpleSolarSystem:

space:

pre-demo_space:

demo:

Adding some improvements, first pass solution: Create scene in blender and import .gltf file.

1. Procedural Gas Giant (Blender) – Alaskan FX: https://www.youtube.com/watch?v=GnOUoMi8ATU – blender file: https://drive.google.com/file/d/1fcUjbfSYUrqZiExsnlOuFdt1nLdH0-sh/view?pli=1
2. Procedural Gas Giant Rings (Blender) – Alaskan FX: https://www.youtube.com/watch?v=-lXHSHJBo3g
3. Stemkoski.github.io – Three.js examples: https://stemkoski.github.io/Three.js/index.html

Real star positions from BSC on google. Hippacaros is recommended in the following reddit posts. One deals with real star data from a scientific operation and the other describes a method to generate a function which returns planet positions along unperturbed orbital paths, as well as a method to implement changing those trajectories when significantly disturbed (Gravity Mortar Weapon*, for example; creates a little black hole messing with opponents ordnance and introducing a temporary central force to their current velocity and acceleration.)

1. https://stackoverflow.com/questions/9646360/how-to-draw-sky-chart/25403425#25403425
2. https://stackoverflow.com/questions/72686481/planet-position-by-time

After working with the curl field node group and related procedural shaders in Blender it became apparent that these were not going to port well into Three.js or Unreal Engine etc. for use in demo / game projects for the web. One possible solution is to use image textures.

1. https://www.youtube.com/watch?v=AB24ITZHtuE – Baking Image Textures

This is the reason that .gltf files don’t show procedural textures in Threejs.org/editor

Ok, by turning on the World Surface -> Strength and Color to ffffff I got this result:

The following is the render result from the Blender Camera:

As you can see, from the UV editor panel in blender; the image is reduced to a pixel map of 1024x1024px. From this web source:

The sun shaders have seems, this results from a non-clipping symmetry tile for the uv coordinate system imposed upon the mesh, which in this case is a sphere. Sun coronal effects can be achieved with a volumetric shader using mutable geometries and particle systems. The continuous nature of distortion is pleasing to the eye, as our eyes are adapted to recognize such natural patterns. This same effect can be achieved with proper tiling of volumetric elements and arrays of meshes etc.

Ref:

1. https://sparkonelabs.com/space/simpleSolarSystem.html
2. https://sparkonelabs.com/space/space.html