@driftengine/core 4.8.2 → 4.8.4

package/src/render/shaders/clothBinding.ts

@@ -0,0 +1,81 @@
+/**
+ * The vertex-stage cloth binding: a skinned vertex moved toward the cloth simulation's triangle it
+ * is bound to, by a weight painted per vertex — the GLSL of `clothPlacement.ts`, line for line.
+ *
+ * **Textures read by vertex index, not attributes**, for the reason morph targets are: the skinned
+ * variants already use all sixteen attribute locations once eight influences are in. Three
+ * textures, each wrapped onto rows at its own width (read back with `textureSize`, so no uniform
+ * joins the vertex block and no shared field moves):
+ *
+ * - **the binding**, two texels a render vertex: the three particle indices and the weight, then
+ *   the barycentric (u, v) for the second and third particle and the offset along the normal;
+ * - **the particles now**, one texel a particle, world space — the simulation's output;
+ * - **the particles at rest**, one texel a particle, model space — the rest frames are built from
+ *   these, so a vertex's own bind-pose normal turns as its triangle has turned.
+ *
+ * **A pipeline constant, not a permutation**, as `SKIN_EIGHT` is: declared in the skinned variants
+ * and folded away where a draw binds no cloth. The textures are bound either way, to stand-ins
+ * where there is no cloth.
+ */
+export const CLOTH_BINDING_GLSL = `
+/** Whether this pipeline places vertices by a cloth binding. */
+const bool CLOTH_BOUND = false; // wgsl:override
+uniform highp sampler2D uClothBinding;
+uniform highp sampler2D uClothParticles;
+uniform highp sampler2D uClothRest;
+
+/** Texel i of a texture wrapped onto rows of the given width. */
+ivec2 clothTexel(int i, int width) {
+  return ivec2(i % width, i / width);
+}
+
+/** A triangle's frame: its first edge, the normal crossed with it, and its normal. */
+mat3 clothFrame(vec3 a, vec3 b, vec3 c) {
+  vec3 edge = b - a;
+  vec3 n = normalize(cross(edge, c - a));
+  vec3 t = normalize(edge);
+  return mat3(t, cross(n, t), n);
+}
+
+/**
+ * Where this vertex's triangle puts it, the turn its normal takes, and how far it follows (the
+ * painted weight: 0 skinned, 1 cloth). One particle named three times is a vertex bound to that
+ * particle alone: on it, with no turn.
+ */
+float clothPlace(out vec3 position, out mat3 turn) {
+  int bindingWidth = textureSize(uClothBinding, 0).x;
+  int particleWidth = textureSize(uClothParticles, 0).x;
+  int restWidth = textureSize(uClothRest, 0).x;
+  vec4 indices = texelFetch(uClothBinding, clothTexel(gl_VertexID * 2, bindingWidth), 0);
+  vec4 at = texelFetch(uClothBinding, clothTexel(gl_VertexID * 2 + 1, bindingWidth), 0);
+  int a = int(indices.x);
+  int b = int(indices.y);
+  int c = int(indices.z);
+  vec3 pa = texelFetch(uClothParticles, clothTexel(a, particleWidth), 0).xyz;
+  if (a == b && b == c) {
+    position = pa;
+    turn = mat3(1.0);
+    return indices.w;
+  }
+  vec3 pb = texelFetch(uClothParticles, clothTexel(b, particleWidth), 0).xyz;
+  vec3 pc = texelFetch(uClothParticles, clothTexel(c, particleWidth), 0).xyz;
+  mat3 now = clothFrame(pa, pb, pc);
+  mat3 rest = clothFrame(
+    texelFetch(uClothRest, clothTexel(a, restWidth), 0).xyz,
+    texelFetch(uClothRest, clothTexel(b, restWidth), 0).xyz,
+    texelFetch(uClothRest, clothTexel(c, restWidth), 0).xyz
+  );
+  position = pa * (1.0 - at.x - at.y) + pb * at.x + pc * at.y + now[2] * at.z;
+  turn = now * transpose(rest);
+  return indices.w;
+}
+`;
+
+/** A skinned vertex stage with the cloth binding on: the same source, the constant flipped. */
+export function clothBound(source: string): string {
+  const off = 'const bool CLOTH_BOUND = false;';
+  if (!source.includes(off)) {
+    throw new Error('clothBound: this vertex stage declares no CLOTH_BOUND constant');
+  }
+  return source.replace(off, 'const bool CLOTH_BOUND = true;');
+}

