@plasius/gpu-renderer 0.1.14 → 0.1.15

package/dist/index.js

@@ -5,6 +5,7 @@ var DEFAULT_MAX_DEPTH = 6;
 var DEFAULT_TILE_SIZE = 128;
 var DEFAULT_SAMPLES_PER_PIXEL = 1;
 var DEFAULT_SCENE_OBJECT_CAPACITY = 128;
+var DEFAULT_ENVIRONMENT_PORTAL_CAPACITY = 32;
 var WORKGROUP_SIZE = 64;
 var RAY_RECORD_BYTES = 80;
 var HIT_RECORD_BYTES = 208;
@@ -15,9 +16,11 @@ var TRIANGLE_RECORD_BYTES = 208;
 var BVH_NODE_RECORD_BYTES = 48;
 var BVH_LEAF_REF_RECORD_BYTES = 16;
 var EMISSIVE_TRIANGLE_INDEX_BYTES = 4;
+var ENVIRONMENT_PORTAL_RECORD_BYTES = 96;
 var ACCUMULATION_RECORD_BYTES = 16;
-var CONFIG_BUFFER_BYTES = 256;
+var CONFIG_BUFFER_BYTES = 272;
 var COUNTER_BUFFER_BYTES = 16;
+var TRACE_STORAGE_BUFFER_BINDINGS = 9;
 var MATERIAL_DIFFUSE = 0;
 var MATERIAL_METAL = 1;
 var MATERIAL_DIELECTRIC = 2;
