@aethervtt/shard-render 0.0.1 → 0.2.0

package/dist/atmosphere-nodes.js

@@ -6,10 +6,13 @@ import {
   Environments,
   environmentBakers
 } from "./environment.js";
-import { ForwardStateResource, sceneColor } from "./forward.js";
+import { addRenderFeatures } from "./features.js";
+import { ForwardStateResource, sceneColor, viewBindGroup } from "./forward.js";
 import { RenderPhase } from "./graph.js";
 import { Gpu, Graph, Shaders, Views } from "./plugin.js";
 import { hasEffect, PostEffect } from "./post.js";
+import { roundsRg11, targetsFor } from "./post-common.js";
+import { bindingDimension, depthReadEntry } from "./tier.js";
 import { cameraOf } from "./view.js";
 const LUT_LAYERS = 8;
 const PARAMS_FLOATS = 32;
@@ -39,22 +42,26 @@ class AtmosphereGpu {
   frame = 0;
   pipelines = /* @__PURE__ */ new Map();
   layouts;
+  /** The baseline tier's passes (0064): fragment passes, loaded only on a baseline device. */
+  baseline;
   groups = /* @__PURE__ */ new Map();
   ensure(gpu) {
     if (this.generation === gpu.generation) return;
     this.generation = gpu.generation;
-    const usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_SRC;
+    const usage = GPUTextureUsage.TEXTURE_BINDING | written(gpu) | GPUTextureUsage.COPY_SRC;
     this.transmittance = gpu.device.createTexture({
       label: "atmosphere/transmittance",
       size: [TRANSMITTANCE_W, TRANSMITTANCE_H, LUT_LAYERS],
       format: "rgba16float",
-      usage
+      usage,
+      ...bindingDimension(gpu, "2d-array")
     });
     this.multiscatter = gpu.device.createTexture({
       label: "atmosphere/multiscatter",
       size: [MULTISCATTER_SIZE, MULTISCATTER_SIZE, LUT_LAYERS],
       format: "rgba16float",
-      usage
+      usage,
+      ...bindingDimension(gpu, "2d-array")
     });
     this.transmittanceArray = this.transmittance.createView({ dimension: "2d-array" });
     this.multiscatterArray = this.multiscatter.createView({ dimension: "2d-array" });
@@ -124,6 +131,7 @@ class AtmosphereGpu {
         scatter: void 0,
         transmittance: void 0,
         computed: -1,
+        packed: false,
         generation: gpu.generation,
         seen: 0
       };
@@ -141,6 +149,9 @@ class AtmosphereGpu {
     return g.group;
   }
 }
+function written(gpu) {
+  return gpu.tier === "full" ? GPUTextureUsage.STORAGE_BINDING : GPUTextureUsage.RENDER_ATTACHMENT;
+}
 const AtmosphereGpuResource = defineResource("render/AtmosphereGpu", {
   description: "Atmosphere LUTs, per-camera sky-view LUTs and froxels, and their pipelines.",
   init: () => new AtmosphereGpu()
@@ -194,6 +205,7 @@ function relativeInverse(cam, out) {
 }
 function packView(ca, cam, c, out) {
   out.fill(0);
+  c.packed = false;
   for (const rec of ca.list) if (rec.layerVersion < 0) return;
   const n = Math.min(ca.list.length, 4);
   for (let i = 0; i < n; i++) packParams(ca.list[i], out, i * PARAMS_FLOATS, ca.origins, i * 4);
@@ -219,6 +231,7 @@ function packView(ca, cam, c, out) {
   out[O_CAMERA + 1] = cam.position[1];
   out[O_CAMERA + 2] = cam.position[2];
   out[O_CAMERA + 3] = cam.exposure;
+  c.packed = true;
 }
 const uploadAtmospheres = defineSystem({
   name: "render/atmosphere-upload",
@@ -259,7 +272,7 @@ function ensureViewTextures(gpu, c, ca) {
       label: "atmosphere/sky-view",
       size: [sw, sh],
       format: "rgba16float",
-      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING
+      usage: GPUTextureUsage.TEXTURE_BINDING | written(gpu)
     });
   }
   const [fx, fy, fz] = ca.froxels;
@@ -271,7 +284,7 @@ function ensureViewTextures(gpu, c, ca) {
       size: [fx, fy, fz],
       dimension: "3d",
       format: "rgba16float",
-      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING
+      usage: GPUTextureUsage.TEXTURE_BINDING | written(gpu)
     };
     c.scatter = gpu.device.createTexture(desc);
     c.transmittance = gpu.device.createTexture({
@@ -309,7 +322,7 @@ function layouts(gpu, s) {
       viewDimension
     }
   });
-  s.layouts = {
+  const computeLayouts = gpu.tier === "full" ? {
     transmittance: gpu.layouts.bindGroupLayout({
       label: "atmosphere/transmittance",
       entries: [uniform(0, C), storage(1, "2d")]
@@ -335,13 +348,22 @@ function layouts(gpu, s) {
     }),
     bake: gpu.layouts.bindGroupLayout({
       label: "atmosphere/bake",
-      entries: [uniform(0, C), array(1, C), array(2, C), filtering(3, C), storage(4, "2d-array")]
-    }),
+      entries: [
+        uniform(0, C),
+        array(1, C),
+        array(2, C),
+        filtering(3, C),
+        storage(4, "2d-array")
+      ]
+    })
+  } : {};
+  s.layouts = {
+    ...computeLayouts,
     composite: gpu.layouts.bindGroupLayout({
       label: "atmosphere/composite",
       entries: [
         { binding: 0, visibility: F, texture: { sampleType: "unfilterable-float" } },
-        { binding: 1, visibility: F, texture: { sampleType: "depth" } },
+        depthReadEntry(gpu, 1, F),
         uniform(2, F),
         array(3, F),
         array(4, F),
@@ -350,6 +372,21 @@ function layouts(gpu, s) {
         { binding: 7, visibility: F, texture: { sampleType: "float", viewDimension: "3d" } }
       ]
     }),
+    // The composite with fog folded in: fog's parameters after the haze's bindings.
+    compositeFog: gpu.layouts.bindGroupLayout({
+      label: "atmosphere/composite-fog",
+      entries: [
+        { binding: 0, visibility: F, texture: { sampleType: "unfilterable-float" } },
+        depthReadEntry(gpu, 1, F),
+        uniform(2, F),
+        array(3, F),
+        array(4, F),
+        filtering(5, F),
+        { binding: 6, visibility: F, texture: { sampleType: "float", viewDimension: "3d" } },
+        { binding: 7, visibility: F, texture: { sampleType: "float", viewDimension: "3d" } },
+        uniform(8, F)
+      ]
+    }),
     viewOnly: gpu.layouts.bindGroupLayout({
       label: "atmosphere/view",
       entries: [uniform(0, GPUShaderStage.VERTEX | F)]
@@ -404,6 +441,10 @@ function lutNode() {
         s.lutFrame = s.frame;
         return;
       }
+      if (s.baseline) {
+        if (s.baseline.runLuts(ctx, s)) s.lutFrame = s.frame;
+        return;
+      }
       const t = compute(ctx, s, "transmittance", "shard::atmosphere::transmittance_lut");
       const m = compute(ctx, s, "multiscatter", "shard::atmosphere::multiscatter_lut");
       if (!t || !m) return;
@@ -471,6 +512,16 @@ function viewNode() {
       const c = s.cameras.get(cam.entity);
       if (!c?.skyView || !c.scatter || !c.transmittance) return;
       if (ca.primary.layerVersion !== ca.primary.version) return;
+      if (s.baseline) {
+        const view = {
+          uniform: c.uniform,
+          skyView: c.skyView,
+          scatter: c.scatter,
+          transmittance: c.transmittance
+        };
+        if (s.baseline.runView(ctx, s, ca, view)) c.computed = s.frame;
+        return;
+      }
       const sky = compute(ctx, s, "skyView", "shard::atmosphere::sky_view");
       const aerial = compute(ctx, s, "aerial", "shard::atmosphere::aerial");
       if (!sky || !aerial) return;
@@ -534,19 +585,17 @@ function idOf(o) {
   }
   return id;
 }
-let empty;
 function emptyTextures(gpu) {
-  if (!empty || empty.generation !== gpu.generation) {
+  return gpu.shared("atmosphere/empty", (device) => {
     const usage = GPUTextureUsage.TEXTURE_BINDING;
-    empty = {
-      generation: gpu.generation,
-      d2: gpu.device.createTexture({
+    return {
+      d2: device.createTexture({
         label: "atmosphere/empty",
         size: [1, 1],
         format: "rgba16float",
         usage
       }),
-      d3: gpu.device.createTexture({
+      d3: device.createTexture({
         label: "atmosphere/empty-3d",
         size: [1, 1, 1],
         dimension: "3d",
@@ -554,8 +603,7 @@ function emptyTextures(gpu) {
         usage
       })
     };
-  }
-  return empty;
+  });
 }
 function skyNode() {
   const bgData = new Float32Array(8);
@@ -660,12 +708,31 @@ function skyNode() {
     }
   };
 }
+const fogScratch = new Float32Array(8);
+const FOG_COMPOSITE_KEYS = [
+  "composite-fog",
+  "composite-fog/alpha",
+  "composite-fog/interior",
+  "composite-fog/alpha/interior",
+  "composite-fog/rg11",
+  "composite-fog/alpha/rg11",
+  "composite-fog/interior/rg11",
+  "composite-fog/alpha/interior/rg11"
+];
 function compositeNode() {
+  const fogBuffers = /* @__PURE__ */ new Map();
   return {
     kind: "render",
     phase: RenderPhase.Post,
     enabled: hasEffect(PostEffect.Atmosphere),
-    reads: ["atmosphere-in", "depth", "atmosphere-luts", "atmosphere-view"],
+    reads: [
+      "atmosphere-in",
+      "depth",
+      "atmosphere-luts",
+      "atmosphere-view",
+      "environment",
+      "clusters"
+    ],
     writes: ["atmosphere-out"],
     color: [{ resource: "atmosphere-out", clear: { r: 0, g: 0, b: 0, a: 1 } }],
     run: (ctx) => {
@@ -673,30 +740,43 @@ function compositeNode() {
       const ca = ctx.view.data.atmosphere;
       const s = ctx.world.resource(AtmosphereGpuResource);
       const c = cam ? s.cameras.get(cam.entity) : void 0;
-      const pv = ctx.world.resource(ForwardStateResource).views.get(ctx.view.name);
+      const forward = ctx.world.resource(ForwardStateResource);
+      const pv = forward.views.get(ctx.view.name);
       if (!cam || !ca || !c || !pv) return;
       const gpu = ctx.gpu;
       const l = layouts(gpu, s);
-      let pipeline = s.pipelines.get("composite");
+      const fog = (cam.post.effects & PostEffect.Fog) !== 0;
+      const alpha = cam.alphaOutput;
+      const out = ctx.texture("atmosphere-out");
+      const rg11 = out.format === "rg11b10ufloat";
+      const name = fog ? FOG_COMPOSITE_KEYS[(alpha ? 1 : 0) + (forward.interiorMode !== 0 ? 2 : 0) + (rg11 ? 4 : 0)] : rg11 ? "composite/rg11" : "composite";
+      let pipeline = s.pipelines.get(name);
       if (!pipeline) {
         const shaders = ctx.world.resource(Shaders);
-        const fs = shaders.module(gpu, { root: "shard::atmosphere::composite" });
+        const fs = shaders.module(gpu, {
+          root: "shard::atmosphere::composite",
+          defines: { FOG: fog, TRANSPARENT: fog && alpha, RG11_ROUND: roundsRg11(gpu, out) }
+        });
         const vs = shaders.module(gpu, { root: "shard::fullscreen" });
         if (!fs || !vs) {
           gpu.pipelines.skipped++;
           return;
         }
         pipeline = gpu.pipelines.render({
-          label: "atmosphere/composite",
+          label: `atmosphere/${name}`,
           layout: gpu.layouts.pipelineLayout({
-            label: "atmosphere/composite",
-            bindGroupLayouts: [l.viewOnly, l.composite]
+            label: `atmosphere/${name}`,
+            bindGroupLayouts: fog ? [forward.layouts.view, l.compositeFog] : [l.viewOnly, l.composite]
           }),
           vertex: { module: vs, entryPoint: "vs" },
-          fragment: { module: fs, entryPoint: "fs", targets: [{ format: "rgba16float" }] }
+          fragment: {
+            module: fs,
+            entryPoint: fog ? "fs_fog" : "fs",
+            targets: targetsFor(out)
+          }
         });
         if (!pipeline) return;
-        s.pipelines.set("composite", pipeline);
+        s.pipelines.set(name, pipeline);
       }
       const input = ctx.texture("atmosphere-in");
       const depth = ctx.texture("depth");
@@ -704,6 +784,48 @@ function compositeNode() {
       const inside = ca.inside && c.computed === s.frame;
       const scatter = inside && c.scatter ? c.scatter : e.d3;
       const trans = inside && c.transmittance ? c.transmittance : e.d3;
+      const pass = ctx.renderPass;
+      pass.setPipeline(pipeline);
+      if (fog) {
+        let buffer = fogBuffers.get(cam.entity);
+        if (!buffer) {
+          buffer = gpu.device.createBuffer({
+            label: `${ctx.view.name}/composite-fog`,
+            size: 32,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+          });
+          fogBuffers.set(cam.entity, buffer);
+        }
+        const f = cam.post.fog;
+        fogScratch.set(f.color, 0);
+        fogScratch[4] = f.density;
+        fogScratch[5] = f.heightFalloff;
+        fogScratch[6] = f.start;
+        fogScratch[7] = f.sunScattering;
+        gpu.device.queue.writeBuffer(buffer, 0, fogScratch);
+        const fogBuffer = buffer;
+        const group2 = s.group(
+          gpu,
+          `${cam.entity}/composite-fog`,
+          `${gpu.generation}/${idOf(input)}/${idOf(depth)}/${c.uniform.version}/${idOf(scatter)}/${idOf(trans)}/${idOf(s.transmittance)}/${idOf(fogBuffer)}`,
+          l.compositeFog,
+          () => [
+            { binding: 0, resource: input.createView() },
+            { binding: 1, resource: depth.createView() },
+            { binding: 2, resource: { buffer: c.uniform.buffer } },
+            { binding: 3, resource: s.transmittanceArray },
+            { binding: 4, resource: s.multiscatterArray },
+            { binding: 5, resource: s.clamp },
+            { binding: 6, resource: scatter.createView() },
+            { binding: 7, resource: trans.createView() },
+            { binding: 8, resource: { buffer: fogBuffer } }
+          ]
+        );
+        pass.setBindGroup(0, viewBindGroup(gpu, ctx.world, pv, cam));
+        pass.setBindGroup(1, group2);
+        pass.draw(3);
+        return;
+      }
       const group = s.group(
         gpu,
         `${cam.entity}/composite`,
@@ -727,8 +849,6 @@ function compositeNode() {
         l.viewOnly,
         () => [{ binding: 0, resource: { buffer: pv.uniform.buffer } }]
       );
-      const pass = ctx.renderPass;
-      pass.setPipeline(pipeline);
       pass.setBindGroup(0, viewGroup);
       pass.setBindGroup(1, group);
       pass.draw(3);
@@ -741,7 +861,7 @@ function bakeAtmosphere(ctx, pass, env, level0) {
   const primary = ca?.primary;
   if (!ca || !primary || primary.layerVersion !== primary.version) return false;
   const c = s.cameras.get(ca.camera);
-  if (!c) return false;
+  if (!c?.packed) return false;
   const pipeline = compute(ctx, s, "bake", "shard::atmosphere::bake");
   if (!pipeline) return false;
   const gpu = ctx.gpu;
@@ -766,6 +886,12 @@ function addAtmosphereNodes(world) {
   const graph = world.resource(Graph);
   world.initResource(AtmosphereGpuResource);
   environmentBakers.set("atmosphere", bakeAtmosphere);
+  addRenderFeatures(world, {
+    name: "render/atmosphere",
+    description: "Atmosphere scattering LUTs, sky-view and aerial-perspective froxels, sky, composite.",
+    nodes: ["atmosphere/luts", "atmosphere/view", "atmosphere/sky", "post/atmosphere"],
+    baseline: { strategy: "LUTs, sky-view and froxel slices as fragment passes" }
+  });
   graph.addNode("atmosphere/luts", lutNode());
   graph.addNode("atmosphere/view", viewNode());
   graph.addNode("atmosphere/sky", skyNode());
@@ -776,5 +902,6 @@ export {
   AtmosphereGpuResource,
   LUT_LAYERS,
   addAtmosphereNodes,
+  packParams,
   uploadAtmospheres
 };

package/dist/atmosphere-plugin.js

@@ -11,7 +11,7 @@ import { AtmosphereGpuResource, addAtmosphereNodes, uploadAtmospheres } from "./
 import { ATMOSPHERE_SHADERS } from "./atmosphere-shaders.js";
 import { Atmospheres } from "./atmosphere-state.js";
 import { extractLights } from "./lights.js";
-import { RenderDescribers, RenderSet, Shaders } from "./plugin.js";
+import { Gpu, RenderDescribers, RenderSet, Shaders } from "./plugin.js";
 import { registerShaders } from "./shaders.js";
 import { extractCameras } from "./view.js";
 const atmospherePlugin = definePlugin({
@@ -28,13 +28,19 @@ const atmospherePlugin = definePlugin({
     );
     app.addMethod(...atmosphereMethods);
   },
-  ready(app) {
+  async ready(app) {
+    const baseline = app.world.resource(Gpu).tier === "baseline" ? await import("./baseline/atmosphere.js") : void 0;
     registerShaders(app.world.resource(Shaders), ATMOSPHERE_SHADERS);
+    if (baseline) registerShaders(app.world.resource(Shaders), baseline.BASELINE_ATMOSPHERE_SHADERS);
     app.world.initResource(RenderDescribers).set(
       "atmosphere",
       (world) => describeAtmospheres(world, world.tryResource(ProfilerResource)?.all())
     );
     addAtmosphereNodes(app.world);
+    if (baseline) {
+      app.world.resource(AtmosphereGpuResource).baseline = baseline;
+      baseline.installAtmosphereBaseline();
+    }
   }
 });
 export {

package/dist/atmosphere-shaders.js

@@ -518,8 +518,9 @@ struct SkyOutput {
 }`,
   "shard::atmosphere::composite": `
 import shard::view::view;
-import shard::post::common::uv_of;
+import shard::post::common::{ uv_of, post_out };
 import shard::atmosphere::{ AtmosphereView, KCD, integrate, froxel_slice, relative_at };
+@if(FOG) import shard::post::fog::common::{ FogParams, fog_apply };
 
 @group(1) @binding(0) var input: texture_2d<f32>;
 @group(1) @binding(1) var depth_texture: texture_depth_2d;
@@ -529,16 +530,15 @@ import shard::atmosphere::{ AtmosphereView, KCD, integrate, froxel_slice, relati
 @group(1) @binding(5) var lut_sampler: sampler;
 @group(1) @binding(6) var ap_scatter: texture_3d<f32>;
 @group(1) @binding(7) var ap_transmittance: texture_3d<f32>;
+/** A view with fog too: fog follows in the same pass (\`fs_fog\`). */
+@if(FOG) @group(1) @binding(8) var<uniform> fog: FogParams;
 
 /**
  * Aerial perspective on geometry: color \xD7 transmittance + in-scattering for every atmosphere the
  * view ray crosses before the surface, far to near. The primary reads its froxels within their
  * range; beyond it (terrain seen from orbit), and for the others, the ray is marched.
  */
-@fragment fn fs(@builtin(position) frag: vec4f) -> @location(0) vec4f {
-  let px = vec2i(frag.xy);
-  let c = textureLoad(input, px, 0);
-  let depth = textureLoad(depth_texture, px, 0);
+fn haze(frag: vec4f, c: vec4f, depth: f32) -> vec4f {
   let count = u32(atmo.info.x);
   if (depth <= 0.0 || count == 0u) { return c; }
   let uv = uv_of(frag.xy);
@@ -568,6 +568,18 @@ import shard::atmosphere::{ AtmosphereView, KCD, integrate, froxel_slice, relati
     }
   }
   return vec4f(min(color, vec3f(60000.0)), c.a);
+}
+
+@fragment fn fs(@builtin(position) frag: vec4f) -> @location(0) vec4f {
+  let px = vec2i(frag.xy);
+  return post_out(haze(frag, textureLoad(input, px, 0), textureLoad(depth_texture, px, 0)));
+}
+
+/** Aerial perspective, then height fog: the view's fog pass folded into this one. */
+@if(FOG) @fragment fn fs_fog(@builtin(position) frag: vec4f) -> @location(0) vec4f {
+  let px = vec2i(frag.xy);
+  let depth = textureLoad(depth_texture, px, 0);
+  return post_out(fog_apply(haze(frag, textureLoad(input, px, 0), depth), uv_of(frag.xy), depth, fog));
 }`,
   "shard::atmosphere::bake": `
 import shard::env::common::cube_dir;

package/dist/baseline/atmosphere.d.ts

@@ -0,0 +1,16 @@
+import { GpuBuffer } from '@aethervtt/shard-gpu';
+import { type AtmosphereGpu } from '../atmosphere-nodes.js';
+import type { CameraAtmosphere } from '../atmosphere-state.js';
+import type { NodeContext } from '../graph.js';
+export declare const BASELINE_ATMOSPHERE_SHADERS: Record<string, string>;
+/** The transmittance and multiple-scattering LUTs of every layer whose atmosphere changed. */
+export declare function runLuts(ctx: NodeContext, s: AtmosphereGpu): boolean;
+/** A camera's sky-view LUT and (with aerial perspective) its froxels, slice by slice. */
+export declare function runView(ctx: NodeContext, s: AtmosphereGpu, ca: CameraAtmosphere, c: {
+    uniform: GpuBuffer;
+    skyView: GPUTexture;
+    scatter: GPUTexture;
+    transmittance: GPUTexture;
+}): boolean;
+/** Registers the environment baker: atmosphere environments bake by fragment passes too. */
+export declare function installAtmosphereBaseline(): void;