A Gladius Solar System

‹prev | My Chain | next›

Up tonight, I would like to make my little astronomical simulation a little more sophisticated. Instead of a moon revolving around a planet, I would like to have two planets revolving around the Sun.

The Sun, and each planet can be represented as a simple sphere with different colors. I already have the sphere

To generate different colors, I define an RGB procedural material file:

function proc( options ) {
  options = options || {};
  var r = (options.r || 0)/ 255,
      g = (options.g || 0)/ 255,
      b = (options.b || 0)/ 255;

  return {
    color: [r, g, b]
  };
};

Back in the main app, I invoke the materials as:

  engine.get(
    [
      // ...
      {
        type: engine["gladius-cubicvr"].MaterialDefinition,
        url: '../assets/rgb-material.js?r=204',
        load: engine.loaders.procedural,
        onsuccess: function( material ) {
          resources.mars_material = material;
        },
        onfailure: function( error ) {
        }
      }
    ],
    {
      oncomplete: game.bind( null, engine, resources )
    }
  );

As I found last night, it is best to generate point light sources in Gladius. Obviously the Sun needs to function as a light source:

    space.add( new engine.simulation.Entity( "sun-light",
      [
        new engine.core.Transform( [0, 0, 20], [0, 0, 0], [1, 1, 1] ),
        new cubicvr.Light(
          new cubicvr.LightDefinition({
            intensity: 3,
            distance: 30
          })
        )
      ]
    ));

I also need a light source to illuminate the Sun itself, so I add a point light source just "above" the Sun:

    space.add( new engine.simulation.Entity( "sun-glow",
      [
        new engine.core.Transform( [0, 0, 18], [0, 0, 0], [1, 1, 1] ),
        new cubicvr.Light(
          new cubicvr.LightDefinition({
            intensity: 3,
            distance: 3
          })
        )
      ]
    ));

Lastly, I need to make the planets revolve. I copy the rotating frame of reference that comes in the cubes example from Gladius by adding the planet along with the planet's center of mass inside the Sun:

    space.add( new engine.simulation.Entity( "earth-center-of-mass",
      [
        new engine.core.Transform( [0, 0, 20], [engine.math.TAU, engine.math.TAU, engine.math.TAU] )
      ]
    ));
    space.add( new engine.simulation.Entity( "earth",
      [
        new engine.core.Transform( [7.5, 0, 0], [0,0,0], [.5,.5,.5]),
        new cubicvr.Model( resources.mesh, resources.earth_material )
      ]
    ));

After doing the same for Mars, I need to associate both frames-of-references / centers-of-mass with their planets:

    space.findNamed( "mars" ).setParent( space.findNamed( "mars-center-of-mass" ) );
    space.findNamed( "earth" ).setParent( space.findNamed( "earth-center-of-mass" ) );

And set them in motion (Mars a little slower than the Earth, of course):

      var marsRevolution = new engine.math.Vector3( space.findNamed( "mars-center-of-mass" ).findComponent( "Transform" ).rotation );
      marsRevolution = engine.math.vector3.add( marsRevolution, [0, 0, space.clock.delta * 0.0004] );
      space.findNamed( "mars-center-of-mass" ).findComponent( "Transform" ).setRotation( marsRevolution );

      var earthRevolution = new engine.math.Vector3( space.findNamed( "earth-center-of-mass" ).findComponent( "Transform" ).rotation );
      earthRevolution = engine.math.vector3.add( earthRevolution, [0, 0, space.clock.delta * 0.0006] );
      space.findNamed( "earth-center-of-mass" ).findComponent( "Transform" ).setRotation( earthRevolution );

The result:

It feels like a lot of work to describe something so natural. Much of that is, no doubt, my inexperience with everything. I am manually creating planets when I should have a function / factory doing that. I can fix that another day. Lighting the Sun feel wrong. I do wonder if there is a way for it to glow on its own. If I move the camera around, I either need to move the light or add other lights all around the Sun. Things to worry about another day.

Day #424