@plasius/gpu-renderer 0.2.46 → 0.2.48

package/src/native-scene-shader.js

@@ -11,12 +11,18 @@ struct Frame {
 @group(0) @binding(0) var<uniform> frame: Frame;
 @group(1) @binding(0) var shadowMap: texture_depth_2d;
 @group(1) @binding(1) var shadowSampler: sampler_comparison;
-@group(2) @binding(0) var reflectionMap: texture_2d<f32>;
-@group(2) @binding(1) var reflectionSampler: sampler;
+@group(3) @binding(0) var reflectionMap: texture_2d<f32>;
+@group(3) @binding(1) var reflectionSampler: sampler;
+@group(2) @binding(0) var baseColourMap: texture_2d<f32>;
+@group(2) @binding(1) var normalMap: texture_2d<f32>;
+@group(2) @binding(2) var ormMap: texture_2d<f32>;
+@group(2) @binding(3) var materialSampler: sampler;
+@group(2) @binding(4) var<uniform> materialParameters: vec4f;
+@group(2) @binding(5) var clearcoatMap: texture_2d<f32>;
 struct Surface {
   @builtin(position) clip: vec4f,
   @location(0) world: vec3f, @location(1) normal: vec3f,
-  @location(2) colour: vec3f, @location(3) material: vec3f,
+  @location(2) colour: vec3f, @location(3) material: vec3f, @location(4) uv: vec2f,
 };
 fn project(p: vec3f) -> vec4f {
   let d = p - frame.eye.xyz;
@@ -30,8 +36,8 @@ fn lightProject(p: vec3f) -> vec4f {
     dot(d, frame.lightUp.xyz) / 34.0, dot(d, frame.lightForward.xyz) / 100.0, 1.0);
 }
 @vertex fn surfaceVertex(@location(0) p: vec3f, @location(1) n: vec3f,
-  @location(2) c: vec3f, @location(3) m: vec3f) -> Surface {
-  return Surface(project(p), p, n, c, m);
+  @location(2) c: vec3f, @location(3) m: vec3f, @location(4) uv: vec2f) -> Surface {
+  return Surface(project(p), p, n, c, m, uv);
 }
 @vertex fn shadowVertex(@location(0) p: vec3f) -> @builtin(position) vec4f {
   return lightProject(p);
@@ -84,17 +90,25 @@ fn visibility(p: vec3f, n: vec3f) -> f32 {
   }
   return result / 9.0;
 }
-fn brdf(c: vec3f, n: vec3f, v: vec3f, roughness: f32, metal: f32) -> vec3f {
+// Dielectric coating is evaluated independently from the coloured substrate.
+// This returns the microfacet lobe without Fresnel, including the cosine term.
+fn specularLobe(n: vec3f, v: vec3f, roughness: f32) -> f32 {
   let l = frame.sun.xyz; let h = normalize(l + v);
   let nl = max(dot(n,l),0.0); let nv = max(dot(n,v),0.001);
-  let nh = max(dot(n,h),0.0); let vh = max(dot(v,h),0.0);
+  let nh = max(dot(n,h),0.0);
   let a = max(0.035, roughness * roughness); let a2 = a * a;
   let d = a2 / max(0.00001, 3.14159265 * pow(nh * nh * (a2 - 1.0) + 1.0, 2.0));
   let k = pow(roughness + 1.0, 2.0) / 8.0;
   let g = (nl / (nl * (1.0-k) + k)) * (nv / (nv * (1.0-k) + k));
+  return d * g / max(0.001, 4.0*nl*nv) * nl;
+}
+fn brdf(c: vec3f, n: vec3f, v: vec3f, roughness: f32, metal: f32) -> vec3f {
+  let h = normalize(frame.sun.xyz + v);
+  let nl = max(dot(n,frame.sun.xyz),0.0);
+  let vh = max(dot(v,h),0.0);
   let f0 = mix(vec3f(0.04), c, metal);
   let f = f0 + (1.0-f0) * pow(1.0-vh, 5.0);
-  return ((1.0-f) * (1.0-metal) * c / 3.14159265 + d * g * f / max(0.001, 4.0*nl*nv)) * nl;
+  return (1.0-f) * (1.0-metal) * c / 3.14159265 * nl + specularLobe(n,v,roughness) * f;
 }
 fn fog(c: vec3f, p: vec3f) -> vec3f {
   let amount = 1.0 - exp(-distance(frame.eye.xyz, p) * 0.0018);
@@ -102,23 +116,58 @@ fn fog(c: vec3f, p: vec3f) -> vec3f {
 }
 fn surfaceRadiance(s: Surface, front: bool) -> vec3f {
   let facing = select(select(-1.0,1.0,front),select(1.0,-1.0,front),frame.info.y>0.5);
-  var n = normalize(s.normal) * facing;
+  let coatNormal = normalize(s.normal) * facing;
+  var n = coatNormal;
   let v = normalize(frame.eye.xyz - s.world);
-  var c = s.colour;
-  if (s.material.z > 2.5) {
+  // Derivatives and samples must be uniform across each fragment quad.
+  // Relative degeneracy: raw derivative magnitudes shrink with model scale and
+  // zoom. An absolute tangent cutoff silently disabled normal maps in close-ups.
+  let dpScale = max(length(dpdx(s.world)), length(dpdy(s.world)));
+  let uvScale = max(length(dpdx(s.uv)), length(dpdy(s.uv)));
+  let dx = dpdx(s.world) / max(dpScale, 1e-20);
+  let dy = dpdy(s.world) / max(dpScale, 1e-20);
+  let ux = dpdx(s.uv) / max(uvScale, 1e-20);
+  let uy = dpdy(s.uv) / max(uvScale, 1e-20);
+  let determinant = ux.x * uy.y - ux.y * uy.x;
+  let tangent = dx * uy.y - dy * ux.y;
+  let bitangent = dy * ux.x - dx * uy.x;
+  let sampledNormal = textureSample(normalMap, materialSampler, s.uv).xyz * 2.0 - 1.0;
+  var c = s.colour * textureSample(baseColourMap, materialSampler, s.uv).rgb;
+  let orm = textureSample(ormMap, materialSampler, s.uv).rgb;
+  let coatSample = textureSample(clearcoatMap, materialSampler, s.uv).rg;
+  let roughness = clamp(s.material.x * orm.g, 0.04, 1.0);
+  let metalness = clamp(s.material.y * orm.b, 0.0, 1.0);
+  let orthogonalTangent = tangent - n * dot(n,tangent);
+  let orthogonalBitangent = bitangent - n * dot(n,bitangent);
+  if (dpScale > 1e-20 && uvScale > 1e-20 && abs(determinant) > 1e-6 && dot(orthogonalTangent,orthogonalTangent) > 1e-12 && dot(orthogonalBitangent,orthogonalBitangent) > 1e-12) {
+    let t = normalize(orthogonalTangent) * sign(determinant);
+    let b = normalize(orthogonalBitangent) * sign(determinant);
+    n = normalize(t * sampledNormal.x * materialParameters.x + b * sampledNormal.y * materialParameters.x + n * max(0.001,sampledNormal.z));
+  }
+  if (materialParameters.y < 0.5 && s.material.z > 2.5) {
     let rock = smoothstep(0.45,0.68,noise(s.world*0.27));
     c = mix(c,vec3f(0.16,0.145,0.11),rock*0.7);
     c *= 0.75+0.45*noise(s.world*2.4);
     n = normalize(n+vec3f(noise(s.world*4.0)-0.5,0,noise(s.world*4.0+vec3f(13))-0.5)*0.28);
-  } else if (s.material.z > 0.5 && s.material.z < 1.5) {
+  } else if (materialParameters.y < 0.5 && s.material.z > 0.5 && s.material.z < 1.5) {
     let grain = noise(s.world * vec3f(18, 3, 1.6));
     c *= 0.82 + 0.30 * grain;
-  } else if (s.material.z > 1.5) { c *= 0.88 + 0.18 * noise(s.world * 12.0); }
+  } else if (materialParameters.y < 0.5 && s.material.z > 1.5) { c *= 0.88 + 0.18 * noise(s.world * 12.0); }
   let hemi = mix(vec3f(0.06,0.05,0.035), vec3f(0.16,0.22,0.29), n.y * 0.5 + 0.5);
-  let direct = brdf(c, n, v, s.material.x, s.material.y) * vec3f(3.0, 2.65, 2.15) * visibility(s.world, n);
-  let ambient = c * hemi * (1.0 - s.material.y * 0.7);
-  let env = sky(reflect(-v,n)) * mix(vec3f(0.04), c, s.material.y) * (1.0-s.material.x) * 0.30;
-  return fog(direct + ambient + env, s.world);
+  let direct = brdf(c, n, v, roughness, metalness) * vec3f(3.0, 2.65, 2.15) * visibility(s.world, n);
+  let ambient = c * hemi * (1.0 - metalness * 0.7) * orm.r;
+  let env = sky(reflect(-v,n)) * mix(vec3f(0.04), c, metalness) * (1.0-roughness) * orm.r * 0.30;
+  let baseRadiance = direct + ambient + env;
+  let coatCoverage = materialParameters.z * coatSample.r;
+  if (coatCoverage <= 0.0) { return fog(baseRadiance,s.world); }
+  // KHR_materials_clearcoat's simple Fresnel layering: varnish has its own
+  // smooth normal and roughness. Its reflection never inherits the wood colour.
+  let coatFresnel = 0.04 + 0.96 * pow(1.0-clamp(abs(dot(coatNormal,v)),0.0,1.0),5.0);
+  let coatWeight = coatCoverage * coatFresnel;
+  let coatRoughness = clamp(materialParameters.w * coatSample.g,0.04,1.0);
+  let coatDirect = vec3f(3.0,2.65,2.15) * specularLobe(coatNormal,v,coatRoughness) * visibility(s.world,coatNormal);
+  let coatEnvironment = sky(reflect(-v,coatNormal)) * (1.0-coatRoughness) * orm.r * 0.30;
+  return fog(baseRadiance * (1.0-coatWeight) + (coatDirect+coatEnvironment) * coatWeight, s.world);
 }
 @fragment fn surfaceFragment(s: Surface, @builtin(front_facing) front: bool) -> @location(0) vec4f {
   return vec4f(display(surfaceRadiance(s,front)),1);
@@ -172,7 +221,8 @@ struct WaterResult { @location(0) colour: vec4f, @builtin(frag_depth) depth: f32
   return vec4f(sky(cameraRay(pixel.xy)),1);
 }
 @fragment fn reflectionSurface(s: Surface, @builtin(front_facing) front: bool) -> @location(0) vec4f {
+  let radiance = surfaceRadiance(s,front);
   if (s.world.y < frame.viewport.z) { discard; }
-  return vec4f(surfaceRadiance(s,front),1);
+  return vec4f(radiance,1);
 }
 `;

package/src/native-surface-materials.js

@@ -0,0 +1,124 @@
+// Decoded RGBA contract matches gpu-shared's glTF loader. No network or DOM work.
+const MAX_BYTES = 64 * 1024 * 1024;
+const MAPS = ["baseColor", "normal", "orm", "clearcoatMap"];
+const defaults = {
+  baseColor: [255, 255, 255, 255],
+  normal: [128, 128, 255, 255],
+  orm: [255, 255, 255, 255],
+  clearcoatMap: [255, 255, 255, 255],
+};
+const dimension = (n) =>
+  Number.isInteger(n) && n >= 1 && n <= 2048 && (n & (n - 1)) === 0;
+
+export function validateNativeMaterials(materials) {
+  if (!Array.isArray(materials) || materials.length > 16)
+    throw new Error("materials must contain at most 16 entries.");
+  let bytes = 0;
+  for (const material of materials) {
+    if (!material || typeof material !== "object")
+      throw new Error("Each material must be an object.");
+    if (
+      !Number.isFinite(material.normalScale ?? 1) ||
+      (material.normalScale ?? 1) < 0 ||
+      (material.normalScale ?? 1) > 4
+    ) {
+      throw new Error("material normalScale must be between 0 and 4.");
+    }
+    for (const key of ["clearcoat", "clearcoatRoughness"]) {
+      const value = material[key] ?? 0;
+      if (!Number.isFinite(value) || value < 0 || value > 1) {
+        throw new Error(`material ${key} must be between 0 and 1.`);
+      }
+    }
+    for (const key of MAPS) {
+      const map = material[key];
+      if (map === undefined) continue;
+      if (
+        !map ||
+        !dimension(map.width) ||
+        !dimension(map.height) ||
+        !(
+          map.data instanceof Uint8Array ||
+          map.data instanceof Uint8ClampedArray
+        ) ||
+        map.data.length !== map.width * map.height * 4
+      ) {
+        throw new Error(
+          `material ${key} texture must contain RGBA8 data with power-of-two dimensions between 1 and 2048.`,
+        );
+      }
+      bytes += map.data.byteLength;
+      if (bytes > MAX_BYTES)
+        throw new Error("material textures exceed the 64 MiB source budget.");
+    }
+  }
+}
+const linear = (x) => (x <= 0.04045 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4);
+const srgb = (x) =>
+  x <= 0.0031308 ? x * 12.92 : 1.055 * x ** (1 / 2.4) - 0.055;
+
+function nextMip(image, colour) {
+  const width = Math.max(1, image.width / 2),
+    height = Math.max(1, image.height / 2);
+  const data = new Uint8Array(width * height * 4);
+  for (let y = 0; y < height; y++)
+    for (let x = 0; x < width; x++)
+      for (let c = 0; c < 4; c++) {
+        let sum = 0;
+        for (let dy = 0; dy < 2; dy++)
+          for (let dx = 0; dx < 2; dx++) {
+            const offset =
+              (Math.min(image.height - 1, y * 2 + dy) * image.width +
+                Math.min(image.width - 1, x * 2 + dx)) *
+                4 +
+              c;
+            const value = image.data[offset] / 255;
+            sum += colour && c < 3 ? linear(value) : value;
+          }
+        data[(y * width + x) * 4 + c] = Math.round(
+          255 * (colour && c < 3 ? srgb(sum / 4) : sum / 4),
+        );
+      }
+  return { width, height, data };
+}
+
+export function createNativeMaterialTextures(device, materials, own) {
+  // Index zero is the backwards-compatible material; caller materials start at one.
+  return [{}, ...materials].map((material, index) => {
+    const result = {
+      normalScale: material.normal ? (material.normalScale ?? 1) : 0,
+      authored: ["baseColor", "normal", "orm"].some((key) => material[key]),
+      clearcoat: material.clearcoat ?? 0,
+      clearcoatRoughness: material.clearcoatRoughness ?? 0,
+    };
+    for (const key of MAPS) {
+      let level = material[key] ?? {
+        width: 1,
+        height: 1,
+        data: new Uint8Array(defaults[key]),
+      };
+      const mipLevelCount = 1 + Math.log2(Math.max(level.width, level.height));
+      const texture = own(
+        device.createTexture({
+          label: `native.material.${index}.${key}`,
+          size: { width: level.width, height: level.height },
+          format: key === "baseColor" ? "rgba8unorm-srgb" : "rgba8unorm",
+          mipLevelCount,
+          usage: 0x06,
+        }),
+      );
+      for (let mipLevel = 0; mipLevel < mipLevelCount; mipLevel++) {
+        device.queue.writeTexture(
+          { texture, mipLevel },
+          level.data,
+          { bytesPerRow: level.width * 4, rowsPerImage: level.height },
+          { width: level.width, height: level.height, depthOrArrayLayers: 1 },
+        );
+        if (mipLevel + 1 < mipLevelCount)
+          level = nextMip(level, key === "baseColor");
+      }
+      result[key] = texture.createView();
+    }
+    return result;
+  });
+}