@tinypoly/gpu-renderer 0.0.0-stage → 0.0.1

package/src/wgsl/bvh.wgsl.ts

@@ -0,0 +1,217 @@
+/** Triangle intersection and the iterative traversal, with the fixed stack the builder caps its depth to. */
+export const BVH_WGSL = /* wgsl */ `
+fn triangleVertex(triangle: u32, corner: u32) -> vec3<f32> {
+  let base = triangle * 9u + corner * 3u;
+
+  return vec3<f32>(positions[base], positions[base + 1u], positions[base + 2u]);
+}
+
+/** Moller-Trumbore. Returns the distance in x and the barycentric coordinates in yz, or a negative distance. */
+fn intersectTriangle(triangle: u32, origin: vec3<f32>, direction: vec3<f32>) -> vec3<f32> {
+  let miss = vec3<f32>(-1.0, 0.0, 0.0);
+  let a = triangleVertex(triangle, 0u);
+  let edge1 = triangleVertex(triangle, 1u) - a;
+  let edge2 = triangleVertex(triangle, 2u) - a;
+  let p = cross(direction, edge2);
+  let determinant = dot(edge1, p);
+
+  if (abs(determinant) < 1e-12) {
+    return miss;
+  }
+
+  let inverse = 1.0 / determinant;
+  let offset = origin - a;
+  let u = dot(offset, p) * inverse;
+
+  if (u < 0.0 || u > 1.0) {
+    return miss;
+  }
+
+  let q = cross(offset, edge1);
+  let v = dot(direction, q) * inverse;
+
+  if (v < 0.0 || u + v > 1.0) {
+    return miss;
+  }
+
+  return vec3<f32>(dot(edge2, q) * inverse, u, v);
+}
+
+/** Where a ray enters a node's box, or 1e30 when it misses it or only meets it past maxDistance. */
+fn enterBox(node: BvhNode, origin: vec3<f32>, inverse: vec3<f32>, maxDistance: f32) -> f32 {
+  let first = (node.low - origin) * inverse;
+  let second = (node.high - origin) * inverse;
+  let near = min(first, second);
+  let far = max(first, second);
+  let enter = max(max(near.x, near.y), max(near.z, 0.0));
+  let exit = min(min(far.x, far.y), min(far.z, maxDistance));
+
+  return select(1e30, enter, enter <= exit);
+}
+
+/** The triangles of a leaf, against the closest hit so far. */
+fn intersectLeaf(node: BvhNode, origin: vec3<f32>, direction: vec3<f32>, hit: ptr<function, Hit>) {
+  let start = u32(-1 - node.link);
+
+  for (var i = 0u; i < u32(node.count); i = i + 1u) {
+    let triangle = orderedTriangle(start + i);
+    let result = intersectTriangle(triangle, origin, direction);
+
+    if (result.x > RAY_EPSILON && result.x < (*hit).distance) {
+      (*hit).distance = result.x;
+      (*hit).triangle = triangle;
+      (*hit).u = result.y;
+      (*hit).v = result.z;
+    }
+  }
+}
+
+/**
+ * The closest hit along a ray. Both children of a node are tested together and the nearer one is visited first, so
+ * the closest hit shrinks the search early and whole subtrees behind it are skipped; each node remembers where the ray
+ * entered it, and one whose entry is already past the closest hit is dropped without being opened.
+ */
+fn traceScene(origin: vec3<f32>, direction: vec3<f32>, maxDistance: f32) -> Hit {
+  var hit: Hit;
+  hit.distance = maxDistance;
+  hit.triangle = NO_HIT;
+  hit.u = 0.0;
+  hit.v = 0.0;
+
+  if (frame.triangleCount == 0u) {
+    return hit;
+  }
+
+  // A huge finite reciprocal instead of an infinite one: an axis aligned slab would otherwise produce 0 * inf.
+  let signs = select(vec3<f32>(-1.0), vec3<f32>(1.0), direction >= vec3<f32>(0.0));
+  let inverse = signs / max(abs(direction), vec3<f32>(1e-20));
+  let rootEnter = enterBox(nodes[0], origin, inverse, hit.distance);
+
+  if (rootEnter >= 1e30) {
+    return hit;
+  }
+
+  var stack: array<u32, 32>;
+  var enters: array<f32, 32>;
+  var depth = 1u;
+  stack[0] = 0u;
+  enters[0] = rootEnter;
+
+  loop {
+    if (depth == 0u) {
+      break;
+    }
+
+    depth = depth - 1u;
+
+    // Something closer was found since this node was pushed.
+    if (enters[depth] > hit.distance) {
+      continue;
+    }
+
+    let node = nodes[stack[depth]];
+
+    if (node.link < 0) {
+      intersectLeaf(node, origin, direction, &hit);
+      continue;
+    }
+
+    let leftIndex = u32(node.link);
+    let rightIndex = u32(node.count);
+    let leftEnter = enterBox(nodes[leftIndex], origin, inverse, hit.distance);
+    let rightEnter = enterBox(nodes[rightIndex], origin, inverse, hit.distance);
+    let leftHit = leftEnter < 1e30;
+    let rightHit = rightEnter < 1e30;
+
+    // The builder caps its depth so both children always fit; the guard keeps a malformed tree inside the stack.
+    if (depth + 2u > 32u) {
+      continue;
+    }
+
+    if (leftHit && rightHit) {
+      // The farther first, so the nearer comes off the stack next.
+      let leftNearer = leftEnter <= rightEnter;
+      stack[depth] = select(leftIndex, rightIndex, leftNearer);
+      enters[depth] = select(leftEnter, rightEnter, leftNearer);
+      stack[depth + 1u] = select(rightIndex, leftIndex, leftNearer);
+      enters[depth + 1u] = select(rightEnter, leftEnter, leftNearer);
+      depth = depth + 2u;
+    } else if (leftHit) {
+      stack[depth] = leftIndex;
+      enters[depth] = leftEnter;
+      depth = depth + 1u;
+    } else if (rightHit) {
+      stack[depth] = rightIndex;
+      enters[depth] = rightEnter;
+      depth = depth + 1u;
+    }
+  }
+
+  return hit;
+}
+
+/**
+ * Whether anything at all lies along a ray before maxDistance, stopping at the first triangle it finds rather than the
+ * closest: what a shadow ray asks when every surface it could meet blocks it. Returns that triangle, or NO_HIT.
+ */
+fn traceAny(origin: vec3<f32>, direction: vec3<f32>, maxDistance: f32) -> u32 {
+  if (frame.triangleCount == 0u) {
+    return NO_HIT;
+  }
+
+  let signs = select(vec3<f32>(-1.0), vec3<f32>(1.0), direction >= vec3<f32>(0.0));
+  let inverse = signs / max(abs(direction), vec3<f32>(1e-20));
+
+  if (enterBox(nodes[0], origin, inverse, maxDistance) >= 1e30) {
+    return NO_HIT;
+  }
+
+  var stack: array<u32, 32>;
+  var depth = 1u;
+  stack[0] = 0u;
+
+  loop {
+    if (depth == 0u) {
+      break;
+    }
+
+    depth = depth - 1u;
+
+    let node = nodes[stack[depth]];
+
+    if (node.link < 0) {
+      let start = u32(-1 - node.link);
+
+      for (var i = 0u; i < u32(node.count); i = i + 1u) {
+        let triangle = orderedTriangle(start + i);
+        let result = intersectTriangle(triangle, origin, direction);
+
+        if (result.x > RAY_EPSILON && result.x < maxDistance) {
+          return triangle;
+        }
+      }
+
+      continue;
+    }
+
+    let leftIndex = u32(node.link);
+    let rightIndex = u32(node.count);
+
+    if (depth + 2u > 32u) {
+      continue;
+    }
+
+    if (enterBox(nodes[leftIndex], origin, inverse, maxDistance) < 1e30) {
+      stack[depth] = leftIndex;
+      depth = depth + 1u;
+    }
+
+    if (enterBox(nodes[rightIndex], origin, inverse, maxDistance) < 1e30) {
+      stack[depth] = rightIndex;
+      depth = depth + 1u;
+    }
+  }
+
+  return NO_HIT;
+}
+`;

