import { YawnCore } from "@yawn/core";
import type {
  ComputePass,
  GraphBuffer,
  GraphSampler,
  GraphTexture,
} from "./ComputePass";

type RowFormat = "f32" | "u32" | "i32";
type MeshLike = {
  id: number;
  geometryId: number;
  indexCount: number;
  vertexCount: number;
  faceMaterials: ReadonlyMap<number, number>;
};
type ShaderLike = {
  id: number;
  code: string;
  vertexEntry: string;
  fragmentEntry: string;
};
type PostProcessState = {
  id: string;
  kind: string;
  options: Record<string, unknown>;
};
type TextureState = GraphTexture & {
  number: number;
  source?: string | ImageBitmap;
  sampler?: Omit<GraphSampler, "id">;
};

const rows = [
  ["nodes", 16, "u32"],
  ["nodePositions", 16, "f32"],
  ["nodeRotors", 16, "f32"],
  ["nodeScales", 16, "f32"],
  ["meshInfo", 16, "u32"],
  ["bounds", 32, "f32"],
  ["cameras", 80, "f32"],
  ["cameraMatrices", 80, "f32"],
  ["materials", 48, "f32"],
  ["materialTextures", 64, "u32"],
  ["materialExtensions", 112, "f32"],
  ["materialTextureInfo", 416, "f32"],
  ["pointLights", 32, "f32"],
  ["rectAreaLights", 48, "f32"],
  ["spotLights", 32, "f32"],
  ["directionalLights", 32, "f32"],
  ["ambientLights", 16, "f32"],
  ["sceneAccent", 16, "f32"],
] as const;

const compactLightLimit = 500;
const compactPointStart = 11;
const compactSpotCount = compactPointStart + compactLightLimit;
const compactSpotStart = compactSpotCount + 1;
const compactAmbientStart = compactSpotStart + compactLightLimit;

const clusterShader = /* wgsl */ `
@group(0) @binding(0) var<storage, read> pointLights: array<vec4<f32>>;
@group(0) @binding(1) var<storage, read> rectLights: array<vec4<f32>>;
@group(0) @binding(2) var<storage, read> spotLights: array<vec4<f32>>;
@group(0) @binding(3) var<storage, read> directionalLights: array<vec4<f32>>;
@group(0) @binding(4) var<storage, read> ambientLights: array<vec4<f32>>;
@group(0) @binding(5) var<storage, read_write> clusters: array<u32>;

@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3<u32>) {
  if (id.x != 0u) { return; }
  var count = 0u;
  var pointCount = 0u;
  var spotCount = 0u;
  var light = vec3<f32>(0.0);
  var ambientLight = vec3<f32>(0.0);
  var pointLight = vec3<f32>(0.0);
  var spotLight = vec3<f32>(0.0);
  for (var i = 0u; i < arrayLength(&pointLights) / 2u; i++) {
    let enabled = pointLights[i * 2u + 1u].y;
    count += select(0u, 1u, enabled != 0.0);
    if (enabled != 0.0) {
      if (pointCount < ${compactLightLimit}u) {
        clusters[${compactPointStart}u + pointCount] = i;
      }
      pointCount += 1u;
    }
    let contribution = pointLights[i * 2u].rgb * pointLights[i * 2u].a * enabled * 0.02;
    light += contribution;
    pointLight += contribution;
  }
  for (var i = 0u; i < arrayLength(&rectLights) / 3u; i++) {
    let enabled = rectLights[i * 3u + 1u].z;
    count += select(0u, 1u, enabled != 0.0);
    let contribution = rectLights[i * 3u].rgb * rectLights[i * 3u].a * enabled * 0.02;
    light += contribution;
    ambientLight += contribution;
  }
  for (var i = 0u; i < arrayLength(&spotLights) / 2u; i++) {
    let enabled = spotLights[i * 2u + 1u].w;
    count += select(0u, 1u, enabled != 0.0);
    if (enabled != 0.0) {
      if (spotCount < ${compactLightLimit}u) {
        clusters[${compactSpotStart}u + spotCount] = i;
      }
      spotCount += 1u;
    }
    let contribution = spotLights[i * 2u].rgb * spotLights[i * 2u].a * enabled * 0.02;
    light += contribution;
    spotLight += contribution;
  }
  for (var i = 0u; i < arrayLength(&directionalLights) / 2u; i++) {
    let enabled = directionalLights[i * 2u + 1u].x;
    count += select(0u, 1u, enabled != 0.0);
    light += directionalLights[i * 2u].rgb * directionalLights[i * 2u].a * enabled * 0.1;
  }
  for (var i = 0u; i < arrayLength(&ambientLights); i++) {
    count += select(0u, 1u, ambientLights[i].a != 0.0);
    let contribution = ambientLights[i].rgb * ambientLights[i].a;
    light += contribution;
    ambientLight += contribution;
  }
  clusters[0] = count;
  clusters[1] = bitcast<u32>(light.r);
  clusters[2] = bitcast<u32>(light.g);
  clusters[3] = bitcast<u32>(light.b);
  clusters[4] = bitcast<u32>(pointLight.r);
  clusters[5] = bitcast<u32>(pointLight.g);
  clusters[6] = bitcast<u32>(pointLight.b);
  clusters[7] = bitcast<u32>(spotLight.r);
  clusters[8] = bitcast<u32>(spotLight.g);
  clusters[9] = bitcast<u32>(spotLight.b);
  clusters[10] = pointCount;
  clusters[${compactSpotCount}] = spotCount;
  clusters[${compactAmbientStart}] = bitcast<u32>(ambientLight.r);
  clusters[${compactAmbientStart + 1}] = bitcast<u32>(ambientLight.g);
  clusters[${compactAmbientStart + 2}] = bitcast<u32>(ambientLight.b);
}`;

const basicForwardShader = /* wgsl */ `
struct Accent { color: vec4<f32> }
struct VertexOutput {
  @invariant @builtin(position) position: vec4<f32>,
  @location(0) normal: vec3<f32>,
  @location(1) @interpolate(flat) mesh: u32,
  @location(2) @interpolate(flat) material: u32,
}

@group(0) @binding(0) var<storage, read> clusters: array<u32>;
@group(0) @binding(1) var<uniform> accent: Accent;
@group(0) @binding(2) var<storage, read> positions: array<vec4<f32>>;
@group(0) @binding(3) var<storage, read> rotors: array<vec4<f32>>;
@group(0) @binding(4) var<storage, read> scales: array<vec4<f32>>;
@group(0) @binding(5) var<storage, read> meshInfo: array<u32>;
@group(0) @binding(6) var<storage, read> materials: array<vec4<f32>>;
@group(0) @binding(7) var<storage, read> cameraMatrices: array<vec4<f32>>;

fn rotate(rotor: vec4<f32>, value: vec3<f32>) -> vec3<f32> {
  return value + 2.0 * cross(rotor.xyz, cross(rotor.xyz, value) + rotor.w * value);
}

@vertex
fn vertex(@location(0) point: vec3<f32>, @builtin(instance_index) packed: u32) -> VertexOutput {
  let instance = packed & 65535u;
  let visible = meshInfo[instance * 4u + 2u];
  let transformed = rotate(rotors[instance], point * scales[instance].xyz) + positions[instance].xyz;
  var clip = vec4<f32>(transformed, 1.0);
  if (cameraMatrices[4].w != 0.0) {
    let world = vec4(transformed, 1.0);
    clip = vec4(
      dot(cameraMatrices[0], world),
      dot(cameraMatrices[1], world),
      dot(cameraMatrices[2], world),
      dot(cameraMatrices[3], world),
    );
  }
  var output: VertexOutput;
  output.position = select(vec4<f32>(2.0, 2.0, 2.0, 1.0), clip, visible != 0u);
  output.normal = normalize(rotate(rotors[instance], vec3<f32>(0.0, 0.0, 1.0)));
  output.mesh = instance;
  output.material = packed >> 16u;
  return output;
}

@fragment
fn fragment(input: VertexOutput) -> @location(0) vec4<f32> {
  let fallback = meshInfo[input.mesh * 4u + 1u];
  let material = select(fallback, input.material - 1u, input.material != 0u);
  let base = materials[material * 3u];
  let properties = materials[material * 3u + 1u];
  let clusterLight = vec3<f32>(bitcast<f32>(clusters[1]), bitcast<f32>(clusters[2]), bitcast<f32>(clusters[3]));
  let color = base.rgb * clusterLight * accent.color.rgb * mix(1.0, 1.1, properties.x);
  return vec4<f32>(color, base.a);
}`;

