npm - reze-engine - Versions diffs - 0.1.10 → 0.1.12 - Mend

reze-engine 0.1.10 → 0.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md CHANGED Viewed

@@ -1,99 +1,104 @@
-# Reze Engine
-A lightweight engine built with WebGPU and TypeScript for real-time 3D anime character MMD model rendering.
-## Usage
-```typescript
-export default function Home() {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const engineRef = useRef<Engine | null>(null)
-  const [engineError, setEngineError] = useState<string | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [stats, setStats] = useState<EngineStats>({
-    fps: 0,
-    frameTime: 0,
-    memoryUsed: 0,
-    drawCalls: 0,
-    vertices: 0,
-    triangles: 0,
-    materials: 0,
-    textures: 0,
-    textureMemory: 0,
-    bufferMemory: 0,
-    gpuMemory: 0,
-  })
-  const [progress, setProgress] = useState(0)
-  const initEngine = useCallback(async () => {
-    if (canvasRef.current) {
-      // Initialize engine
-      try {
-        const engine = new Engine(canvasRef.current)
-        engineRef.current = engine
-        await engine.init()
-        await engine.loadModel("/models/塞尔凯特/塞尔凯特.pmx")
-        setLoading(false)
-        engine.runRenderLoop(() => {
-          setStats(engine.getStats())
-        })
-      } catch (error) {
-        setEngineError(error instanceof Error ? error.message : "Unknown error")
-      }
-    }
-  }, [])
-  useEffect(() => {
-    void (async () => {
-      initEngine()
-    })()
-    // Cleanup on unmount
-    return () => {
-      if (engineRef.current) {
-        engineRef.current.dispose()
-      }
-    }
-  }, [initEngine])
-  useEffect(() => {
-    if (loading) {
-      const interval = setInterval(() => {
-        setProgress((prev) => {
-          if (prev >= 100) {
-            return 0
-          }
-          return prev + 1
-        })
-      }, 50)
-      return () => clearInterval(interval)
-    }
-  }, [loading])
-  return (
-    <div
-      className="fixed inset-0 w-full h-full overflow-hidden touch-none"
-      style={{
-        background:
-          "radial-gradient(ellipse at center, rgba(35, 35, 45, 0.8) 0%, rgba(35, 35, 45, 0.8) 8%, rgba(8, 8, 12, 0.95) 65%, rgba(0, 0, 0, 1) 100%)",
-      }}
-    >
-      <Header stats={stats} />
-      {engineError && (
-        <div className="absolute inset-0 w-full h-full flex items-center justify-center text-white p-6">
-          Engine Error: {engineError}
-        </div>
-      )}
-      {loading && !engineError && (
-        <div className="absolute inset-0 max-w-xs mx-auto w-full h-full flex items-center justify-center text-white p-6">
-          <Progress value={progress} className="rounded-none" />
-        </div>
-      )}
-      <canvas ref={canvasRef} className="absolute inset-0 w-full h-full touch-none z-1" />
-    </div>
-  )
-}
-```
+# Reze Engine
+A lightweight engine built with WebGPU and TypeScript for real-time 3D anime character MMD model rendering.
+## Features
+- Physics
+- Alpha blending
+- Post alpha eye rendering
+- Rim lighting
+- Bloom
+- Outlines
+- Toon shading with directional lights
+- MSAA 4x anti-aliasing
+- GPU-accelerated skinning
+- Bone rotation api
+## Usage
+```typescript
+export default function Home() {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const engineRef = useRef<Engine | null>(null)
+  const [engineError, setEngineError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [stats, setStats] = useState<EngineStats>({
+    fps: 0,
+    frameTime: 0,
+    gpuMemory: 0,
+  })
+  const [progress, setProgress] = useState(0)
+  const initEngine = useCallback(async () => {
+    if (canvasRef.current) {
+      // Initialize engine
+      try {
+        const engine = new Engine(canvasRef.current)
+        engineRef.current = engine
+        await engine.init()
+        await engine.loadModel("/models/塞尔凯特/塞尔凯特.pmx")
+        setLoading(false)
+        engine.runRenderLoop(() => {
+          setStats(engine.getStats())
+        })
+      } catch (error) {
+        setEngineError(error instanceof Error ? error.message : "Unknown error")
+      }
+    }
+  }, [])
+  useEffect(() => {
+    void (async () => {
+      initEngine()
+    })()
+    // Cleanup on unmount
+    return () => {
+      if (engineRef.current) {
+        engineRef.current.dispose()
+      }
+    }
+  }, [initEngine])
+  useEffect(() => {
+    if (loading) {
+      const interval = setInterval(() => {
+        setProgress((prev) => {
+          if (prev >= 100) {
+            return 0
+          }
+          return prev + 1
+        })
+      }, 50)
+      return () => clearInterval(interval)
+    }
+  }, [loading])
+  return (
+    <div
+      className="fixed inset-0 w-full h-full overflow-hidden touch-none"
+      style={{
+        background:
+          "radial-gradient(ellipse at center, rgba(35, 35, 45, 0.8) 0%, rgba(35, 35, 45, 0.8) 8%, rgba(8, 8, 12, 0.95) 65%, rgba(0, 0, 0, 1) 100%)",
+      }}
+    >
+      <Header stats={stats} />
+      {engineError && (
+        <div className="absolute inset-0 w-full h-full flex items-center justify-center text-white p-6">
+          Engine Error: {engineError}
+        </div>
+      )}
+      {loading && !engineError && (
+        <div className="absolute inset-0 max-w-xs mx-auto w-full h-full flex items-center justify-center text-white p-6">
+          <Progress value={progress} className="rounded-none" />
+        </div>
+      )}
+      <canvas ref={canvasRef} className="absolute inset-0 w-full h-full touch-none z-1" />
+    </div>
+  )
+}
+```