package/src/render/shaders/depth.ts

@@ -1,7 +1,9 @@
 import { resolveConditionals } from './conditionals.ts';
 import { SUN_STATIC_LAYER } from '../shadowMap.ts';
 import { CUTOUT_COVERAGE_GLSL } from './cutoutCoverage.ts';
+import { CUTOUT_DITHER_GLSL } from '../cutoutDither.ts';
 import { SKINNING_GLSL } from './skinning.ts';
+import { CLOTH_BINDING_GLSL } from './clothBinding.ts';
 import { CHANNEL_ATTRIBUTE, CHANNEL_BEND } from './vertexChannel.ts';
 
 /**
@@ -21,6 +23,11 @@ const DEPTH_VERT_SOURCE = `#version 300 es
 layout(location = 0) in vec3 aPosition;
 #if SKINNED
 ${SKINNING_GLSL}
+/* Not in the glass-tint caster: a garment is not glass, and its layout keeps its bindings. */
+#if GLASS
+#else
+${CLOTH_BINDING_GLSL}
+#endif
 #endif
 
 uniform mat4 uLightViewProj;
@@ -60,20 +67,22 @@ ${CHANNEL_BEND}
 
 #if CUTOUT
 /*
- * **What a cutout caster adds, and where.** The UV at location 5, where every mesh carries it; two
+ * **What a cutout caster adds, and where.** The UV at location 5, where every mesh carries it; three
  * uniforms declared after every other, so no field of the plain variant moves and a binder written
  * against it stays right for this one; and two outputs after vLightPosition, which keeps location 0.
  */
 layout(location = 5) in vec3 aUv;
 uniform vec2 uUvScale;
-uniform float uAlphaCutout;
+uniform vec2 uUvOffset;
+/* x the cutoff, y 1 for a dithered edge: see the cutout fragment stages below. */
+uniform vec2 uAlphaCutout;
 #endif
 
 out vec4 vLightPosition;
 #if CUTOUT
 /* The texture coordinate and, in z, the texture-array layer the face wears. */
 out vec3 vUv;
-flat out float vAlphaCutout;
+flat out vec2 vAlphaCutout;
 #endif
 #if GLASS
 /* Where on the pane this is, for the tint's own normal and its angle to the light. Last, so the
@@ -100,11 +109,23 @@ void main() {
   vec3 bent = world.xyz;
 #else
   vec3 bent = channelBend(world.xyz, aChannel.x);
+#endif
+#if SKINNED
+#if GLASS
+#else
+  /* Toward the cloth exactly as the colour pass moves it, or the shadow parts from the garment. */
+  if (CLOTH_BOUND) {
+    vec3 clothPosition;
+    mat3 turn;
+    float follow = clothPlace(clothPosition, turn);
+    bent = mix(bent, clothPosition, follow);
+  }
+#endif
 #endif
   vLightPosition = uLightViewProj * vec4(bent, world.w);
   gl_Position = vLightPosition;
 #if CUTOUT
-  vUv = vec3(aUv.xy * uUvScale, aUv.z);
+  vUv = vec3(aUv.xy * uUvScale + uUvOffset, aUv.z);
   vAlphaCutout = uAlphaCutout;
 #endif
 #if GLASS