function pbrShader(
  mask: number,
  flags: number,
  hasColors: boolean,
  hasUvs2: boolean,
  transmission: boolean,
  textureInfo: ArrayLike<number>,
  extensionInfo: ArrayLike<number>,
) {
  const names = [
    "baseTexture",
    "materialTexture",
    "normalTexture",
    "emissiveTexture",
    "occlusionTexture",
    "transmissionTexture",
    "thicknessTexture",
    "clearcoatTexture",
    "iridescenceTexture",
    "iridescenceThicknessTexture",
    "anisotropyTexture",
    "specularTexture",
    "specularColorTexture",
  ];
  const texture = (slot: number) => mask & (1 << slot);
  const number = (value: number) =>
    Number.isFinite(value)
      ? Number.isInteger(value)
        ? `${value}.0`
        : `${value}`
      : "0.0";
  const textureUv = (slot: number) => {
    const at = slot * 8;
    const source = textureInfo[at + 6] > 0.5 ? "input.uv2" : "input.uv";
    if (
      textureInfo[at] === 0 &&
      textureInfo[at + 1] === 0 &&
      textureInfo[at + 2] === 1 &&
      textureInfo[at + 3] === 1 &&
      textureInfo[at + 4] === 0 &&
      textureInfo[at + 5] === 1
    )
      return source;
    const x = `(${source}.x * ${number(textureInfo[at + 2])})`;
    const y = `(${source}.y * ${number(textureInfo[at + 3])})`;
    return `vec2(${number(textureInfo[at + 5])} * ${x} - ${number(textureInfo[at + 4])} * ${y}, ${number(textureInfo[at + 4])} * ${x} + ${number(textureInfo[at + 5])} * ${y}) + vec2(${number(textureInfo[at])}, ${number(textureInfo[at + 1])})`;
  };
  const sample = (slot: number, fallback = "vec4(1.0)") =>
    texture(slot)
      ? `textureSample(${names[slot]}, materialSampler, ${textureUv(slot)})`
      : fallback;
  const normalTexture = texture(2);
  const alphaMode = flags & 3;
  const doubleSided = flags & 4;
  const unlit = flags & 8;
  const specularGlossiness = flags & 16;
  const clearcoat = extensionInfo[8] > 0;
  const sheen =
    extensionInfo[12] > 0 || extensionInfo[13] > 0 || extensionInfo[14] > 0;
  const iridescence = extensionInfo[16] > 0;
  const anisotropy = extensionInfo[20] > 0;
  const attenuation = transmission && extensionInfo[3] > 0;
  const ior = Math.max(extensionInfo[1], 1);
  const dielectric = ((ior - 1) / (ior + 1)) ** 2;
  return /* wgsl */ `
struct VertexOutput {
  @invariant @builtin(position) position: vec4<f32>,
  @location(0) world: vec3<f32>,
  @location(1) normal: vec3<f32>,
  @location(2) uv: vec2<f32>,
  @location(3) tangent: vec4<f32>,
  @location(4) color: vec4<f32>,
  @location(5) uv2: vec2<f32>,
  @location(6) @interpolate(flat) material: u32,
}

@group(0) @binding(0) var<storage, read> clusters: array<u32>;
@group(0) @binding(1) var<uniform> accent: vec4<f32>;
@group(0) @binding(2) var<storage, read> positions: array<vec4<f32>>;
@group(0) @binding(3) var<storage, read> rotors: array<vec4<f32>>;
@group(0) @binding(4) var<storage, read> scales: array<vec4<f32>>;
@group(0) @binding(5) var<storage, read> meshInfo: array<u32>;
@group(0) @binding(6) var<storage, read> materials: array<vec4<f32>>;
@group(0) @binding(7) var<storage, read> cameraMatrices: array<vec4<f32>>;
@group(0) @binding(8) var<storage, read> pointLights: array<vec4<f32>>;
@group(0) @binding(9) var<storage, read> spotLights: array<vec4<f32>>;
@group(0) @binding(10) var<storage, read> directionalLights: array<vec4<f32>>;
${mask ? "@group(1) @binding(0) var materialSampler: sampler;" : ""}
${names.map((name, slot) => (texture(slot) ? `@group(1) @binding(${slot + 1}) var ${name}: texture_2d<f32>;` : "")).join("\n")}
${transmission ? "@group(2) @binding(0) var sceneColor: texture_2d<f32>;\n@group(2) @binding(1) var sceneSampler: sampler;" : ""}

fn rotate(rotor: vec4<f32>, value: vec3<f32>) -> vec3<f32> {
  return value + 2.0 * cross(rotor.xyz, cross(rotor.xyz, value) + rotor.w * value);
}

@vertex
fn vertex(
  @location(0) point: vec3<f32>,
  @location(1) localNormal: vec3<f32>,
  @location(2) uv: vec2<f32>,
  ${normalTexture ? "@location(3) localTangent: vec4<f32>," : ""}
  ${hasColors ? "@location(4) color: vec4<f32>," : ""}
  ${hasUvs2 ? "@location(5) uv2: vec2<f32>," : ""}
  @builtin(instance_index) packed: u32,
) -> VertexOutput {
  let instance = packed & 65535u;
  let scale = scales[instance].xyz;
  let world = rotate(rotors[instance], point * scale) + positions[instance].xyz;
  var clip = vec4<f32>(world, 1.0);
  if (cameraMatrices[4].w != 0.0) {
    let homogeneous = vec4(world, 1.0);
    clip = vec4(
      dot(cameraMatrices[0], homogeneous),
      dot(cameraMatrices[1], homogeneous),
      dot(cameraMatrices[2], homogeneous),
      dot(cameraMatrices[3], homogeneous),
    );
  }
  var output: VertexOutput;
  output.position = select(vec4<f32>(2.0, 2.0, 2.0, 1.0), clip, meshInfo[instance * 4u + 2u] != 0u);
  output.world = world;
  output.normal = normalize(rotate(rotors[instance], localNormal / scale));
  output.uv = uv;
  output.tangent = ${normalTexture ? "vec4(normalize(rotate(rotors[instance], localTangent.xyz * scale)), localTangent.w)" : "vec4(1.0, 0.0, 0.0, 1.0)"};
  output.color = ${hasColors ? "color" : "vec4(1.0)"};
  output.uv2 = ${hasUvs2 ? "uv2" : "uv"};
  output.material = (packed >> 16u) - 1u;
  return output;
}

fn pow5(value: f32) -> f32 {
  let squared = value * value;
  return squared * squared * value;
}

fn directContribution(normal: vec3<f32>, view: vec3<f32>, lightDirection: vec3<f32>, radiance: vec3<f32>, baseColor: vec3<f32>, metallic: f32, roughness: f32, f0: vec3<f32>) -> vec3<f32> {
  let nDotL = max(dot(normal, lightDirection), 0.0);
  if (nDotL <= 0.0) { return vec3(0.0); }
  let halfVector = normalize(lightDirection + view);
  let nDotV = max(dot(normal, view), 0.0001);
  let nDotH = max(dot(normal, halfVector), 0.0);
  let vDotH = max(dot(view, halfVector), 0.0);
  let fresnel = f0 + (vec3(1.0) - f0) * pow5(1.0 - vDotH);
  let alpha = roughness * roughness;
  let alpha2 = alpha * alpha;
  let denominator = nDotH * nDotH * (alpha2 - 1.0) + 1.0;
  let distribution = alpha2 / max(3.14159265 * denominator * denominator, 0.0001);
  let geometryV = nDotV / mix(nDotV, 1.0, alpha * 0.5);
  let geometryL = nDotL / mix(nDotL, 1.0, alpha * 0.5);
  let specular = distribution * geometryV * geometryL * fresnel / max(4.0 * nDotV * nDotL, 0.0001);
  let diffuse = baseColor * (vec3(1.0) - fresnel) * (1.0 - metallic) / 3.14159265;
  return (diffuse + specular) * radiance * nDotL;
}

fn pointContribution(index: u32, normal: vec3<f32>, view: vec3<f32>, world: vec3<f32>, baseColor: vec3<f32>, metallic: f32, roughness: f32, f0: vec3<f32>) -> vec3<f32> {
  let colorIntensity = pointLights[index * 2u];
  let state = pointLights[index * 2u + 1u];
  if (state.y == 0.0 || state.x <= 0.0) { return vec3(0.0); }
  let offset = positions[index].xyz - world;
  let distance = length(offset);
  let falloff = max(1.0 - distance / state.x, 0.0);
  let radiance = colorIntensity.rgb * colorIntensity.a * falloff * falloff * 0.08;
  let sourceRoughness = clamp(roughness + max(state.z, 0.0) / max(distance, 0.0001), roughness, 1.0);
  return directContribution(normal, view, offset / max(distance, 0.0001), radiance, baseColor, metallic, sourceRoughness, f0);
}

fn spotContribution(index: u32, normal: vec3<f32>, view: vec3<f32>, world: vec3<f32>, baseColor: vec3<f32>, metallic: f32, roughness: f32, f0: vec3<f32>) -> vec3<f32> {
  let colorIntensity = spotLights[index * 2u];
  let state = spotLights[index * 2u + 1u];
  if (state.w == 0.0 || state.x <= 0.0) { return vec3(0.0); }
  let fromLight = world - positions[index].xyz;
  let distance = length(fromLight);
  let direction = normalize(rotate(rotors[index], vec3<f32>(0.0, 0.0, -1.0)));
  let cone = smoothstep(cos(state.z), cos(state.y), dot(direction, fromLight / max(distance, 0.0001)));
  let falloff = max(1.0 - distance / state.x, 0.0);
  let radiance = colorIntensity.rgb * colorIntensity.a * cone * falloff * falloff * 0.08;
  return directContribution(normal, view, -fromLight / max(distance, 0.0001), radiance, baseColor, metallic, roughness, f0);
}

fn directionalContribution(index: u32, normal: vec3<f32>, view: vec3<f32>, baseColor: vec3<f32>, metallic: f32, roughness: f32, f0: vec3<f32>) -> vec3<f32> {
  let colorIntensity = directionalLights[index * 2u];
  let state = directionalLights[index * 2u + 1u];
  if (state.x == 0.0) { return vec3(0.0); }
  let lightDirection = normalize(rotate(rotors[index], vec3<f32>(0.0, 0.0, 1.0)));
  return directContribution(normal, view, lightDirection, colorIntensity.rgb * colorIntensity.a * 0.1, baseColor, metallic, roughness, f0);
}

@fragment
fn fragment(input: VertexOutput, @builtin(front_facing) frontFacing: bool) -> @location(0) vec4<f32> {
  let factor = materials[input.material * 3u];
  let properties = materials[input.material * 3u + 1u];
  let extra = materials[input.material * 3u + 2u];
  let extension0 = vec4(${Array.from(extensionInfo).slice(0, 4).map(number).join(", ")});
  let extension1 = vec4(${Array.from(extensionInfo).slice(4, 8).map(number).join(", ")});
  let extension2 = vec4(${Array.from(extensionInfo).slice(8, 12).map(number).join(", ")});
  let extension3 = vec4(${Array.from(extensionInfo).slice(12, 16).map(number).join(", ")});
  let extension4 = vec4(${Array.from(extensionInfo).slice(16, 20).map(number).join(", ")});
  let extension5 = vec4(${Array.from(extensionInfo).slice(20, 24).map(number).join(", ")});
  let extension6 = vec4(${Array.from(extensionInfo).slice(24, 28).map(number).join(", ")});
  let base = factor * input.color * ${sample(0)};
  ${alphaMode === 1 ? "if (base.a < extra.z) { discard; }" : ""}
  let packedMaterial = ${sample(1)};
  let metallic = clamp(properties.x * ${specularGlossiness ? "0.0" : texture(1) ? "packedMaterial.b" : "1.0"}, 0.0, 1.0);
  ${anisotropy ? `let anisotropyAmount = clamp(extension5.x * ${sample(10)}.b, 0.0, 1.0);` : ""}
  let roughness = clamp(${specularGlossiness ? `1.0 - (1.0 - properties.y) * ${texture(1) ? "packedMaterial.a" : "1.0"}` : `properties.y * ${texture(1) ? "packedMaterial.g" : "1.0"}`}${anisotropy ? " * mix(1.0, 0.7, anisotropyAmount)" : ""}, 0.04, 1.0);
  var normal = normalize(input.normal);
  ${doubleSided ? "normal *= select(-1.0, 1.0, frontFacing);" : ""}
  ${normalTexture ? `let tangent = normalize(input.tangent.xyz - normal * dot(input.tangent.xyz, normal)); let bitangent = cross(normal, tangent) * input.tangent.w; let mapped = ${sample(2)}.xyz * 2.0 - 1.0; normal = normalize(mat3x3<f32>(tangent, bitangent, normal) * vec3(mapped.xy * extra.y, mapped.z));` : ""}
  let view = normalize(cameraMatrices[4].xyz - input.world);
  let nDotV = max(dot(normal, view), 0.0001);
  let specularWeight = extension2.z * ${sample(11)}.a;
  let dielectricColor = vec3(${number(dielectric)} * specularWeight) * extension6.rgb * ${sample(12)}.rgb;
  var f0 = ${specularGlossiness ? "packedMaterial.rgb * extension3.rgb" : "mix(dielectricColor, base.rgb, metallic)"};
  ${
    iridescence
      ? `let iridescenceAmount = clamp(extension4.x * ${sample(8)}.r, 0.0, 1.0);
  let iridescenceThickness = mix(extension4.z, extension4.w, ${sample(9)}.g);
  let iridescencePhase = iridescenceThickness * 0.025 + (1.0 - nDotV) * 6.0;
  let iridescenceTint = 0.12 + 0.88 * (vec3(0.5) + vec3(0.5) * cos(vec3(iridescencePhase, iridescencePhase + 2.0944, iridescencePhase + 4.1888)));
  let iridescenceLevel = max(max(f0.r, f0.g), max(f0.b, 0.04));
  f0 = mix(f0, iridescenceTint * iridescenceLevel, iridescenceAmount * (1.0 - roughness * 0.5));`
      : ""
  }
  let fresnelPower = pow5(1.0 - nDotV);
  let ambient = vec3<f32>(bitcast<f32>(clusters[${compactAmbientStart}]), bitcast<f32>(clusters[${compactAmbientStart + 1}]), bitcast<f32>(clusters[${compactAmbientStart + 2}]));
  var directLight = vec3<f32>(0.0);
  let pointCount = clusters[10];
  if (pointCount <= ${compactLightLimit}u) {
    for (var light = 0u; light < pointCount; light++) {
      directLight += pointContribution(clusters[${compactPointStart}u + light], normal, view, input.world, base.rgb, metallic, roughness, f0);
    }
  } else {
    for (var light = 0u; light < arrayLength(&pointLights) / 2u; light++) {
      directLight += pointContribution(light, normal, view, input.world, base.rgb, metallic, roughness, f0);
    }
  }
  let spotCount = clusters[${compactSpotCount}];
  if (spotCount <= ${compactLightLimit}u) {
    for (var light = 0u; light < spotCount; light++) {
      directLight += spotContribution(clusters[${compactSpotStart}u + light], normal, view, input.world, base.rgb, metallic, roughness, f0);
    }
  } else {
    for (var light = 0u; light < arrayLength(&spotLights) / 2u; light++) {
      directLight += spotContribution(light, normal, view, input.world, base.rgb, metallic, roughness, f0);
    }
  }
  for (var light = 0u; light < arrayLength(&directionalLights) / 2u; light++) {
    directLight += directionalContribution(light, normal, view, base.rgb, metallic, roughness, f0);
  }
  let occlusion = mix(1.0, ${sample(4)}.r, extension2.w);
  let emissive = vec3(properties.z, properties.w, extra.x) * ${sample(3, "vec4(1.0)")}.rgb * extension1.w;
  ${sheen ? "let sheen = extension3.rgb * pow(1.0 - nDotV, mix(2.0, 8.0, extension3.w));" : ""}
  ${
    clearcoat
      ? `let clearcoatFresnel = 0.04 + 0.96 * fresnelPower;
  let clearcoat = extension2.x * ${sample(7)}.r * clearcoatFresnel;`
      : ""
  }
  var color = base.rgb * ambient * occlusion + directLight${sheen ? " + directLight * sheen" : ""}${clearcoat ? " + directLight * clearcoat" : ""} + emissive;
  ${unlit ? "color = base.rgb + emissive;" : ""}
  ${
    transmission
      ? `let transmissionAmount = clamp(extension0.x * ${sample(5)}.r, 0.0, 1.0);
  let thickness = max(extension0.z * ${sample(6)}.g, 0.0);
  let screenUv = input.position.xy / vec2<f32>(textureDimensions(sceneColor));
  let refractionOffset = normal.xy * ${number(1 - 1 / ior)} * mix(0.006, 0.035, clamp(thickness, 0.0, 1.0));
  let refractedUv = clamp(screenUv + refractionOffset, vec2(0.001), vec2(0.999));
  let transmissionBlur = vec2(0.02078461 * roughness);
  var transmitted = textureSampleLevel(sceneColor, sceneSampler, refractedUv, 0.0).rgb * 0.2;
  transmitted += textureSampleLevel(sceneColor, sceneSampler, clamp(refractedUv + transmissionBlur, vec2(0.001), vec2(0.999)), 0.0).rgb * 0.2;
  transmitted += textureSampleLevel(sceneColor, sceneSampler, clamp(refractedUv - transmissionBlur, vec2(0.001), vec2(0.999)), 0.0).rgb * 0.2;
  transmitted += textureSampleLevel(sceneColor, sceneSampler, clamp(refractedUv + vec2(transmissionBlur.x, -transmissionBlur.y), vec2(0.001), vec2(0.999)), 0.0).rgb * 0.2;
  transmitted += textureSampleLevel(sceneColor, sceneSampler, clamp(refractedUv + vec2(-transmissionBlur.x, transmissionBlur.y), vec2(0.001), vec2(0.999)), 0.0).rgb * 0.2;
  ${
    attenuation
      ? `{
    let travel = thickness / max(abs(dot(normal, view)), 0.15);
    transmitted *= pow(clamp(extension1.rgb, vec3(0.001), vec3(1.0)), vec3(travel / extension0.w));
  }`
      : ""
  }
  let normalizedTransmissionTint = base.rgb / max(max(base.r, base.g), max(base.b, 0.001));
  transmitted *= normalizedTransmissionTint;
  color = mix(color, transmitted, transmissionAmount);`
      : ""
  }
  return vec4(color * accent.a, ${alphaMode === 2 ? "base.a" : "1.0"});
}`;
}