package/src/wgsl/common.wgsl.ts

@@ -0,0 +1,193 @@
+import { FRAME_LAYOUT } from "../frameLayout.js";
+import { MATERIAL_KIND, MATERIAL_LAYOUT } from "../materialLayout.js";
+
+/** Bindings and structs shared by every stage of the path tracing module. */
+export const COMMON_WGSL = /* wgsl */ `
+${FRAME_LAYOUT.wgsl}
+// Thirty two bytes: a corner and a link, twice. A leaf stores -1 - start in place of its left child.
+struct BvhNode {
+  low: vec3<f32>,
+  link: i32,
+  high: vec3<f32>,
+  count: i32,
+};
+
+/** As materialLayout.ts packs it. A map index of NO_TEXTURE means the slot is empty. */
+${MATERIAL_LAYOUT.wgsl}
+/** Sixty four bytes, as texturePack.ts writes it. */
+struct TextureInfo {
+  size: vec2<u32>,
+  // Where the texels start, in words for a byte texture and in floats for a float one.
+  offset: u32,
+  flags: u32,
+  wrapS: u32,
+  wrapT: u32,
+  // Which of the geometry's UV sets this texture reads.
+  channel: u32,
+  padding: u32,
+  // The rows of Three's own UV transform: xyz against (u, v, 1).
+  rowU: vec4<f32>,
+  rowV: vec4<f32>,
+};
+
+/**
+ * Something the integrator can aim a shadow ray at. The emissive triangles come first and carry only a triangle index,
+ * their emission being read from its material; the analytic lights that follow carry Three's own parameters.
+ *
+ * pdf is the density with which this entry is chosen, in the measure that suits its kind: per unit area for a surface,
+ * and simply the probability of the pick for a light that occupies no area.
+ */
+struct Light {
+  kind: u32,
+  cdf: f32,
+  pdf: f32,
+  // The triangle of an emissive entry; for a spot light with a projected map, where that map's record starts.
+  triangle: u32,
+  color: vec3<f32>,
+  // Three's light.distance: beyond it a point or spot light delivers nothing. Zero means no cutoff.
+  cutoff: f32,
+  position: vec3<f32>,
+  decay: f32,
+  // Towards the light from its target, as Three orients a directional or spot light.
+  direction: vec3<f32>,
+  outerCos: f32,
+  // Half the width of a rectangular light, along its own axes.
+  tangent: vec3<f32>,
+  innerCos: f32,
+  bitangent: vec3<f32>,
+  flags: u32,
+};
+
+struct Hit {
+  distance: f32,
+  triangle: u32,
+  u: f32,
+  v: f32,
+};
+
+const NO_HIT: u32 = 0xffffffffu;
+const RAY_EPSILON: f32 = 1e-4;
+const PI: f32 = 3.141592653589793;
+
+const LIGHT_AREA: u32 = 0u;
+const LIGHT_DIRECTIONAL: u32 = 1u;
+const LIGHT_POINT: u32 = 2u;
+const LIGHT_SPOT: u32 = 3u;
+const LIGHT_RECT: u32 = 4u;
+const LIGHT_ENVIRONMENT: u32 = 5u;
+const LIGHT_CASTS_SHADOW: u32 = 1u;
+// A spot light that projects a texture; its triangle field says where the map and its matrix are.
+const LIGHT_HAS_MAP: u32 = 2u;
+
+// A surface Three shades with light at all: a basic, points, line or sprite material is not one.
+const MATERIAL_LIT: u32 = 1u;
+// A surface with Three's metalness workflow, which is the only one that gets a GGX specular lobe.
+const MATERIAL_PBR: u32 = 2u;
+const MATERIAL_TRANSPARENT: u32 = 4u;
+const MATERIAL_VERTEX_COLORS: u32 = 8u;
+const MATERIAL_FLAT: u32 = 16u;
+const MATERIAL_WIREFRAME: u32 = 32u;
+const MATERIAL_FOG: u32 = 64u;
+const MATERIAL_CLIP_INTERSECTION: u32 = 128u;
+const MATERIAL_OBJECT_NORMAL_MAP: u32 = 256u;
+const MATERIAL_PATCHED: u32 = 512u;
+const MATERIAL_ALPHA_HASH: u32 = 2048u;
+const MATERIAL_SPECULAR: u32 = 4096u;
+
+const KIND_STANDARD: u32 = ${MATERIAL_KIND.standard}u;
+const KIND_PHYSICAL: u32 = ${MATERIAL_KIND.physical}u;
+const KIND_LAMBERT: u32 = ${MATERIAL_KIND.lambert}u;
+const KIND_PHONG: u32 = ${MATERIAL_KIND.phong}u;
+const KIND_TOON: u32 = ${MATERIAL_KIND.toon}u;
+const KIND_BASIC: u32 = ${MATERIAL_KIND.basic}u;
+const KIND_NORMAL: u32 = ${MATERIAL_KIND.normal}u;
+const KIND_DEPTH: u32 = ${MATERIAL_KIND.depth}u;
+const KIND_MATCAP: u32 = ${MATERIAL_KIND.matcap}u;
+const KIND_SHADOW: u32 = ${MATERIAL_KIND.shadow}u;
+const KIND_SHADER: u32 = ${MATERIAL_KIND.shader}u;
+
+// Three's side and blending constants.
+const SIDE_FRONT: u32 = 0u;
+const SIDE_BACK: u32 = 1u;
+const BLEND_NONE: u32 = 0u;
+const BLEND_NORMAL: u32 = 1u;
+const BLEND_ADDITIVE: u32 = 2u;
+const BLEND_SUBTRACTIVE: u32 = 3u;
+const BLEND_MULTIPLY: u32 = 4u;
+
+/** What a material's map index reads as when it has no such map. */
+const NO_TEXTURE: u32 = 0xffffffffu;
+const NO_PROGRAM: u32 = 0xffffffffu;
+
+// A WebGPU device only has to offer eight storage buffers per stage, so arrays of the same kind share one binding and
+// the uniform says where the second one starts. See sceneUpload.ts, which joins them.
+@group(0) @binding(0) var<uniform> frame: Frame;
+@group(0) @binding(1) var<storage, read> positions: array<f32>;
+// Normals, then the UV sets from frame.uvOffset, vertex colours from frame.colorOffset and shader varyings from
+// frame.varyingOffset.
+@group(0) @binding(2) var<storage, read> attributes: array<f32>;
+// One material index per triangle, then the hierarchy's triangle order from frame.orderOffset on.
+@group(0) @binding(3) var<storage, read> indices: array<u32>;
+@group(0) @binding(4) var<storage, read> materials: array<Material>;
+@group(0) @binding(5) var<storage, read> nodes: array<BvhNode>;
+@group(0) @binding(6) var<storage, read> lights: array<Light>;
+// Radiance and sample count per pixel, then the coverage per pixel from frame.pixelCount on.
+@group(0) @binding(7) var<storage, read_write> accumulation: array<vec4<f32>>;
+// The texture table, then the texels it points at, then everything else that is read by offset: the environment's
+// distributions, clipping planes, projected light maps and shader uniforms. See texturePack.ts.
+@group(0) @binding(8) var<storage, read> textures: array<u32>;
+
+fn materialIndexOf(triangle: u32) -> u32 {
+  return indices[triangle];
+}
+
+/** The triangle the hierarchy holds at this position of its order. */
+fn orderedTriangle(at: u32) -> u32 {
+  return indices[frame.orderOffset + at];
+}
+
+/** One word of a UV set: three vertices of four components, two per set. */
+fn attributeUv(triangle: u32, corner: u32, channel: u32) -> vec2<f32> {
+  let at = frame.uvOffset + triangle * 12u + corner * 4u + channel * 2u;
+
+  return vec2<f32>(attributes[at], attributes[at + 1u]);
+}
+
+/** A corner's vertex colour, or white when the scene has none. */
+fn attributeColor(triangle: u32, corner: u32) -> vec4<f32> {
+  if (frame.hasColors == 0u) {
+    return vec4<f32>(1.0);
+  }
+
+  let at = frame.colorOffset + triangle * 12u + corner * 4u;
+
+  return vec4<f32>(attributes[at], attributes[at + 1u], attributes[at + 2u], attributes[at + 3u]);
+}
+
+fn extraFloat(at: u32) -> f32 {
+  return bitcast<f32>(textures[at]);
+}
+
+fn extraVec4(at: u32) -> vec4<f32> {
+  return vec4<f32>(extraFloat(at), extraFloat(at + 1u), extraFloat(at + 2u), extraFloat(at + 3u));
+}
+
+/** One entry of the texture table, unpacked from the words it shares with the texels. */
+fn textureInfo(index: u32) -> TextureInfo {
+  let at = index * 16u;
+  var info: TextureInfo;
+
+  info.size = vec2<u32>(textures[at], textures[at + 1u]);
+  info.offset = textures[at + 2u];
+  info.flags = textures[at + 3u];
+  info.wrapS = textures[at + 4u];
+  info.wrapT = textures[at + 5u];
+  info.channel = textures[at + 6u];
+  info.rowU = vec4<f32>(
+    bitcast<f32>(textures[at + 8u]), bitcast<f32>(textures[at + 9u]), bitcast<f32>(textures[at + 10u]), 0.0);
+  info.rowV = vec4<f32>(
+    bitcast<f32>(textures[at + 12u]), bitcast<f32>(textures[at + 13u]), bitcast<f32>(textures[at + 14u]), 0.0);
+
+  return info;
+}
+`;

