@multiplekex/shallot 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@multiplekex/shallot",
-    "version": "0.2.3",
+    "version": "0.2.5",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/extras/arrows/index.ts

@@ -17,8 +17,8 @@ import {
     type Draw,
     type SharedPassContext,
 } from "../../standard/render";
-import { DEPTH_FORMAT } from "../../standard/render/scene";
-import { SCENE_STRUCT_WGSL } from "../../standard/render/shaders";
+import { Z_FORMAT } from "../../standard/render/scene";
+import { SCENE_STRUCT_WGSL } from "../../standard/render/surface/structs";
 import { Transform } from "../../standard/transforms";
 import { Line, Lines, LinesPlugin } from "../lines";
 
@@ -198,7 +198,7 @@ export function createArrowsPipeline(
             topology: "triangle-list",
         },
         depthStencil: {
-            format: DEPTH_FORMAT,
+            format: Z_FORMAT,
             depthCompare: "less",
             depthWriteEnabled: false,
         },

package/src/extras/caustic.ts

@@ -0,0 +1,37 @@
+import { surface } from "../standard/render/surface";
+
+export const Caustic = surface({
+    fragment: `
+    let uv = (*surface).worldPos.xz;
+    let t = scene.time * 0.5;
+
+    // Fine caustic network
+    let f1 = sin(uv.x * 4.0 + t * 1.3 + sin(uv.y * 3.0 + t * 0.9) * 0.6);
+    let f2 = sin(uv.y * 5.0 - t * 1.1 + sin(uv.x * 3.5 - t * 0.7) * 0.5);
+    let f3 = sin((uv.x + uv.y) * 3.5 + t * 0.8);
+    let f4 = sin((uv.x - uv.y) * 4.0 - t * 1.2);
+    let f5 = sin(uv.x * 6.0 - uv.y * 2.5 + t * 1.5);
+    let f6 = sin(uv.y * 6.5 + uv.x * 2.0 - t * 1.0);
+
+    // Medium detail layer
+    let m1 = sin(uv.x * 2.5 + t * 0.7 + sin(uv.y * 1.5 + t * 0.5) * 0.4);
+    let m2 = sin(uv.y * 2.8 - t * 0.6 + sin(uv.x * 2.0 - t * 0.4) * 0.3);
+
+    // Sharp caustic lines using high power
+    let c1 = pow(max(0.0, 1.0 - abs(f1)), 12.0);
+    let c2 = pow(max(0.0, 1.0 - abs(f2)), 12.0);
+    let c3 = pow(max(0.0, 1.0 - abs(f3)), 10.0);
+    let c4 = pow(max(0.0, 1.0 - abs(f4)), 10.0);
+    let c5 = pow(max(0.0, 1.0 - abs(f5)), 14.0);
+    let c6 = pow(max(0.0, 1.0 - abs(f6)), 14.0);
+    let c7 = pow(max(0.0, 1.0 - abs(m1)), 8.0);
+    let c8 = pow(max(0.0, 1.0 - abs(m2)), 8.0);
+
+    // Combine layers with variation
+    let fine = (c1 + c2 + c3 + c4 + c5 + c6) * 0.12;
+    let medium = (c7 + c8) * 0.15;
+    let caustic = fine + medium;
+
+    let light = scene.sunColor.rgb * caustic * 0.3;
+    (*surface).baseColor += light;`,
+});

package/src/extras/gradient/index.ts

@@ -443,8 +443,8 @@ export interface Gradients {
     compositeBindGroupLayout: GPUBindGroupLayout | null;
     compositeUniformBuffer: GPUBuffer | null;
     gradientAngle: number;
-    gradientColor1: [number, number, number, number];
-    gradientColor2: [number, number, number, number];
+    gradientColor1: Float32Array;
+    gradientColor2: Float32Array;
     textureSeed: number;
     textureEnabled: boolean;
     fineNoise: number;
@@ -453,8 +453,8 @@ export interface Gradients {
     largeScale: number;
     fiberIntensity: number;
     textureOpacity: number;
-    overlayColor: [number, number, number, number];
-    bubbleUniformData: Float32Array | null;
+    overlayColor: Float32Array;
+    bubbleUniformData: Float32Array;
     bubbleRadius: number;
     blurRadius: number;
     bubbleCount: number;
@@ -758,6 +758,8 @@ fn fs(input: VertexOutput) -> @location(0) vec4f {
 }
 `;
 
+const compositeUniformData = new Float32Array(60);
+
 function createCompositeNode(res: Gradients): ComputeNode {
     return {
         id: "gradient",
@@ -766,7 +768,6 @@ function createCompositeNode(res: Gradients): ComputeNode {
 
         execute(ctx: ExecutionContext) {
             if (res.width === 0 || res.height === 0) return;
-            if (!res.bubbleUniformData) return;
 
             if (!res.compositeUniformBuffer) {
                 res.compositeUniformBuffer = ctx.device.createBuffer({
@@ -810,49 +811,47 @@ function createCompositeNode(res: Gradients): ComputeNode {
                 });
             }
 
-            const uniformData = new Float32Array(60);
-
-            uniformData[0] = res.overlayColor[0];
-            uniformData[1] = res.overlayColor[1];
-            uniformData[2] = res.overlayColor[2];
-            uniformData[3] = res.overlayColor[3];
-            uniformData[4] = res.gradientColor1[0];
-            uniformData[5] = res.gradientColor1[1];
-            uniformData[6] = res.gradientColor1[2];
-            uniformData[7] = res.gradientColor1[3];
-            uniformData[8] = res.gradientColor2[0];
-            uniformData[9] = res.gradientColor2[1];
-            uniformData[10] = res.gradientColor2[2];
-            uniformData[11] = res.gradientColor2[3];
+            compositeUniformData[0] = res.overlayColor[0];
+            compositeUniformData[1] = res.overlayColor[1];
+            compositeUniformData[2] = res.overlayColor[2];
+            compositeUniformData[3] = res.overlayColor[3];
+            compositeUniformData[4] = res.gradientColor1[0];
+            compositeUniformData[5] = res.gradientColor1[1];
+            compositeUniformData[6] = res.gradientColor1[2];
+            compositeUniformData[7] = res.gradientColor1[3];
+            compositeUniformData[8] = res.gradientColor2[0];
+            compositeUniformData[9] = res.gradientColor2[1];
+            compositeUniformData[10] = res.gradientColor2[2];
+            compositeUniformData[11] = res.gradientColor2[3];
 
             for (let i = 0; i < 4; i++) {
                 const srcOffset = i * 8;
                 const dstOffset = 12 + i * 8;
-                uniformData[dstOffset + 0] = res.bubbleUniformData[srcOffset + 0];
-                uniformData[dstOffset + 1] = res.bubbleUniformData[srcOffset + 1];
-                uniformData[dstOffset + 4] = res.bubbleUniformData[srcOffset + 4];
-                uniformData[dstOffset + 5] = res.bubbleUniformData[srcOffset + 5];
-                uniformData[dstOffset + 6] = res.bubbleUniformData[srcOffset + 6];
-                uniformData[dstOffset + 7] = res.bubbleUniformData[srcOffset + 7];
+                compositeUniformData[dstOffset + 0] = res.bubbleUniformData[srcOffset + 0];
+                compositeUniformData[dstOffset + 1] = res.bubbleUniformData[srcOffset + 1];
+                compositeUniformData[dstOffset + 4] = res.bubbleUniformData[srcOffset + 4];
+                compositeUniformData[dstOffset + 5] = res.bubbleUniformData[srcOffset + 5];
+                compositeUniformData[dstOffset + 6] = res.bubbleUniformData[srcOffset + 6];
+                compositeUniformData[dstOffset + 7] = res.bubbleUniformData[srcOffset + 7];
             }
 
-            const u32View = new Uint32Array(uniformData.buffer);
+            const u32View = new Uint32Array(compositeUniformData.buffer);
             u32View[44] = res.textureSeed;
             u32View[45] = res.textureEnabled ? 1 : 0;
-            uniformData[46] = res.fineNoise;
-            uniformData[47] = res.mediumNoise;
-            uniformData[48] = res.coarseNoise;
-            uniformData[49] = res.largeScale;
-            uniformData[50] = res.fiberIntensity;
-            uniformData[51] = res.textureOpacity;
-            uniformData[52] = res.width;
-            uniformData[53] = res.height;
-            uniformData[54] = res.gradientAngle;
-            uniformData[55] = res.bubbleRadius;
-            uniformData[56] = res.blurRadius;
+            compositeUniformData[46] = res.fineNoise;
+            compositeUniformData[47] = res.mediumNoise;
+            compositeUniformData[48] = res.coarseNoise;
+            compositeUniformData[49] = res.largeScale;
+            compositeUniformData[50] = res.fiberIntensity;
+            compositeUniformData[51] = res.textureOpacity;
+            compositeUniformData[52] = res.width;
+            compositeUniformData[53] = res.height;
+            compositeUniformData[54] = res.gradientAngle;
+            compositeUniformData[55] = res.bubbleRadius;
+            compositeUniformData[56] = res.blurRadius;
             u32View[57] = res.bubbleCount;
 
-            ctx.queue.writeBuffer(res.compositeUniformBuffer, 0, uniformData);
+            ctx.queue.writeBuffer(res.compositeUniformBuffer, 0, compositeUniformData);
 
             const pass = ctx.encoder.beginRenderPass({
                 colorAttachments: [
@@ -931,34 +930,28 @@ export const GradientSystem: System = {
             const color1 = parseColor(gradientColor1);
             const color2 = parseColor(gradientColor2);
             res.gradientAngle = angle;
-            res.gradientColor1 = [
-                color1[0] / 255,
-                color1[1] / 255,
-                color1[2] / 255,
-                color1[3] / 255,
-            ];
-            res.gradientColor2 = [
-                color2[0] / 255,
-                color2[1] / 255,
-                color2[2] / 255,
-                color2[3] / 255,
-            ];
+            res.gradientColor1[0] = color1[0] / 255;
+            res.gradientColor1[1] = color1[1] / 255;
+            res.gradientColor1[2] = color1[2] / 255;
+            res.gradientColor1[3] = color1[3] / 255;
+            res.gradientColor2[0] = color2[0] / 255;
+            res.gradientColor2[1] = color2[1] / 255;
+            res.gradientColor2[2] = color2[2] / 255;
+            res.gradientColor2[3] = color2[3] / 255;
 
             const bubbleSize = Gradient.bubbleSize[eid] ?? DEFAULT_BUBBLE_CONFIG.size;
             const bubbleBlur = Gradient.bubbleBlur[eid] ?? DEFAULT_BUBBLE_CONFIG.blur;
 
-            const bubbleUniformData = new Float32Array(4 * 8);
             for (let i = 0; i < b.length; i++) {
                 const offset = i * 8;
-                bubbleUniformData[offset + 0] = b[i].x / 100;
-                bubbleUniformData[offset + 1] = b[i].y / 100;
+                res.bubbleUniformData[offset + 0] = b[i].x / 100;
+                res.bubbleUniformData[offset + 1] = b[i].y / 100;
                 const color = parseColor(b[i].color);
-                bubbleUniformData[offset + 4] = color[0] / 255;
-                bubbleUniformData[offset + 5] = color[1] / 255;
-                bubbleUniformData[offset + 6] = color[2] / 255;
-                bubbleUniformData[offset + 7] = color[3] / 255;
+                res.bubbleUniformData[offset + 4] = color[0] / 255;
+                res.bubbleUniformData[offset + 5] = color[1] / 255;
+                res.bubbleUniformData[offset + 6] = color[2] / 255;
+                res.bubbleUniformData[offset + 7] = color[3] / 255;
             }
-            res.bubbleUniformData = bubbleUniformData;
             res.bubbleRadius = (bubbleSize / 100) * Math.min(res.width, res.height);
             res.blurRadius = (bubbleBlur / 100) * Math.min(res.width, res.height);
 
@@ -979,14 +972,15 @@ export const GradientSystem: System = {
                 const overlayColor = parseColor(
                     Gradient.overlayColor[eid] || DEFAULT_OVERLAY_CONFIG.color
                 );
-                res.overlayColor = [
-                    overlayColor[0] / 255,
-                    overlayColor[1] / 255,
-                    overlayColor[2] / 255,
-                    overlayColor[3] / 255,
-                ];
+                res.overlayColor[0] = overlayColor[0] / 255;
+                res.overlayColor[1] = overlayColor[1] / 255;
+                res.overlayColor[2] = overlayColor[2] / 255;
+                res.overlayColor[3] = overlayColor[3] / 255;
             } else {
-                res.overlayColor = [0, 0, 0, 0];
+                res.overlayColor[0] = 0;
+                res.overlayColor[1] = 0;
+                res.overlayColor[2] = 0;
+                res.overlayColor[3] = 0;
             }
         }
     },
@@ -1007,8 +1001,8 @@ export const GradientPlugin: Plugin = {
             compositeBindGroupLayout: null,
             compositeUniformBuffer: null,
             gradientAngle: 0,
-            gradientColor1: [0, 0, 0, 1],
-            gradientColor2: [0, 0, 0, 1],
+            gradientColor1: new Float32Array([0, 0, 0, 1]),
+            gradientColor2: new Float32Array([0, 0, 0, 1]),
             textureSeed: 0,
             textureEnabled: true,
             fineNoise: DEFAULT_TEXTURE_CONFIG.fineNoise,
@@ -1017,8 +1011,8 @@ export const GradientPlugin: Plugin = {
             largeScale: DEFAULT_TEXTURE_CONFIG.largeScale,
             fiberIntensity: DEFAULT_TEXTURE_CONFIG.fiberIntensity,
             textureOpacity: DEFAULT_TEXTURE_CONFIG.opacity,
-            overlayColor: [0, 0, 0, 0],
-            bubbleUniformData: null,
+            overlayColor: new Float32Array(4),
+            bubbleUniformData: new Float32Array(4 * 8),
             bubbleRadius: 0,
             blurRadius: 0,
             bubbleCount: 4,

package/src/extras/index.ts

@@ -3,3 +3,6 @@ export * from "./lines";
 export * from "./arrows";
 export * from "./text";
 export * from "./gradient";
+export * from "./skylab";
+export * from "./caustic";
+export * from "./water";

package/src/extras/lines/index.ts

@@ -17,8 +17,8 @@ import {
     type Draw,
     type SharedPassContext,
 } from "../../standard/render";
-import { DEPTH_FORMAT } from "../../standard/render/scene";
-import { SCENE_STRUCT_WGSL } from "../../standard/render/shaders";
+import { Z_FORMAT } from "../../standard/render/scene";
+import { SCENE_STRUCT_WGSL } from "../../standard/render/surface/structs";
 import { Transform } from "../../standard/transforms";
 
 export const LineData = {
@@ -240,7 +240,7 @@ export function createLinesPipeline(
             topology: "triangle-list",
         },
         depthStencil: {
-            format: DEPTH_FORMAT,
+            format: Z_FORMAT,
             depthCompare: "less",
             depthWriteEnabled: false,
         },

package/src/extras/skylab/index.ts

@@ -0,0 +1,314 @@
+import type { Plugin, State, System } from "../../core";
+import { setTraits } from "../../core/component";
+import {
+    Camera,
+    Sky,
+    Sun,
+    Stars,
+    Moon,
+    Haze,
+    Clouds,
+    AmbientLight,
+    DirectionalLight,
+} from "../../standard/render";
+
+export const Skylab = {
+    azimuth: [] as number[],
+    elevation: [] as number[],
+};
+setTraits(Skylab, { defaults: () => ({ azimuth: 37, elevation: 45 }) });
+
+interface ColorRGB {
+    r: number;
+    g: number;
+    b: number;
+}
+
+interface GradientStop {
+    elevation: number;
+    sunColor: ColorRGB;
+    sunIntensity: number;
+    ambientColor: ColorRGB;
+    ambientIntensity: number;
+    zenith: ColorRGB;
+    horizon: ColorRGB;
+    sunGlow: number;
+    starsIntensity: number;
+    moonGlow: number;
+    moonElevationOffset: number;
+    hazeDensity: number;
+    hazeColor: ColorRGB;
+    cloudsColor: ColorRGB;
+}
+
+const STOPS: GradientStop[] = [
+    {
+        elevation: -90,
+        sunColor: { r: 0.25, g: 0.3, b: 0.55 },
+        sunIntensity: 0.15,
+        ambientColor: { r: 0.3, g: 0.25, b: 0.55 },
+        ambientIntensity: 0.5,
+        zenith: { r: 0.03, g: 0.02, b: 0.1 },
+        horizon: { r: 0.05, g: 0.06, b: 0.12 },
+        sunGlow: 0,
+        starsIntensity: 1.0,
+        moonGlow: 0.4,
+        moonElevationOffset: 180,
+        hazeDensity: 0.001,
+        hazeColor: { r: 0.05, g: 0.04, b: 0.12 },
+        cloudsColor: { r: 0.1, g: 0.1, b: 0.18 },
+    },
+    {
+        elevation: -6,
+        sunColor: { r: 0.6, g: 0.2, b: 0.3 },
+        sunIntensity: 0.1,
+        ambientColor: { r: 0.25, g: 0.18, b: 0.45 },
+        ambientIntensity: 0.5,
+        zenith: { r: 0.05, g: 0.02, b: 0.15 },
+        horizon: { r: 0.4, g: 0.15, b: 0.25 },
+        sunGlow: 0,
+        starsIntensity: 0.6,
+        moonGlow: 0.35,
+        moonElevationOffset: 160,
+        hazeDensity: 0.003,
+        hazeColor: { r: 0.25, g: 0.1, b: 0.2 },
+        cloudsColor: { r: 0.3, g: 0.12, b: 0.2 },
+    },
+    {
+        elevation: 0,
+        sunColor: { r: 1.0, g: 0.45, b: 0.15 },
+        sunIntensity: 0.4,
+        ambientColor: { r: 0.35, g: 0.2, b: 0.15 },
+        ambientIntensity: 0.5,
+        zenith: { r: 0.1, g: 0.08, b: 0.3 },
+        horizon: { r: 0.9, g: 0.4, b: 0.15 },
+        sunGlow: 1.2,
+        starsIntensity: 0.1,
+        moonGlow: 0,
+        moonElevationOffset: 140,
+        hazeDensity: 0.008,
+        hazeColor: { r: 0.8, g: 0.4, b: 0.15 },
+        cloudsColor: { r: 0.95, g: 0.5, b: 0.2 },
+    },
+    {
+        elevation: 8,
+        sunColor: { r: 1.0, g: 0.7, b: 0.4 },
+        sunIntensity: 0.7,
+        ambientColor: { r: 0.5, g: 0.4, b: 0.3 },
+        ambientIntensity: 0.7,
+        zenith: { r: 0.15, g: 0.25, b: 0.55 },
+        horizon: { r: 0.85, g: 0.6, b: 0.3 },
+        sunGlow: 0.8,
+        starsIntensity: 0,
+        moonGlow: 0,
+        moonElevationOffset: 120,
+        hazeDensity: 0.006,
+        hazeColor: { r: 0.7, g: 0.55, b: 0.35 },
+        cloudsColor: { r: 0.95, g: 0.75, b: 0.5 },
+    },
+    {
+        elevation: 20,
+        sunColor: { r: 1.0, g: 1.0, b: 1.0 },
+        sunIntensity: 0.75,
+        ambientColor: { r: 0.55, g: 0.52, b: 0.5 },
+        ambientIntensity: 1.0,
+        zenith: { r: 0.25, g: 0.48, b: 0.82 },
+        horizon: { r: 0.3, g: 0.6, b: 0.85 },
+        sunGlow: 0.5,
+        starsIntensity: 0,
+        moonGlow: 0,
+        moonElevationOffset: 90,
+        hazeDensity: 0.005,
+        hazeColor: { r: 0.3, g: 0.5, b: 0.82 },
+        cloudsColor: { r: 1.0, g: 1.0, b: 1.0 },
+    },
+    {
+        elevation: 50,
+        sunColor: { r: 1.0, g: 1.0, b: 1.0 },
+        sunIntensity: 0.81,
+        ambientColor: { r: 0.53, g: 0.536, b: 0.54 },
+        ambientIntensity: 1.0,
+        zenith: { r: 0.25, g: 0.47, b: 0.815 },
+        horizon: { r: 0.24, g: 0.595, b: 0.845 },
+        sunGlow: 0.4,
+        starsIntensity: 0,
+        moonGlow: 0,
+        moonElevationOffset: 60,
+        hazeDensity: 0.005,
+        hazeColor: { r: 0.24, g: 0.465, b: 0.815 },
+        cloudsColor: { r: 1.0, g: 1.0, b: 1.0 },
+    },
+];
+
+function lerpColor(a: ColorRGB, b: ColorRGB, t: number): ColorRGB {
+    return {
+        r: a.r + (b.r - a.r) * t,
+        g: a.g + (b.g - a.g) * t,
+        b: a.b + (b.b - a.b) * t,
+    };
+}
+
+function lerp(a: number, b: number, t: number): number {
+    return a + (b - a) * t;
+}
+
+function packColor(c: ColorRGB): number {
+    return (
+        (Math.round(Math.min(1, Math.max(0, c.r)) * 255) << 16) |
+        (Math.round(Math.min(1, Math.max(0, c.g)) * 255) << 8) |
+        Math.round(Math.min(1, Math.max(0, c.b)) * 255)
+    );
+}
+
+export interface SkylabOutput {
+    sunColor: number;
+    sunIntensity: number;
+    ambientColor: number;
+    ambientIntensity: number;
+    zenith: number;
+    horizon: number;
+    sunGlow: number;
+    starsIntensity: number;
+    moonGlow: number;
+    moonAzimuth: number;
+    moonElevation: number;
+    hazeDensity: number;
+    hazeColor: number;
+    cloudsColor: number;
+}
+
+export function sampleGradient(elevationDegrees: number): SkylabOutput {
+    const el = Math.max(-90, Math.min(90, elevationDegrees));
+
+    let lo = 0;
+    let hi = STOPS.length - 1;
+    for (let i = 0; i < STOPS.length - 1; i++) {
+        if (el >= STOPS[i].elevation && el <= STOPS[i + 1].elevation) {
+            lo = i;
+            hi = i + 1;
+            break;
+        }
+    }
+
+    if (el <= STOPS[0].elevation) {
+        lo = 0;
+        hi = 0;
+    } else if (el >= STOPS[STOPS.length - 1].elevation) {
+        lo = STOPS.length - 1;
+        hi = STOPS.length - 1;
+    }
+
+    const a = STOPS[lo];
+    const b = STOPS[hi];
+    const range = b.elevation - a.elevation;
+    const t = range > 0 ? (el - a.elevation) / range : 0;
+
+    return {
+        sunColor: packColor(lerpColor(a.sunColor, b.sunColor, t)),
+        sunIntensity: lerp(a.sunIntensity, b.sunIntensity, t),
+        ambientColor: packColor(lerpColor(a.ambientColor, b.ambientColor, t)),
+        ambientIntensity: lerp(a.ambientIntensity, b.ambientIntensity, t),
+        zenith: packColor(lerpColor(a.zenith, b.zenith, t)),
+        horizon: packColor(lerpColor(a.horizon, b.horizon, t)),
+        sunGlow: lerp(a.sunGlow, b.sunGlow, t),
+        starsIntensity: lerp(a.starsIntensity, b.starsIntensity, t),
+        moonGlow: lerp(a.moonGlow, b.moonGlow, t),
+        moonAzimuth: 0,
+        moonElevation: lerp(a.moonElevationOffset, b.moonElevationOffset, t),
+        hazeDensity: lerp(a.hazeDensity, b.hazeDensity, t),
+        hazeColor: packColor(lerpColor(a.hazeColor, b.hazeColor, t)),
+        cloudsColor: packColor(lerpColor(a.cloudsColor, b.cloudsColor, t)),
+    };
+}
+
+export function directionToElevation(dx: number, dy: number, dz: number): number {
+    const len = Math.sqrt(dx * dx + dy * dy + dz * dz);
+    if (len < 0.0001) return 90;
+    return Math.asin(Math.min(1, Math.max(-1, -dy / len))) * (180 / Math.PI);
+}
+
+export function directionToAzimuth(dx: number, dy: number, dz: number): number {
+    const len = Math.sqrt(dx * dx + dy * dy + dz * dz);
+    if (len < 0.0001) return 0;
+    return (Math.atan2(-dx / len, -dz / len) * (180 / Math.PI) + 360) % 360;
+}
+
+export function toDirection(azimuthDeg: number, elevationDeg: number): [number, number, number] {
+    const az = (azimuthDeg * Math.PI) / 180;
+    const el = (elevationDeg * Math.PI) / 180;
+    const cosEl = Math.cos(el);
+    return [-Math.sin(az) * cosEl, -Math.sin(el), -Math.cos(az) * cosEl];
+}
+
+function moonDirection(sunAzimuth: number, sunElevation: number): [number, number, number] {
+    const moonAz = (sunAzimuth + 180) % 360;
+    return toDirection(moonAz, Math.abs(sunElevation));
+}
+
+function lightDirection(azimuth: number, elevation: number): [number, number, number] {
+    if (elevation >= 0) return toDirection(azimuth, elevation);
+    if (elevation <= -6) return moonDirection(azimuth, elevation);
+    const t = -elevation / 6;
+    const [sx, sy, sz] = toDirection(azimuth, elevation);
+    const [mx, my, mz] = moonDirection(azimuth, elevation);
+    return [sx + (mx - sx) * t, sy + (my - sy) * t, sz + (mz - sz) * t];
+}
+
+const SkylabSystem: System = {
+    group: "simulation",
+
+    update(state: State) {
+        for (const eid of state.query([Camera, Skylab])) {
+            if (!Camera.active[eid]) continue;
+
+            const azimuth = Skylab.azimuth[eid];
+            const elevation = Skylab.elevation[eid];
+            const [dirX, dirY, dirZ] = lightDirection(azimuth, elevation);
+            const output = sampleGradient(elevation);
+
+            for (const lightEid of state.query([DirectionalLight])) {
+                DirectionalLight.directionX[lightEid] = dirX;
+                DirectionalLight.directionY[lightEid] = dirY;
+                DirectionalLight.directionZ[lightEid] = dirZ;
+                DirectionalLight.color[lightEid] = output.sunColor;
+                DirectionalLight.intensity[lightEid] = output.sunIntensity;
+                break;
+            }
+
+            for (const lightEid of state.query([AmbientLight])) {
+                AmbientLight.color[lightEid] = output.ambientColor;
+                AmbientLight.intensity[lightEid] = output.ambientIntensity;
+                break;
+            }
+
+            if (!state.hasComponent(eid, Sky)) state.addComponent(eid, Sky);
+            Sky.zenith[eid] = output.zenith;
+            Sky.horizon[eid] = output.horizon;
+
+            if (!state.hasComponent(eid, Sun)) state.addComponent(eid, Sun);
+            Sun.glow[eid] = output.sunGlow;
+
+            if (!state.hasComponent(eid, Stars)) state.addComponent(eid, Stars);
+            Stars.intensity[eid] = output.starsIntensity;
+
+            if (!state.hasComponent(eid, Moon)) state.addComponent(eid, Moon);
+            Moon.glow[eid] = output.moonGlow;
+            Moon.azimuth[eid] = (azimuth + 180) % 360;
+            Moon.elevation[eid] = Math.abs(elevation);
+
+            if (!state.hasComponent(eid, Haze)) state.addComponent(eid, Haze);
+            Haze.density[eid] = output.hazeDensity;
+            Haze.color[eid] = output.hazeColor;
+
+            if (!state.hasComponent(eid, Clouds)) state.addComponent(eid, Clouds);
+            Clouds.color[eid] = output.cloudsColor;
+
+            break;
+        }
+    },
+};
+
+export const SkylabPlugin: Plugin = {
+    systems: [SkylabSystem],
+    components: { Skylab },
+};