@@ -44,6 +47,7 @@ var DEFAULT_ENVIRONMENT_LIGHTING = Object.freeze({
 });
 var wavefrontPathTracingComputeLimits = Object.freeze({
   workgroupSize: WORKGROUP_SIZE,
+  traceStorageBufferBindings: TRACE_STORAGE_BUFFER_BINDINGS,
   rayRecordBytes: RAY_RECORD_BYTES,
   hitRecordBytes: HIT_RECORD_BYTES,
   sceneObjectRecordBytes: SCENE_OBJECT_RECORD_BYTES,
@@ -54,6 +58,7 @@ var wavefrontPathTracingComputeLimits = Object.freeze({
   bvhLeafReferenceRecordBytes: BVH_LEAF_REF_RECORD_BYTES,
   emissiveTriangleIndexBytes: EMISSIVE_TRIANGLE_INDEX_BYTES,
   emissiveTriangleMetadataRecordBytes: BVH_NODE_RECORD_BYTES,
+  environmentPortalRecordBytes: ENVIRONMENT_PORTAL_RECORD_BYTES,
   accumulationRecordBytes: ACCUMULATION_RECORD_BYTES
 });
 var wavefrontSceneObjectKinds = Object.freeze({
@@ -145,6 +150,9 @@ function subtract(a, b) {
 function scale(a, scalar) {
   return [a[0] * scalar, a[1] * scalar, a[2] * scalar];
 }
+function dot(a, b) {
+  return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+}
 function cross(a, b) {
   return [
     a[1] * b[2] - a[2] * b[1],
@@ -757,6 +765,127 @@ function resolveEnvironmentLighting(input, environmentColor, ambientColor) {
     exposure: Math.max(1e-4, readFiniteNumber("environmentLighting.exposure", source.exposure, DEFAULT_ENVIRONMENT_LIGHTING.exposure))
   });
 }
+function resolveEnvironmentPortalMode(value, hasPortals) {
+  if (value === void 0 || value === null) {
+    return hasPortals ? 2 : 0;
+  }
+  if (Number.isInteger(value) && value >= 0 && value <= 2) {
+    return value;
+  }
+  if (value === "disabled") {
+    return 0;
+  }
+  if (value === "guide") {
+    return 1;
+  }
+  if (value === "guide-and-gate" || value === "gate") {
+    return 2;
+  }
+  throw new Error(
+    "environmentPortalMode must be disabled, guide, guide-and-gate, or an integer between 0 and 2."
+  );
+}
+function orthogonalPortalTangent(normal) {
+  if (Math.abs(normal[1]) < 0.92) {
+    return normalize(cross([0, 1, 0], normal), [1, 0, 0]);
+  }
+  return normalize(cross([1, 0, 0], normal), [0, 0, 1]);
+}
+function resolvePortalTangent(value, normal) {
+  const fallback = orthogonalPortalTangent(normal);
+  const tangent = asUnitVec3(value, fallback);
+  const projected = subtract(tangent, scale(normal, dot(tangent, normal)));
+  return normalize(projected, fallback);
+}
+function readPositiveFiniteNumber(name, value, fallback) {
+  const numeric = readFiniteNumber(name, value, fallback);
+  if (numeric <= 0) {
+    throw new Error(`${name} must be a positive finite number.`);
+  }
+  return numeric;
+}
+function readPortalExtent(name, value, halfName, halfValue) {
+  if (value !== void 0 && value !== null) {
+    return readPositiveFiniteNumber(name, value, 1);
+  }
+  return readPositiveFiniteNumber(halfName, halfValue, 0.5) * 2;
+}
+function normalizeEnvironmentPortal(portal, index) {
+  if (!portal || typeof portal !== "object") {
+    throw new Error(`environmentPortals[${index}] must be an object.`);
+  }
+  const shape = portal.shape ?? portal.kind ?? "rectangle";
+  if (shape !== "rectangle") {
+    throw new Error(`environmentPortals[${index}].shape must be "rectangle".`);
+  }
+  const position = asVec3(portal.position ?? portal.center, [0, 0, 0]);
+  const normal = asUnitVec3(portal.normal, [0, 0, 1]);
+  const tangent = resolvePortalTangent(portal.tangent, normal);
+  const bitangent = normalize(cross(normal, tangent), [0, 1, 0]);
+  const width = readPortalExtent(
+    `environmentPortals[${index}].width`,
+    portal.width,
+    `environmentPortals[${index}].halfWidth`,
+    portal.halfWidth
+  );
+  const height = readPortalExtent(
+    `environmentPortals[${index}].height`,
+    portal.height,
+    `environmentPortals[${index}].halfHeight`,
+    portal.halfHeight
+  );
+  const radianceScale = Math.max(
+    0,
+    readFiniteNumber(
+      `environmentPortals[${index}].radianceScale`,
+      portal.radianceScale ?? portal.intensity,
+      1
+    )
+  );
+  return Object.freeze({
+    kind: 1,
+    flags: portal.twoSided === false ? 0 : 1,
+    position: Object.freeze([position[0], position[1], position[2], width * height]),
+    normal: Object.freeze([normal[0], normal[1], normal[2], radianceScale]),
+    tangent: Object.freeze([tangent[0], tangent[1], tangent[2], width * 0.5]),
+    bitangent: Object.freeze([bitangent[0], bitangent[1], bitangent[2], height * 0.5]),
+    color: Object.freeze(asColor(portal.color, [1, 1, 1, 1]))
+  });
+}
+function normalizeEnvironmentPortals(value) {
+  if (value === void 0 || value === null) {
+    return Object.freeze([]);
+  }
+  if (!Array.isArray(value)) {
+    throw new Error("environmentPortals must be an array when provided.");
+  }
+  return Object.freeze(value.map(normalizeEnvironmentPortal));
+}
+function packEnvironmentPortals(portals, capacity) {
+  const bytes = new ArrayBuffer(capacity * ENVIRONMENT_PORTAL_RECORD_BYTES);
+  const data = new DataView(bytes);
+  const floatView = new Float32Array(bytes);
+  portals.forEach((portal, index) => {
+    const byteOffset = index * ENVIRONMENT_PORTAL_RECORD_BYTES;
+    const floatOffset = byteOffset / Float32Array.BYTES_PER_ELEMENT;
+    data.setUint32(byteOffset, portal.kind, true);
+    data.setUint32(byteOffset + 4, portal.flags, true);
+    data.setUint32(byteOffset + 8, 0, true);
+    data.setUint32(byteOffset + 12, 0, true);
+    writeVec4(floatView, floatOffset + 4, portal.position);
+    writeVec4(floatView, floatOffset + 8, portal.normal);
+    writeVec4(floatView, floatOffset + 12, portal.tangent);
+    writeVec4(floatView, floatOffset + 16, portal.bitangent);
+    writeVec4(floatView, floatOffset + 20, portal.color);
+  });
+  return Object.freeze({
+    buffer: bytes,
+    portals,
+    count: portals.length,
+    capacity,
+    recordBytes: ENVIRONMENT_PORTAL_RECORD_BYTES
+  });
+}
 function getCanvasDimension(canvas, key, fallback) {
   const value = Number(canvas?.[key]);
   if (Number.isFinite(value) && value > 0) {
@@ -812,6 +941,11 @@ function estimateWavefrontPathTracingMemory(options = {}) {
     options.emissiveTriangleCapacity,
     0
   );
+  const environmentPortalCapacity = readNonNegativeInteger(
+    "environmentPortalCapacity",
+    options.environmentPortalCapacity,
+    0
+  );
   const queueBytes = tilePixelCapacity * RAY_RECORD_BYTES;
   const hitBytes = tilePixelCapacity * HIT_RECORD_BYTES;
   const accumulationBytes = tilePixelCapacity * ACCUMULATION_RECORD_BYTES;
@@ -820,6 +954,7 @@ function estimateWavefrontPathTracingMemory(options = {}) {
   const bvhNodeBytes = bvhNodeCapacity * BVH_NODE_RECORD_BYTES;
   const bvhLeafReferenceBytes = bvhLeafSortCapacity * BVH_LEAF_REF_RECORD_BYTES;
   const emissiveTriangleMetadataBytes = emissiveTriangleCapacity * BVH_NODE_RECORD_BYTES;
+  const environmentPortalBytes = environmentPortalCapacity * ENVIRONMENT_PORTAL_RECORD_BYTES;
   return Object.freeze({
     queueBytes,
     queuePairBytes: queueBytes * 2,
@@ -830,9 +965,10 @@ function estimateWavefrontPathTracingMemory(options = {}) {
     bvhNodeBytes,
     bvhLeafReferenceBytes,
     emissiveTriangleMetadataBytes,
+    environmentPortalBytes,
     configBytes: CONFIG_BUFFER_BYTES,
     counterBytes: COUNTER_BUFFER_BYTES,
-    totalHotBufferBytes: queueBytes * 2 + hitBytes + accumulationBytes + sceneObjectBytes + triangleBytes + bvhNodeBytes + bvhLeafReferenceBytes + emissiveTriangleMetadataBytes + CONFIG_BUFFER_BYTES + COUNTER_BUFFER_BYTES
+    totalHotBufferBytes: queueBytes * 2 + hitBytes + accumulationBytes + sceneObjectBytes + triangleBytes + bvhNodeBytes + bvhLeafReferenceBytes + emissiveTriangleMetadataBytes + environmentPortalBytes + CONFIG_BUFFER_BYTES + COUNTER_BUFFER_BYTES
   });
 }
 function createWavefrontPathTracingComputeConfig(options = {}) {
@@ -893,6 +1029,21 @@ function createWavefrontPathTracingComputeConfig(options = {}) {
     environmentColor,
     ambientColor
   );
+  const environmentPortals = normalizeEnvironmentPortals(
+    options.environmentPortals ?? options.environmentLightPortals ?? options.environmentLighting?.environmentPortals
+  );
+  const environmentPortalCapacity = Math.max(
+    environmentPortals.length,
+    readNonNegativeInteger(
+      "environmentPortalCapacity",
+      options.environmentPortalCapacity,
+      DEFAULT_ENVIRONMENT_PORTAL_CAPACITY
+    )
+  );
+  const environmentPortalMode = resolveEnvironmentPortalMode(
+    options.environmentPortalMode ?? options.portalMode ?? options.environmentLighting?.environmentPortalMode,
+    environmentPortals.length > 0
+  );
   return Object.freeze({
     width,
     height,
@@ -921,6 +1072,10 @@ function createWavefrontPathTracingComputeConfig(options = {}) {
     environmentColor: environmentLighting.environmentColor,
     ambientColor: environmentLighting.ambientColor,
     environmentLighting,
+    environmentPortals,
+    environmentPortalCount: environmentPortals.length,
+    environmentPortalCapacity,
+    environmentPortalMode,
     displayQuality: options.displayQuality === true,
     requiresMeshBvhForDisplayQuality: true,
     denoise: options.denoise !== false,
@@ -931,7 +1086,8 @@ function createWavefrontPathTracingComputeConfig(options = {}) {
       triangleCapacity,
       bvhNodeCapacity,
       bvhLeafSortCapacity,
-      emissiveTriangleCapacity: emissiveTriangleIndices.capacity
+      emissiveTriangleCapacity: emissiveTriangleIndices.capacity,
+      environmentPortalCapacity
     })
   });
 }
@@ -1115,6 +1271,10 @@ function createConfigPayload(config, tile, frameIndex, buildRange = {}) {
   data.setUint32(244, buildRange.count ?? 0, true);
   data.setUint32(248, buildRange.sortItemCount ?? 0, true);
   data.setUint32(252, config.emissiveTriangleCount ?? 0, true);
+  data.setUint32(256, config.environmentPortalCount ?? 0, true);
+  data.setUint32(260, config.environmentPortalMode ?? 0, true);
+  data.setUint32(264, 0, true);
+  data.setUint32(268, 0, true);
   return bytes;
 }
 function createTiles(width, height, tileSize) {
@@ -1361,6 +1521,10 @@ struct FrameConfig {
   bvhBuildNodeCount: u32,
   bvhSortItemCount: u32,
   emissiveTriangleCount: u32,
+  environmentPortalCount: u32,
+  environmentPortalMode: u32,
+  _portalPad0: u32,
+  _portalPad1: u32,
 };
 
 struct Counters {
@@ -1384,6 +1548,18 @@ struct Candidate {
   mediumRefId: u32,
 };
 
+struct EnvironmentPortal {
+  kind: u32,
+  flags: u32,
+  _pad0: u32,
+  _pad1: u32,
+  position: vec4<f32>,
+  normal: vec4<f32>,
+  tangent: vec4<f32>,
+  bitangent: vec4<f32>,
+  color: vec4<f32>,
+};
+
 @group(0) @binding(0) var<storage, read_write> activeQueue: array<RayRecord>;
 @group(0) @binding(1) var<storage, read_write> nextQueue: array<RayRecord>;
 @group(0) @binding(2) var<storage, read_write> hits: array<HitRecord>;
@@ -1403,6 +1579,7 @@ struct Candidate {
 @group(0) @binding(16) var radianceImage: texture_storage_2d<rgba16float, write>;
 @group(0) @binding(17) var finalDenoiseInputRadiance: texture_2d<f32>;
 @group(0) @binding(18) var denoisedOutputImage: texture_storage_2d<rgba8unorm, write>;
+@group(0) @binding(19) var<storage, read> environmentPortals: array<EnvironmentPortal>;
 
 fn hash_u32(value: u32) -> u32 {
   var x = value;
@@ -1443,7 +1620,48 @@ fn saturate(value: f32) -> f32 {
   return clamp(value, 0.0, 1.0);
 }
 
-fn environment_radiance(direction: vec3<f32>) -> vec3<f32> {
+fn max_component(value: vec3<f32>) -> f32 {
+  return max(max(value.x, value.y), value.z);
+}
+
+fn environment_portal_radiance_scale(origin: vec3<f32>, direction: vec3<f32>) -> vec3<f32> {
+  if (config.environmentPortalCount == 0u || config.environmentPortalMode == 0u) {
+    return vec3<f32>(1.0);
+  }
+  var scale = vec3<f32>(0.0);
+  for (var portalIndex = 0u; portalIndex < config.environmentPortalCount; portalIndex = portalIndex + 1u) {
+    let portal = environmentPortals[portalIndex];
+    if (portal.kind == 1u) {
+      let portalNormal = safe_normalize(portal.normal.xyz, vec3<f32>(0.0, 0.0, 1.0));
+      let denominator = dot(direction, portalNormal);
+      let twoSided = (portal.flags & 1u) != 0u;
+      var facing = abs(denominator) > 0.0001;
+      if (!twoSided && denominator <= 0.0001) {
+        facing = false;
+      }
+      if (facing) {
+        let distance = dot(portal.position.xyz - origin, portalNormal) / denominator;
+        if (distance > 0.001) {
+          let hitPosition = origin + direction * distance;
+          let local = hitPosition - portal.position.xyz;
+          let tangent = safe_normalize(portal.tangent.xyz, vec3<f32>(1.0, 0.0, 0.0));
+          let bitangent = safe_normalize(portal.bitangent.xyz, vec3<f32>(0.0, 1.0, 0.0));
+          let u = dot(local, tangent);
+          let v = dot(local, bitangent);
+          if (abs(u) <= portal.tangent.w && abs(v) <= portal.bitangent.w) {
+            let areaWeight = clamp(sqrt(max(portal.position.w, 0.0001)), 0.25, 4.0);
+            let angleWeight = max(abs(denominator), 0.08);
+            let portalScale = portal.color.rgb * portal.normal.w * portal.color.a * areaWeight * angleWeight;
+            scale = max(scale, portalScale);
+          }
+        }
+      }
+    }
+  }
+  return scale;
+}
+
+fn environment_radiance(origin: vec3<f32>, direction: vec3<f32>) -> vec3<f32> {
   let rayDirection = safe_normalize(direction, vec3<f32>(0.0, 1.0, 0.0));
   let upFactor = saturate(rayDirection.y * 0.5 + 0.5);
   let sunDirection = safe_normalize(
@@ -1454,10 +1672,26 @@ fn environment_radiance(direction: vec3<f32>) -> vec3<f32> {
   let gradient =
     config.environmentHorizonColor.xyz * (1.0 - upFactor) +
     config.environmentZenithColor.xyz * upFactor;
+  let portalScale = environment_portal_radiance_scale(origin, rayDirection);
+  let portalHit = max_component(portalScale) > 0.0001;
   return (
     gradient +
     config.environmentSunColor.xyz * sunGlow
-  ) * max(config.environmentSunDirectionIntensity.w, 0.0001);
+  ) *
+    max(config.environmentSunDirectionIntensity.w, 0.0001) *
+    select(vec3<f32>(1.0), portalScale, portalHit);
+}
+
+fn gated_environment_radiance(origin: vec3<f32>, direction: vec3<f32>) -> vec3<f32> {
+  let portalScale = environment_portal_radiance_scale(origin, safe_normalize(direction, vec3<f32>(0.0, 1.0, 0.0)));
+  if (
+    config.environmentPortalCount > 0u &&
+    config.environmentPortalMode == 2u &&
+    max_component(portalScale) <= 0.0001
+  ) {
+    return config.ambientColor.xyz * 0.65;
+  }
+  return environment_radiance(origin, direction);
 }
 
 fn default_mesh_range() -> MeshRange {
@@ -1728,7 +1962,7 @@ fn make_ray(pixelIndex: u32) -> RayRecord {
 }
 
 fn make_miss(ray: RayRecord) -> HitRecord {
-  let radiance = environment_radiance(ray.direction.xyz);
+  let radiance = gated_environment_radiance(ray.origin.xyz, ray.direction.xyz);
   return HitRecord(
     ray.rayId,
     ray.sourcePixelId,
@@ -2214,6 +2448,21 @@ fn sample_emissive_triangle_direction(hit: HitRecord, seed: u32, fallback: vec3<
   return safe_normalize(lightPoint - hit.position.xyz, fallback);
 }
 
+fn sample_environment_portal_direction(hit: HitRecord, seed: u32, fallback: vec3<f32>) -> vec3<f32> {
+  if (config.environmentPortalCount == 0u || config.environmentPortalMode == 0u) {
+    return fallback;
+  }
+  let portalSlot = min(
+    u32(random01(seed + 211u) * f32(config.environmentPortalCount)),
+    config.environmentPortalCount - 1u
+  );
+  let portal = environmentPortals[portalSlot];
+  let u = (random01(seed + 223u) * 2.0 - 1.0) * portal.tangent.w;
+  let v = (random01(seed + 227u) * 2.0 - 1.0) * portal.bitangent.w;
+  let portalTarget = portal.position.xyz + portal.tangent.xyz * u + portal.bitangent.xyz * v;
+  return safe_normalize(portalTarget - hit.position.xyz, fallback);
+}
+
 fn scatter_direction(ray: RayRecord, hit: HitRecord, seed: u32) -> ScatterResult {
   let roughness = clamp(hit.material.x, 0.0, 1.0);
   if (hit.materialKind == 1u) {
@@ -2253,8 +2502,17 @@ fn scatter_direction(ray: RayRecord, hit: HitRecord, seed: u32) -> ScatterResult
   let canSampleLight = dot(hit.shadingNormal.xyz, guidedLight) > -0.04;
   let guideProbability = select(0.38, 0.72, ray.bounce == 0u);
   let useGuidedLight = canSampleLight && random01(seed + 37u) < guideProbability;
+  let guidedPortal = sample_environment_portal_direction(hit, seed, randomDiffuse);
+  let canSamplePortal = dot(hit.shadingNormal.xyz, guidedPortal) > -0.04;
+  let useGuidedPortal =
+    !useGuidedLight &&
+    canSamplePortal &&
+    config.environmentPortalCount > 0u &&
+    config.environmentPortalMode > 0u &&
+    random01(seed + 89u) < 0.58;
+  let guidedDirection = select(randomDiffuse, guidedPortal, useGuidedPortal);
   return ScatterResult(
-    vec4<f32>(select(randomDiffuse, guidedLight, useGuidedLight), 0.0),
+    vec4<f32>(select(guidedDirection, guidedLight, useGuidedLight), 0.0),
     select(0u, RAY_FLAG_GUIDED_EMISSIVE, useGuidedLight),
     0u,
     0u,
@@ -2461,6 +2719,29 @@ fn fragmentMain(in: VertexOut) -> @location(0) vec4<f32> {
   return textureSample(renderTexture, renderSampler, in.uv);
 }
 `;
+function createWavefrontDeviceDescriptor(adapter, options = {}) {
+  const requiredLimits = { ...options.requiredLimits ?? {} };
+  const exposedStorageBufferLimit = Number(adapter?.limits?.maxStorageBuffersPerShaderStage);
+  if (Number.isFinite(exposedStorageBufferLimit)) {
+    if (exposedStorageBufferLimit < TRACE_STORAGE_BUFFER_BINDINGS) {
+      throw new Error(
+        `Wavefront mesh tracing requires maxStorageBuffersPerShaderStage>=${TRACE_STORAGE_BUFFER_BINDINGS}, but this adapter exposes ${exposedStorageBufferLimit}.`
+      );
+    }
+    requiredLimits.maxStorageBuffersPerShaderStage = Math.max(
+      Number(requiredLimits.maxStorageBuffersPerShaderStage ?? 0),
+      TRACE_STORAGE_BUFFER_BINDINGS
+    );
+  }
+  const descriptor = { ...options.deviceDescriptor ?? {} };
+  if (Object.keys(requiredLimits).length > 0) {
+    descriptor.requiredLimits = {
+      ...descriptor.requiredLimits ?? {},
+      ...requiredLimits
+    };
+  }
+  return Object.keys(descriptor).length > 0 ? descriptor : void 0;
+}
 async function createWavefrontPathTracingComputeRenderer(options = {}) {
   assertAnalyticDisplayQualityPolicy(options);
   const constants = getGpuUsageConstants();
@@ -2479,7 +2760,7 @@ async function createWavefrontPathTracingComputeRenderer(options = {}) {
   if (!adapter) {
     throw new Error("Unable to acquire a WebGPU adapter for wavefront path tracing.");
   }
-  const device = await adapter.requestDevice();
+  const device = await adapter.requestDevice(createWavefrontDeviceDescriptor(adapter, options));
   const context = canvas.getContext("webgpu");
   if (!context || typeof context.configure !== "function") {
     throw new Error("Canvas WebGPU context does not support configure().");
@@ -2552,23 +2833,34 @@ async function createWavefrontPathTracingComputeRenderer(options = {}) {
     Math.max(1, config.gpuMeshSource.meshes.count) * MESH_RANGE_RECORD_BYTES,
     "plasius.wavefront.meshRanges"
   );
+  const environmentPortalBuffer = createBuffer(
+    device,
+    constants.buffer.STORAGE | constants.buffer.COPY_DST,
+    Math.max(1, config.environmentPortalCapacity) * ENVIRONMENT_PORTAL_RECORD_BYTES,
+    "plasius.wavefront.environmentPortals"
+  );
   const bvhLeafRefBuffer = createBuffer(
     device,
     constants.buffer.STORAGE | constants.buffer.COPY_DST,
     Math.max(1, config.bvhLeafSortCapacity) * BVH_LEAF_REF_RECORD_BYTES,
     "plasius.wavefront.bvhLeafRefs"
   );
-  const configBuffer = createBuffer(
-    device,
-    constants.buffer.UNIFORM | constants.buffer.COPY_DST,
-    CONFIG_BUFFER_BYTES,
-    "plasius.wavefront.frameConfig"
-  );
+  const tiles = createTiles(config.width, config.height, config.tileSize);
   const uniformOffsetAlignment = Number(device?.limits?.minUniformBufferOffsetAlignment);
   const configBufferStride = alignTo(
     CONFIG_BUFFER_BYTES,
     Number.isFinite(uniformOffsetAlignment) && uniformOffsetAlignment > 0 ? uniformOffsetAlignment : CONFIG_BUFFER_BYTES
   );
+  const frameConfigSlotCount = Math.max(
+    1,
+    tiles.length * config.samplesPerPixel + tiles.length + (config.denoise ? 1 : 0)
+  );
+  const configBuffer = createBuffer(
+    device,
+    constants.buffer.UNIFORM | constants.buffer.COPY_DST,
+    frameConfigSlotCount * configBufferStride,
+    "plasius.wavefront.frameConfig"
+  );
   const bvhBuildConfigSlots = 1 + config.bvhSortStages.length + config.bvhBuildLevels.length;
   const bvhBuildConfigBuffer = createBuffer(
     device,
@@ -2602,6 +2894,11 @@ async function createWavefrontPathTracingComputeRenderer(options = {}) {
   device.queue.writeBuffer(meshVertexBuffer, 0, config.gpuMeshSource.vertices.buffer);
   device.queue.writeBuffer(meshIndexBuffer, 0, config.gpuMeshSource.indices.buffer);
   device.queue.writeBuffer(meshRangeBuffer, 0, config.gpuMeshSource.meshes.buffer);
+  const packedEnvironmentPortals = packEnvironmentPortals(
+    config.environmentPortals,
+    Math.max(1, config.environmentPortalCapacity)
+  );
+  device.queue.writeBuffer(environmentPortalBuffer, 0, packedEnvironmentPortals.buffer);
   const radianceTexture = device.createTexture({
     label: "plasius.wavefront.radiance",
     size: { width: config.width, height: config.height },
@@ -2653,7 +2950,8 @@ async function createWavefrontPathTracingComputeRenderer(options = {}) {
         binding: 16,
         visibility: constants.shader.COMPUTE,
         storageTexture: { access: "write-only", format: "rgba16float" }
-      }
+      },
+      { binding: 19, visibility: constants.shader.COMPUTE, buffer: { type: "read-only-storage" } }
     ]
   });
   const accelerationBindGroupLayout = device.createBindGroupLayout({
@@ -2826,7 +3124,8 @@ async function createWavefrontPathTracingComputeRenderer(options = {}) {
         { binding: 7, resource: outputView },
         { binding: 8, resource: { buffer: triangleBuffer } },
         { binding: 9, resource: { buffer: bvhNodeBuffer } },
-        { binding: 16, resource: radianceView }
+        { binding: 16, resource: radianceView },
+        { binding: 19, resource: { buffer: environmentPortalBuffer } }
       ]
     });
   }
@@ -2913,10 +3212,27 @@ async function createWavefrontPathTracingComputeRenderer(options = {}) {
     ]
   });
   let frame = 0;
-  const tiles = createTiles(config.width, config.height, config.tileSize);
+  let accelerationBuilt = !config.gpuAccelerationBuildRequired;
+  let accelerationBuildCount = 0;
+  function createFrameConfigWriter(frameIndex) {
+    let slot = 0;
+    return (tile, buildRange = {}) => {
+      if (slot >= frameConfigSlotCount) {
+        throw new Error("Wavefront frame config slot capacity exceeded.");
+      }
+      const offset = slot * configBufferStride;
+      slot += 1;
+      device.queue.writeBuffer(
+        configBuffer,
+        offset,
+        createConfigPayload(config, tile, frameIndex, buildRange)
+      );
+      return offset;
+    };
+  }
   function dispatchGpuAccelerationBuild(frameIndex) {
-    if (!config.gpuAccelerationBuildRequired) {
-      return;
+    if (!config.gpuAccelerationBuildRequired || accelerationBuilt) {
+      return false;
     }
     const buildTile = tiles[0] ?? { x: 0, y: 0, width: 1, height: 1 };
     const encoder = device.createCommandEncoder({
@@ -2974,27 +3290,21 @@ async function createWavefrontPathTracingComputeRenderer(options = {}) {
     }
     passEncoder.end();
     device.queue.submit([encoder.finish()]);
+    accelerationBuilt = true;
+    accelerationBuildCount += 1;
+    return true;
   }
-  function dispatchTileSample(tile, frameIndex, sampleIndex) {
-    const sampleWeight = 1 / config.samplesPerPixel;
-    const configPayload = createConfigPayload(config, tile, frameIndex, {
-      sampleIndex,
-      sampleWeight
-    });
-    device.queue.writeBuffer(configBuffer, 0, configPayload);
-    const encoder = device.createCommandEncoder({
-      label: `plasius.wavefront.frame.${frameIndex}.tile.${tile.x}.${tile.y}.sample.${sampleIndex}`
-    });
+  function encodeTileSample(encoder, tile, configOffset) {
     const passEncoder = encoder.beginComputePass({
       label: "plasius.wavefront.computePass"
     });
     const tileWorkgroups = Math.ceil(tile.width * tile.height / WORKGROUP_SIZE);
     const capacityWorkgroups = Math.ceil(config.tilePixelCapacity / WORKGROUP_SIZE);
-    passEncoder.setBindGroup(0, bindGroups[0], [0]);
+    passEncoder.setBindGroup(0, bindGroups[0], [configOffset]);
     passEncoder.setPipeline(pipelines.generatePrimaryRays);
     passEncoder.dispatchWorkgroups(tileWorkgroups);
     for (let bounceIndex = 0; bounceIndex < config.maxDepth; bounceIndex += 1) {
-      passEncoder.setBindGroup(0, bindGroups[bounceIndex % 2], [0]);
+      passEncoder.setBindGroup(0, bindGroups[bounceIndex % 2], [configOffset]);
       passEncoder.setPipeline(pipelines.intersectActiveQueue);
       passEncoder.dispatchWorkgroups(capacityWorkgroups);
       passEncoder.setPipeline(pipelines.resolveSurfaceRecords);
@@ -3003,71 +3313,38 @@ async function createWavefrontPathTracingComputeRenderer(options = {}) {
       passEncoder.dispatchWorkgroups(1);
     }
     passEncoder.end();
-    device.queue.submit([encoder.finish()]);
   }
-  function dispatchTileOutput(tile, frameIndex) {
-    const configPayload = createConfigPayload(config, tile, frameIndex, {
-      sampleIndex: 0,
-      sampleWeight: 1 / config.samplesPerPixel
-    });
-    device.queue.writeBuffer(configBuffer, 0, configPayload);
-    const encoder = device.createCommandEncoder({
-      label: `plasius.wavefront.frame.${frameIndex}.tile.${tile.x}.${tile.y}.output`
-    });
+  function encodeTileOutput(encoder, tile, configOffset) {
     const passEncoder = encoder.beginComputePass({
       label: "plasius.wavefront.outputPass"
     });
     const tileWorkgroups = Math.ceil(tile.width * tile.height / WORKGROUP_SIZE);
-    passEncoder.setBindGroup(0, bindGroups[0], [0]);
+    passEncoder.setBindGroup(0, bindGroups[0], [configOffset]);
     passEncoder.setPipeline(pipelines.accumulateTerminalRadiance);
     passEncoder.dispatchWorkgroups(tileWorkgroups);
     passEncoder.end();
-    device.queue.submit([encoder.finish()]);
-  }
-  function dispatchTile(tile, frameIndex) {
-    for (let sampleIndex = 0; sampleIndex < config.samplesPerPixel; sampleIndex += 1) {
-      dispatchTileSample(tile, frameIndex, sampleIndex);
-    }
-    dispatchTileOutput(tile, frameIndex);
   }
-  function dispatchDenoise(frameIndex) {
+  function encodeDenoise(encoder, configOffset) {
     if (!config.denoise) {
       return;
     }
-    device.queue.writeBuffer(
-      configBuffer,
-      0,
-      createConfigPayload(
-        config,
-        { x: 0, y: 0, width: config.width, height: config.height },
-        frameIndex,
-        { sampleIndex: 0, sampleWeight: 1 / config.samplesPerPixel }
-      )
-    );
-    const encoder = device.createCommandEncoder({
-      label: `plasius.wavefront.frame.${frameIndex}.denoise`
-    });
     const radiancePass = encoder.beginComputePass({
       label: "plasius.wavefront.denoiseRadiancePass"
     });
-    radiancePass.setBindGroup(0, denoiseRadianceBindGroup, [0]);
+    radiancePass.setBindGroup(0, denoiseRadianceBindGroup, [configOffset]);
     radiancePass.setPipeline(pipelines.denoiseLinearRadiance);
     radiancePass.dispatchWorkgroups(Math.ceil(config.width / 8), Math.ceil(config.height / 8));
     radiancePass.end();
     const resolvePass = encoder.beginComputePass({
       label: "plasius.wavefront.denoiseResolvePass"
     });
-    resolvePass.setBindGroup(0, denoiseResolveBindGroup, [0]);
+    resolvePass.setBindGroup(0, denoiseResolveBindGroup, [configOffset]);
     resolvePass.setPipeline(pipelines.resolveDenoisedOutputImage);
     resolvePass.dispatchWorkgroups(Math.ceil(config.width / 8), Math.ceil(config.height / 8));
     resolvePass.end();
-    device.queue.submit([encoder.finish()]);
   }
-  function present() {
+  function encodePresent(encoder) {
     const texture = context.getCurrentTexture();
-    const encoder = device.createCommandEncoder({
-      label: `plasius.wavefront.present.${frame}`
-    });
     const passEncoder = encoder.beginRenderPass({
       label: "plasius.wavefront.presentPass",
       colorAttachments: [
@@ -3083,16 +3360,42 @@ async function createWavefrontPathTracingComputeRenderer(options = {}) {
     passEncoder.setBindGroup(0, presentBindGroup);
     passEncoder.draw(3);
     passEncoder.end();
+  }
+  function dispatchFrame(frameIndex) {
+    const writeFrameConfig = createFrameConfigWriter(frameIndex);
+    const encoder = device.createCommandEncoder({
+      label: `plasius.wavefront.frame.${frameIndex}.batched`
+    });
+    for (const tile of tiles) {
+      for (let sampleIndex = 0; sampleIndex < config.samplesPerPixel; sampleIndex += 1) {
+        const configOffset = writeFrameConfig(tile, {
+          sampleIndex,
+          sampleWeight: 1 / config.samplesPerPixel
+        });
+        encodeTileSample(encoder, tile, configOffset);
+      }
+      const outputConfigOffset = writeFrameConfig(tile, {
+        sampleIndex: 0,
+        sampleWeight: 1 / config.samplesPerPixel
+      });
+      encodeTileOutput(encoder, tile, outputConfigOffset);
+    }
+    if (config.denoise) {
+      const denoiseConfigOffset = writeFrameConfig(
+        { x: 0, y: 0, width: config.width, height: config.height },
+        { sampleIndex: 0, sampleWeight: 1 / config.samplesPerPixel }
+      );
+      encodeDenoise(encoder, denoiseConfigOffset);
+    }
+    encodePresent(encoder);
     device.queue.submit([encoder.finish()]);
+    return 1;
   }
   function renderOnce() {
     frame += 1;
-    dispatchGpuAccelerationBuild(frame + config.frameIndex);
-    for (const tile of tiles) {
-      dispatchTile(tile, frame + config.frameIndex);
-    }
-    dispatchDenoise(frame + config.frameIndex);
-    present();
+    const frameIndex = frame + config.frameIndex;
+    const accelerationBuildSubmitted = dispatchGpuAccelerationBuild(frameIndex);
+    const frameSubmissionCount = dispatchFrame(frameIndex);
     return Object.freeze({
       frame,
       width: config.width,
@@ -3106,10 +3409,17 @@ async function createWavefrontPathTracingComputeRenderer(options = {}) {
       sceneObjectCount: config.sceneObjectCount,
       triangleCount: config.triangleCount,
       emissiveTriangleCount: config.emissiveTriangleCount,
+      environmentPortalCount: config.environmentPortalCount,
+      environmentPortalMode: config.environmentPortalMode,
       bvhNodeCount: config.bvhNodeCount,
       displayQuality: config.displayQuality,
       accelerationBuildMode: config.accelerationBuildMode,
       gpuAccelerationBuildRequired: config.gpuAccelerationBuildRequired,
+      accelerationBuildSubmitted,
+      accelerationBuilt,
+      accelerationBuildCount,
+      commandSubmissions: frameSubmissionCount + (accelerationBuildSubmitted ? 1 : 0),
+      frameConfigSlots: frameConfigSlotCount,
       memory: config.memory
     });
   }
@@ -3175,10 +3485,15 @@ async function createWavefrontPathTracingComputeRenderer(options = {}) {
       sceneObjectCount: config.sceneObjectCount,
       triangleCount: config.triangleCount,
       emissiveTriangleCount: config.emissiveTriangleCount,
+      environmentPortalCount: config.environmentPortalCount,
+      environmentPortalMode: config.environmentPortalMode,
       bvhNodeCount: config.bvhNodeCount,
       displayQuality: config.displayQuality,
       accelerationBuildMode: config.accelerationBuildMode,
       gpuAccelerationBuildRequired: config.gpuAccelerationBuildRequired,
+      accelerationBuilt,
+      accelerationBuildCount,
+      frameConfigSlots: frameConfigSlotCount,
       memory: config.memory
     });
   }
@@ -3193,6 +3508,7 @@ async function createWavefrontPathTracingComputeRenderer(options = {}) {
     meshVertexBuffer.destroy?.();
     meshIndexBuffer.destroy?.();
     meshRangeBuffer.destroy?.();
+    environmentPortalBuffer.destroy?.();
     bvhLeafRefBuffer.destroy?.();
     configBuffer.destroy?.();
     bvhBuildConfigBuffer.destroy?.();