const clearShader = /* wgsl */ `
@vertex fn vertex() -> @builtin(position) vec4<f32> {
  return vec4(0.0);
}
@fragment fn fragment() -> @location(0) vec4<f32> {
  return vec4(0.0);
}`;

const fullscreenVertex = /* wgsl */ `
struct VertexOutput {
  @builtin(position) position: vec4<f32>,
  @location(0) uv: vec2<f32>,
}
@vertex fn vertex(@builtin(vertex_index) index: u32) -> VertexOutput {
  let points = array(vec2(-1.0, -3.0), vec2(3.0, 1.0), vec2(-1.0, 1.0));
  var output: VertexOutput;
  output.position = vec4(points[index], 0.0, 1.0);
  output.uv = points[index] * vec2(0.5, -0.5) + vec2(0.5);
  return output;
}`;

const copyShader = `${fullscreenVertex}
@group(0) @binding(0) var source: texture_2d<f32>;
@group(0) @binding(1) var sourceSampler: sampler;
@fragment fn fragment(input: VertexOutput) -> @location(0) vec4<f32> {
  return textureSample(source, sourceSampler, input.uv);
}`;

function effectFragment(kind: string, options: Record<string, unknown>) {
  const amount = Number(options.amount ?? options.exposure ?? 1);
  const safeAmount = Number.isFinite(amount) ? amount : 1;
  const body: Record<string, string> = {
    ssao: `let value = textureSample(source, sourceSampler, input.uv); return vec4(value.rgb * ${Math.max(0, 1 - safeAmount * 0.2)}, value.a);`,
    fxaa: `let size = vec2<f32>(textureDimensions(source)); let pixel = 1.0 / size; let center = textureSample(source, sourceSampler, input.uv); let around = textureSample(source, sourceSampler, input.uv + vec2(pixel.x, 0.0)) + textureSample(source, sourceSampler, input.uv - vec2(pixel.x, 0.0)) + textureSample(source, sourceSampler, input.uv + vec2(0.0, pixel.y)) + textureSample(source, sourceSampler, input.uv - vec2(0.0, pixel.y)); return mix(center, around * 0.25, 0.35);`,
    colorGrading: `let value = textureSample(source, sourceSampler, input.uv); return vec4(pow(max(value.rgb * ${safeAmount}, vec3(0.0)), vec3(1.0 / 2.2)), value.a);`,
    dynamicExposure: `let value = textureSample(source, sourceSampler, input.uv); return vec4(value.rgb * ${safeAmount}, value.a);`,
    silhouette: `let size = vec2<f32>(textureDimensions(source)); let pixel = 1.0 / size; let value = textureSample(source, sourceSampler, input.uv); let edge = length(value.rgb - textureSample(source, sourceSampler, input.uv + pixel).rgb); return vec4(mix(value.rgb, vec3(0.0), smoothstep(0.08, 0.2, edge)), value.a);`,
    edges: `let size = vec2<f32>(textureDimensions(source)); let pixel = 1.0 / size; let value = textureSample(source, sourceSampler, input.uv); let dx = length(value.rgb - textureSample(source, sourceSampler, input.uv + vec2(pixel.x, 0.0)).rgb); let dy = length(value.rgb - textureSample(source, sourceSampler, input.uv + vec2(0.0, pixel.y)).rgb); return vec4(vec3(max(dx, dy) * ${safeAmount}), value.a);`,
  };
  return `${fullscreenVertex}
@group(0) @binding(0) var source: texture_2d<f32>;
@group(0) @binding(1) var sourceSampler: sampler;
@fragment fn fragment(input: VertexOutput) -> @location(0) vec4<f32> {
  ${body[kind] ?? "return textureSample(source, sourceSampler, input.uv);"}
}`;
}

