Working with Skybox

Uranus Skybox effect adds to your project a dynamic skybox that features a 24 hours day/night cycle, sun, moon and starts, together with 2D procedural clouds.

This dynamic skybox can render a prefiltered cubemap in real-time that can be used to add realistic sky lighting and reflections to your models.

uranus-effects-skybox.js

How to activate?

The easiest way to use Uranus Skybox in your project is to drag and drop the Uranus Sky System template found in the SDK commons folder to your scene.

That will add the Skybox entities to your scene together with the required scripts. The following entities will be added:

• Uranus Sky System: This entity is used as the parent holder entity of the Skybox system. You will find the uranusEffectsSkyboxCubemap script attached to this entity responsible for rendering the real-time prefiltered cubemap.

• Sun Sky: An entity with a Render component responsible for rendering the Skydome model. That is a specially prepared hemisphere like model used for rendering the day sky with the clouds. On the same entity the uranusEffectsSkybox script is attached which is the main script responsible for compiling and controlling the Skybox shader.

• Moon Sky: Similar to the Sun Sky entity but responsible for rendering the night sky.

• Light Pivot: This entity is used as the pivot entity for the two directional lights used for the sun and moon.

• Sun Light: A directional light entity simulating the sun casting light and shadows to the scene.

• Moon Light: A directional light entity simulating the moon casting light and shadows to the scene.

Uranus Sky System in the PlayCanvas editor

Both the Sun Sky and Moon Sky render components should be rendering on a separate scene layer and not on the main World layer. In the SDK examples that layer is called Sky and replaces the PlayCanvas default Skybox layer, which should be disabled.

Make sure that all of your active cameras have the Sky layer added to the component layers list so the Skybox is visible.

Uranus Skybox Effect, Sky layer in the PlayCanvas project settings

How to adjust daytime?

The active time of the day is set directly on the Light Pivot entity, by setting its Z rotation to a value between 0-360. Some references to real hours:

• Angle 0, midday

• Angle 90, sunset

• Angle 180, midnight

• Angle 270, sunrise

There is an app wide event which can be used to programmatically set the required time in the 0-24 time range:

this.app.fire('UranusEffectsSkybox:setTime', 13);

You can have the day time animate to automatically simulate how time progress, based on the selected animation speed. To do that find the Animate speed property on the uranusEffectsSkybox script and set it to a value larger than 0.

Note that you should do that only on the Sun Sky entity, that is the Master sky entity and it will animate both of the day and night sky entities.