@@ -198,12 +219,13 @@ export const DEPTH_CUTOUT_FRAG = `#version 300 es
 precision highp float;
 in vec4 vLightPosition;
 in vec3 vUv;
-flat in float vAlphaCutout;
+flat in vec2 vAlphaCutout;
 
 uniform highp sampler2DArray uPreviousShadowMap;
 uniform int uPeelShadowLayer;
 uniform highp sampler2DArray uCutoutMap;
 ${CUTOUT_COVERAGE_GLSL}
+${CUTOUT_DITHER_GLSL}
 void main() {
   /* Credited for its mip level as the surface's own test is, so a leaf casts the shape it draws. */
   vec3 at = vec3(vUv.xy, floor(vUv.z + 0.5));
@@ -214,7 +236,16 @@ void main() {
     float previousDepth = textureLod(uPreviousShadowMap, vec3(uv, ${SUN_STATIC_LAYER}.0), 0.0).r;
     if (gl_FragCoord.z <= previousDepth + 0.00001) discard;
   }
-  if (alpha < vAlphaCutout) discard;
+  /*
+   * A dithered edge casts the share it covers, with a pattern that does not move: a shadow map has
+   * no temporal resolve of its own and a static layer keeps whatever it was drawn with, so a moving
+   * pattern would shimmer there. The map's filter averages it into a soft edge.
+   */
+  if (vAlphaCutout.y > 0.5) {
+    if (!cutoutKeeps(cutoutShare(alpha, vAlphaCutout.x), gl_FragCoord.xy, 0.0)) discard;
+  } else if (alpha < vAlphaCutout.x) {
+    discard;
+  }
 }
 `;
 
@@ -292,13 +323,14 @@ export const GLASS_TINT_CUTOUT_FRAG = `#version 300 es
 precision highp float;
 in vec4 vLightPosition;
 in vec3 vUv;
-flat in float vAlphaCutout;
+flat in vec2 vAlphaCutout;
 in vec3 vGlassWorld;
 
 uniform vec4 uGlassPane;
 uniform vec4 uGlassLight;
 uniform highp sampler2DArray uCutoutMap;
 ${CUTOUT_COVERAGE_GLSL}
+${CUTOUT_DITHER_GLSL}
 out vec4 outTint;
 
 void main() {
@@ -306,6 +338,11 @@ void main() {
   vec3 at = vec3(vUv.xy, floor(vUv.z + 0.5));
   float alpha = cutoutAlpha(texture(uCutoutMap, at).a, vUv.xy * vec2(textureSize(uCutoutMap, 0).xy));
 ${GLASS_TINT_BODY}
-  if (alpha < vAlphaCutout) discard;
+  /* The depth cutout's own test, so the colour lands exactly where the depth does. */
+  if (vAlphaCutout.y > 0.5) {
+    if (!cutoutKeeps(cutoutShare(alpha, vAlphaCutout.x), gl_FragCoord.xy, 0.0)) discard;
+  } else if (alpha < vAlphaCutout.x) {
+    discard;
+  }
 }
 `;

package/src/render/shaders/flat/anisotropic.ts

