reze-engine 0.1.10 → 0.1.11

package/README.md

@@ -2,6 +2,19 @@
 
 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
@@ -13,14 +26,6 @@ export default function Home() {
   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)

package/dist/engine.d.ts

@@ -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

@@ -1 +1 @@
-{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"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"}

package/dist/engine.js

@@ -12,6 +12,10 @@ export class Engine {
         // Bloom settings
         this.bloomThreshold = 0.3;
         this.bloomIntensity = 0.13;
+        // 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

@@ -1,13 +1,13 @@
 {
     "name": "reze-engine",
-    "version": "0.1.10",
+    "version": "0.1.11",
     "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": {
         ".": {

package/src/engine.ts

@@ -63,6 +63,10 @@ export class Engine {
   // Bloom settings
   public bloomThreshold: number = 0.3
   public bloomIntensity: number = 0.13
+  // Rim light settings
+  private rimLightIntensity: number = 0.35
+  private rimLightPower: number = 2.0
+  private rimLightColor: [number, number, number] = [1.0, 1.0, 1.0]
   private currentModel: Model | null = null
   private modelDir: string = ""
   private physics: Physics | null = null
@@ -155,9 +159,11 @@ export class Engine {
 
         struct MaterialUniforms {
           alpha: f32,
+          rimIntensity: f32,
+          rimPower: f32,
           _padding1: f32,
+          rimColor: vec3f,
           _padding2: f32,
-          _padding3: f32,
         };
 
         struct VertexOutput {
@@ -228,7 +234,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;
@@ -269,8 +281,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 {
@@ -340,7 +354,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;
@@ -1698,11 +1718,16 @@ export class Engine {
       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}`,
@@ -1737,11 +1762,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}`,
@@ -1772,10 +1802,43 @@ export class Engine {
           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,
         })
       } else if (isTransparent) {