feat: fancy clouds, fps meter

app/level.ts

@@ -1,5 +1,5 @@
 import { Color } from "../engine/render/Color"
-import type { SkyConfig } from "../engine/render/Sky"
+import type { CloudLayer, SkyConfig } from "../engine/render/Sky"
 import type { Mesh } from "../engine/scene/Mesh"
 
 type Corner = [number, number, number]
@@ -40,6 +40,29 @@ const CRATE = { x: -2, z: -2, half: 1, top: 1 }
  *  from the render side. */
 const DIVISIONS_PER_UNIT = 1.3
 
+/** The two cloud styles; swap which one the sky uses in `buildLevel`.
+ *  `basicCumulus` is cheap flat puffs; `fancyCumulus` is the pricier
+ *  heightfield-shaded, domain-warped version with faked volume. */
+export const basicCumulus: CloudLayer = {
+  kind: "basic",
+  color: Color.rgb(248, 250, 255),
+  coverage: 0.5,
+  scale: 0.9,
+  speed: 0.5,
+  edge: 0.02,
+}
+
+export const fancyCumulus: CloudLayer = {
+  kind: "fancy",
+  color: Color.rgb(250, 251, 255),
+  coverage: 0.5,
+  scale: 0.6,
+  speed: 0.5,
+  edge: 0.02,
+  warp: 0.4,
+  relief: 7,
+}
+
 export function buildLevel(): Level {
   const floor = mesh()
   quadGrid(floor, [-ARENA, 0, -ARENA], [ARENA, 0, -ARENA], [ARENA, 0, ARENA], [-ARENA, 0, ARENA], 12, 12)
@@ -76,13 +99,7 @@ export function buildLevel(): Level {
     sun: Color.rgb(255, 246, 214),
     sunDir: { x: 0.3, y: 0.5, z: -0.8 },
     sunSize: 0.04,
-    clouds: {
-      color: Color.rgb(248, 250, 255),
-      coverage: 0.5,
-      scale: 0.9,
-      speed: 0.5,
-      edge: 0.02,
-    },
+    clouds: fancyCumulus,
   }
 
   return { floor, walls, crate, colliders, npcPosition: { x: 2, y: 0, z: -1 }, sky }