package/dist/engine.d.ts CHANGED Viewed

@@ -54,6 +54,9 @@ export declare class Engine {
     private linearSampler;
     bloomThreshold: number;
     bloomIntensity: number;
+    private rimLightIntensity;
+    private rimLightPower;
+    private rimLightColor;
     private currentModel;
     private modelDir;
     private physics;

package/dist/engine.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAKnC,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAA;IACX,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,qBAAa,MAAM;IACjB,OAAO,CAAC,MAAM,CAAmB;IACjC,OAAO,CAAC,MAAM,CAAY;IAC1B,OAAO,CAAC,OAAO,CAAmB;IAClC,OAAO,CAAC,kBAAkB,CAAmB;IACtC,MAAM,EAAG,MAAM,CAAA;IACtB,OAAO,CAAC,mBAAmB,CAAY;IACvC,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,kBAAkB,CAAY;IACtC,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,UAAU,CAAI;IACtB,OAAO,CAAC,YAAY,CAAY;IAChC,OAAO,CAAC,WAAW,CAAC,CAAW;IAC/B,OAAO,CAAC,cAAc,CAA8B;IACpD,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,QAAQ,CAAoB;IACpC,OAAO,CAAC,eAAe,CAAoB;IAC3C,OAAO,CAAC,mBAAmB,CAAoB;IAC/C,OAAO,CAAC,2BAA2B,CAAoB;IACvD,OAAO,CAAC,oBAAoB,CAAoB;IAChD,OAAO,CAAC,kBAAkB,CAAoB;IAC9C,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,mBAAmB,CAAqB;IAChD,OAAO,CAAC,sBAAsB,CAAqB;IACnD,OAAO,CAAC,YAAY,CAAY;IAChC,OAAO,CAAC,aAAa,CAAY;IACjC,OAAO,CAAC,gBAAgB,CAAC,CAAW;IACpC,OAAO,CAAC,iBAAiB,CAAC,CAAW;IACrC,OAAO,CAAC,uBAAuB,CAAC,CAAW;IAC3C,OAAO,CAAC,yBAAyB,CAAC,CAAoB;IACtD,OAAO,CAAC,eAAe,CAAC,CAAW;IACnC,OAAO,CAAC,kBAAkB,CAAa;IACvC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAI;IAChC,OAAO,CAAC,oBAAoB,CAA0B;IAEtD,OAAO,CAAC,kBAAkB,CAAa;IACvC,OAAO,CAAC,sBAAsB,CAAiB;IAC/C,OAAO,CAAC,mBAAmB,CAAa;IACxC,OAAO,CAAC,iBAAiB,CAAa;IACtC,OAAO,CAAC,iBAAiB,CAAa;IAEtC,OAAO,CAAC,oBAAoB,CAAoB;IAChD,OAAO,CAAC,iBAAiB,CAAoB;IAC7C,OAAO,CAAC,oBAAoB,CAAoB;IAEhD,OAAO,CAAC,oBAAoB,CAAY;IACxC,OAAO,CAAC,mBAAmB,CAAY;IACvC,OAAO,CAAC,oBAAoB,CAAY;IACxC,OAAO,CAAC,oBAAoB,CAAY;IACxC,OAAO,CAAC,aAAa,CAAa;IAE3B,cAAc,EAAE,MAAM,CAAM;IAC5B,cAAc,EAAE,MAAM,~~CAAO~~;~~IACpC~~,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,cAAc,CAAa;IACnC,OAAO,CAAC,YAAY,CAAgC;IACpD,OAAO,CAAC,YAAY,CAAuD;IAE3E,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,qBAAqB,CAAI;IACjC,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,YAAY,CAAY;IAChC,OAAO,CAAC,aAAa,CAAY;IACjC,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,KAAK,CAIZ;IACD,OAAO,CAAC,gBAAgB,CAAsB;IAC9C,OAAO,CAAC,kBAAkB,CAA4B;gBAE1C,MAAM,EAAE,iBAAiB;IAKxB,IAAI;IA+BjB,OAAO,CAAC,eAAe;~~IAg0BvB~~,OAAO,CAAC,+BAA+B;IAyCvC,OAAO,CAAC,oBAAoB;IAwC5B,OAAO,CAAC,oBAAoB;IAgP5B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IAiGpB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,aAAa;IAgBd,QAAQ,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,GAAE,MAAY,GAAG,OAAO;IAmBxE,UAAU,CAAC,SAAS,EAAE,MAAM;IAI5B,QAAQ,IAAI,WAAW;IAIvB,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI;IAgBnC,cAAc;IAQd,OAAO;IAUD,SAAS,CAAC,IAAI,EAAE,MAAM;IAW5B,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,UAAU,CAAC,EAAE,MAAM;YAK5D,iBAAiB;IA+F/B,OAAO,CAAC,wBAAwB,CAKxB;IACR,OAAO,CAAC,QAAQ,CAA+F;IAC/G,OAAO,CAAC,iBAAiB,CACrB;IACJ,OAAO,CAAC,oBAAoB,CAKpB;IACR,OAAO,CAAC,6BAA6B,CAK7B;IACR,OAAO,CAAC,+BAA+B,CAK/B;IACR,OAAO,CAAC,eAAe,CAA+F;IACtH,OAAO,CAAC,gBAAgB,CACpB;IACJ,OAAO,CAAC,oCAAoC,CAKpC;YAGM,cAAc;~~YAiPd~~,qBAAqB;IAkD5B,MAAM;IA0Hb,OAAO,CAAC,UAAU;IA8IlB,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,eAAe;IA8BvB,OAAO,CAAC,mBAAmB;IAgC3B,OAAO,CAAC,YAAY;IAqBpB,OAAO,CAAC,WAAW;CAuEpB"}
1	+ {"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"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"}

package/dist/engine.js CHANGED Viewed

@@ -11,7 +11,11 @@ export class Engine {
         this.sampleCount = 4; // MSAA 4x
         // Bloom settings
         this.bloomThreshold = 0.3;
-        this.bloomIntensity = 0.13;
+        this.bloomIntensity = 0.1;
+        // Rim light settings
+        this.rimLightIntensity = 0.35;
+        this.rimLightPower = 2.0;
+        this.rimLightColor = [1.0, 1.0, 1.0];
         this.currentModel = null;
         this.modelDir = "";
         this.physics = null;
@@ -102,9 +106,11 @@ export class Engine {
         struct MaterialUniforms {
           alpha: f32,
+          rimIntensity: f32,
+          rimPower: f32,
           _padding1: f32,
+          rimColor: vec3f,
           _padding2: f32,
-          _padding3: f32,
         };
         struct VertexOutput {
@@ -175,7 +181,13 @@ export class Engine {
             lightAccum += toonFactor * radiance * nDotL;
           }
-          let color = albedo * lightAccum;
+          // Rim light calculation
+          let viewDir = normalize(camera.viewPos - input.worldPos);
+          var rimFactor = 1.0 - max(dot(n, viewDir), 0.0);
+          rimFactor = pow(rimFactor, material.rimPower);
+          let rimLight = material.rimColor * material.rimIntensity * rimFactor;
+          let color = albedo * lightAccum + rimLight;
           let finalAlpha = material.alpha;
           if (finalAlpha < 0.001) {
             discard;
@@ -215,8 +227,10 @@ export class Engine {
         struct MaterialUniforms {
           alpha: f32,
           alphaMultiplier: f32, // New: multiplier for alpha (0.5 for over-eyes, 1.0 for over-non-eyes)
+          rimIntensity: f32,
+          rimPower: f32,
+          rimColor: vec3f,
           _padding1: f32,
-          _padding2: f32,
         };
         struct VertexOutput {
@@ -286,7 +300,13 @@ export class Engine {
             lightAccum += toonFactor * radiance * nDotL;
           }
-          let color = albedo * lightAccum;
+          // Rim light calculation
+          let viewDir = normalize(camera.viewPos - input.worldPos);
+          var rimFactor = 1.0 - max(dot(n, viewDir), 0.0);
+          rimFactor = pow(rimFactor, material.rimPower);
+          let rimLight = material.rimColor * material.rimIntensity * rimFactor;
+          let color = albedo * lightAccum + rimLight;
           let finalAlpha = material.alpha * material.alphaMultiplier;
           if (finalAlpha < 0.001) {
             discard;
@@ -1501,11 +1521,16 @@ export class Engine {
             const EPSILON = 0.001;
             const isTransparent = materialAlpha < 1.0 - EPSILON;
             // Create material uniform data - for hair materials, we'll create two versions
-            const materialUniformData = new Float32Array(4);
+            // MaterialUniforms struct: alpha, rimIntensity, rimPower, _padding1, rimColor (vec3), _padding2
+            const materialUniformData = new Float32Array(8);
             materialUniformData[0] = materialAlpha;
-            materialUniformData[1] = 1.0; // alphaMultiplier: 1.0 for normal rendering
-            materialUniformData[2] = 0.0;
-            materialUniformData[3] = 0.0;
+            materialUniformData[1] = this.rimLightIntensity;
+            materialUniformData[2] = this.rimLightPower;
+            materialUniformData[3] = 0.0; // _padding1
+            materialUniformData[4] = this.rimLightColor[0]; // rimColor.r
+            materialUniformData[5] = this.rimLightColor[1]; // rimColor.g
+            materialUniformData[6] = this.rimLightColor[2]; // rimColor.b
+            materialUniformData[7] = 0.0; // _padding2
             const materialUniformBuffer = this.device.createBuffer({
                 label: `material uniform: ${mat.name}`,
                 size: materialUniformData.byteLength,
@@ -1538,11 +1563,16 @@ export class Engine {
             }
             else if (mat.isHair) {
                 // For hair materials, create two bind groups: one for over-eyes (alphaMultiplier = 0.5) and one for over-non-eyes (alphaMultiplier = 1.0)
-                const materialUniformDataOverEyes = new Float32Array(4);
+                // Hair MaterialUniforms struct: alpha, alphaMultiplier, rimIntensity, rimPower, rimColor (vec3), _padding1
+                const materialUniformDataOverEyes = new Float32Array(8);
                 materialUniformDataOverEyes[0] = materialAlpha;
                 materialUniformDataOverEyes[1] = 0.5; // alphaMultiplier: 0.5 for over-eyes
-                materialUniformDataOverEyes[2] = 0.0;
-                materialUniformDataOverEyes[3] = 0.0;
+                materialUniformDataOverEyes[2] = this.rimLightIntensity;
+                materialUniformDataOverEyes[3] = this.rimLightPower;
+                materialUniformDataOverEyes[4] = this.rimLightColor[0]; // rimColor.r
+                materialUniformDataOverEyes[5] = this.rimLightColor[1]; // rimColor.g
+                materialUniformDataOverEyes[6] = this.rimLightColor[2]; // rimColor.b
+                materialUniformDataOverEyes[7] = 0.0; // _padding1
                 const materialUniformBufferOverEyes = this.device.createBuffer({
                     label: `material uniform (over eyes): ${mat.name}`,
                     size: materialUniformDataOverEyes.byteLength,
@@ -1569,10 +1599,40 @@ export class Engine {
                     bindGroup: bindGroupOverEyes,
                     isTransparent,
                 });
+                // Create material uniform for hair over non-eyes (alphaMultiplier = 1.0)
+                const materialUniformDataOverNonEyes = new Float32Array(8);
+                materialUniformDataOverNonEyes[0] = materialAlpha;
+                materialUniformDataOverNonEyes[1] = 1.0; // alphaMultiplier: 1.0 for over-non-eyes
+                materialUniformDataOverNonEyes[2] = this.rimLightIntensity;
+                materialUniformDataOverNonEyes[3] = this.rimLightPower;
+                materialUniformDataOverNonEyes[4] = this.rimLightColor[0]; // rimColor.r
+                materialUniformDataOverNonEyes[5] = this.rimLightColor[1]; // rimColor.g
+                materialUniformDataOverNonEyes[6] = this.rimLightColor[2]; // rimColor.b
+                materialUniformDataOverNonEyes[7] = 0.0; // _padding1
+                const materialUniformBufferOverNonEyes = this.device.createBuffer({
+                    label: `material uniform (over non-eyes): ${mat.name}`,
+                    size: materialUniformDataOverNonEyes.byteLength,
+                    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+                });
+                this.device.queue.writeBuffer(materialUniformBufferOverNonEyes, 0, materialUniformDataOverNonEyes);
+                const bindGroupOverNonEyes = this.device.createBindGroup({
+                    label: `material bind group (over non-eyes): ${mat.name}`,
+                    layout: this.hairBindGroupLayout,
+                    entries: [
+                        { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+                        { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+                        { binding: 2, resource: diffuseTexture.createView() },
+                        { binding: 3, resource: this.textureSampler },
+                        { binding: 4, resource: { buffer: this.skinMatrixBuffer } },
+                        { binding: 5, resource: toonTexture.createView() },
+                        { binding: 6, resource: this.textureSampler },
+                        { binding: 7, resource: { buffer: materialUniformBufferOverNonEyes } },
+                    ],
+                });
                 this.hairDrawsOverNonEyes.push({
                     count: matCount,
                     firstIndex: runningFirstIndex,
-                    bindGroup,
+                    bindGroup: bindGroupOverNonEyes,
                     isTransparent,
                 });
             }

package/package.json CHANGED Viewed

@@ -1,13 +1,13 @@
 {
     "name": "reze-engine",
-    "version": "0.1.10",
+    "version": "0.1.12",
     "description": "A WebGPU-based MMD model renderer",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "type": "module",
     "repository": {
         "type": "git",
-        "url": "https://github.com/reze-engine/reze-engine"
+        "url": "https://github.com/AmyangXYZ/reze-engine"
     },
     "exports": {
         ".": {