RealSun - position your Star/Sun like a pro

Demos and projects
1

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:

EDIT: updated link, updated repo, BJS 4.2.1

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.

16 Likes
2

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

1 Like
3

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

2 Likes
4

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

EDIT: Added mobile friendly stuff

5 Likes
5

Hellon any update to this? I was curious about it.

I was also impressed to see it was made using Quasar, and would love to see it upgraded to the latest version that uses Vue3 natively.

Thanks in any cases :slight_smile:

1 Like
6

Hi Thierry! Welcome aboard!

It already uses Quasar v2.0 which uses Vue3 under the hood. I don’t have plans to do any upgrades due to lack of time :roll_eyes: However I started to play with the Moon stuff but as I said, no time. Maybe I will put the code in the repo so someone can finish it.

One thing I just did is that I’ve replaced the link with a new one so the demo is working (upgraded to BabylonJS 4.2.1 to fix the Chrome shader issue): Repo updated as well.

Thanks for you interest!

:vulcan_salute:

3 Likes
7

Thanks for prompt answer Roland. Glad because of this to see it already support Quasar V2 and to have a working example right now.

Courage for your tasks!

8

Enjoy!

And thank you! :slight_smile:

9

If you want to have the moon cycle too you could jack it from one of my old pgs.

Good work btw!

10

Can I get access to the Pryme8DogAPI then? :smiley:

The moon Cycles calculations are ready, the uncomplete part is the rendering of the Moon phases.

Thanks!

11

Id have to see your dataset for an idea of which method I’d use to render it. Most likely a billboard plane with a custom shader.

Where do I look to see that data in your stuff?

12

Hi!

The moon calculation starts here: (there are two other functions getMoonPosition and getMoonIllumination)

My approach was to to light a sphere (Moon) by a point light from a specified position to achieve the effect.

2 Likes
14

Thanks bro! :slight_smile: