feat: cumulus

engine/render/RenderConfig.ts

@@ -62,7 +62,7 @@ export type RenderConfig = {
  *  sweep `perspectiveCorrect` 0 -> 0.5 -> 1 so you can watch the texture swim
  *  straighten out as you press through them. */
 export namespace RenderConfig {
-  export const psxish: RenderConfig = {
+  export const standard: RenderConfig = {
     internalWidth: 384,
     internalHeight: 216,
     upscaleFilter: "nearest",

engine/render/Sky.ts

@@ -3,7 +3,21 @@ import type { Framebuffer } from "./Framebuffer"
 import { Camera } from "../scene/Camera"
 import { Vec3 } from "../math/Vec3"
 
-/** Procedural sky: a vertical gradient plus a sun disc. No texture needed. */
+/** One procedural cloud layer. For now a single cumulus type; add more kinds
+ *  later by giving this a `kind` field and branching in the cloud shader. */
+export type CloudLayer = {
+  color: Color
+  /** Roughly the fraction of sky covered, 0..1. */
+  coverage: number
+  /** Puff size: larger = smaller, busier clouds. */
+  scale: number
+  /** Scroll speed (wind), in noise units per second. */
+  speed: number
+  /** Edge softness: small = crisp cumulus rims, large = hazy. */
+  edge: number
+}
+
+/** Procedural sky: a vertical gradient, a sun disc, and optional moving clouds. */
 export type SkyConfig = {
   zenith: Color
   horizon: Color
@@ -12,6 +26,7 @@ export type SkyConfig = {
   sunDir: Vec3
   /** Angular radius of the sun's core, in radians. */
   sunSize: number
+  clouds: CloudLayer | null
 }
 
 const UP: Vec3 = { x: 0, y: 1, z: 0 }
@@ -20,13 +35,13 @@ export namespace Sky {
   /**
    * Fill the whole framebuffer with the sky and reset depth to 0. Run first each
    * frame in place of Framebuffer.clear; opaque geometry then overwrites the sky
-   * wherever it is nearer.
+   * wherever it is nearer. `time` (seconds) drives cloud motion.
    *
    * Per pixel it reconstructs the view ray from the camera basis, shades a
-   * horizon->zenith gradient by the ray's elevation (so it pans with pitch and
-   * yaw), and brightens toward `sun` where the ray points near `sunDir`.
+   * horizon->zenith gradient by the ray's elevation, brightens toward `sun` near
+   * `sunDir`, then lays crisp-edged cumulus over the top.
    */
-  export function render(fb: Framebuffer, camera: Camera, sky: SkyConfig): void {
+  export function render(fb: Framebuffer, camera: Camera, sky: SkyConfig, time: number): void {
     const { width, height, color, depth } = fb
     const forward = Camera.forward(camera)
     const right = Vec3.normalize(Vec3.cross(forward, UP))
@@ -35,6 +50,7 @@ export namespace Sky {
     const tanX = tanY * (width / height)
     const sun = Vec3.normalize(sky.sunDir)
     const cosSun = Math.cos(sky.sunSize)
+    const clouds = sky.clouds
     for (let y = 0; y < height; y++) {
       const ndcY = 1 - ((y + 0.5) / height) * 2
       for (let x = 0; x < width; x++) {
@@ -55,10 +71,71 @@ export namespace Sky {
           const glow = Math.min(1, ((facing - cosSun) / (1 - cosSun)) * 1.5)
           c = Color.lerp(c, sky.sun, glow)
         }
+        if (clouds !== null && dy > 0.02) {
+          const cover = cumulus(dx, dy, dz, clouds, time)
+          if (cover > 0) {
+            c = Color.lerp(c, clouds.color, cover)
+          }
+        }
         const i = y * width + x
         color[i] = c
         depth[i] = 0
       }
     }
   }
+
+  /**
+   * Coverage in 0..1 of a cumulus layer along a view ray. The ray is projected
+   * onto a flat cloud plane "at infinity" (xz / y), scrolled by wind, sampled
+   * with fractal noise, then hard-thresholded so the clouds have distinct puffy
+   * edges rather than a foggy falloff. Fades out near the horizon, where the
+   * projection blows up into noise.
+   */
+  function cumulus(dx: number, dy: number, dz: number, layer: CloudLayer, time: number): number {
+    const u = (dx / dy) * layer.scale + time * layer.speed
+    const v = (dz / dy) * layer.scale
+    const density = fbm(u, v)
+    const threshold = 0.72 - layer.coverage * 0.4
+    const cover = smoothstep(threshold - layer.edge, threshold + layer.edge, density)
+    return cover * smoothstep(0.02, 0.22, dy)
+  }
+
+  /** Fractal (value-noise) sum, ~0..1, giving lumpy cumulus shapes. */
+  function fbm(x: number, y: number): number {
+    let sum = 0
+    let amplitude = 0.5
+    let frequency = 1
+    for (let octave = 0; octave < 4; octave++) {
+      sum += amplitude * valueNoise(x * frequency, y * frequency)
+      frequency *= 2
+      amplitude *= 0.5
+    }
+    return sum
+  }
+
+  function valueNoise(x: number, y: number): number {
+    const xi = Math.floor(x)
+    const yi = Math.floor(y)
+    const xf = x - xi
+    const yf = y - yi
+    const u = xf * xf * (3 - 2 * xf)
+    const v = yf * yf * (3 - 2 * yf)
+    const a = hash(xi, yi)
+    const b = hash(xi + 1, yi)
+    const c = hash(xi, yi + 1)
+    const d = hash(xi + 1, yi + 1)
+    return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v
+  }
+
+  /** Deterministic 0..1 hash of an integer lattice point. */
+  function hash(x: number, y: number): number {
+    let h = (Math.imul(x, 374761393) + Math.imul(y, 668265263)) | 0
+    h = Math.imul(h ^ (h >>> 13), 1274126177)
+    return ((h ^ (h >>> 16)) >>> 0) / 4294967295
+  }
+
+  function smoothstep(a: number, b: number, x: number): number {
+    const t = Math.max(0, Math.min(1, (x - a) / (b - a || 1e-4)))
+    return t * t * (3 - 2 * t)
+  }
 }