RealSun - position your Star/Sun like a pro

Hi guys!

Have you ever wondered how cool it would be to have a correclty positioned Sun in your scene just by providing the GPS coordinates of you world’s zero origin and a position vector? I had. So I created this a helper class.

Here is a demo created in Quasar/Vue using RealSun:

https://babylonjs.nascor.tech/real-sun/#/

You have some information on the left and you can edit the parameters at the right. At the top right there are buttons for hiding our aiding tools. At the top center there are buttons for starting and pausing the increasing of the time. And you can get some cool star names by clicking the refresh button next to the star’s name or just wait until sunset and let the app shuffle the names and pick one. :vulcan_salute:

So in your code all you have to do is:

      const lat = 44.53217906106968;
      const lng = 13.06586400848718;
      const radius = 40;
      const northDirection = new Vector3(0.2, 0, -1);
      realSun = new RealSun(
        sunTransform,
        radius,
        lat,
        lng,
        northDirection,
        {},
        scene
      );

and

realSun.syncWithTime()

that’s it!

lazy creating the light itself?

realSun.createDefaultSun()

You can set the parametres used in the constructor on the RealSun instance anytime later.

Time travel? :vulcan_salute:

realSun.setTimeInMillis(time: number)

You can get your star’s information anytime by calling:

const realSunInfo = realSun.getInfo();

export interface RealSunInfo {
  name: string;
  radius: number;
  now: number;
  sunrise: number;
  sunriseEnd: number;
  sunset: number;
  sunsetEnd: number;
  dayStart: number;
  isDay: boolean;
  isSunrise: boolean;
  isSunset: boolean;
  isNight: boolean;
  intensity: number;
  dayTime: number;
  position: { x: number; y: number; z: number };
  angles: RealSunAngles;
  lat: number;
  lng: number;
  northDirection: { x: number; y: number; z: number };
}

The cool stuff is the intensity value, which tells you the current intensity of the sun, so you can adjust your lights easily.

RealSun can reposition your TransformNode automatically so you can bind practically anything to it or you can decide no to provide a TransformNode in the constructor and access

realSunInfo.position.x
realSunInfo.position.y
realSunInfo.position.z

These values are always relative to your world’s origin.

Sorry, no playground here, however the repo with the RealSun typescript source and the Quasar/Vue example are coming in no time, so if you are interested, stay tuned.

EDIT: Repo below in the comments

Guys, I’m still struggling to get the rotations working correctly without using a TransformNode. I was trying to get it working just by using matrices, but need to earn more badges to be familiar with the low level stuff. However, if you have any hints on really simple explaining documentation for mortals like me (except BJS ofcourse :clown_face:) on the matrix stuff, which you can recommend from your deepest corner of your heart :clown_face: yeah, one more clown, let me know.

Thank you!

R.

EDIT: I am pretty sure, there will be bugs in the example :smiley:

EDIT2: I already started to work on the Moon version

It uses: GitHub - mourner/suncalc: A tiny JavaScript library for calculating sun/moon positions and phases.

15 Likes

This is great @roland.csibrei I love your work :slight_smile:

1 Like

This is pretty cool! Tempted to want to use it in some future mini demos… :sun_with_face: :sunglasses:

2 Likes

Hi! This code is definitely not production ready, but you can start to tinker with it. :muscle: :joystick:

EDIT: Added mobile friendly stuff

4 Likes