reze-engine 0.9.4 → 0.10.0

package/src/engine.ts

@@ -81,7 +81,7 @@ interface ModelInstance {
 export class Engine {
   private static instance: Engine | null = null
 
-  public static getInstance(): Engine {
+  static getInstance(): Engine {
     if (!Engine.instance) {
       throw new Error("Engine not ready: create Engine, await init(), then load models via engine.loadModel().")
     }
@@ -199,7 +199,7 @@ export class Engine {
   }
 
   // Step 1: Get WebGPU device and context
-  public async init() {
+  async init() {
     const adapter = await navigator.gpu?.requestAdapter()
     const device = await adapter?.requestDevice()
     if (!device) {
@@ -566,7 +566,12 @@ export class Engine {
         struct CameraUniforms { view: mat4x4f, projection: mat4x4f, viewPos: vec3f, _p: f32, };
         struct Light { direction: vec4f, color: vec4f, };
         struct LightUniforms { ambientColor: vec4f, lights: array<Light, 4>, };
-        struct GroundShadowMat { diffuseColor: vec3f, fadeStart: f32, fadeEnd: f32, shadowStrength: f32, pcfTexel: f32, _y: f32, };
+        struct GroundShadowMat {
+          diffuseColor: vec3f, fadeStart: f32,
+          fadeEnd: f32, shadowStrength: f32, pcfTexel: f32, gridSpacing: f32,
+          gridLineWidth: f32, gridLineOpacity: f32, noiseStrength: f32, _pad: f32,
+          gridLineColor: vec3f, _pad2: f32,
+        };
         struct LightVP { viewProj: mat4x4f, };
         @group(0) @binding(0) var<uniform> camera: CameraUniforms;
         @group(0) @binding(1) var<uniform> light: LightUniforms;
@@ -574,6 +579,32 @@ export class Engine {
         @group(0) @binding(3) var shadowSampler: sampler_comparison;
         @group(0) @binding(4) var<uniform> material: GroundShadowMat;
         @group(0) @binding(5) var<uniform> lightVP: LightVP;
+
+        // Hash-based noise for frosted/matte surface
+        fn hash2(p: vec2f) -> f32 {
+          var p3 = fract(vec3f(p.x, p.y, p.x) * 0.1031);
+          p3 += dot(p3, vec3f(p3.y + 33.33, p3.z + 33.33, p3.x + 33.33));
+          return fract((p3.x + p3.y) * p3.z);
+        }
+        fn valueNoise(p: vec2f) -> f32 {
+          let i = floor(p);
+          let f = fract(p);
+          let u = f * f * (3.0 - 2.0 * f);
+          return mix(mix(hash2(i), hash2(i + vec2f(1.0, 0.0)), u.x),
+                     mix(hash2(i + vec2f(0.0, 1.0)), hash2(i + vec2f(1.0, 1.0)), u.x), u.y);
+        }
+        fn fbmNoise(p: vec2f) -> f32 {
+          var v = 0.0;
+          var a = 0.5;
+          var pp = p;
+          for (var i = 0; i < 4; i++) {
+            v += a * valueNoise(pp);
+            pp *= 2.0;
+            a *= 0.5;
+          }
+          return v;
+        }
+
         struct VO { @builtin(position) position: vec4f, @location(0) worldPos: vec3f, @location(1) normal: vec3f, };
         @vertex fn vs(@location(0) position: vec3f, @location(1) normal: vec3f, @location(2) uv: vec2f) -> VO {
           var o: VO; o.worldPos = position; o.normal = normal;
@@ -583,6 +614,8 @@ export class Engine {
           let n = normalize(i.normal);
           let centerDist = length(i.worldPos.xz);
           let edgeFade = 1.0 - smoothstep(0.0, 1.0, clamp((centerDist - material.fadeStart) / max(material.fadeEnd - material.fadeStart, 0.001), 0.0, 1.0));
+
+          // Shadow sampling
           let lclip = lightVP.viewProj * vec4f(i.worldPos, 1.0);
           let ndc = lclip.xyz / max(lclip.w, 1e-6);
           let suv = vec2f(ndc.x * 0.5 + 0.5, 0.5 - ndc.y * 0.5);
@@ -596,10 +629,26 @@ export class Engine {
             }
           }
           vis *= 0.04;
+
+          // Frosted/matte micro-texture (磨砂)
+          let noiseVal = fbmNoise(i.worldPos.xz * 3.0);
+          let noiseTint = 1.0 + (noiseVal - 0.5) * material.noiseStrength;
+
+          // Grid lines — anti-aliased via screen-space derivatives
+          let gp = i.worldPos.xz / material.gridSpacing;
+          let gridFrac = abs(fract(gp - 0.5) - 0.5);
+          let gridDeriv = fwidth(gp);
+          let halfLine = material.gridLineWidth * 0.5;
+          let gridLine = 1.0 - min(
+            smoothstep(halfLine - gridDeriv.x, halfLine + gridDeriv.x, gridFrac.x),
+            smoothstep(halfLine - gridDeriv.y, halfLine + gridDeriv.y, gridFrac.y)
+          );
           let sun = light.ambientColor.xyz + light.lights[0].color.xyz * light.lights[0].color.w * max(dot(n, -light.lights[0].direction.xyz), 0.0);
           let dark = (1.0 - vis) * material.shadowStrength;
-          let lit = material.diffuseColor * sun * (1.0 - dark * 0.65);
-          return vec4f(lit * edgeFade, edgeFade);
+          var baseColor = material.diffuseColor * sun * (1.0 - dark * 0.65);
+          baseColor *= noiseTint;
+          let finalColor = mix(baseColor, material.gridLineColor, gridLine * material.gridLineOpacity * edgeFade);
+          return vec4f(finalColor * edgeFade, edgeFade);
         }
       `,
     })
@@ -698,7 +747,7 @@ export class Engine {
           // Screen-stable edgeline: extrusion ∝ camera distance (same idea as MMD viewers / babylon-mmd-style scaling)
           let camDist = max(length(camera.viewPos - worldPos), 0.25);
           let refDist = 30.0;
-          let edgeScale = 0.032;
+          let edgeScale = 0.025;
           let expandedPos = worldPos + worldNormal * material.edgeSize * edgeScale * (camDist / refDist);
           output.position = camera.projection * camera.view * vec4f(expandedPos, 1.0);
           return output;
@@ -923,10 +972,10 @@ export class Engine {
   }
 
   /** Set static camera look-at / orbit center. Clears any model follow binding. */
-  public setCameraTarget(v: Vec3): void
+  setCameraTarget(v: Vec3): void
   /** Bind camera orbit center to a model's bone (Souls-style follow cam). Pass null to unbind. */
-  public setCameraTarget(model: Model | null, boneName: string, offset?: Vec3): void
-  public setCameraTarget(modelOrVec: Model | Vec3 | null, boneName?: string, offset?: Vec3): void {
+  setCameraTarget(model: Model | null, boneName: string, offset?: Vec3): void
+  setCameraTarget(modelOrVec: Model | Vec3 | null, boneName?: string, offset?: Vec3): void {
     if (modelOrVec === null) {
       this.cameraTargetModel = null
       return
@@ -946,7 +995,7 @@ export class Engine {
   }
 
   /** Souls-style follow cam: orbit center tracks a model bone each frame. Shorthand for setCameraTarget(model, boneName, offset). */
-  public setCameraFollow(model: Model | null, boneName?: string, offset?: Vec3): void {
+  setCameraFollow(model: Model | null, boneName?: string, offset?: Vec3): void {
     if (model === null) {
       this.cameraTargetModel = null
       return
@@ -958,12 +1007,12 @@ export class Engine {
     this.cameraTargetOffset.z = offset?.z ?? 0
   }
 
-  public getCameraDistance(): number { return this.camera.radius }
-  public setCameraDistance(d: number): void { this.camera.radius = d }
-  public getCameraAlpha(): number { return this.camera.alpha }
-  public setCameraAlpha(a: number): void { this.camera.alpha = a }
-  public getCameraBeta(): number { return this.camera.beta }
-  public setCameraBeta(b: number): void { this.camera.beta = b }
+  getCameraDistance(): number { return this.camera.radius }
+  setCameraDistance(d: number): void { this.camera.radius = d }
+  getCameraAlpha(): number { return this.camera.alpha }
+  setCameraAlpha(a: number): void { this.camera.alpha = a }
+  getCameraBeta(): number { return this.camera.beta }
+  setCameraBeta(b: number): void { this.camera.beta = b }
 
   // Step 5: Create lighting buffers
   private setupLighting() {
@@ -990,16 +1039,6 @@ export class Engine {
     this.updateLightBuffer()
   }
 
-  public clearLights() {
-    this.lightCount = 0
-    // Clear all light data by setting intensity to 0
-    for (let i = 0; i < 4; i++) {
-      const baseIndex = 4 + i * 8
-      this.lightData[baseIndex + 7] = 0 // color.w / intensity
-    }
-    this.updateLightBuffer()
-  }
-
   private addLight(direction: Vec3, color: Vec3, intensity: number = 1.0): boolean {
     if (this.lightCount >= 4) return false
 
@@ -1019,7 +1058,7 @@ export class Engine {
     return true
   }
 
-  public addGround(options?: {
+  addGround(options?: {
     width?: number
     height?: number
     diffuseColor?: Vec3
@@ -1027,19 +1066,29 @@ export class Engine {
     fadeEnd?: number
     shadowMapSize?: number
     shadowStrength?: number
+    gridSpacing?: number
+    gridLineWidth?: number
+    gridLineOpacity?: number
+    gridLineColor?: Vec3
+    noiseStrength?: number
   }): void {
     const opts = {
-      width: 100,
-      height: 100,
-      diffuseColor: new Vec3(1, 1, 1),
-      fadeStart: 5.0,
-      fadeEnd: 60.0,
+      width: 160,
+      height: 160,
+      diffuseColor: new Vec3(0.8, 0.1, 1.0),
+      fadeStart: 10.0,
+      fadeEnd: 80.0,
       shadowMapSize: 4096,
       shadowStrength: 1.0,
+      gridSpacing: 4.2,
+      gridLineWidth: 0.012,
+      gridLineOpacity: 0.4,
+      gridLineColor: new Vec3(0.85, 0.85, 0.85),
+      noiseStrength: 0.05,
       ...options,
     }
     this.createGroundGeometry(opts.width, opts.height)
-    this.createShadowGroundResources(opts.shadowMapSize, opts.diffuseColor, opts.fadeStart, opts.fadeEnd, opts.shadowStrength)
+    this.createShadowGroundResources(opts)
     this.hasGround = true
     this.groundDrawCall = {
       type: "ground",
@@ -1054,11 +1103,11 @@ export class Engine {
     this.device.queue.writeBuffer(this.lightUniformBuffer, 0, this.lightData)
   }
 
-  public getStats(): EngineStats {
+  getStats(): EngineStats {
     return { ...this.stats }
   }
 
-  public runRenderLoop(callback?: () => void) {
+  runRenderLoop(callback?: () => void) {
     this.renderLoopCallback = callback || null
 
     const loop = () => {
@@ -1074,7 +1123,7 @@ export class Engine {
     this.animationFrameId = requestAnimationFrame(loop)
   }
 
-  public stopRenderLoop() {
+  stopRenderLoop() {
     if (this.animationFrameId !== null) {
       cancelAnimationFrame(this.animationFrameId)
       this.animationFrameId = null
@@ -1082,7 +1131,7 @@ export class Engine {
     this.renderLoopCallback = null
   }
 
-  public dispose() {
+  dispose() {
     this.stopRenderLoop()
     this.forEachInstance((inst) => inst.model.stopAnimation())
     if (Engine.instance === this) Engine.instance = null
@@ -1100,9 +1149,9 @@ export class Engine {
     }
   }
 
-  public async loadModel(path: string): Promise<Model>
-  public async loadModel(name: string, path: string): Promise<Model>
-  public async loadModel(nameOrPath: string, path?: string): Promise<Model> {
+  async loadModel(path: string): Promise<Model>
+  async loadModel(name: string, path: string): Promise<Model>
+  async loadModel(nameOrPath: string, path?: string): Promise<Model> {
     const pmxPath = path === undefined ? nameOrPath : path
     const name = path === undefined ? "model_" + (this._nextDefaultModelId++) : nameOrPath
     const model = await PmxLoader.load(pmxPath)
@@ -1111,7 +1160,7 @@ export class Engine {
     return model
   }
 
-  public async addModel(model: Model, pmxPath: string, name?: string): Promise<string> {
+  async addModel(model: Model, pmxPath: string, name?: string): Promise<string> {
     const requested = name ?? model.name
     let key = requested
     let n = 1
@@ -1125,19 +1174,19 @@ export class Engine {
     return key
   }
 
-  public removeModel(name: string): void {
+  removeModel(name: string): void {
     this.modelInstances.delete(name)
   }
 
-  public getModelNames(): string[] {
+  getModelNames(): string[] {
     return Array.from(this.modelInstances.keys())
   }
 
-  public getModel(name: string): Model | null {
+  getModel(name: string): Model | null {
     return this.modelInstances.get(name)?.model ?? null
   }
 
-  public markVertexBufferDirty(modelNameOrModel?: string | Model): void {
+  markVertexBufferDirty(modelNameOrModel?: string | Model): void {
     if (modelNameOrModel === undefined) return
     if (typeof modelNameOrModel === "string") {
       const inst = this.modelInstances.get(modelNameOrModel)
@@ -1152,38 +1201,38 @@ export class Engine {
     }
   }
 
-  public setMaterialVisible(modelName: string, materialName: string, visible: boolean): void {
+  setMaterialVisible(modelName: string, materialName: string, visible: boolean): void {
     const inst = this.modelInstances.get(modelName)
     if (!inst) return
     if (visible) inst.hiddenMaterials.delete(materialName)
     else inst.hiddenMaterials.add(materialName)
   }
 
-  public toggleMaterialVisible(modelName: string, materialName: string): void {
+  toggleMaterialVisible(modelName: string, materialName: string): void {
     const inst = this.modelInstances.get(modelName)
     if (!inst) return
     if (inst.hiddenMaterials.has(materialName)) inst.hiddenMaterials.delete(materialName)
     else inst.hiddenMaterials.add(materialName)
   }
 
-  public isMaterialVisible(modelName: string, materialName: string): boolean {
+  isMaterialVisible(modelName: string, materialName: string): boolean {
     const inst = this.modelInstances.get(modelName)
     return inst ? !inst.hiddenMaterials.has(materialName) : false
   }
 
-  public setIKEnabled(enabled: boolean): void {
+  setIKEnabled(enabled: boolean): void {
     this.ikEnabled = enabled
   }
 
-  public getIKEnabled(): boolean {
+  getIKEnabled(): boolean {
     return this.ikEnabled
   }
 
-  public setPhysicsEnabled(enabled: boolean): void {
+  setPhysicsEnabled(enabled: boolean): void {
     this.physicsEnabled = enabled
   }
 
-  public getPhysicsEnabled(): boolean {
+  getPhysicsEnabled(): boolean {
     return this.physicsEnabled
   }
 
@@ -1391,13 +1440,19 @@ export class Engine {
     this.device.queue.writeBuffer(this.groundIndexBuffer, 0, indices)
   }
 
-  private createShadowGroundResources(
-    shadowMapSize: number,
-    diffuseColor: Vec3,
-    fadeStart: number,
-    fadeEnd: number,
+  private createShadowGroundResources(opts: {
+    shadowMapSize: number
+    diffuseColor: Vec3
+    fadeStart: number
+    fadeEnd: number
     shadowStrength: number
-  ) {
+    gridSpacing: number
+    gridLineWidth: number
+    gridLineOpacity: number
+    gridLineColor: Vec3
+    noiseStrength: number
+  }) {
+    const { shadowMapSize, diffuseColor, fadeStart, fadeEnd, shadowStrength, gridSpacing, gridLineWidth, gridLineOpacity, gridLineColor, noiseStrength } = opts
     this.shadowMapTexture = this.device.createTexture({
       label: "shadow map",
       size: [shadowMapSize, shadowMapSize],
@@ -1405,16 +1460,13 @@ export class Engine {
       usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
     })
     this.shadowMapDepthView = this.shadowMapTexture.createView()
-    const gb = new Float32Array(8)
-    gb[0] = diffuseColor.x
-    gb[1] = diffuseColor.y
-    gb[2] = diffuseColor.z
-    gb[3] = fadeStart
-    gb[4] = fadeEnd
-    gb[5] = shadowStrength
-    gb[6] = 1 / shadowMapSize
-    gb[7] = 0
-    this.groundShadowMaterialBuffer = this.device.createBuffer({ size: 64, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST })
+    // Layout: diffuseColor(3f) fadeStart(1f) | fadeEnd(1f) shadowStrength(1f) pcfTexel(1f) gridSpacing(1f) | gridLineWidth(1f) gridOpacity(1f) noiseStrength(1f) _pad(1f) | gridColor(3f) _pad2(1f)
+    const gb = new Float32Array(16)
+    gb[0] = diffuseColor.x; gb[1] = diffuseColor.y; gb[2] = diffuseColor.z; gb[3] = fadeStart
+    gb[4] = fadeEnd; gb[5] = shadowStrength; gb[6] = 1 / shadowMapSize; gb[7] = gridSpacing
+    gb[8] = gridLineWidth; gb[9] = gridLineOpacity; gb[10] = noiseStrength; gb[11] = 0
+    gb[12] = gridLineColor.x; gb[13] = gridLineColor.y; gb[14] = gridLineColor.z; gb[15] = 0
+    this.groundShadowMaterialBuffer = this.device.createBuffer({ size: gb.byteLength, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST })
     this.device.queue.writeBuffer(this.groundShadowMaterialBuffer, 0, gb)
     this.groundShadowBindGroup = this.device.createBindGroup({
       label: "ground shadow bind",
@@ -1741,7 +1793,7 @@ export class Engine {
     this.onRaycast(hitModel, hitMaterial, screenX, screenY)
   }
 
-  public render() {
+  render() {
     if (!this.multisampleTexture || !this.camera || !this.device) return
 
     const currentTime = performance.now()

package/src/ik-solver.ts

@@ -21,13 +21,13 @@ const enum InternalSolveAxis {
 }
 
 class IKChain {
-  public readonly boneIndex: number
-  public readonly minimumAngle: Vec3 | null
-  public readonly maximumAngle: Vec3 | null
-  public readonly rotationOrder: InternalEulerRotationOrder
-  public readonly solveAxis: InternalSolveAxis
+  readonly boneIndex: number
+  readonly minimumAngle: Vec3 | null
+  readonly maximumAngle: Vec3 | null
+  readonly rotationOrder: InternalEulerRotationOrder
+  readonly solveAxis: InternalSolveAxis
 
-  public constructor(boneIndex: number, link: IKLink) {
+  constructor(boneIndex: number, link: IKLink) {
     this.boneIndex = boneIndex
 
     if (link.hasLimit && link.minAngle && link.maxAngle) {
@@ -76,7 +76,7 @@ export class IKSolverSystem {
   private static readonly EPSILON = 1.0e-8
   private static readonly THRESHOLD = (88 * Math.PI) / 180
 
-  public static solve(
+  static solve(
     ikSolvers: IKSolver[],
     bones: Bone[],
     localRotations: Quat[],

package/src/index.ts

@@ -1,10 +1,14 @@
 export { Engine, type EngineStats } from "./engine"
 export { Model } from "./model"
 export { Vec3, Quat, Mat4 } from "./math"
-export {
-  AnimationState,
-  type AnimationClip,
-  type BoneKeyframe,
-  type MorphKeyframe,
+export type {
+  AnimationClip,
+  AnimationPlayOptions,
+  AnimationProgress,
+  BoneKeyframe,
+  MorphKeyframe,
+  BoneInterpolation,
+  ControlPoint,
 } from "./animation"
+export { FPS } from "./animation"
 export { Physics, type PhysicsOptions } from "./physics"