Add rotation attribute to the ProceduralSky script

examples/src/examples/graphics/procedural-sky.controls.jsx

@@ -39,6 +39,15 @@ export function Controls({ observer }) {
                 </LabelGroup>
             </Panel>
             <Panel headerText='Sky'>
+                <LabelGroup text='Rotation'>
+                    <SliderInput
+                        binding={new BindingTwoWay()}
+                        link={{ observer, path: 'data.sky.rotation' }}
+                        min={0}
+                        max={360}
+                        precision={0}
+                    />
+                </LabelGroup>
                 <LabelGroup text='Turbidity'>
                     <SliderInput
                         binding={new BindingTwoWay()}

examples/src/examples/graphics/procedural-sky.example.mjs

@@ -278,7 +278,11 @@ data.set('data', {
     sky: {
         turbidity: 7,
         rayleigh: 1,
-        exposure: 1.8
+        exposure: 1.8,
+
+        // turns the whole sky, and the sun with it, around Y - orients the sky over the scene
+        // without disturbing the time of day driving the azimuth and elevation
+        rotation: 0
     },
     effects: {
         ssao: true,
@@ -355,6 +359,7 @@ app.on('update', (dt) => {
 
     // Sky look
     skyScript.luminance = luminance;
+    skyScript.rotation = data.get('data.sky.rotation');
     skyScript.turbidity = data.get('data.sky.turbidity');
     skyScript.rayleigh = data.get('data.sky.rayleigh');
     app.scene.exposure = data.get('data.sky.exposure');

scripts/esm/sky/procedural-sky.mjs

@@ -502,6 +502,21 @@ class ProceduralSky extends Script {
      */
     elevation = 25;
 
+    /**
+     * Rotation of the whole sky around the Y axis, in degrees. It is added to the sun azimuth, so the
+     * sky, the sun and the moon all turn together, along with the sun light and the shadows it casts.
+     * Use it to orient the sky relative to the scene without disturbing the azimuth and elevation - a
+     * day / night cycle driving those keeps its mapping of time to sun position.
+     *
+     * Note the procedural star field is anchored to the world axes rather than turning with the sky,
+     * which is not observable as the stars are noise to begin with.
+     *
+     * @attribute
+     * @range [0, 360]
+     * @type {number}
+     */
+    rotation = 0;
+
     /**
      * Atmosphere haziness. Higher values give a milkier sky and a larger sun glow.
      *
@@ -790,11 +805,29 @@ class ProceduralSky extends Script {
      */
     _computeSunDir(out) {
         const el = this.elevation * Math.PI / 180;
-        const az = this.azimuth * Math.PI / 180;
+        const az = (this.azimuth + this.rotation) * Math.PI / 180;
         const cosEl = Math.cos(el);
         return out.set(cosEl * Math.sin(az), Math.sin(el), cosEl * Math.cos(az)).normalize();
     }
 
+    /**
+     * Computes the world-space direction towards the moon, turned by the sky rotation so that it keeps
+     * its place relative to the sun's path.
+     *
+     * @param {Vec3} out - The vector to receive the result.
+     * @returns {Vec3} The world-space moon direction.
+     * @private
+     */
+    _computeMoonDir(out) {
+        const a = this.rotation * Math.PI / 180;
+        const sin = Math.sin(a);
+        const cos = Math.cos(a);
+        const { x, y, z } = this.moonDirection;
+
+        // rotate around Y in the same direction an increasing azimuth turns, see _computeSunDir
+        return out.set(x * cos + z * sin, y, z * cos - x * sin).normalize();
+    }
+
     /**
      * Computes the view-independent atmosphere terms (rayleigh/mie scattering coefficients and sun
      * intensity) and uploads them as uniforms. These are constant across the whole sky, so doing
@@ -886,7 +919,7 @@ class ProceduralSky extends Script {
         const nightFactor = Math.max(0, Math.min(1, -this.elevation / 6));
 
         // light source direction: towards the sun by day, towards the moon by night
-        tmpMoon.copy(this.moonDirection).normalize();
+        this._computeMoonDir(tmpMoon);
         const src = tmpSrc.lerp(this._sunDir, tmpMoon, nightFactor).normalize();
 
         // A directional light emits along its entity's -Y (down) axis (see forward-renderer:
@@ -946,7 +979,7 @@ class ProceduralSky extends Script {
         scope.resolve('procSkyMoonColor').setValue([this.moonColor.r, this.moonColor.g, this.moonColor.b]);
         scope.resolve('procSkyMoonSize').setValue(this.moonSize * Math.PI / 180);
         scope.resolve('procSkyMoonGlow').setValue(this.moonGlow);
-        tmpMoon.copy(this.moonDirection).normalize();
+        this._computeMoonDir(tmpMoon);
         scope.resolve('procSkyMoonDir').setValue([-tmpMoon.x, tmpMoon.y, tmpMoon.z]);
 
         this._updateSunLight();