@@ -0,0 +1,68 @@
+/**
+ * The anisotropic model in GLSL: GGX stretched along a direction in the surface, after glTF's
+ * `KHR_materials_anisotropy` — `anisotropicLobe.ts` is the same arithmetic, and its tests hold it to
+ * the standard lobe at strength 0 and to the widths' ratio at its half maximum.
+ *
+ * **The direction** is the tangent frame's, turned by the material's rotation, and by the model
+ * map's red and green where one is bound (a direction encoded −1 to 1, glTF's packing), its blue
+ * scaling the strength. **The environment** is reflected about a normal bent toward the stretch, as
+ * Filament and three.js do: a streak of sky across a brushed disc rather than a round spot, at the
+ * cost of a reflection that is not the exact anisotropic integral.
+ *
+ * Lamps widen both of the lobe's widths by the source's angle, as `sphereLobe` widens the standard
+ * lobe, with the energy kept; at strength 0 that is `sphereLobe` exactly.
+ */
+export const ANISOTROPIC_GLSL = /* glsl */ `
+/* The stretch's frame and strength, gathered once with the surface. */
+vec3 aAlong;
+vec3 aAcross;
+float aStrength;
+
+void anisotropicSurface() {
+  vec2 direction = vec2(1.0, 0.0);
+  float strength = uModelParams[0].x;
+  if (uModelParams[1].w > 0.0) {
+    vec2 mapped = mMap.rg * 2.0 - 1.0;
+    direction = dot(mapped, mapped) > 1e-8 ? normalize(mapped) : direction;
+    strength *= mMap.b;
+  }
+  vec2 turned = vec2(
+    direction.x * uModelParams[0].y - direction.y * uModelParams[0].z,
+    direction.x * uModelParams[0].z + direction.y * uModelParams[0].y
+  );
+  aAlong = normalize(mTangent * turned.x + mBitangent * turned.y);
+  aAcross = cross(mNormal, aAlong);
+  aStrength = strength;
+}
+
+/** The stretched lobe at a half vector, 1 at the mirror direction: anisotropicLobe.ts. */
+float anisotropicLobe(vec3 h, float sourceRadius, float dist) {
+  float alpha = max(mRoughness * mRoughness, MIN_LOBE_ALPHA);
+  float alongWidth = alpha + (1.0 - alpha) * aStrength * aStrength;
+  float grow = sourceRadius / max(2.0 * dist, 1e-3);
+  float alongWide = clamp(alongWidth + grow, alongWidth, 1.0);
+  float acrossWide = clamp(alpha + grow, alpha, 1.0);
+  float energy = (alongWidth / alongWide) * (alpha / acrossWide);
+  float x = dot(aAlong, h) / alongWide;
+  float y = dot(aAcross, h) / acrossWide;
+  float z = dot(mNormal, h);
+  float d = x * x + y * y + z * z;
+  return energy / max(d * d, 1e-8);
+}
+
+void anisotropicLight(vec3 l, float sourceRadius, float dist) {
+  float ndl = max(dot(mNormal, l), 0.0);
+  vec3 h = normalize(l + mToEye);
+  vec3 tint = mix(mSpecColor, vec3(1.0), pow(1.0 - max(dot(mToEye, h), 0.0), 5.0) * mMetal);
+  mDiffuse = mAlbedo * ndl * (1.0 - mMetal);
+  mSpecular = ndl > 0.0 ? tint * anisotropicLobe(h, sourceRadius, dist) : vec3(0.0);
+}
+
+/* The environment's normal, bent toward the stretch by its strength and the surface's roughness. */
+vec3 anisotropicReflectNormal(vec3 n) {
+  vec3 across = cross(aAcross, mToEye);
+  vec3 bent = cross(across, aAcross);
+  float bend = aStrength * clamp(5.0 * mRoughness, 0.0, 1.0);
+  return normalize(mix(n, bent, bend));
+}
+`;

package/src/render/shaders/flat/eye.ts