function presentShader(toneMap: string, composite: "scene" | undefined) {
  const tone =
    toneMap === "reinhard"
      ? "color / (color + vec3(1.0))"
      : toneMap === "linear"
        ? "clamp(color, vec3(0.0), vec3(1.0))"
        : "clamp((color * (2.51 * color + vec3(0.03))) / (color * (2.43 * color + vec3(0.59)) + vec3(0.14)), vec3(0.0), vec3(1.0))";
  return `${fullscreenVertex}
@group(0) @binding(0) var source: texture_2d<f32>;
@group(0) @binding(1) var sourceSampler: sampler;
${composite === "scene" ? "@group(0) @binding(2) var scene: texture_2d<f32>;" : ""}
@fragment fn fragment(input: VertexOutput) -> @location(0) vec4<f32> {
  let value = textureSample(source, sourceSampler, input.uv);
  let color = max(${composite === "scene" ? "value.rgb + textureSample(scene, sourceSampler, input.uv).rgb * (1.0 - value.a)" : "value.rgb"}, vec3(0.0));
  return vec4(${tone}, ${composite ? "1.0" : "value.a"});
}`;
}

function encode(value: unknown): string {
  if (value === null || typeof value === "boolean" || typeof value === "number")
    return String(value);
  if (typeof value === "string") return JSON.stringify(value);
  if (Array.isArray(value))
    return `(array${value.map((item) => ` ${encode(item)}`).join("")})`;
  if (value && value.constructor === Object)
    return `(object${Object.keys(value as object)
      .sort()
      .map(
        (key) =>
          ` (field ${JSON.stringify(key)} ${encode((value as Record<string, unknown>)[key])})`,
      )
      .join("")})`;
  throw new TypeError("Render graph values must be plain data");
}

function serialize(graph: object) {
  return `(yawn-graph 1 ${encode(graph)})`;
}

const typedArrayMutators = new Set([
  "copyWithin",
  "fill",
  "reverse",
  "set",
  "sort",
]);

/** The conventional single-loadout scene layer; hot values always remain direct SAB writes. */
export class Scene {
  readonly core: YawnCore;
  readonly ready: Promise<this>;
  readonly hdr: boolean;
  readonly clearColor: readonly [number, number, number, number];
  #graphUpdates = Promise.resolve();
  #renderGraph?: object;
  #computePasses = new Map<string, ComputePass>();
  #meshes = new Map<number, MeshLike>();
  #shaders = new Map<number, ShaderLike>();
  #effects = new Map<string, PostProcessState>();
  #textures = new Map<number, TextureState>();
  #geometry = new Map<number, Map<string, Float32Array | Uint32Array>>();
  #geometryRefs = new Map<number, number>();
  #nextGeometry = 1;
  #nextTexture = 0;
  #graphBatchDepth = 0;
  #graphBatchDirty = false;
  #writeBatchDepth = 0;
  #writeBatchDirty = false;
  #writeBatchBundleDirty = false;
  #signals?: Float32Array;
  #arrays = new WeakMap<object, object>();
  #views = new WeakMap<object, object>();

