Ampandheaust
31d3ae21ff
Also lets the screenshot suite point at another reference directory and settle longer. Amp-Thread-ID: https://ampcode.com/threads/T-01a0b2dd-db32-712d-99ce-12ce4a86d979 Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
1754 lines
64 KiB
TypeScript
1754 lines
64 KiB
TypeScript
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();
|
|
}
|
|
}
|