@@ -0,0 +1,82 @@
+/**
+ * The eye model in GLSL: `eyeRefraction.ts` is the refraction's arithmetic, and its tests hold it
+ * to no shift head-on, the refracted crossing at 30°, a bounded shift edge-on and the map-less iris.
+ *
+ * **The iris is moved before any map is read** (`modelSurfaceAt`), by how far the eye's ray crosses
+ * the iris plane after the cornea bends it, so the whole iris — colour, relief, the model's own
+ * channels — moves as one. The crossing is turned into texture coordinates by the tangent frame and
+ * by how many of them a metre spans here, which the screen's derivatives say: so it is in uniform
+ * control flow, as `modelSurfaceAt` is. **What it gives up** is an anisotropic mapping — a texture
+ * stretched one way more than the other moves by the average of the two.
+ *
+ * **The model map**: red is the iris (1 inside), green the cornea's height above the iris plane as a
+ * share of `irisDepth`. Without one, the iris is a disc of `irisRadius` about the texture's centre
+ * and the height is `irisDepth` throughout.
+ *
+ * **Lit as an eye is**: the iris by a normal mirrored about the axis — concave where the cornea is
+ * convex, so light pools on the side away from it — and the sclera by the surface's own; and over
+ * both, the cornea's highlight, normalised GGX at `corneaRoughness` with the Fresnel of index 1.336,
+ * in lamp units like skin's. The environment is reflected at the cornea's split-sum share.
+ */
+import { CORNEA_F0, EYE_MIN_DESCENT } from '../../eyeRefraction.ts';
+
+export const EYE_GLSL = /* glsl */ `
+const float CORNEA_F0 = ${CORNEA_F0.toFixed(9)};
+const float EYE_MIN_DESCENT = ${EYE_MIN_DESCENT.toFixed(4)};
+
+/* How much of this texel is iris, gathered with the surface. */
+float eIris;
+
+/** Where the iris is without a map: a disc of the model's radius about the centre, a soft limbus. */
+float eyeIrisDisc(vec2 uv) {
+  float r = length(uv - 0.5);
+  return 1.0 - smoothstep(uModelParams[0].x - 0.01, uModelParams[0].x + 0.01, r);
+}
+
+/** The iris's texture coordinate, moved by the cornea: \`eyeRefraction.ts\`. Before any map is read. */
+vec3 eyeRefract(vec3 at) {
+  vec3 n = normalize(vNormal);
+  vec3 axis = uModelParams[1].xyz;
+  vec4 map = texture(uModelMap, at);
+  bool mapped = uModelParams[1].w > 0.0;
+  float iris = mapped ? map.r : eyeIrisDisc(at.xy);
+  float height = uModelParams[0].y * (mapped ? map.g : 1.0);
+  vec3 ray = refract(-normalize(uCameraPos - vWorldPos), n, 1.0 / uModelParams[0].z);
+  float descent = max(-dot(ray, axis), EYE_MIN_DESCENT);
+  vec3 travel = ray * (height / descent);
+  vec3 across = travel - axis * dot(travel, axis);
+  mat3 frame = tangentFrame(n, vWorldPos, vUv.xy, vTangent, vHasTangents);
+  /* How many texture coordinates a metre spans here, from the screen's two derivatives. */
+  float perMetre = length(fwidth(vUv.xy)) / max(length(fwidth(vWorldPos)), 1e-9);
+  vec2 shift = vec2(dot(across, frame[0]), dot(across, frame[1])) * (perMetre * iris);
+  return vec3(at.xy + shift, at.z);
+}
+
+void eyeSurface(vec3 at) {
+  eIris = uModelParams[1].w > 0.0 ? mMap.r : eyeIrisDisc(at.xy);
+  mRoughness = uModelParams[0].w;
+}
+
+void eyeLight(vec3 l, float sourceRadius, float dist) {
+  vec3 axis = uModelParams[1].xyz;
+  /* The iris is concave where the cornea over it is convex: the surface's normal mirrored about the axis. */
+  vec3 irisNormal = normalize(2.0 * dot(mNormal, axis) * axis - mNormal);
+  vec3 lit = normalize(mix(mNormal, irisNormal, eIris));
+  mDiffuse = mAlbedo * max(dot(lit, l), 0.0) * (1.0 - mMetal);
+
+  float ndl = max(dot(mNormal, l), 0.0);
+  vec3 h = normalize(l + mToEye);
+  float ndh = max(dot(mNormal, h), 0.0);
+  float ndv = max(dot(mNormal, mToEye), 1e-4);
+  float grow = sourceRadius / max(2.0 * dist, 1e-3);
+  float alpha = min(max(mRoughness * mRoughness, MIN_LOBE_ALPHA) + grow, 1.0);
+  float f = CORNEA_F0 + (1.0 - CORNEA_F0) * pow(1.0 - max(dot(mToEye, h), 0.0), 5.0);
+  mSpecular = vec3(3.14159265 * f * smithMasking(ndl, ndv, alpha) * ggxLobe(ndh, alpha) * ndl);
+}
+
+/** The environment at the cornea's Fresnel, by the split sum's share at its own roughness. */
+float eyeReflectance() {
+  vec2 dfg = envBrdfApprox(max(dot(mNormal, mToEye), 0.0), uModelParams[0].w);
+  return CORNEA_F0 * dfg.x + dfg.y;
+}
+`;

package/src/render/shaders/flat/hair.ts