  constructor(
    canvas: HTMLCanvasElement,
    options: {
      arenaBytes?: number;
      debug?: boolean;
      fps?: number;
      hdr?: boolean;
      clearColor?: ArrayLike<number>;
    } = {},
  ) {
    const clearColor = Array.from(options.clearColor ?? [0, 0, 0, 1]);
    if (
      clearColor.length !== 4 ||
      clearColor.some((value) => !Number.isFinite(value))
    )
      throw new TypeError("Scene clearColor must contain four finite numbers");
    this.hdr = options.hdr ?? true;
    this.clearColor = clearColor as [number, number, number, number];
    this.core = new YawnCore(canvas, {
      arenaBytes: options.arenaBytes,
      debug: options.debug,
    });
    this.ready = this.#initialize(options.fps);
  }

  async #initialize(fps?: number) {
    await this.core.ready;
    this.#signals = this.core.array("signals").row(0);
    for (const [name, stride, format] of rows)
      await this.core.createRows({ name, rows: 1, stride, format });
    await this.core.createRows({
      name: "clusters",
      rows: 256,
      stride: 16,
      format: "u32",
    });
    this.core.array("nodeRotors").write(0, [0, 0, 0, 1]);
    this.core.array("nodeScales").write(0, [1, 1, 1, 0]);
    this.core.array("sceneAccent").write(0, [1, 1, 1, 1]);
    const material = await this.core.allocateObject("materials");
    this.core
      .array("materials")
      .write(material, [1, 1, 1, 1, 0, 0.7, 0, 0, 0, 1, 0.5, 0]);
    this.core
      .array("materialExtensions")
      .write(
        material,
        [
          0, 1.5, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1.3, 100, 400, 0,
          0, 0, 0, 1, 1, 1, 0,
        ],
      );
    const textureInfo = this.core.array("materialTextureInfo").row(material);
    for (let slot = 0; slot < 13; slot++) {
      textureInfo[slot * 8 + 2] = 1;
      textureInfo[slot * 8 + 3] = 1;
      textureInfo[slot * 8 + 5] = 1;
    }
    if (fps !== undefined) await this.core.setFps(fps);
    await this.#compileRenderGraph();
    return this;
  }

  array(name: string) {
    const array = this.core.array(name);
    const current = this.#arrays.get(array);
    if (current) return current as typeof array;
    let proxy: typeof array;
    proxy = new Proxy(array, {
      get: (target, property) => {
        if (property === "row")
          return (index: number) => this.#mutable(target.row(index));
        if (property === "view") return this.#mutable(target.view);
        if (property === "write")
          return (index: number, values: ArrayLike<number>) => {
            target.write(index, values);
            this.markDirty();
            return proxy;
          };
        const value = Reflect.get(target, property, target);
        return typeof value === "function" ? value.bind(target) : value;
      },
    });
    this.#arrays.set(array, proxy);
    return proxy;
  }

  #mutable<T extends Float32Array | Uint32Array | Int32Array>(view: T): T {
    const current = this.#views.get(view);
    if (current) return current as T;
    let proxy: T;
    proxy = new Proxy(view, {
      get: (target, property) => {
        if (property === "subarray")
          return (begin?: number, end?: number) =>
            this.#mutable(target.subarray(begin, end) as T);
        const value = Reflect.get(target, property, target);
        if (typeof value !== "function") return value;
        if (property === "constructor") return value;
        if (!typedArrayMutators.has(String(property)))
          return value.bind(target);
        return (...arguments_: unknown[]) => {
          const result = Reflect.apply(value, target, arguments_);
          this.markDirty();
          return result === target ? proxy : result;
        };
      },
      set: (target, property, value) => {
        const written = Reflect.set(target, property, value, target);
        if (written) this.markDirty();
        return written;
      },
    });
    this.#views.set(view, proxy);
    return proxy;
  }

  markDirty(bundle = false) {
    if (this.#writeBatchDepth) {
      this.#writeBatchDirty = true;
      this.#writeBatchBundleDirty ||= bundle;
      return;
    }
    if (!this.#signals) return;
    this.#signals[5] = 1;
    if (bundle) this.#signals[6] = 1;
  }

  /** Defers the dirty signal until a synchronous group of SAB writes is complete. */
  batchWrites<T>(operation: () => T) {
    this.#writeBatchDepth++;
    try {
      return operation();
    } finally {
      this.#writeBatchDepth--;
      if (!this.#writeBatchDepth && this.#writeBatchDirty) {
        const bundle = this.#writeBatchBundleDirty;
        this.#writeBatchDirty = false;
        this.#writeBatchBundleDirty = false;
        this.markDirty(bundle);
      }
    }
  }

  async ensureRows(
    name: string,
    rowCount: number,
    stride: number,
    format: RowFormat,
  ) {
    await this.core.ready;
    try {
      const current = this.core.array(name);
      if (current.stride !== stride || current.format !== format)
        throw new Error(`ROW_LAYOUT: ${name}`);
      if (current.rows >= rowCount) return current;
    } catch (error) {
      if (
        !(error instanceof Error) ||
        !error.message.startsWith("UNKNOWN_ARRAY")
      )
        throw error;
    }
    return this.core.createRows({
      name,
      rows: Math.max(1, rowCount),
      stride,
      format,
    });
  }

  async reserve(additional: { nodes?: number; materials?: number }) {
    await this.ready;
    const nodes = additional.nodes ?? 0;
    const materials = additional.materials ?? 0;
    if (
      ![nodes, materials].every(
        (value) => Number.isInteger(value) && value >= 0,
      )
    )
      throw new RangeError("additional");
    const nodeCapacity = this.array("nodes").rows + nodes;
    const materialCapacity = this.array("materials").rows + materials;
    const growth = [
      ...rows.slice(0, 6).map(([name, stride, format]) => ({
        name,
        rows: nodeCapacity,
        stride,
        format,
      })),
      {
        name: "materials",
        rows: materialCapacity,
        stride: 48,
        format: "f32" as const,
      },
      {
        name: "materialTextures",
        rows: materialCapacity,
        stride: 64,
        format: "u32" as const,
      },
      {
        name: "materialExtensions",
        rows: materialCapacity,
        stride: 112,
        format: "f32" as const,
      },
      {
        name: "materialTextureInfo",
        rows: materialCapacity,
        stride: 416,
        format: "f32" as const,
      },
    ].filter((request) => this.array(request.name).rows < request.rows);
    if (growth.length) await this.core.createRowsBatch(growth);
  }

  async batchGraphUpdates<T>(operation: () => T | Promise<T>) {
    await this.ready;
    this.#graphBatchDepth++;
    try {
      return await operation();
    } finally {
      this.#graphBatchDepth--;
      if (!this.#graphBatchDepth && this.#graphBatchDirty) {
        this.#graphBatchDirty = false;
        await this.updateRenderGraph();
      }
    }
  }

  async allocateNode() {
    await this.ready;
    const id = await this.core.allocateObject("nodes");
    const growth = rows.slice(1, 6).flatMap(([name, stride, format]) => {
      const current = this.array(name);
      return current.rows < id + 1
        ? [{ name, rows: id + 1, stride, format }]
        : [];
    });
    if (growth.length) await this.core.createRowsBatch(growth);
    this.array("nodeRotors").write(id, [0, 0, 0, 1]);
    this.array("nodeScales").write(id, [1, 1, 1, 0]);
    this.array("nodes").write(id, [1, 0, 0, 0]);
    return id;
  }

  async releaseNode(id: number) {
    for (const name of [
      "nodes",
      "nodePositions",
      "nodeRotors",
      "nodeScales",
      "meshInfo",
      "bounds",
    ])
      this.array(name).row(id).fill(0);
    await this.core.deleteObject("nodes", id);
  }

  async allocateMaterial() {
    await this.ready;
    const id = await this.core.allocateObject("materials");
    await Promise.all([
      this.ensureRows("materialTextures", id + 1, 64, "u32"),
      this.ensureRows("materialExtensions", id + 1, 112, "f32"),
      this.ensureRows("materialTextureInfo", id + 1, 416, "f32"),
    ]);
    return id;
  }

  addComputePass(pass: ComputePass) {
    if (this.#computePasses.has(pass.id))
      throw new Error(`COMPUTE_PASS_EXISTS: ${pass.id}`);
    this.#computePasses.set(pass.id, pass);
    pass.attach(this);
    return this.updateRenderGraph();
  }

  removeComputePass(pass: ComputePass | string) {
    const id = typeof pass === "string" ? pass : pass.id;
    const existing = this.#computePasses.get(id);
    existing?.attach(undefined);
    this.#computePasses.delete(id);
    return this.updateRenderGraph();
  }

  registerMesh(mesh: MeshLike) {
    this.#meshes.set(mesh.id, mesh);
    this.#geometryRefs.set(
      mesh.geometryId,
      (this.#geometryRefs.get(mesh.geometryId) ?? 0) + 1,
    );
    return this.updateRenderGraph();
  }

  async unregisterMesh(mesh: MeshLike) {
    this.#meshes.delete(mesh.id);
    const references = Math.max(
      0,
      (this.#geometryRefs.get(mesh.geometryId) ?? 1) - 1,
    );
    this.#geometryRefs.set(mesh.geometryId, references);
    await this.updateRenderGraph();
    if (!references) {
      for (const kind of this.#geometry.get(mesh.geometryId)?.keys() ?? [])
        await this.core.deleteRows(`geometry.${mesh.geometryId}.${kind}`);
      this.#geometry.delete(mesh.geometryId);
      this.#geometryRefs.delete(mesh.geometryId);
    }
  }

  createGeometry() {
    const id = this.#nextGeometry++;
    this.#geometry.set(id, new Map());
    this.#geometryRefs.set(id, 0);
    return id;
  }

  geometryReferences(id: number) {
    return this.#geometryRefs.get(id) ?? 0;
  }

  referenceGeometry(id: number) {
    this.#geometryRefs.set(id, (this.#geometryRefs.get(id) ?? 0) + 1);
  }

  releaseGeometry(id: number) {
    this.#geometryRefs.set(
      id,
      Math.max(0, (this.#geometryRefs.get(id) ?? 1) - 1),
    );
  }

  async cloneGeometry(id: number) {
    const clone = this.createGeometry();
    for (const [kind, data] of this.#geometry.get(id) ?? [])
      await this.setVertexData(
        clone,
        kind,
        data.slice() as Float32Array | Uint32Array,
        false,
      );
    return clone;
  }

  async setVertexData(
    geometry: number,
    kind: string,
    source: ArrayLike<number>,
    updateGraph = true,
  ) {
    const components: Record<string, number> = {
      positions: 3,
      normals: 3,
      tangents: 4,
      uvs: 2,
      uvs2: 2,
      colors: 4,
      indices: 1,
    };
    const width = components[kind];
    if (!width || source.length % width)
      throw new RangeError(`VERTEX_DATA: ${kind}`);
    const integer = kind === "indices";
    const data = integer ? Uint32Array.from(source) : Float32Array.from(source);
    const name = `geometry.${geometry}.${kind}`;
    const rowCount = integer ? Math.ceil(data.length / 4) : data.length / width;
    const target = await this.ensureRows(
      name,
      rowCount,
      16,
      integer ? "u32" : "f32",
    );
    if (updateGraph) this.markDirty(true);
    const view = target.view;
    view.fill(0);
    if (integer || width === 4) view.set(data);
    else
      for (let row = 0; row < rowCount; row++)
        for (let lane = 0; lane < width; lane++)
          view[row * 4 + lane] = data[row * width + lane];
    (
      this.#geometry.get(geometry) ??
      this.#geometry.set(geometry, new Map()).get(geometry)!
    ).set(kind, data);
    await this.core.syncRows(name, 0, rowCount);
    if (updateGraph) await this.updateRenderGraph();
  }

  geometryData(id: number, kind: string) {
    return this.#geometry.get(id)?.get(kind);
  }

  registerShader(material: ShaderLike) {
    this.#shaders.set(material.id, material);
    return this.updateRenderGraph();
  }

  unregisterShader(id: number) {
    this.#shaders.delete(id);
    return this.updateRenderGraph();
  }

  registerTexture(texture: Omit<TextureState, "number">) {
    const number = this.#nextTexture++;
    this.#textures.set(number, { ...texture, number });
    return { number, ready: this.updateRenderGraph() };
  }

  unregisterTexture(number: number) {
    this.#textures.delete(number);
    return this.updateRenderGraph();
  }

  setPostProcess(effect: PostProcessState, enabled: boolean) {
    if (enabled) this.#effects.set(effect.id, effect);
    else this.#effects.delete(effect.id);
    return this.updateRenderGraph();
  }

  updateRenderGraph() {
    this.markDirty(true);
    if (this.#graphBatchDepth) {
      this.#graphBatchDirty = true;
      return Promise.resolve();
    }
    const update = this.#graphUpdates.then(async () => {
      await this.ready;
      await this.#compileRenderGraph();
    });
    this.#graphUpdates = update.catch(() => undefined);
    return update;
  }

  /** Compiles a serialized render graph and returns its reusable loadout ID. */
  async compileRenderGraph(serialized: string) {
    if (typeof serialized !== "string")
      throw new TypeError("Serialized render graph must be a string");
    await this.ready;
    return this.core.compileGraph(serialized);
  }

  /** Switches this Scene to a previously compiled render-graph loadout. */
  async setLoadout(id: string) {
    if (typeof id !== "string")
      throw new TypeError("Loadout ID must be a string");
    await this.ready;
    await this.core.switchLoadout(id);
  }

  /** Returns an isolated snapshot of the Scene-authored render graph. */
  async getRenderGraph() {
    await this.ready;
    if (!this.#renderGraph) throw new Error("Render graph is not ready");
    return structuredClone(this.#renderGraph);
  }

  async #compileRenderGraph() {
    const buffers = new Map<string, GraphBuffer>();
    const textures = new Map<string, GraphTexture>();
    const samplers = new Map<string, GraphSampler>();
    const computePipelines: object[] = [];
    const renderPipelines: object[] = [];
    const passes: object[] = [];
    const addBuffer = (value: GraphBuffer) => buffers.set(value.id, value);
    const addTexture = (value: GraphTexture) => textures.set(value.id, value);
    const addSampler = (value: GraphSampler) => samplers.set(value.id, value);

    for (const [id, array] of [
      ["point-lights", "pointLights"],
      ["rect-lights", "rectAreaLights"],
      ["spot-lights", "spotLights"],
      ["directional-lights", "directionalLights"],
      ["ambient-lights", "ambientLights"],
      ["clusters", "clusters"],
    ])
      addBuffer({ id, array, usage: ["storage"] });
    addBuffer({ id: "accent", array: "sceneAccent", usage: ["uniform"] });
    computePipelines.push({
      id: "cluster-lights",
      code: clusterShader,
      entry: "main",
    });
    passes.push({
      id: "cluster-lights",
      type: "compute",
      pipeline: "cluster-lights",
      dispatch: [4, 1, 1],
      bindings: [
        "point-lights",
        "rect-lights",
        "spot-lights",
        "directional-lights",
        "ambient-lights",
        "clusters",
      ].map((resource, binding) => ({ group: 0, binding, resource })),
    });

    for (const pass of this.#computePasses.values()) {
      pass.buffers.forEach(addBuffer);
      pass.textures.forEach(addTexture);
      pass.samplers.forEach(addSampler);
      computePipelines.push({
        id: pass.id,
        code: pass.code,
        entry: pass.entry,
      });
      passes.push({
        id: pass.id,
        type: "compute",
        pipeline: pass.id,
        after: pass.after.length ? pass.after : ["cluster-lights"],
        bindings: pass.bindings,
        dispatch: pass.dispatch,
      });
    }

    const computeIds = [...this.#computePasses.keys()];
    const renderCategory = (material: number) => {
      const flags = Math.round(this.array("materials").row(material)[11]);
      const transmitted = this.array("materialExtensions").row(material)[0] > 0;
      return transmitted ? 1 : (flags & 3) === 2 ? 2 : 0;
    };
    const renderedMeshes = [...this.#meshes.values()]
      .filter((mesh) => mesh.vertexCount > 0)
      .sort(
        (left, right) =>
          renderCategory(Number(this.array("meshInfo").row(left.id)[1])) -
          renderCategory(Number(this.array("meshInfo").row(right.id)[1])),
      );
    const hasTransmission = renderedMeshes.some((mesh) => {
      const materials = new Set([
        Number(this.array("meshInfo").row(mesh.id)[1]),
        ...mesh.faceMaterials.values(),
      ]);
      return [...materials].some(
        (material) => this.array("materialExtensions").row(material)[0] > 0,
      );
    });
    const compositeSceneColor =
      hasTransmission && this.#effects.size === 0 && this.#shaders.size === 0;
    const hdrFormat = this.hdr ? "rgba16float" : "rgba8unorm";
    addTexture({
      id: "hdr",
      format: hdrFormat,
      size: ["canvas", "canvas", 1],
      usage: ["render", "sampled"],
      transient: false,
    });
    addTexture({
      id: "depth",
      format: "depth24plus",
      size: ["canvas", "canvas", 1],
      usage: ["render"],
      transient: true,
    });
    if (compositeSceneColor)
      addTexture({
        id: "scene-color",
        format: hdrFormat,
        size: ["canvas", "canvas", 1],
        usage: ["render", "sampled"],
        transient: true,
      });
    addSampler({ id: "linear", magFilter: "linear", minFilter: "linear" });
    addSampler({
      id: "material-linear",
      magFilter: "linear",
      minFilter: "linear",
      mipmapFilter: "linear",
      addressModeU: "repeat",
      addressModeV: "repeat",
      anisotropyClamp: 16,
    });
    for (const {
      number: _,
      source: __,
      sampler,
      ...texture
    } of this.#textures.values()) {
      addTexture(texture);
      if (sampler) addSampler({ id: `${texture.id}-sampler`, ...sampler });
    }

    let previous = computeIds.length ? computeIds : ["cluster-lights"];
    if (!renderedMeshes.length) {
      renderPipelines.push({
        id: "empty-forward",
        code: clearShader,
        vertex: { entry: "vertex" },
        fragment: { entry: "fragment", targets: [{ format: hdrFormat }] },
      });
      passes.push({
        id: "forward-empty",
        type: "render",
        pipeline: "empty-forward",
        after: previous,
        color: [{ resource: "hdr", clear: [...this.clearColor] }],
        draw: { vertices: 0 },
      });
      previous = ["forward-empty"];
    } else {
      for (const [id, array] of [
        ["node-positions", "nodePositions"],
        ["node-rotors", "nodeRotors"],
        ["node-scales", "nodeScales"],
        ["mesh-info", "meshInfo"],
        ["materials", "materials"],
        ["camera-matrices", "cameraMatrices"],
      ])
        addBuffer({ id, array, usage: ["storage"] });
      if (compositeSceneColor) {
        renderPipelines.push({
          id: "scene-color-clear",
          code: clearShader,
          vertex: { entry: "vertex" },
          fragment: { entry: "fragment", targets: [{ format: hdrFormat }] },
        });
        passes.push({
          id: "scene-color-clear",
          type: "render",
          pipeline: "scene-color-clear",
          after: previous,
          color: [
            {
              resource: "scene-color",
              clear: [...this.clearColor],
            },
          ],
          draw: { vertices: 0 },
        });
        previous = ["scene-color-clear"];
      }
      const forwardPipelines = new Map<string, string>();
      let firstColor = true;
      let firstDepth = true;
      let sceneColorReady = false;
      let forwardTarget = compositeSceneColor ? "scene-color" : "hdr";
      for (const mesh of renderedMeshes) {
        const vertex = `geometry-${mesh.geometryId}-positions`;
        addBuffer({
          id: vertex,
          array: `geometry.${mesh.geometryId}.positions`,
          usage: ["vertex"],
          sync: "manual",
        });
        const normal = `geometry-${mesh.geometryId}-normals`;
        const uv = `geometry-${mesh.geometryId}-uvs`;
        const uv2 = `geometry-${mesh.geometryId}-uvs2`;
        const tangent = `geometry-${mesh.geometryId}-tangents`;
        const color = `geometry-${mesh.geometryId}-colors`;
        const hasNormals = !!this.geometryData(mesh.geometryId, "normals");
        const hasUvs = !!this.geometryData(mesh.geometryId, "uvs");
        const hasUvs2 = !!this.geometryData(mesh.geometryId, "uvs2");
        const hasTangents = !!this.geometryData(mesh.geometryId, "tangents");
        const hasColors = !!this.geometryData(mesh.geometryId, "colors");
        for (const [present, id, kind] of [
          [hasNormals, normal, "normals"],
          [hasUvs, uv, "uvs"],
          [hasUvs2, uv2, "uvs2"],
          [hasTangents, tangent, "tangents"],
          [hasColors, color, "colors"],
        ] as const)
          if (present)
            addBuffer({
              id,
              array: `geometry.${mesh.geometryId}.${kind}`,
              usage: ["vertex"],
              sync: "manual",
            });
        const indexed = mesh.indexCount > 0;
        if (indexed)
          addBuffer({
            id: `geometry-${mesh.geometryId}-indices`,
            array: `geometry.${mesh.geometryId}.indices`,
            usage: ["index"],
            sync: "manual",
          });
        const draws =
          indexed && mesh.faceMaterials.size
            ? Array.from(
                { length: Math.floor(mesh.indexCount / 3) },
                (_, face) => ({
                  face,
                  count: 3,
                  firstIndex: face * 3,
                  material: mesh.faceMaterials.get(face),
                }),
              )
            : [
                {
                  face: -1,
                  count: indexed ? mesh.indexCount : mesh.vertexCount,
                  firstIndex: 0,
                  material: undefined,
                },
              ];
        for (const draw of draws) {
          const id = `forward-${mesh.id}-${draw.face}`;
          const material =
            draw.material ?? Number(this.array("meshInfo").row(mesh.id)[1]);
          if (mesh.id > 65535 || material > 65534)
            throw new RangeError(
              `Scene handle limit: mesh ${mesh.id}, material ${material}`,
            );
          const pointers = this.array("materialTextures").row(material);
          const texture = (lane: number) =>
            pointers[lane]
              ? this.#textures.get(Number(pointers[lane]) - 1)
              : undefined;
          const materialTextures = Array.from({ length: 13 }, (_, lane) =>
            lane === 2 && !hasTangents ? undefined : texture(lane),
          );
          const normalTexture = materialTextures[2];
          const detailed = hasNormals && hasUvs;
          const flags = Math.round(this.array("materials").row(material)[11]);
          const extensionInfo = this.array("materialExtensions").row(material);
          const transmitted = extensionInfo[0] > 0;
          let mask = detailed
            ? materialTextures.reduce(
                (value, current, lane) =>
                  value | (current === undefined ? 0 : 1 << lane),
                0,
              )
            : 0;
          if (!transmitted) mask &= ~((1 << 5) | (1 << 6));
          else if (extensionInfo[2] <= 0) mask &= ~(1 << 6);
          if (extensionInfo[8] <= 0) mask &= ~(1 << 7);
          if (extensionInfo[16] <= 0) mask &= ~((1 << 8) | (1 << 9));
          if (extensionInfo[20] <= 0) mask &= ~(1 << 10);
          if (extensionInfo[11] <= 0) mask &= ~(1 << 4);
          if ((flags & 8) !== 0 && !transmitted) mask &= (1 << 0) | (1 << 3);
          const tangentSlot = normalTexture ? 3 : -1;
          const colorSlot = hasColors ? 3 + Number(!!normalTexture) : -1;
          const uv2Slot = hasUvs2
            ? 3 + Number(!!normalTexture) + Number(hasColors)
            : -1;
          const textureInfo = this.array("materialTextureInfo").row(material);
          let clearCompositeLayer = false;
          if (transmitted && !sceneColorReady) {
            sceneColorReady = true;
            if (compositeSceneColor) {
              forwardTarget = "hdr";
              clearCompositeLayer = true;
            } else {
              addTexture({
                id: "scene-color",
                format: hdrFormat,
                size: ["canvas", "canvas", 1],
                usage: ["render", "sampled"],
                transient: true,
              });
              renderPipelines.push({
                id: "copy-scene-color",
                code: copyShader,
                vertex: { entry: "vertex" },
                fragment: {
                  entry: "fragment",
                  targets: [{ format: hdrFormat }],
                },
              });
              passes.push({
                id: "copy-scene-color",
                type: "render",
                pipeline: "copy-scene-color",
                after: previous,
                bindings: [
                  { group: 0, binding: 0, resource: "hdr" },
                  { group: 0, binding: 1, resource: "linear" },
                ],
                color: [
                  { resource: "scene-color", clear: [...this.clearColor] },
                ],
                draw: { vertices: 3 },
              });
              previous = ["copy-scene-color"];
            }
          }
          const code = detailed
            ? pbrShader(
                mask,
                flags,
                hasColors,
                hasUvs2,
                transmitted,
                textureInfo,
                extensionInfo,
              )
            : basicForwardShader;
          const pipelineKey = `${flags}-${transmitted ? 1 : 0}\n${code}`;
          let pipeline = forwardPipelines.get(pipelineKey);
          if (!pipeline) {
            pipeline = `forward-${detailed ? "pbr" : "basic"}-${forwardPipelines.size}`;
            forwardPipelines.set(pipelineKey, pipeline);
            renderPipelines.push({
              id: pipeline,
              code,
              vertex: {
                entry: "vertex",
                buffers: detailed
                  ? [
                      {
                        arrayStride: 16,
                        attributes: [
                          {
                            format: "float32x3",
                            offset: 0,
                            shaderLocation: 0,
                          },
                        ],
                      },
                      {
                        arrayStride: 16,
                        attributes: [
                          {
                            format: "float32x3",
                            offset: 0,
                            shaderLocation: 1,
                          },
                        ],
                      },
                      {
                        arrayStride: 16,
                        attributes: [
                          {
                            format: "float32x2",
                            offset: 0,
                            shaderLocation: 2,
                          },
                        ],
                      },
                      ...(normalTexture
                        ? [
                            {
                              arrayStride: 16,
                              attributes: [
                                {
                                  format: "float32x4",
                                  offset: 0,
                                  shaderLocation: 3,
                                },
                              ],
                            },
                          ]
                        : []),
                      ...(hasColors
                        ? [
                            {
                              arrayStride: 16,
                              attributes: [
                                {
                                  format: "float32x4",
                                  offset: 0,
                                  shaderLocation: 4,
                                },
                              ],
                            },
                          ]
                        : []),
                      ...(hasUvs2
                        ? [
                            {
                              arrayStride: 16,
                              attributes: [
                                {
                                  format: "float32x2",
                                  offset: 0,
                                  shaderLocation: 5,
                                },
                              ],
                            },
                          ]
                        : []),
                    ]
                  : [
                      {
                        arrayStride: 16,
                        attributes: [
                          {
                            format: "float32x3",
                            offset: 0,
                            shaderLocation: 0,
                          },
                        ],
                      },
                    ],
              },
              fragment: {
                entry: "fragment",
                targets: [
                  {
                    format: hdrFormat,
                    ...((flags & 3) === 2
                      ? {
                          blend: {
                            color: {
                              srcFactor: "src-alpha",
                              dstFactor: "one-minus-src-alpha",
                              operation: "add",
                            },
                            alpha: {
                              srcFactor: "one",
                              dstFactor: "one-minus-src-alpha",
                              operation: "add",
                            },
                          },
                        }
                      : {}),
                  },
                ],
              },
              depthStencil: {
                format: "depth24plus",
                depth_write_enabled: (flags & 3) !== 2 && !transmitted,
                depth_compare: "less",
              },
              primitive: {
                topology: "triangle-list",
                frontFace: "ccw",
                cullMode: (flags & 4) !== 0 ? null : "back",
                conservative: false,
              },
            });
          }
          const instance = (mesh.id + (material + 1) * 65536) >>> 0;
          const samplerTexture = materialTextures.find(
            (value, lane) => value !== undefined && (mask & (1 << lane)) !== 0,
          );
          passes.push({
            id,
            type: "render",
            pipeline,
            after: previous,
            bindings: [
              ...[
                "clusters",
                "accent",
                "node-positions",
                "node-rotors",
                "node-scales",
                "mesh-info",
                "materials",
                "camera-matrices",
              ].map((resource, binding) => ({
                group: 0,
                binding,
                resource,
              })),
              ...(detailed
                ? [
                    { group: 0, binding: 8, resource: "point-lights" },
                    { group: 0, binding: 9, resource: "spot-lights" },
                    {
                      group: 0,
                      binding: 10,
                      resource: "directional-lights",
                    },
                  ]
                : []),
              ...(detailed && mask
                ? [
                    {
                      group: 1,
                      binding: 0,
                      resource: samplerTexture?.sampler
                        ? `${samplerTexture.id}-sampler`
                        : "material-linear",
                    },
                    ...materialTextures.flatMap((value, lane) =>
                      value && (mask & (1 << lane)) !== 0
                        ? [
                            {
                              group: 1,
                              binding: lane + 1,
                              resource: value.id,
                            },
                          ]
                        : [],
                    ),
                  ]
                : []),
              ...(detailed && transmitted
                ? [
                    { group: 2, binding: 0, resource: "scene-color" },
                    { group: 2, binding: 1, resource: "linear" },
                  ]
                : []),
            ],
            color: [
              {
                resource: forwardTarget,
                ...(clearCompositeLayer
                  ? { clear: [0, 0, 0, 0] }
                  : firstColor
                    ? { clear: [...this.clearColor] }
                    : { load: "load" }),
              },
            ],
            depth: {
              resource: "depth",
              ...(firstDepth ? { clear: 1 } : { load: "load" }),
            },
            vertexBuffers: [
              { slot: 0, resource: vertex },
              ...(detailed
                ? [
                    { slot: 1, resource: normal },
                    { slot: 2, resource: uv },
                    ...(normalTexture
                      ? [{ slot: tangentSlot, resource: tangent }]
                      : []),
                    ...(hasColors
                      ? [{ slot: colorSlot, resource: color }]
                      : []),
                    ...(hasUvs2 ? [{ slot: uv2Slot, resource: uv2 }] : []),
                  ]
                : []),
            ],
            ...(indexed
              ? {
                  indexBuffer: {
                    resource: `geometry-${mesh.geometryId}-indices`,
                    format: "uint32",
                  },
                }
              : {}),
            draw: indexed
              ? {
                  indices: draw.count,
                  firstIndex: draw.firstIndex,
                  instances: 1,
                  firstInstance: instance,
                }
              : { vertices: draw.count, instances: 1, firstInstance: instance },
          });
          firstColor = false;
          firstDepth = false;
          previous = [id];
        }
      }
    }

    for (const material of this.#shaders.values()) {
      const id = `shader-${material.id}`;
      renderPipelines.push({
        id,
        code: material.code,
        vertex: { entry: material.vertexEntry },
        fragment: {
          entry: material.fragmentEntry,
          targets: [{ format: hdrFormat }],
        },
      });
      passes.push({
        id,
        type: "render",
        pipeline: id,
        after: previous,
        color: [{ resource: "hdr", load: "load" }],
        draw: { vertices: 3 },
      });
      previous = [id];
    }

    let input = "hdr";
    for (const [index, effect] of [...this.#effects.values()].entries()) {
      const output = `post-${index}`;
      const pipeline = `post-${effect.id}`;
      addTexture({
        id: output,
        format: hdrFormat,
        size: ["canvas", "canvas", 1],
        usage: ["render", "sampled"],
        transient: true,
      });
      renderPipelines.push({
        id: pipeline,
        code: effectFragment(effect.kind, effect.options),
        vertex: { entry: "vertex" },
        fragment: { entry: "fragment", targets: [{ format: hdrFormat }] },
      });
      passes.push({
        id: pipeline,
        type: "render",
        pipeline,
        after: previous,
        bindings: [
          { group: 0, binding: 0, resource: input },
          { group: 0, binding: 1, resource: "linear" },
        ],
        color: [{ resource: output, clear: [0, 0, 0, 1] }],
        draw: { vertices: 3 },
      });
      input = output;
      previous = [pipeline];
    }

    const toneMap = String(
      [...this.#effects.values()].find(
        (effect) => effect.kind === "colorGrading",
      )?.options.toneMap ?? "aces",
    );
    renderPipelines.push({
      id: "present",
      code: presentShader(toneMap, compositeSceneColor ? "scene" : undefined),
      vertex: { entry: "vertex" },
      fragment: { entry: "fragment", targets: [{ format: "canvas" }] },
    });
    passes.push({
      id: "present",
      type: "render",
      pipeline: "present",
      after: previous,
      bindings: [
        { group: 0, binding: 0, resource: input },
        { group: 0, binding: 1, resource: "linear" },
        ...(compositeSceneColor
          ? [{ group: 0, binding: 2, resource: "scene-color" }]
          : []),
      ],
      color: [{ resource: "canvas", clear: [...this.clearColor] }],
      draw: { vertices: 3 },
    });

    const graph = {
      id: "scene",
      resources: {
        buffers: [...buffers.values()],
        textures: [...textures.values()],
        samplers: [...samplers.values()].map(({ id, ...descriptor }) => ({
          id,
          descriptor,
        })),
      },
      pipelines: { render: renderPipelines, compute: computePipelines },
      passes,
    };
    this.#renderGraph = structuredClone(graph);
    const id = await this.core.compileGraph(serialize(graph));
    await this.core.switchLoadout(id);
  }

  dispose() {
    this.core.dispose();
  }
}