@tinypoly/gpu-renderer 0.2.0 → 0.2.2

package/src/renderer.ts

@@ -31,6 +31,7 @@ import {
   type SubsurfaceMaterial,
   type VolumeMaterial,
 } from "./subsurface.js";
+import { GRASS_NONE, grassField, grassOf, packGrass, type GrassMaterial } from "./grass.js";
 import { containingVolume, NO_MATERIAL, volumeTriangles, type VolumeTriangles } from "./volumeContainment.js";
 import {
   CONVERGED_ERROR,
@@ -252,6 +253,9 @@ interface PackedTarget {
   volumetricCount: number;
   /** The boundaries of the scene's volumes, which say whether the camera stands inside one. */
   volumes: VolumeTriangles | null;
+  /** Where the lawns' hierarchy and entries start in the texture buffer: see grass.ts. */
+  grassShells: number;
+  grassEntries: number;
 }
 
 /**
@@ -491,10 +495,24 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
     this.sceneDirty = true;
   }
 
-  /** Used by `attachCanvas`; pass `null` to detach. */
+  /**
+   * Used by `attachCanvas`; pass `null` to detach. A canvas attached after a frame started, or after it finished,
+   * shows what the accumulation already holds at once, instead of staying empty until the next frame.
+   */
   setOutputCanvas(canvas: HTMLCanvasElement | null) {
     this.canvas = canvas;
     this.context = null;
+
+    const gpu = this.gpu, accumulator = this.accumulator;
+
+    if (!canvas || !gpu || !accumulator || this.disposed) return;
+
+    this.configureCanvas(gpu, accumulator.width, accumulator.height);
+
+    const encoder = gpu.device.createCommandEncoder();
+
+    this.encodePresent(encoder, accumulator.width, accumulator.height);
+    gpu.device.queue.submit([encoder.finish()]);
   }
 
   /**
@@ -873,7 +891,8 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
       // Portals need windows: thin glass, which is what a physical material with transmission and no thickness is.
       this.current.globalIllumination.portals !== false && materials.some(material =>
         material.type === "MeshPhysicalMaterial" && Number(material.values.transmission) > 0
-        && !(Number(material.values.thickness) > 0)));
+        && !(Number(material.values.thickness) > 0)),
+      materials.some(material => grassOf(material) !== null));
 
     // A procedural sky stands in for the renderer's own environment, as it does in the CPU renderer.
     const environment = assets.sky?.environment ?? image;
@@ -984,6 +1003,10 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
 
     const volumetric = packVolumetricLights(scene.lights);
     const volumetricData = append(new Uint32Array(volumetric.buffer));
+    const grass = packGrass(geometry, plan.extraOffset + extra.length);
+
+    if (grass) append(grass.words);
+
     const textures = writeTextures(plan, new Uint32Array(extra));
     const bvh = await this.bvh.build(geometry.positions, geometry.triangleCount);
 
@@ -1009,6 +1032,8 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
       volumetricData,
       volumetricCount: Math.min(volumetric.length / VOLUMETRIC_WORDS, 8),
       volumes: volumeTriangles(geometry),
+      grassShells: grass?.shells ?? GRASS_NONE,
+      grassEntries: grass?.entries ?? 0,
     };
   }
 
@@ -1328,6 +1353,8 @@ export class GpuRenderer extends EventEmitter<GpuRendererEvents> {
       pixelCount: width * height,
       volumetricCount: target?.volumetricCount ?? 0,
       volumetricData: target?.volumetricData ?? 0,
+      grassShells: target?.grassShells ?? GRASS_NONE,
+      grassEntries: target?.grassEntries ?? 0,
     };
   }
 
@@ -1374,7 +1401,7 @@ async function serializeLive(scene: Scene): Promise<SerializedScene> {
   const renamed = new Map<Material, string>();
   // The snapshot keeps a material's name but not its media, so the name carries a mark to them.
   const named = new Map<Material, string>();
-  const media: { subsurface?: unknown; volume?: unknown; bevel?: unknown }[] = [];
+  const media: { subsurface?: unknown; volume?: unknown; bevel?: unknown; grass?: unknown }[] = [];
 
   scene.traverse(object => {
     const value = (object as Object3D & { material?: Material | Material[] }).material;
@@ -1388,13 +1415,14 @@ async function serializeLive(scene: Scene): Promise<SerializedScene> {
       }
 
       const data = material.userData?.cpuRenderer as
-        { subsurface?: unknown; volume?: unknown; bevel?: unknown } | undefined;
+        { subsurface?: unknown; volume?: unknown; bevel?: unknown; grass?: unknown } | undefined;
 
       if (!named.has(material)
-        && (subsurfaceMedium(data?.subsurface) || volumeMedium(data?.volume) || bevelRadius(data?.bevel) > 0)) {
+        && (subsurfaceMedium(data?.subsurface) || volumeMedium(data?.volume) || bevelRadius(data?.bevel) > 0
+          || grassField(data?.grass))) {
         named.set(material, material.name);
         material.name = `${material.name}${MEDIA_MARK}${media.length}`;
-        media.push({ subsurface: data?.subsurface, volume: data?.volume, bevel: data?.bevel });
+        media.push({ subsurface: data?.subsurface, volume: data?.volume, bevel: data?.bevel, grass: data?.grass });
       }
     }
   });
@@ -1411,7 +1439,7 @@ async function serializeLive(scene: Scene): Promise<SerializedScene> {
 
   // Materials are shared between the meshes that use them, so each one is unmarked once and seen marked no more.
   for (const mesh of snapshot.meshes) {
-    for (const material of mesh.materials as (SubsurfaceMaterial & VolumeMaterial & BevelMaterial)[]) {
+    for (const material of mesh.materials as (SubsurfaceMaterial & VolumeMaterial & BevelMaterial & GrassMaterial)[]) {
       const at = material.name.lastIndexOf(MEDIA_MARK);
 
       if (at < 0) continue;
@@ -1422,6 +1450,7 @@ async function serializeLive(scene: Scene): Promise<SerializedScene> {
       if (medium.subsurface !== undefined) material.subsurface = medium.subsurface as SubsurfaceMaterial["subsurface"];
       if (medium.volume !== undefined) material.volume = medium.volume as VolumeMaterial["volume"];
       if (medium.bevel !== undefined) material.bevel = medium.bevel as BevelMaterial["bevel"];
+      if (medium.grass !== undefined) material.grass = medium.grass as GrassMaterial["grass"];
     }
   }
 

package/src/shaderProgram.ts

@@ -178,6 +178,16 @@ const PATCHED_CONTEXT: [string, string][] = [
   ["vec3", "vNormal"],
 ];
 
+/**
+ * Three's physical light function, which a hook may wrap to change its direct light (a relief shadowing its own
+ * joints). The integrator lights the surface, so the function is only there for the hook to compile and does nothing.
+ */
+const PHYSICAL_LIGHT_STUB = `
+struct PhysicalMaterial { vec3 diffuseColor; float roughness; vec3 specularColor; float specularF90; float dispersion; };
+void RE_Direct_Physical(IncidentLight directLight, vec3 geometryPosition, vec3 geometryNormal, vec3 geometryViewDir,
+  vec3 geometryClearcoatNormal, PhysicalMaterial material, inout ReflectedLight reflectedLight) {}
+`;
+
 /** Light helpers Three's hooks expect from its lighting chunks, which a patched shader no longer includes. */
 const PATCHED_HELPERS = `
 float getDistanceAttenuation(float lightDistance, float cutoffDistance, float decayExponent) {
@@ -374,7 +384,7 @@ export function prepareFragmentShader(
 
   let body = shader.fragment;
 
-  if (kind === "patched" || kind === "after") body = `${SHADER_CHUNKS.common}\n${body}`;
+  if (kind === "patched" || kind === "after") body = `${SHADER_CHUNKS.common}\n${PHYSICAL_LIGHT_STUB}\n${body}`;
 
   body = unrollLoops(expandIncludes(body));
   body = stripComments(body)

package/src/subsurface.ts

@@ -96,7 +96,8 @@ export type VolumeMaterial = SerializedMaterial & { volume?: VolumeInput };
 
 const srgbToLinear = (c: number) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
 
-function albedoOf(color: unknown): [number, number, number] {
+/** A colour as `#rrggbb` or linear rgb, in linear rgb clamped to one; white when it reads as neither. */
+export function linearAlbedo(color: unknown): [number, number, number] {
   if (Array.isArray(color) && color.length >= 3) {
     return [0, 1, 2].map(k => Math.min(1, Math.max(0, finite(color[k], 1)))) as [number, number, number];
   }
@@ -123,7 +124,7 @@ export function volumeMedium(input: unknown): VolumeMedium | null {
 
   return {
     density,
-    albedo: albedoOf(value.color),
+    albedo: linearAlbedo(value.color),
     anisotropy: Math.min(0.95, Math.max(-0.95, finite(value.anisotropy, 0))),
   };
 }

package/src/wgsl/bsdf.wgsl.ts

@@ -181,6 +181,26 @@ fn coatTransmittance(surface: Surface, view: vec3<f32>) -> f32 {
  */
 const KIND_VOLUME: u32 = 100u;
 
+/**
+ * Share of the diffuse lobe's directions drawn on the far side of a surface that lets light through it diffusely, as a
+ * grass blade does: by how much of the diffuse light each side accounts for.
+ */
+fn translucentShare(surface: Surface) -> f32 {
+  if (!GRASS) {
+    return 0.0;
+  }
+
+  let through = luminanceOf(surface.translucent);
+
+  if (through <= 0.0) {
+    return 0.0;
+  }
+
+  let off = luminanceOf(surface.albedo * ((1.0 - surface.metalness) * (1.0 - surface.subsurface)));
+
+  return through / max(through + off, 1e-6);
+}
+
 /** How often each lobe is chosen, as (diffuse, specular, clearcoat): by how much of the reflection each accounts for. */
 fn lobeWeights(surface: Surface, view: vec3<f32>) -> vec3<f32> {
   let nv = max(dot(surface.normal, view), 1e-4);
@@ -199,7 +219,7 @@ fn lobeWeights(surface: Surface, view: vec3<f32>) -> vec3<f32> {
   let base = coatTransmittance(surface, view);
   // The floors keep every lobe reachable: the diffuse one also carries the sheen and the multiple scattering term.
   let diffuse = (luminanceOf(surface.albedo * ((1.0 - surface.metalness) * (1.0 - surface.subsurface)))
-    + max3(surface.sheenColor)) * base + 0.02;
+    + max3(surface.sheenColor) + select(0.0, luminanceOf(surface.translucent), GRASS)) * base + 0.02;
   let specular = luminanceOf(schlick3(surface.specularColor, surface.specularF90, nv)
     * (1.0 - surface.metalness) + surface.albedo * surface.metalness) * base + 0.05;
   let coat = select(0.0, (1.0 - base) + 0.02, surface.clearcoat > 0.0);
@@ -277,6 +297,11 @@ fn physicalValue(surface: Surface, view: vec3<f32>, light: vec3<f32>) -> vec3<f3
     }
   }
 
+  // Light through a translucent surface, from its far side.
+  if (GRASS && nl < 0.0) {
+    value = value + surface.translucent / PI * (-nl);
+  }
+
   return value;
 }
 
@@ -308,6 +333,10 @@ fn bsdfPdf(surface: Surface, view: vec3<f32>, light: vec3<f32>) -> f32 {
   let weights = lobeWeights(surface, view);
   var pdf = weights.x * max(nl, 0.0) / PI;
 
+  if (GRASS) {
+    pdf = weights.x * mix(max(nl, 0.0), max(-nl, 0.0), translucentShare(surface)) / PI;
+  }
+
   if (surface.kind == KIND_PHONG) {
     let half = normalize(light + view);
 
@@ -375,7 +404,7 @@ fn evaluateBsdf(surface: Surface, view: vec3<f32>, light: vec3<f32>) -> BsdfEval
   }
 
   // A clearcoat may face a light its base turns away from, so only a surface without one stops here.
-  if (nl <= 0.0 && surface.clearcoat <= 0.0) {
+  if (nl <= 0.0 && surface.clearcoat <= 0.0 && !(GRASS && any(surface.translucent > vec3<f32>(0.0)))) {
     return result;
   }
 
@@ -554,7 +583,10 @@ fn sampleBsdf(surface: Surface, view: vec3<f32>, lobe: f32, u: vec2<f32>) -> Bsd
   result.diffuse = lobe < weights.x;
 
   if (lobe < weights.x) {
-    result.direction = cosineDirection(normal, u);
+    // A translucent surface sends that share of its diffuse light through, to the far side.
+    let through = GRASS && lobe < weights.x * translucentShare(surface);
+
+    result.direction = cosineDirection(select(normal, -normal, through), u);
   } else if (surface.kind == KIND_PHONG) {
     result.direction = reflect(-view, sampleBlinnPhongHalf(normal, surface.shininess, u));
   } else if (lobe < weights.x + weights.y) {
@@ -606,6 +638,10 @@ fn diffuseValue(surface: Surface, view: vec3<f32>, light: vec3<f32>) -> vec3<f32
     return surface.albedo * henyeyGreenstein(dot(-view, light), surface.anisotropy);
   }
 
+  if (GRASS && nl < 0.0) {
+    return surface.translucent / PI * (-nl);
+  }
+
   if (nl <= 0.0) {
     return vec3<f32>(0.0);
   }