@aura3d/rendering 1.1.0 → 1.3.0

package/src/ShaderLibrary.ts

@@ -1,6 +1,7 @@
 import { ShaderPreprocessor, type ShaderPreprocessOptions } from "./ShaderPreprocessor";
 import { DEFAULT_PBR_SHADER_MARKER, DEFAULT_PBR_SHADER_NAME } from "./PBRMaterial";
 import { SHADER_CHUNKS, validateShaderChunks } from "./ShaderChunks";
+import { registerAnimationToonShader } from "./animation/AnimationToonMaterial.js";
 
 export interface ShaderSourcePair {
   readonly name: string;
@@ -1322,7 +1323,7 @@ void main() {
   float metallic = mix(u_metallic, clamp(u_metallic * metallicRoughnessSample.b, 0.0, 1.0), step(0.5, u_metallicRoughnessTextureEnabled));
   float roughness = mix(u_roughness, clamp(u_roughness * metallicRoughnessSample.g, 0.0, 1.0), step(0.5, u_metallicRoughnessTextureEnabled));
   float occlusion = mix(1.0, mix(1.0, texture(u_occlusionTexture, v_uv).r, clamp(u_occlusionStrength, 0.0, 1.0)), step(0.5, u_occlusionTextureEnabled));
-  vec3 emissive = u_emissiveColor * u_emissiveStrength + a3dPbrDecodeEnvironmentSrgb(texture(u_emissiveTexture, v_uv).rgb) * step(0.5, u_emissiveTextureEnabled);
+  vec3 emissive = u_emissiveColor * u_emissiveStrength * mix(vec3(1.0), a3dPbrDecodeEnvironmentSrgb(texture(u_emissiveTexture, v_uv).rgb), step(0.5, u_emissiveTextureEnabled));
   vec3 materialBase = a3dApplyAdvancedPbrLobes(
     baseColor.rgb,
     u_clearcoatFactor,
@@ -1442,16 +1443,39 @@ void main() {
 precision highp float;
 layout(location = 0) in vec3 a_position;
 uniform mat4 u_modelViewProjection;
+// Uniform fast path (<= 4 targets / 64 verts):
 uniform vec4 u_morphPositionDeltas[256];
 uniform vec4 u_morphWeights;
 uniform float u_morphTargetCount;
+// Texture-backed path (lifts the 4/64 cap; see MorphTargetPlan.ts createMorphTargetPlan):
+uniform sampler2D u_morphDeltaTexture;
+uniform float u_morphUsesTexture;     // > 0.5 => sample deltas from the texture
+uniform float u_morphTextureWidth;    // = vertexCount
+uniform float u_morphRowsPerTarget;   // 1 = positions only, 2 = positions + normals
+uniform float u_morphWeightArray[64]; // per-target weights for the texture path
+vec3 sampleMorphTexel(float row, float vertex) {
+  // Fetch RGBA float texel at (x=vertex, y=row) using normalized coords + nearest filtering.
+  float u = (vertex + 0.5) / max(1.0, u_morphTextureWidth);
+  float height = u_morphTargetCount * u_morphRowsPerTarget;
+  float v = (row + 0.5) / max(1.0, height);
+  return texture(u_morphDeltaTexture, vec2(u, v)).xyz;
+}
 void main() {
-  int morphVertexIndex = clamp(gl_VertexID, 0, 63);
   vec3 morphDelta = vec3(0.0);
-  for (int target = 0; target < 4; ++target) {
-    if (float(target) < u_morphTargetCount) {
-      int morphIndex = target * 64 + morphVertexIndex;
-      morphDelta += u_morphPositionDeltas[morphIndex].xyz * u_morphWeights[target];
+  if (u_morphUsesTexture > 0.5) {
+    float vertex = float(gl_VertexID);
+    for (int target = 0; target < 64; ++target) {
+      if (float(target) >= u_morphTargetCount) break;
+      float row = float(target) * u_morphRowsPerTarget;
+      morphDelta += sampleMorphTexel(row, vertex) * u_morphWeightArray[target];
+    }
+  } else {
+    int morphVertexIndex = clamp(gl_VertexID, 0, 63);
+    for (int target = 0; target < 4; ++target) {
+      if (float(target) < u_morphTargetCount) {
+        int morphIndex = target * 64 + morphVertexIndex;
+        morphDelta += u_morphPositionDeltas[morphIndex].xyz * u_morphWeights[target];
+      }
     }
   }
   vec3 morphedPosition = a_position + morphDelta;
@@ -2734,5 +2758,9 @@ void main() {
 }
 `
   });
+  // Register the animation/cel toon program (banded N·L ramp + Fresnel rim).
+  // This is a real GLSL program compiled through the same library path as the
+  // built-in shaders; AnimationToonMaterial targets it via ANIMATION_TOON_SHADER_NAME.
+  registerAnimationToonShader(library);
   return library;
 }

package/src/WebGPUDevice.ts

@@ -360,6 +360,9 @@ class WebGPURenderTarget implements RenderTarget {
   }
 }
 
+/** Joint-palette capacity of the WebGPU skinning path — parity with the WebGL2 `u_jointMatrices[96]`. */
+export const MAX_WEBGPU_SKINNING_JOINTS = 96;
+
 export class WebGPUDevice implements RenderDevice {
   public readonly kind = "webgpu";
   public readonly info: RenderDeviceInfo;
@@ -1162,6 +1165,17 @@ export class WebGPUDevice implements RenderDevice {
     const modelMatrices = uniformRasterModelMatrices(command.uniforms, command.instanceCount ?? 1);
     const depthTest = command.renderState?.depthTest !== false && this.activeRenderTarget.depthPixels !== null;
     const depthWrite = command.renderState?.depthWrite !== false;
+    // Full joint-palette skinning (up to 96 joints, WebGL2 parity). readLocal applies morph then skin.
+    const jointPalette = jointPaletteFor(command.uniforms);
+    const format = command.vertexFormat;
+    const readLocal = (index: number): readonly [number, number, number] =>
+      skinLocalPosition(
+        readMorphedPosition(vertexBuffer.bytes, format.stride, position.offset, index, command.uniforms),
+        vertexBuffer.bytes,
+        format,
+        index,
+        jointPalette
+      );
     for (let instanceIndex = 0; instanceIndex < instanceMatrices.length; instanceIndex += 1) {
       const matrix = instanceMatrices[instanceIndex] ?? identityMatrix();
       const modelMatrix = modelMatrices[instanceIndex] ?? identityMatrix();
@@ -1170,9 +1184,9 @@ export class WebGPUDevice implements RenderDevice {
           const indexA = indices[offset]!;
           const indexB = indices[offset + 1]!;
           const indexC = indices[offset + 2]!;
-          const localA = readMorphedPosition(vertexBuffer.bytes, command.vertexFormat.stride, position.offset, indexA, command.uniforms);
-          const localB = readMorphedPosition(vertexBuffer.bytes, command.vertexFormat.stride, position.offset, indexB, command.uniforms);
-          const localC = readMorphedPosition(vertexBuffer.bytes, command.vertexFormat.stride, position.offset, indexC, command.uniforms);
+          const localA = readLocal(indexA);
+          const localB = readLocal(indexB);
+          const localC = readLocal(indexC);
           const a = transformPosition(localA, matrix);
           const b = transformPosition(localB, matrix);
           const c = transformPosition(localC, matrix);
@@ -1191,15 +1205,15 @@ export class WebGPUDevice implements RenderDevice {
         for (let offset = 0; offset + 1 < indices.length; offset += 2) {
           const indexA = indices[offset]!;
           const indexB = indices[offset + 1]!;
-          const a = transformPosition(readMorphedPosition(vertexBuffer.bytes, command.vertexFormat.stride, position.offset, indexA, command.uniforms), matrix);
-          const b = transformPosition(readMorphedPosition(vertexBuffer.bytes, command.vertexFormat.stride, position.offset, indexB, command.uniforms), matrix);
+          const a = transformPosition(readLocal(indexA), matrix);
+          const b = transformPosition(readLocal(indexB), matrix);
           const colorA = readVertexColor(vertexBuffer.bytes, command.vertexFormat.stride, colorAttribute?.offset, indexA);
           const colorB = readVertexColor(vertexBuffer.bytes, command.vertexFormat.stride, colorAttribute?.offset, indexB);
           rasterizeLine(this.activeRenderTarget, a, b, color, colorA, colorB, depthTest, depthWrite);
         }
       } else {
         for (const index of indices) {
-          const point = transformPosition(readMorphedPosition(vertexBuffer.bytes, command.vertexFormat.stride, position.offset, index, command.uniforms), matrix);
+          const point = transformPosition(readLocal(index), matrix);
           const vertexColor = readVertexColor(vertexBuffer.bytes, command.vertexFormat.stride, colorAttribute?.offset, index);
           rasterizePoint(this.activeRenderTarget, point, multiplyColor(color, vertexColor), depthTest, depthWrite);
         }
@@ -1531,7 +1545,8 @@ export class WebGPUDevice implements RenderDevice {
 
   private createNativeDrawUniformBuffer(command: DrawCommand): WebGPUBufferLike | null {
     if (!this.device.createBindGroup) return null;
-    const data = new Float32Array(188);
+    // 188 floats for the scalar/matrix fields + 96 joint matrices (16 floats each) appended at 188.
+    const data = new Float32Array(188 + MAX_WEBGPU_SKINNING_JOINTS * 16);
     const baseColorBinding = uniformBaseColorTextureBinding(command.uniforms);
     const environmentBinding = uniformTextureBinding(command.uniforms, "u_environmentMapTexture");
     const normalBinding = uniformTextureBinding(command.uniforms, "u_normalTexture");
@@ -1573,9 +1588,13 @@ export class WebGPUDevice implements RenderDevice {
     for (let index = 0; index < 4; index += 1) {
       data.set(instanceMatrices[index] ?? (index === 0 ? modelMatrix : identityMatrix()), 32 + index * 16);
     }
-    const jointMatrices = uniformMat4Array(command.uniforms?.get("u_jointMatrices"), 2);
-    for (let index = 0; index < 2; index += 1) {
-      data.set(jointMatrices[index] ?? identityMatrix(), 96 + index * 16);
+    // Legacy 2-slot joint fields (offsets 96/112) kept as identity for layout stability.
+    data.set(identityMatrix(), 96);
+    data.set(identityMatrix(), 112);
+    // Full 96-joint palette (WebGL2 parity), appended after normalMatrix at offset 188.
+    const jointMatrices = uniformMat4Array(command.uniforms?.get("u_jointMatrices"), MAX_WEBGPU_SKINNING_JOINTS);
+    for (let index = 0; index < MAX_WEBGPU_SKINNING_JOINTS; index += 1) {
+      data.set(jointMatrices[index] ?? identityMatrix(), 188 + index * 16);
     }
     const morphDeltas = command.uniforms?.get("u_morphPositionDeltas");
     const morphNumbers = morphDeltas instanceof Float32Array || Array.isArray(morphDeltas) ? Array.from(morphDeltas).slice(0, 32) : [];
@@ -2097,6 +2116,54 @@ function identityMatrix(): readonly number[] {
   return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 }
 
+function readVec4Attribute(bytes: Uint8Array, stride: number, offset: number, vertexIndex: number): readonly [number, number, number, number] {
+  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  const base = vertexIndex * stride + offset;
+  return [
+    view.getFloat32(base, true),
+    view.getFloat32(base + 4, true),
+    view.getFloat32(base + 8, true),
+    view.getFloat32(base + 12, true)
+  ];
+}
+
+// CPU skinning for the WebGPU emulation rasterizer: blend the joint palette (up to the full
+// WebGL2-parity 96-joint count) by the vertex's 4 joint indices + weights, then transform the local
+// position by the blended matrix. Mirrors the WebGL2 skinning path so a skinned character deforms
+// identically on both backends. `palette` may hold up to 96 matrices (parity with WebGL2).
+function skinLocalPosition(
+  local: readonly [number, number, number],
+  bytes: Uint8Array,
+  format: VertexFormat,
+  vertexIndex: number,
+  palette: readonly (readonly number[])[]
+): readonly [number, number, number] {
+  if (palette.length === 0 || !format.hasAttribute("joints") || !format.hasAttribute("weights")) {
+    return local;
+  }
+  const joints = readVec4Attribute(bytes, format.stride, format.getAttribute("joints").offset, vertexIndex);
+  const weights = readVec4Attribute(bytes, format.stride, format.getAttribute("weights").offset, vertexIndex);
+  const weightSum = weights[0] + weights[1] + weights[2] + weights[3];
+  if (weightSum <= 1e-4) return local;
+  const blended = new Array<number>(16).fill(0);
+  const maxJoint = palette.length - 1;
+  for (let influence = 0; influence < 4; influence += 1) {
+    const weight = weights[influence] ?? 0;
+    if (weight === 0) continue;
+    const jointIndex = Math.max(0, Math.min(maxJoint, Math.round(joints[influence] ?? 0)));
+    const jointMatrix = palette[jointIndex] ?? identityMatrix();
+    for (let k = 0; k < 16; k += 1) blended[k] += (jointMatrix[k] ?? 0) * weight;
+  }
+  return transformPosition(local, blended);
+}
+
+function jointPaletteFor(uniforms: DrawCommand["uniforms"]): readonly (readonly number[])[] {
+  const value = uniforms?.get("u_jointMatrices");
+  const length = value instanceof Float32Array || Array.isArray(value) ? (value as ArrayLike<number>).length : 0;
+  const count = Math.min(MAX_WEBGPU_SKINNING_JOINTS, Math.floor(length / 16));
+  return count > 0 ? uniformMat4Array(value, count) : [];
+}
+
 function readVertexColor(bytes: Uint8Array, stride: number, offset: number | undefined, vertexIndex: number): readonly [number, number, number, number] {
   if (offset === undefined) return [1, 1, 1, 1];
   const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
@@ -2385,6 +2452,7 @@ function nativeUniformStruct(): string {
   joint0: mat4x4<f32>,
   joint1: mat4x4<f32>,
   morph0: vec4<f32>,
+  // (joint palette appended at struct end below as \`joints\` for 96-joint WebGL2 parity)
   morph1: vec4<f32>,
   morph2: vec4<f32>,
   morph3: vec4<f32>,
@@ -2396,6 +2464,9 @@ function nativeUniformStruct(): string {
   camera: vec4<f32>,
   materialFlags: vec4<f32>,
   normalMatrix: mat4x4<f32>,
+  // 96-joint skinning palette (WebGL2 \`u_jointMatrices[96]\` parity). Appended at the struct end so
+  // the existing field offsets are unchanged.
+  joints: array<mat4x4<f32>, 96>,
 };
 
 @group(0) @binding(0) var<uniform> u_draw: DrawUniforms;
@@ -2717,8 +2788,8 @@ struct VertexOutput {
 };
 
 fn jointMatrix(index: f32) -> mat4x4<f32> {
-  if (index > 0.5) { return u_draw.joint1; }
-  return u_draw.joint0;
+  let i = clamp(i32(index + 0.5), 0, 95);
+  return u_draw.joints[i];
 }
 
 @vertex

package/src/{cartoon/CartoonMaterialStyle.ts → animation/AnimationMaterialStyle.ts}

@@ -1,16 +1,16 @@
-export type CartoonMaterialTreatment = "preserve-pbr" | "soft-toon" | "cel" | "flat-readable";
+export type AnimationMaterialTreatment = "preserve-pbr" | "soft-toon" | "cel" | "flat-readable";
 
-export interface CartoonMaterialStyleOptions {
-  readonly treatment?: CartoonMaterialTreatment | undefined;
+export interface AnimationMaterialStyleOptions {
+  readonly treatment?: AnimationMaterialTreatment | undefined;
   readonly outline?: boolean | undefined;
   readonly rampSteps?: number | undefined;
   readonly saturationBoost?: number | undefined;
   readonly roughnessFloor?: number | undefined;
 }
 
-export interface CartoonMaterialStyle {
-  readonly kind: "cartoon-material-style";
-  readonly treatment: CartoonMaterialTreatment;
+export interface AnimationMaterialStyle {
+  readonly kind: "animation-material-style";
+  readonly treatment: AnimationMaterialTreatment;
   readonly outline: boolean;
   readonly rampSteps: number;
   readonly saturationBoost: number;
@@ -18,15 +18,15 @@ export interface CartoonMaterialStyle {
   readonly assetOverrideMetadata: readonly string[];
 }
 
-export function createCartoonMaterialStyle(options: CartoonMaterialStyleOptions = {}): CartoonMaterialStyle {
+export function createAnimationMaterialStyle(options: AnimationMaterialStyleOptions = {}): AnimationMaterialStyle {
   const treatment = options.treatment ?? "soft-toon";
   return {
-    kind: "cartoon-material-style",
+    kind: "animation-material-style",
     treatment,
     outline: options.outline ?? treatment === "cel",
     rampSteps: options.rampSteps ?? (treatment === "cel" ? 4 : 7),
     saturationBoost: options.saturationBoost ?? 0.08,
     roughnessFloor: options.roughnessFloor ?? 0.48,
-    assetOverrideMetadata: ["cartoonMaterialTreatment", "toonRampSteps", "outlineEligible", "preserveSkinning"]
+    assetOverrideMetadata: ["animationMaterialTreatment", "toonRampSteps", "outlineEligible", "preserveSkinning"]
   };
 }

package/src/{cartoon/CartoonRenderPreset.ts → animation/AnimationRenderPreset.ts}

@@ -1,33 +1,33 @@
-import { createCartoonMaterialStyle, type CartoonMaterialStyle, type CartoonMaterialStyleOptions } from "./CartoonMaterialStyle.js";
+import { createAnimationMaterialStyle, type AnimationMaterialStyle, type AnimationMaterialStyleOptions } from "./AnimationMaterialStyle.js";
 
-export interface CartoonRenderPresetOptions {
+export interface AnimationRenderPresetOptions {
   readonly name?: string | undefined;
   readonly resolution?: { readonly width: number; readonly height: number } | undefined;
-  readonly materialStyle?: CartoonMaterialStyleOptions | undefined;
+  readonly materialStyle?: AnimationMaterialStyleOptions | undefined;
   readonly reducedMotion?: boolean | undefined;
   readonly reducedFlash?: boolean | undefined;
 }
 
-export interface CartoonRenderPresetEvidence {
-  readonly kind: "cartoon-render-preset-evidence";
+export interface AnimationRenderPresetEvidence {
+  readonly kind: "animation-render-preset-evidence";
   readonly name: string;
   readonly resolution: { readonly width: number; readonly height: number };
   readonly lights: readonly string[];
   readonly shadows: { readonly soft: boolean; readonly contact: boolean };
   readonly postprocess: { readonly bloom: number; readonly colorGrade: string; readonly fogDepthCue: boolean };
-  readonly materialStyle: CartoonMaterialStyle;
+  readonly materialStyle: AnimationMaterialStyle;
   readonly frameBudgetMs: number;
   readonly debugOverlaysAllowedInExport: false;
   readonly reducedMotion: boolean;
   readonly reducedFlash: boolean;
 }
 
-export function createCartoonRenderPreset(options: CartoonRenderPresetOptions = {}): CartoonRenderPresetEvidence {
+export function createAnimationRenderPreset(options: AnimationRenderPresetOptions = {}): AnimationRenderPresetEvidence {
   const reducedMotion = options.reducedMotion ?? false;
   const reducedFlash = options.reducedFlash ?? false;
   return {
-    kind: "cartoon-render-preset-evidence",
-    name: options.name ?? "moon-garden-cartoon",
+    kind: "animation-render-preset-evidence",
+    name: options.name ?? "moon-garden-animation",
     resolution: options.resolution ?? { width: 1280, height: 720 },
     lights: ["soft-key", "cool-rim", "set-fill", "emissive-practicals"],
     shadows: { soft: true, contact: true },
@@ -36,7 +36,7 @@ export function createCartoonRenderPreset(options: CartoonRenderPresetOptions =
       colorGrade: "storybook-night",
       fogDepthCue: true
     },
-    materialStyle: createCartoonMaterialStyle(options.materialStyle),
+    materialStyle: createAnimationMaterialStyle(options.materialStyle),
     frameBudgetMs: 16.7,
     debugOverlaysAllowedInExport: false,
     reducedMotion,