@@ -0,0 +1,102 @@
+/**
+ * The hair model in GLSL: `hairLobes.ts` is the same arithmetic, and its tests hold the lobes to
+ * their tilted peaks, the transmitted lobe to the backlight, the sum to what a white strand
+ * receives, and every term to a finite answer where the geometry degenerates.
+ *
+ * **The strand is the tangent, root to tip.** The model map's green turns each strand's tilt by up
+ * to half of it either way (0.5 is none) and its blue is occlusion, which the sky, DriftLight and
+ * the environment's reflection take and the lamps do not — their shadows are theirs to cast. The
+ * red is not read: a colour from root to tip is the albedo map's to carry.
+ *
+ * **The environment** is the reflected lobe's: mirrored about a normal turned toward the eye across
+ * the strand, which is the cone R lies on, at the strand's own Fresnel — the lobe integrates to it
+ * over every direction of arrival. **What it gives up** is the two transmitted lobes against the
+ * sky, which a head of hair lit from behind by an open sky would show as a rim; the lamps carry
+ * them.
+ */
+import { HAIR_F0, HAIR_MIN_BETA, HAIR_SCATTER_SPHERE } from '../../hairLobes.ts';
+
+export const HAIR_GLSL = /* glsl */ `
+const float HAIR_F0 = ${HAIR_F0.toFixed(9)};
+const float HAIR_MIN_BETA = ${HAIR_MIN_BETA.toFixed(3)};
+const float HAIR_SCATTER_SPHERE = ${HAIR_SCATTER_SPHERE.toFixed(3)};
+
+/* This texel's tilt, gathered once with the surface. */
+float hShift;
+
+void hairSurface() {
+  hShift = uModelParams[0].x * (0.5 + mMap.g);
+}
+
+/** A longitudinal lobe: a normalised Gaussian of width \`beta\` at \`x\` from its centre. */
+float hairLongitudinal(float beta, float x) {
+  return exp(-0.5 * x * x / (beta * beta)) / (2.5066283 * beta);
+}
+
+float hairFresnel(float cosine) {
+  float c = 1.0 - clamp(cosine, 0.0, 1.0);
+  return HAIR_F0 + (1.0 - HAIR_F0) * c * c * c * c * c;
+}
+
+/** The normal turned toward the eye across the strand: the scatter's and the environment's. */
+vec3 hairAcross() {
+  vec3 across = mToEye - mTangent * dot(mTangent, mToEye);
+  float length2 = dot(across, across);
+  return length2 > 1e-8 ? across * inversesqrt(length2) : mNormal;
+}
+
+void hairLight(vec3 l, float sourceRadius, float dist) {
+  vec3 t = mTangent;
+  float sinI = clamp(dot(t, l), -1.0, 1.0);
+  float sinO = clamp(dot(t, mToEye), -1.0, 1.0);
+  /* Floored for the half angle's limit, whose single-precision cosine is negative: hairLobes.ts. */
+  float cosD = max(cos(0.5 * abs(asin(sinO) - asin(sinI))), 1e-3);
+  vec3 lp = l - sinI * t;
+  vec3 vp = mToEye - sinO * t;
+  float cosPhi = dot(lp, vp) * inversesqrt(dot(lp, lp) * dot(vp, vp) + 1e-4);
+  float cosHalfPhi = sqrt(clamp(0.5 + 0.5 * cosPhi, 0.0, 1.0));
+  float beta = max(mRoughness * mRoughness, HAIR_MIN_BETA);
+  float grow = sourceRadius / max(2.0 * dist, 1e-3);
+  float x = sinI + sinO;
+
+  float r = hairLongitudinal(beta + grow, x + 2.0 * hShift) * 0.25 * cosHalfPhi
+    * hairFresnel(sqrt(clamp(0.5 + 0.5 * dot(l, mToEye), 0.0, 1.0)));
+
+  float a = 1.0 / (1.19 / cosD + 0.36 * cosD);
+  float h = cosHalfPhi * (1.0 + a * (0.6 - 0.8 * cosPhi));
+  float fTT = hairFresnel(cosD * sqrt(clamp(1.0 - h * h, 0.0, 1.0)));
+  float tt = hairLongitudinal(0.5 * beta + grow, x - hShift) * exp(-3.65 * cosPhi - 3.98)
+    * (1.0 - fTT) * (1.0 - fTT) * uModelParams[0].z;
+  float ttPower = 0.5 * sqrt(clamp(1.0 - h * h * a * a, 0.0, 1.0)) / cosD;
+
+  float fTRT = hairFresnel(0.5 * cosD);
+  float trt = hairLongitudinal(2.0 * beta + grow, x - 3.0 * hShift) * exp(17.0 * cosPhi - 16.78)
+    * (1.0 - fTRT) * (1.0 - fTRT) * fTRT;
+
+  /* Above zero, so pow never takes the logarithm of nothing: hairLobes.ts. */
+  vec3 fibre = max(mAlbedo, vec3(1e-4));
+  /* π: the published lobes are per unit irradiance, and a lamp here is π of that. */
+  mSpecular = 3.14159265 * (vec3(r) + tt * pow(fibre, vec3(ttPower)) + trt * pow(fibre, vec3(0.8 / cosD)));
+  float wrapped = clamp((dot(hairAcross(), l) + 1.0) * 0.25, 0.0, 1.0);
+  mDiffuse = sqrt(mAlbedo) * uModelParams[0].y * mix(wrapped, 1.0 - abs(sinI), 0.33);
+}
+
+/**
+ * A shadow on the scatter: light that reaches a strand in another's shadow has passed through
+ * hair to get there, so a penumbra deepens toward the fibre's own hue.
+ */
+vec3 hairShade(float shadow) {
+  vec3 hue = mAlbedo / max(dot(mAlbedo, vec3(0.2126, 0.7152, 0.0722)), 1e-4);
+  return shadow * pow(max(hue, vec3(1e-4)), vec3(1.0 - shadow));
+}
+
+/** Light from every side, through the scatter term: \`HAIR_SCATTER_SPHERE\` says why that number. */
+vec3 hairAround(vec3 light) {
+  return sqrt(mAlbedo) * (uModelParams[0].y * HAIR_SCATTER_SPHERE * mMap.b) * light;
+}
+
+/** The reflected lobe's share of the environment: its Fresnel, which is what it integrates to. */
+float hairReflectance() {
+  return hairFresnel(dot(hairAcross(), mToEye)) * mMap.b;
+}
+`;