package/src/wgsl/environment.wgsl.ts

@@ -0,0 +1,144 @@
+/**
+ * The light that surrounds the scene, and how a shadow ray aims at the bright parts of it.
+ *
+ * A sun in an equirectangular image is the same problem a small bright lamp is: a cosine weighted bounce almost never
+ * finds it, so the image takes thousands of samples to settle. The cumulative distributions built in environment.ts
+ * turn two random numbers into a direction drawn by luminance, which the power heuristic then balances against the
+ * bounce that might have found it anyway.
+ */
+export const ENVIRONMENT_WGSL = /* wgsl */ `
+struct EnvironmentSample {
+  direction: vec3<f32>,
+  // Density per solid angle, before the probability of picking the environment at all.
+  pdf: f32,
+};
+
+/** From world space into the image's own frame, which is what the rotation setting turns. */
+fn environmentRotate(direction: vec3<f32>) -> vec3<f32> {
+  let c = cos(frame.environmentRotation);
+  let s = sin(frame.environmentRotation);
+
+  return vec3<f32>(direction.x * c - direction.z * s, direction.y, direction.x * s + direction.z * c);
+}
+
+fn environmentUnrotate(direction: vec3<f32>) -> vec3<f32> {
+  let c = cos(frame.environmentRotation);
+  let s = sin(frame.environmentRotation);
+
+  return vec3<f32>(direction.x * c + direction.z * s, direction.y, -direction.x * s + direction.z * c);
+}
+
+/** Where a direction lands on an equirectangular image: longitude across, colatitude down from the zenith. */
+fn environmentUv(direction: vec3<f32>) -> vec2<f32> {
+  return vec2<f32>(
+    atan2(direction.z, direction.x) / (2.0 * PI) + 0.5,
+    acos(clamp(direction.y, -1.0, 1.0)) / PI);
+}
+
+/** And back again. */
+fn environmentDirection(uv: vec2<f32>) -> vec3<f32> {
+  let phi = (uv.x - 0.5) * 2.0 * PI;
+  let theta = uv.y * PI;
+
+  return vec3<f32>(sin(theta) * cos(phi), cos(theta), sin(theta) * sin(phi));
+}
+
+/** What arrives from a direction: the image if there is one, and the gradient otherwise. */
+fn environmentRadiance(direction: vec3<f32>) -> vec3<f32> {
+  if (frame.environmentTexture == NO_TEXTURE) {
+    let height = pow(clamp(direction.y * 0.5 + 0.5, 0.0, 1.0), frame.environmentTop.w);
+
+    return mix(frame.environmentBottom.rgb, frame.environmentTop.rgb, height) * frame.environmentBottom.w;
+  }
+
+  let uv = environmentUv(environmentRotate(direction));
+
+  return sampleTextureAt(frame.environmentTexture, uv).rgb * frame.environmentBottom.w;
+}
+
+fn environmentRow(y: u32) -> f32 {
+  return bitcast<f32>(textures[frame.environmentCdf + y]);
+}
+
+fn environmentColumn(index: u32) -> f32 {
+  return bitcast<f32>(textures[frame.environmentCdf + frame.environmentCdfSize.y + index]);
+}
+
+fn environmentTexelLuminance(index: u32) -> f32 {
+  let base = frame.environmentCdf + frame.environmentCdfSize.y
+    + frame.environmentCdfSize.x * frame.environmentCdfSize.y;
+
+  return bitcast<f32>(textures[base + index]);
+}
+
+/** The first entry of a cumulative range whose value passes u. */
+fn searchCdf(start: u32, count: u32, u: f32, rows: bool) -> u32 {
+  var low = 0u;
+  var high = count - 1u;
+
+  loop {
+    if (low >= high) {
+      break;
+    }
+
+    let middle = (low + high) / 2u;
+    let value = select(environmentColumn(start + middle), environmentRow(middle), rows);
+
+    if (u < value) {
+      high = middle;
+    } else {
+      low = middle + 1u;
+    }
+  }
+
+  return low;
+}
+
+/**
+ * A direction drawn by the image's own luminance. The remainder of each random number places the sample inside the
+ * texel it chose, so two dimensions do the work of four.
+ */
+fn sampleEnvironmentDirection(u: vec2<f32>) -> EnvironmentSample {
+  var result: EnvironmentSample;
+  result.pdf = 0.0;
+  result.direction = vec3<f32>(0.0, 1.0, 0.0);
+
+  if (frame.environmentTotal <= 0.0) {
+    return result;
+  }
+
+  let width = frame.environmentCdfSize.x;
+  let height = frame.environmentCdfSize.y;
+  let y = searchCdf(0u, height, u.x, true);
+  let rowStart = select(environmentRow(y - 1u), 0.0, y == 0u);
+  let rowSpan = environmentRow(y) - rowStart;
+  let x = searchCdf(y * width, width, u.y, false);
+  let columnStart = select(environmentColumn(y * width + x - 1u), 0.0, x == 0u);
+  let columnSpan = environmentColumn(y * width + x) - columnStart;
+  let jitterY = select(0.5, clamp((u.x - rowStart) / rowSpan, 0.0, 0.999999), rowSpan > 0.0);
+  let jitterX = select(0.5, clamp((u.y - columnStart) / columnSpan, 0.0, 0.999999), columnSpan > 0.0);
+  let uv = vec2<f32>((f32(x) + jitterX) / f32(width), (f32(y) + jitterY) / f32(height));
+
+  result.direction = normalize(environmentUnrotate(environmentDirection(uv)));
+  result.pdf = environmentTexelLuminance(y * width + x) * f32(width) * f32(height)
+    / (2.0 * PI * PI * frame.environmentTotal);
+
+  return result;
+}
+
+/** The density with which that sampling would have produced this direction, for the power heuristic. */
+fn environmentPdf(direction: vec3<f32>) -> f32 {
+  if (frame.environmentTotal <= 0.0) {
+    return 0.0;
+  }
+
+  let width = frame.environmentCdfSize.x;
+  let height = frame.environmentCdfSize.y;
+  let uv = environmentUv(environmentRotate(direction));
+  let x = min(u32(max(floor(uv.x * f32(width)), 0.0)), width - 1u);
+  let y = min(u32(max(floor(uv.y * f32(height)), 0.0)), height - 1u);
+
+  return environmentTexelLuminance(y * width + x) * f32(width) * f32(height)
+    / (2.0 * PI * PI * frame.environmentTotal);
+}
+`;