package/src/render/shaders/flat/index.ts

@@ -3,15 +3,18 @@ import { OCTAHEDRAL_GLSL } from '../octahedral.ts';
 import { PROBEGRID_GLSL } from './probeGrid.ts';
 import { TANGENT_FRAME_GLSL } from '../tangentFrame.ts';
 import { CUTOUT_COVERAGE_GLSL } from '../cutoutCoverage.ts';
+import { CUTOUT_DITHER_GLSL } from '../../cutoutDither.ts';
 import { preambleGlsl } from './preamble.ts';
 import { LOBES_GLSL } from './lobes.ts';
 import { POINTSHADOW_GLSL } from './pointShadow.ts';
 import { DIRECTIONALSHADOW_GLSL } from './directionalShadow.ts';
 import { glassTintGlsl, litSwitchesGlsl } from './glassTint.ts';
 import { MORPH_GLSL } from '../morph.ts';
+import { CLOTH_BINDING_GLSL } from '../clothBinding.ts';
 import { SKINNING_GLSL } from '../skinning.ts';
 import { SURFACE_GLSL } from './surface.ts';
 import { MAIN_GLSL } from './main.ts';
+import { MODELS_GLSL } from './models.ts';
 import { DRIFT_LIGHT_GLSL } from './driftLight.ts';
 import { SURFACE_EFFECTS_GLSL } from './surfaceEffects.ts';
 import { CHANNEL_ATTRIBUTE, CHANNEL_BEND } from '../vertexChannel.ts';
@@ -62,6 +65,11 @@ uniform mat4 uLightViewProj;
  * when no texture is bound.
  */
 uniform vec2 uUvScale;
+/**
+ * Where the texture starts, per axis, added after the scale: \`uv * uUvScale + uUvOffset\`. What
+ * picks a cell of a flipbook or an atlas through the material. See \`SurfaceMaterial.uOffset\`.
+ */
+uniform vec2 uUvOffset;
 
 /*
  * **Placement and tint are declared last of the shared uniforms, and the position is the
@@ -140,6 +148,10 @@ ${CHANNEL_BEND}
 #if MORPHED
 ${MORPH_GLSL}
 #endif
+#if SKINNED
+/* Samplers and a constant alone, so no field of the vertex block moves. See clothBinding.ts. */
+${CLOTH_BINDING_GLSL}
+#endif
 
 out vec3 vNormal;
 out vec3 vColor;
@@ -213,9 +225,11 @@ void main() {
   mat4 skin = skinMatrix();
   vec4 local = skin * vec4(basePosition, 1.0);
   vec3 localNormal = mat3(skin) * aNormal;
+  vec3 localTangent = mat3(skin) * aTangent.xyz;
 #else
   vec4 local = vec4(basePosition, 1.0);
   vec3 localNormal = aNormal;
+  vec3 localTangent = aTangent.xyz;
 #endif
 #if INSTANCED
   mat4 model = mat4(aInstanceModel0, aInstanceModel1, aInstanceModel2, aInstanceModel3);
@@ -236,20 +250,42 @@ void main() {
   vec3 bent = channelBend(world.xyz, aChannel.x);
 #endif
   world = vec4(bent, world.w);
-  vWorldPos = world.xyz;
   // Rotation/translation-only models (our case): mat3 is a valid normal matrix.
   vec3 worldNormal = mat3(model) * localNormal;
+  /*
+   * **The tangent turns as the normal does**, because the fragment stage crosses it with the
+   * world-space normal to build its frame. It went out in the mesh's own space until 4.8.4, which
+   * is world space only for a mesh that is moved and never turned: a turned or skinned mesh lit its
+   * normal map, and anything reading a direction along its surface, from the wrong side.
+   */
+  vec3 worldTangent = mat3(model) * localTangent;
+#if SKINNED
+  /*
+   * **Toward the cloth, after the skeleton and the bend.** The simulation already swings with the
+   * wind it was given, so the bend moves only the skinned part; the weight painted per vertex says
+   * how much of the cloth's place and turn the vertex takes. See clothBinding.ts.
+   */
+  if (CLOTH_BOUND) {
+    vec3 clothPosition;
+    mat3 turn;
+    float follow = clothPlace(clothPosition, turn);
+    world = vec4(mix(world.xyz, clothPosition, follow), world.w);
+    worldNormal = normalize(mix(worldNormal, turn * aNormal, follow));
+    worldTangent = mix(worldTangent, turn * aTangent.xyz, follow);
+  }
+#endif
+  vWorldPos = world.xyz;
   vNormal = worldNormal;
   vLightPos = uLightViewProj * world;
   vColor = aColor * tint;
   vEmissive = aEmissive;
   vSpecular = aSpecular;
-  vUv = vec3(aUv.xy * uUvScale, aUv.z);
+  vUv = vec3(aUv.xy * uUvScale + uUvOffset, aUv.z);
   vEmissiveColor = aEmissiveColor;
   vRoughness = aRoughness;
   vGrain = aGrain;
   vRelief = aRelief;
-  vTangent = aTangent;
+  vTangent = vec4(worldTangent, aTangent.w);
 #if INSTANCED
   /* No channel on this path; the neutral values are what every mesh read before it existed. */
   vSkyDirect = 1.0;
@@ -529,8 +565,11 @@ export function flatFrag(options: FlatShaderOptions): string {
       TANGENT_FRAME_GLSL,
       /* Unconditional for the same reason, and called only where a cutoff was asked for. */
       CUTOUT_COVERAGE_GLSL,
+      CUTOUT_DITHER_GLSL,
       DRIFT_LIGHT_GLSL,
       SURFACE_EFFECTS_GLSL,
+      /* Depth zero and after the tangent frame and the lobes it calls; see models.ts. */
+      MODELS_GLSL,
       MAIN_GLSL,
     ].join('\n'),
     {